The main focus of the website is to combine clean design, subtle animations, and smooth scrolling to create a modern and professional browsing experience, while also adopting a modern front-end tooling workflow.
The project uses Vite as a build tool and development server, allowing external libraries to be installed and managed directly within the project via npm. This approach ensures better performance, optimized builds, and a scalable development environment.
The website follows a minimalist aesthetic, using a neutral background color to keep attention on the project content. Each project is displayed using a structured layout consisting of:
- Project image
- Project title
- Brief project description
All content is presented in a fully responsive layout, ensuring usability across different screen sizes and devices.
The primary objectives of this project are:
- To create a centralized place to display personal projects
- To apply smooth and performant scroll-based animations
- To ensure a responsive and accessible layout
- To demonstrate proficiency in animation libraries such as GSAP and Lenis
- To utilize a modern build tool (Vite) for dependency management and optimized development
This project was built using the following technologies:
Vite is used as the build tool and development server for the project.
It is responsible for:
- Installing and managing libraries directly through npm
- Providing a fast development server with instant Hot Module Replacement (HMR)
- Optimizing assets and JavaScript for production builds
- Improving overall project scalability and maintainability
Using Vite allows GSAP, Lenis, and other dependencies to be imported as ES modules, ensuring a clean and modern project structure.
HTML is used to define the structure and semantic organization of the page.
Semantic elements are applied to improve readability, accessibility, and maintainability of the codebase.
CSS is responsible for the visual presentation of the website, including:
- Responsive layout using flexible units and media queries
- Neutral color palette to maintain a clean and professional appearance
- Card-based layout for project presentation
- Smooth transitions and visual consistency across devices
JavaScript is used to control the animation flow and interactions.
It acts as the bridge between the page structure and the animation libraries, ensuring that animations are triggered correctly during scroll events.
All scripts are managed through Vite’s module system, improving organization and load performance.
GSAP is used to create fast, smooth, and subtle animations, including:
- Entrance animations for project cards
- Controlled timing and easing for visual consistency
- High-performance animations optimized for modern browsers
Each project card enters the viewport smoothly, maintaining a balance between speed and elegance.
Lenis is used to implement smooth scrolling behavior across the entire page.
It enhances the user experience by providing:
- Fluid scroll motion
- Better integration with GSAP scroll-based animations
- Improved visual comfort compared to default browser scrolling
GSAP and Lenis are integrated together to ensure synchronized and natural animation behavior.
- The development environment is initialized using Vite.
- Required libraries (GSAP and Lenis) are installed via npm and imported directly into the project.
- The user accesses the website and is presented with a clean, neutral background.
- Smooth scrolling is enabled immediately through Lenis.
- As the user scrolls down the page, GSAP detects scroll events.
- Each project card animates into view with a subtle and fast entrance animation.
- Projects are displayed in a clear hierarchy:
- Image first
- Title second
- Brief description last
- The layout adapts automatically to different screen sizes, ensuring full responsiveness on desktop, tablet, and mobile devices.
The website is fully responsive and optimized for:
- Desktop screens
- Tablets
- Mobile devices
Responsive behavior is achieved using flexible layouts, media queries, and scalable elements to preserve usability and visual consistency across all resolutions.