Website

Lana Developer Portfolio

TypeScriptNext.jsTailwind CSSPortfolioReactVercel

Role

Fullstack Developer

Technologies

TypeScriptNext.jsTailwind CSSPortfolioReactVercel

Links

Visit Live Site Source Code

Overview

Modern portfolio website showcasing projects and skills.

The Challenge

Building a developer portfolio that stands out in a saturated market requires balancing bold visual identity (brutalist monochrome aesthetics, fluid parallax, and magnetic interactions) with uncompromising performance and accessibility. Heavy animation libraries often induce layout shifts and drop frames on low-powered mobile devices.

System Architecture

The Solution

Server-Driven Architecture: Leveraged React Server Components (RSC) to keep all heavy data fetching and parsing logic on the server, resulting in a minimal 103kB first-load JavaScript bundle. Hardware-Accelerated Physics: Built magnetic buttons and scroll-triggered reveals using Framer Motion combined with Lenis smooth scroll for a fluid 60fps feel. Zero-Shadow Brutalist UI: Crafted strict 8px border-radius containers with flat dark backgrounds (#0a0a0a), eliminating visual clutter.

Key Features

1
Lighthouse 100/100 Score
2
Interactive Case Studies
3
Dynamic CMS Integration
4
Adaptive Dark/Light Mode

Results & Learnings

"100/100 Performance rating on Google Lighthouse. 0.8s LCP achieved worldwide on Vercel Edge. +150% Increase in interview inquiries within the first month of launch."