SYSTEM ARCHIVE

PROJECT PORTFOLIO

A curated collection of web applications, data tools, and experimental interfaces built with modern web technologies.

UI UX Design

Furniture Landing Page

A conversion-focused furniture storefront experience, bold hero, fast category entry points, discount promos, curated collections, and a sleek product grid, delivered in a minimal, airy UI and optimized for all screen sizes. A modern furniture landing page concept designed for product discovery and conversion—featuring a bold lifestyle hero, clear category navigation, promotional banners, and a clean product listing layout with consistent cards, pricing, and CTAs for a smooth shopping experience.

System Status

DEPLOYED

UI UX Design

Tri Jaya - Company Profile Website

PT Tri Jaya Tissue is a modern, responsive company profile website built with Next.js and Tailwind CSS, featuring a clean homepage, company overview, product showcase with detail pages, FAQ accordion, and a contact form, designed to present the brand professionally and make it easy for visitors to explore products and get in touch. A modern company profile website concept for a tissue manufacturing brand, built with a clean layout, clear navigation, and bold hero messaging. Designed to showcase company credibility, products, and partnership opportunities, supported by a streamlined distributor registration flow for better lead generation.

System Status

DEPLOYED

UI UX Design

MyPaint Company Profile Website

MyPaint is a responsive company profile website for a paint brand, designed with a clean modern layout featuring an engaging hero section, service and product highlights, customer testimonials, FAQ accordion, and a functional contact form, built to showcase offerings clearly and help customers reach out quickly. This landing page design for MyPaint delivers a fresh, friendly, and modern visual identity tailored for a paint and home-improvement brand. The interface uses a soft green palette, rounded containers, and generous whitespace to create a calm and approachable experience, while maintaining strong readability and a clear hierarchy across sections.

System Status

DEPLOYED

Web Development

Loker Purwokertoku: Regional Job Vacancy Directory

Loker Purwokertoku is an independent job vacancy directory system engineered to connect professionals with career opportunities across the Purwokerto and surrounding regional areas. The platform is designed with a highly functional multi-dashboard layout, deliberately separating the intuitive, public-facing job board from the secure administrative entry systems used for managing listings. Developed utilizing a modern tech stack, the frontend is powered by Next.js and styled with Tailwind CSS to deliver a fast, responsive, and accessible user experience. To handle dynamic content scaling, Sanity CMS is implemented for structuring and publishing job postings in real-time. Crucially, the platform integrates Cloudinary as its dedicated media management solution. This ensures that all visual assets, such as corporate logos and promotional banners, are automatically optimized, compressed, and delivered rapidly via CDN, significantly reducing page load times and improving the platform's overall SEO performance. Key Features: Multi-Dashboard Architecture: Clean separation of concerns between the public user interface for job seekers and the administrative portal for content managers. Advanced Media Optimization: Cloudinary integration for scalable, high-performance image hosting and on-the-fly media transformations. Headless Content Management: Sanity CMS implementation for flexible, real-time job vacancy publishing and categorization. Responsive & Localized Design: A tailored user interface built with Tailwind CSS, optimized for both mobile and desktop users browsing local career opportunities.

System Status

DEPLOYED

Web Development

Professional Portfolio: Powered by Sanity CMS & Cloudinary

This interactive web portfolio is engineered to showcase the technical and creative expertise of Djembar Arafat, a Fullstack Web Developer and UI/UX Designer. Built from the ground up using Next.js and TypeScript, the application utilizes a modular, component-driven architecture. To ensure the portfolio remains highly scalable and easy to maintain, the platform integrates Sanity CMS for structured, real-time content updates across professional experiences and project galleries. Furthermore, the addition of Cloudinary guarantees that all visual assets are automatically optimized and delivered with blazing-fast speed, creating a seamless browsing experience for potential clients and recruiters. Key Features: Dynamic Content Management: Fully integrated with Sanity CMS to effortlessly manage data across the Experience, Gallery, and CategoryOverview sections. Optimized Media Delivery: Leverages Cloudinary to host, compress, and deliver high-resolution images and media without sacrificing website performance. Engaging & Interactive UI: Features custom UI components such as a dynamic SkillsMarquee, ScrollReveal animations, and an AnimatedHeading to capture user attention. Specialized Project Routing: Utilizes Next.js routing capabilities to create dedicated layout pages for distinct project types, including a specific route for video editing showcases. Direct Client Communication: Incorporates a dedicated ContactForm component seamlessly into the layout to facilitate direct professional inquiries.

System Status

DEPLOYED

Web Development

Dafa Scooter Lombok: Modern Showcase & CMS

Dafa Scooter Lombok Car Rental is a modern, responsive web application designed to showcase premium transport solutions. Built primarily as a dynamic frontend showcase, it emphasizes a clean, user-friendly interface with a professional blue and white color scheme. The platform is developed using Next.js and TypeScript, utilizing Tailwind CSS dan shadcn/ui for highly polished, reusable interface components. To manage the vehicle catalog, the project seamlessly integrates Sanity CMS, allowing for structured, headless content management directly within the application architecture. Key Features: Modern Showcase Interface: Features a responsive layout highlighting core service standards like "Prime Condition & Guaranteed", "24/7 Support", and "Final & Transparent Pricing". Headless CMS Integration: Utilizes Sanity CMS with custom schemas to manage dynamic vehicle listings seamlessly. Component-Driven UI: Built with accessible UI elements such as cards, sliders, and badges to ensure a consistent and interactive user experience. Optimized App Routing: Leverages the Next.js App Router for clean and fast navigation across public pages like Rental, Service, About, and Contact.

System Status

DEPLOYED

Loading_

PROJECT PORTFOLIO

Furniture Landing Page

Tri Jaya - Company Profile Website

MyPaint Company Profile Website

Loker Purwokertoku: Regional Job Vacancy Directory

Professional Portfolio: Powered by Sanity CMS & Cloudinary

Dafa Scooter Lombok: Modern Showcase & CMS