yushanweb.dev

This is Yushan Fernando's personal website built with Astro 5.x, React 19, and Tailwind CSS 4.x. It's a modern portfolio site featuring smooth animations with GSAP and Lenis smooth scrolling.

Commands

Development:

• npm run dev - Start development server at localhost:4321
• npm run build - Build production site to ./dist/
• npm run preview - Preview production build locally

Custom Tools:

• npm run imagePngResizer - Generate responsive image sizes (360, 720, 1024, 1400, 2800px)
• npm run imagePngOptimize - Optimize PNG images
• npm run imagePngToWebP - Convert PNG images to WebP format

Project Structure

Key Directories:

• src/components/ - React components (.tsx files)
• src/layouts/ - Astro layout components
• src/pages/ - File-based routing (Astro pages)
• src/lib/ - Utility functions and providers
• public/assets/ - Static assets (images, fonts)
• tools/ - Custom build tools for image processing

Layout Architecture:

• BaseLayout.astro - Basic HTML structure, meta tags, analytics
• MainLayout.astro - Wraps BaseLayout with Lenis provider, header, and grid structure

Component System:

• Uses shadcn/ui pattern with src/components/ui/ for base components
• Custom components include Hero, Header, rotating animations
• Follows React 19 patterns with TypeScript

Technology Stack

Frontend:

• Astro 5.x (Static Site Generator)
• React 19 with TypeScript
• Tailwind CSS 4.x with custom theme
• GSAP for animations
• Lenis for smooth scrolling
• Recursive font with variable font features

Build Tools:

• Vite-based build system
• Custom image processing tools using Jimp and Sharp
• Path alias: @/* maps to src/*

Styling System

Tailwind Configuration:

• Uses Tailwind CSS 4.x inline theme configuration
• Custom CSS variables for consistent theming
• Container utility with max-width of 90rem
• Custom color system using oklch color space

Font System:

• Primary font: Recursive (variable font)
• Font variation CSS custom properties for weight, slant, casual, cursive, mono
• Class: font-recursive-variations with CSS custom properties

Development Patterns

Component Conventions:

• React components use .tsx extension
• Utility functions follow shadcn/ui patterns (cn helper)
• Components export both named exports and variant types
• Use Radix UI primitives where applicable

Astro Integration:

• React integration enabled in astro.config.mjs
• Client directives used for interactive components (client:load)
• Astro components handle routing and static content

Image Handling:

• Responsive images generated via custom tools
• Images stored in public/assets/img/ with /r/ subdirectory for responsive variants
• Support for PNG, JPG, JPEG, and WebP formats

Key Features

• Smooth scrolling with Lenis
• Custom cursor implementation
• GSAP-powered animations
• Responsive image optimization
• Modern CSS with custom properties
• Analytics integration (Request Metrics)