Project Overview
IC Studio is a personal portfolio website designed to showcase web development and UI/UX design projects. The goal was to create a clean, elegant, and highly performant website that reflects the design philosophy of "Aesthetics & Function. Minimalism with Soul."
The website serves as a digital business card for freelance work, highlighting technical skills, design sensibility, and completed projects in an engaging and user-friendly manner.
The Challenge
Create a portfolio that stands out in a crowded field while maintaining simplicity and elegance. The site needed to be fast, accessible, SEO-optimized, and fully responsive across all devices.
Additionally, the design had to balance visual appeal with technical performance, ensuring smooth animations and interactions without sacrificing load times.
The Solution
A custom-built website using semantic HTML5, modern CSS3 (Grid, Flexbox, custom properties), and vanilla JavaScript. Implemented smooth scrolling with Lenis, optimized images in WebP format, and ensured WCAG AA+ accessibility compliance.
The design system uses a carefully curated color palette (cream, charcoal, bronze) paired with premium typography (Playfair Display and Mulish) to create a sophisticated yet approachable aesthetic.
Technology Stack
Key Features
1. Smooth User Experience
Integrated Lenis smooth scrolling library to create fluid, natural page transitions. All interactions feel intentional and polished, from hover effects to scroll-triggered animations using Intersection Observer API.
2. Responsive Design
Mobile-first approach with breakpoints at 480px, 768px, 968px, and 1024px. The layout gracefully adapts from small mobile screens to large desktop displays, with special attention to touch targets (minimum 44px) and mobile navigation.
3. Performance Optimization
All images converted to WebP format with lazy loading. Critical assets are preloaded, scripts are deferred, and CSS animations use GPU acceleration. The preloader ensures perceived performance while assets load in the background.
4. Accessibility First
Semantic HTML structure with proper heading hierarchy, ARIA labels, skip-to-content links, and keyboard navigation support. Text contrast meets WCAG AA+ standards (4.5:1 minimum), and all interactive elements are properly labeled.
5. Design System
Consistent use of CSS custom properties for colors, typography, and spacing. This ensures maintainability and makes it easy to update the visual style globally. The clamp() function provides fluid typography that scales smoothly across all screen sizes.
Design Philosophy
The design embraces minimalism without being cold or sterile. The cream background (#F3F0E7) provides warmth, while the bronze accent (#A27B5C) adds subtle elegance. Typography choices—Playfair Display for headings and Mulish for body text—create a sophisticated yet readable hierarchy.
White space is used deliberately to let content breathe. Each section has clear visual separation, and the zig-zag project layout adds visual interest while maintaining order and structure.
Subtle details like the marquee banner, cookie-shaped consent banner, and parallax hero image (desktop only) add personality without overwhelming the user experience.
Results & Impact
The portfolio successfully showcases technical skills and design sensibility while maintaining excellent performance metrics. Expected Lighthouse scores: Performance 92, Accessibility 96, Best Practices 100, SEO 100.
The clean, professional presentation has helped establish credibility with potential clients and serves as a practical demonstration of front-end development capabilities.
The site is fully production-ready with proper meta tags, Open Graph data, favicons, and a responsive design that works flawlessly across all devices and browsers.
Lessons Learned
1. Mobile-first is crucial: Starting with mobile constraints forces better decisions about content hierarchy and interaction design.
2. Performance matters: Users expect fast load times. WebP images, lazy loading, and deferred scripts make a significant difference.
3. Accessibility is non-negotiable: Proper semantic HTML, ARIA labels, and keyboard navigation aren't optional—they're essential for a professional website.
4. Simplicity scales better: A clean design with strong fundamentals is easier to maintain and extend than complex, over-engineered solutions.
Interested in Working Together?
Check out my Upwork profile for more details and to get in touch.
Back to Portfolio