Pramuditha.dev

An interactive, high-performance personal portfolio engineered with React 19, TypeScript, and Vite. The platform features a dual-discipline showcase bridging software engineering and visual design, complete with animated page portals, dynamic content management via Supabase, live GitHub integration, and an automatic day/night theme engine.

---

Overview

The portfolio presents a split architecture highlighting two core disciplines:

1. Logic & Systems: Full-stack web development, enterprise systems engineering, interactive CV, master-detail engineering projects showcase with live previews and deep dive insights, technical skillsets, and client testimonials.
2. Aesthetics & Motion: Graphic design galleries powered by Pinterest RSS feeds, cinematic video editing reels, VFX showcases, and creative project case studies.
3. About Me: Editorial bio, swipeable career timeline, education overview, and social links.
4. reminder.afk: Interactive 3D desktop companion break assistant product release page with WebGL 3D character viewers, multi-OS installer hub, and release notes.
5. Localization Check: Dedicated VS Code extension showcase with interactive AST string detection playground, GitHub Copilot AI extraction preview, keyboard shortcuts reference matrix, workspace settings, and multi-option installation hub.
6. Admin Dashboard: Secure Supabase-backed content management system to edit testimonials, work experience entries, video reels, upload, remove, and restore project & repo card media, and sync state in real time.

---

Key Features

• Seamless Scroll-Driven Home Morph Transition: A unified, persistent single-stage scroll transition connecting the Hero screen (State A) and Split View portals (State B). Driven by GSAP ScrollTrigger and Lenis smooth scrolling, featuring a dual-board 3D departure flap engine with smoothstep mechanical easing and motion blur, isolated typography scaling (scaleY: 1.9 on split titles), an organic cross-dissolved center surface wipe with outward-drawing divider line, responsive mobile 2-line title wrapping, effortless 1-swipe directional touch inertia navigation on mobile viewports, full-screen vertical rotated watermark typography, and interactive hover zoom with crimson highlights on split titles.
• Asset & Performance Optimizations: High-efficiency static media pipeline using modern WebP formats for all gallery and UI screenshots (saving over 92% bandwidth) and lean 3D model asset bundle management to minimize deployment storage footprint.
• Interactive Engineering Projects Showcase: Streamlined, scannable project cards featuring image galleries, thumbnail switchers, media badges, tech stack tags, outcome callouts, category filters (All, Featured, Developer Tools & 3D, AI & ML, Web & Systems, Open Source), real-time search, and an interactive Project Inspector modal with multi-device live preview frames (Desktop, Tablet, Mobile) and deep-dive story tabs.
• Split-Screen Portal Navigation & Streamlined Headers: Full-screen scroll snapping with animated interactive portals, magnetic docking, precision crosshairs, and streamlined page headers across Logic & Systems (Software Engineering) and Aesthetics & Motion (Graphic Design).
• Dynamic Content Store & Cloud Sync: Seamless content synchronization between local storage fallbacks and Supabase PostgreSQL backend.
• Live GitHub Integration & Contribution Heatmap: Client-side repository fetching with automated exclusion filtering, offline caching, a collapsible repository archive drawer, and an authentic GitHub contribution graph that starts clean and empty, then organically colors in commits with a smooth chronological left-to-right reveal.
• Dedicated Product & Extension Showcases: In-depth release pages for reminder.afk and localization-check with live API sync and interactive playgrounds.
• Pinterest Media Pipeline: Live multi-board gallery integration parsing Pinterest RSS XML feeds with custom responsive lightbox viewing and lazy loading.
• Theme Engine: Dynamic day/night detection (auto-switches to light mode in daytime 6:00 AM – 6:00 PM, and dark mode at night 6:00 PM – 6:00 AM) with session-based manual Light/Dark toggle and auto-theme restoration.
• Modular Seasonal Atmosphere (Holiday & Christmas Theme):
  • Interactive Snowfall Physics: HTML5 Canvas particle system with dynamic mouse breeze deflection, velocity momentum, and responsive density scaling.
  • Nocturnal Winter Ambience: Automatically adjusts in Dark Mode to deliver glowing, moonlit starlit snowflakes with soft atmospheric halos.
  • Interactive Peeking Santa: Randomized, friendly SVG mascot peeking from the bottom edge with clickable festive easter egg animations and speech bubbles.
  • Automated Seasonal Lifecycle: Automatically activates during the holiday season and self-deactivates on December 28th (00:00:00) without requiring manual code changes.
  • Customizable Seasonal Engine: Configurable seasonal presets (christmas, newyear, halloween, etc.), visitor toggle switch, and subtle branding accents.
• Procedural Ambient Audio Engine: Web Audio API ambient generative music and tactile UI feedback synthesizing procedural chord pads without external audio asset downloads.
• Global Command Palette (⌘K / Ctrl+K): Keyboard-first interactive command palette providing instant search and cross-page navigation, theme switching, and ambient music toggles.
• Mobile Responsive Hamburger Navigation: Thumb-friendly mobile navigation drawer with frosted-glass backdrops, active section badges, and unified light/dark theme styling.
• Hardware-Accelerated Motion & Cascading Card Reveals: Smooth page entry orchestration powered by Motion (motion/react), featuring desktop journey spotlight showcases with centered milestone navigation, dedicated mobile laser stream timelines with interactive milestone chips, tactile spring physics, shared layout transitions, and tactile hover elevations across Logic & Systems, Aesthetics & Motion, and About.
• Optimized Production Build: Built on Vite with strict TypeScript verification and linting via Oxlint.

---

Architecture & Project Structure

