Portfolio
Website
A portfolio that utilizes modern design and Vanilla HTML, CSS, JavaScript technologies, prioritizing website performance for smooth user access.
Project Gallery
Explore the design iterations, animation details, and responsive behavior.
Project Overview
What Problem It Solves
Many students and aspiring developers struggle to present their skills, projects, and achievements in a professional and accessible way.
This portfolio website serves as a centralized platform where visitors can explore my technical projects, certifications, skills, and development journey through an interactive and responsive user experience.
Why It Was Built
As a TJKT graduate who plans to continue studying at Telkom University, I wanted a portfolio that represents both my technical abilities and personal growth. Instead of relying on traditional resumes, I created a digital portfolio that demonstrates my work through real projects, modern web technologies, and practical problem-solving experiences.
Main Objectives
Showcase personal and academic projects, Present technical skills and certifications, Build a professional online presence, Improve frontend development and UI/UX skills, Create a responsive experience across all devices.
Target Users
University admissions reviewers, Recruiters and hiring managers, Internship providers, Fellow developers, Potential collaborators and clients.
Key Innovation
The portfolio combines modern web design, responsive layouts, smooth animations, and project-focused storytelling to create an engaging experience while maintaining performance and accessibility..
How It Works
From concept to a living digital identity.
Design Concept
Researched Awwwards-winning portfolios and identified key patterns: dark themes, glassmorphism, kinetic typography, and immersive scroll experiences. Defined the visual identity with indigo and amber accents.
Prototyping
Created high-fidelity wireframes in Figma focusing on the sidebar navigation, hero section layout, and scroll-triggered animation sequences. Established the spacing system and component library.
Animation Planning
Documented every animation: loading screen sequence, hero entrance stagger, scroll reveal triggers, parallax depths, and interaction states. Created a timing library using GSAP's easing functions.
Development
Built the HTML structure with semantic markup, implemented Tailwind CSS for utility-first styling, and wrote modular JavaScript for the particle system, custom cursor, smooth scroll, and sidebar logic.
Optimization
Optimized asset loading with lazy loading, reduced motion support for accessibility, mobile-first responsive breakpoints, and performance tuning for 60fps animations across all devices.
Launch
Deployed to GitHub Pages with custom domain configuration. Implemented SEO meta tags, Open Graph images, and structured data. Continuously iterate based on analytics and feedback.
Technology Stack
The technologies behind this digital experience.