Creating a personal portfolio that balances technical sophistication with visual elegance. This website serves as both a digital home and a statement of design philosophy.
The design of this portfolio is rooted in minimalism and attention to detail. Every element serves a purpose—from the warm gold accent color (#c9a96e) that evokes sophistication, to the carefully chosen typography pairing of Cormorant Garamond (serif) with DM Sans (sans-serif).
The site embraces a dark theme (#0c0c0c) that reduces eye strain while creating an elegant, premium atmosphere. Motion is purposeful—smooth scrolling, subtle animations, and interactive elements respond to user behavior without distracting from the content.
The entire design system is built on CSS variables (--bg, --text, --accent, etc.), allowing for consistent theming and easier maintenance.
:root {
--bg: #0c0c0c;
--accent: #c9a96e;
--font-serif: 'Cormorant Garamond', Georgia, serif;
}
Lenis provides hardware-accelerated smooth scrolling with momentum physics, creating a more premium feel compared to native scroll-behavior.
GSAP's ScrollTrigger allows animations to fire at specific scroll positions. Elements fade in, translate, and reveal as users scroll through the page.
/* Elements have reveal classes that animate on scroll */
.reveal-up { /* Fade in with upward translation */ }
.reveal-fade { /* Simple fade-in */ }
.reveal-text { /* Word-by-word reveal */ }
A custom CSS cursor replaces the browser default, expanding on hover to indicate interactive elements. Disabled on touch devices via media query.
The site uses proper semantic HTML5 elements: <section>, <article>, <nav>, <footer>. This improves accessibility and SEO while keeping code clean.
Work cards use CSS Grid with responsive sizing. The navigation, marquee, and footer leverage Flexbox for flexible, maintainable layouts.
An SVG-based grain effect is applied via background-image with CSS filters. This adds subtle texture without impacting performance.
The dark background (#0c0c0c) is nearly pure black to maximize contrast and reduce eye strain. The warm gold accent (#c9a96e) brings sophistication and warmth to interactive elements and highlights.
Every animation serves the user experience. Scroll reveals guide attention, the custom cursor provides tactile feedback, and smooth scrolling makes navigation feel premium.
Cormorant Garamond brings elegance and personality to headings, while DM Sans provides clarity and readability for body text. The contrast between serif and sans-serif creates visual hierarchy.
The layout uses flexible sizing and media queries to adapt gracefully to mobile, tablet, and desktop screens. The custom cursor disables on touch devices for better UX.
The site is built with performance in mind: no heavy frameworks, optimized WebP images, and animations that use GPU-accelerated transforms. Lenis and GSAP are loaded from CDN for faster delivery.