portfolio/
├── api/
│   └── pinterest.ts             # Serverless proxy for Pinterest RSS fetching
├── public/                      # Static assets, icons, fonts, and documents
│   ├── fonts/                   # Custom typefaces (Might, Hookride, Harmera, Gondens)
│   ├── icons/                   # Vector icon collections
│   ├── images/
│   │   ├── about/               # About section banners and institution badges
│   │   ├── projects/            # Vector preview banners and project media
│   │   └── localization-check-icon.png # Localization Check brand logo
│   ├── favicon.svg & favicon.png
│   └── _redirects & .htaccess
├── src/
│   ├── assets/                  # Brand graphics and media assets
│   ├── components/
│   │   ├── common/              # Reusable UI elements
│   │   │   ├── RepoCard.tsx
│   │   │   ├── ScrollToTopButton.tsx
│   │   │   ├── SocialLinks.tsx
│   │   │   ├── SubpageHeader.tsx
│   │   │   ├── SubpageQuickNav.tsx
│   │   │   ├── TestimonialCard.tsx
│   │   │   ├── ThemeToggle.tsx
│   │   │   └── TimelineItem.tsx
│   │   ├── home/                # Unified Home Morph Stage & scroll transition
│   │   │   ├── HomeMorphStage.tsx
│   │   │   └── home-morph.css
│   │   ├── projects/            # Master-detail Projects Showcase components
│   │   │   ├── projects.ts
│   │   │   ├── ProjectsShowcase.tsx
│   │   │   ├── projects-showcase.css
│   │   │   └── index.ts
│   │   ├── seasonal/            # Modular Seasonal & Holiday Atmosphere
│   │   │   ├── ChristmasHat.tsx
│   │   │   ├── PeekingSanta.tsx
│   │   │   ├── SeasonalExperience.tsx
│   │   │   ├── SeasonalToggle.tsx
│   │   │   ├── SnowfallCanvas.tsx
│   │   │   └── index.ts
│   │   ├── showcase/            # Multimedia presentation components
│   │   │   ├── GridImage.tsx
│   │   │   ├── Lightbox.tsx
│   │   │   └── VideoShowcase.tsx
│   │   ├── views/               # Top-level view controllers
│   │   │   ├── AboutView.tsx
│   │   │   ├── AestheticsView.tsx
│   │   │   ├── HomeView.tsx
│   │   │   ├── LogicView.tsx
│   │   │   ├── ReminderReleaseView.tsx
│   │   │   ├── LocalizationReleaseView.tsx
│   │   │   └── AdminPanelView.tsx
│   ├── constants/               # Static datasets and configuration
│   │   ├── beyondCode.ts
│   │   ├── projects.ts          # Rich project catalog & deep-dive metadata
│   │   ├── seasonal.ts          # Seasonal presets & particle configuration
│   │   ├── skills.ts
│   │   └── socials.ts
│   ├── hooks/                   # Custom React hooks
│   │   ├── useGitHubRepos.ts
│   │   ├── useNavigation.ts
│   │   ├── useScrollTop.ts
│   │   └── useTheme.ts
│   ├── services/                # External API and state management
│   │   ├── contentStore.ts
│   │   └── supabaseClient.ts
│   ├── styles/                  # Modular stylesheets
│   │   ├── about.css
│   │   ├── admin.css
│   │   ├── aesthetics.css
│   │   ├── base.css
│   │   ├── common.css
│   │   ├── dark-theme.css
│   │   ├── home.css
│   │   ├── logic.css
│   │   ├── reminder.css
│   │   ├── localization.css
│   │   ├── seasonal.css
│   │   └── responsive.css
│   ├── types/                   # Centralized TypeScript definitions
│   │   ├── portfolio.ts
│   │   └── index.ts
│   ├── App.tsx                  # Root application router and layout
│   ├── index.css                # Global stylesheet entry point
│   └── main.tsx                 # Application entry point
├── scripts/
│   └── copy-404.js              # SPA routing fallback generator
├── index.html                   # HTML template
├── package.json                 # Dependency manifests and scripts
├── tsconfig.json                # TypeScript compiler configuration
└── vercel.json                  # Edge routing and caching policies

---

Tech Stack

Layer	Technologies
Core Framework	React 19, TypeScript
Tooling & Bundler	Vite 8, Oxlint
Animation & UI	GSAP 3 (ScrollTrigger), Lenis, Framer Motion, Lucide React, Iconify
Database & Auth	Supabase (@supabase/supabase-js)
Analytics & Hosting	Vercel Analytics, Vercel Edge Network

---

Getting Started

Prerequisites

• Node.js (v18.0.0 or higher)
• npm or pnpm
• Git

Installation

1. Clone the repository:

   git clone https://github.com/PramudithaN/pramuditha.dev.git
   cd pramuditha.dev

2. Install dependencies:

   npm install

3. Configure Environment Variables (Optional): Create a .env file in the root directory if integrating with Supabase:

   VITE_SUPABASE_URL=your_supabase_project_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Start the local development server:

   npm run dev

   Open http://localhost:5173 in your browser.

---

Available Scripts

• npm run dev: Starts the Vite local development server with hot module replacement.
• npm run build: Type-checks with tsc and generates the optimized production bundle in dist/.
• npm run lint: Performs rapid static analysis and linting checks using Oxlint.
• npm run preview: Locally serves the production build for validation.

---

Author & Contact

Pramuditha Nadun
Software Engineer & Visual Designer

• GitHub: github.com/PramudithaN
• LinkedIn: linkedin.com/in/pramuditha-nadun-612b1b204
• Behance: behance.net/pramudithanadun1
• Email: pramudithanadun@gmail.com

---

License

This project is open-source and available under the MIT License.