DevCraft — Editorial Developer Portfolio & Engineering Case Studies

✨ Overview

DevCraft is a high-impact, editorial web developer portfolio and engineering case-study showcase engineered for senior full-stack developers, software architects, and creative engineers. Designed with warm alabaster paper styling, sharp typography, dynamic 2D canvas particle physics, and GSAP horizontal scroll motion, it bridges the gap between deep technical rigor and state-of-the-art web design.

🌟 What Makes It Unique

The signature feature of DevCraft is its Horizontal GSAP Pinned Case Study Reel & Developer HUD.

• Horizontal Pinned Reel: Featured projects scroll horizontally on desktop viewports using pinned GSAP ScrollTrigger instances.
• Konami Code Developer HUD: Typing ↑ ↑ ↓ ↓ ← → ← → B A activates a live developer HUD with real-time FPS counter, DOM tree depth inspector, breakpoint telemetry, and a 12-column layout grid overlay.
• DiffSlider Spec Comparison: Interactively compare Figma design vector specs against live production Next.js output side-by-side using an ultra-smooth CSS clip-path slider.
• Interactive Canvas Sandbox: Interactive 2D particle simulation canvas widget built directly into the playground section.

🎯 Perfect For

• Senior Full-Stack Engineers & Web Architects applying for lead roles
• Creative Developers showcasing interactive motion and canvas dynamics
• Freelance Software Consultants pitching high-ticket client engineering contracts
• Open Source Builders highlighting code contributions, architecture, and bundle benchmarks

🛠 Tech Stack

📄 Pages Included

🧩 Sections & Components

• Header / Navigation: Navbar.tsx (brand avatar, available status pill, command palette trigger, theme toggle, mobile drawer)
• Hero Section: HeroSection.tsx (magnetic action buttons, status badge, headline split-text)
• Flagship Engineering Reel: FeaturedWorkSection.tsx (GSAP pinned horizontal reel, TiltCard spec cards)
• Skills Matrix: SkillsMatrixSection.tsx (category tabs, proficiency indicators)
• Interactive Playground: InteractivePlaygroundSection.tsx (2D Canvas sandbox, live terminal output console widget)
• Experience Timeline: ExperienceTimelineSection.tsx (career trajectory, achievements, key deliverables)
• Testimonials & Endorsements: TestimonialsSection.tsx (SpotlightCard layout, reviewer avatars)
• Command Palette: CommandPalette.tsx (fuzzy search across pages and actions with ⌘K keyboard shortcut)
• Dev HUD & Grid: KonamiOverlay.tsx (Easter egg telemetry overlay activated via Konami sequence)
• Footer: Footer.tsx (4-column layout, real-time PST clock widget, copyright notice)

🎨 Design System

📁 Folder Structure

devcraft/
├── app/
│   ├── (main)/
│   │   ├── about/
│   │   │   └── page.tsx
│   │   ├── contact/
│   │   │   └── page.tsx
│   │   ├── work/
│   │   │   ├── [slug]/
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── api/
│   │   └── contact/
│   │       └── route.tsx
│   ├── globals.css
│   ├── layout.tsx
│   ├── not-found.tsx
│   ├── robots.ts
│   └── sitemap.ts
├── components/
│   ├── about/
│   ├── console/
│   ├── contact/
│   ├── layout/
│   │   ├── CommandPalette.tsx
│   │   ├── Footer.tsx
│   │   ├── Navbar.tsx
│   │   └── ThemeToggle.tsx
│   ├── motion/
│   │   ├── MagneticButton.tsx
│   │   ├── SplitText.tsx
│   │   ├── SpotlightCard.tsx
│   │   └── TiltCard.tsx
│   ├── sections/
│   ├── ui/
│   │   ├── DiffSlider.tsx
│   │   ├── Drawer.tsx
│   │   ├── KonamiOverlay.tsx
│   │   ├── Modal.tsx
│   │   ├── SocialIcons.tsx
│   │   ├── StackInspectorTooltip.tsx
│   │   └── Tooltip.tsx
│   └── work/
├── data/
│   ├── bio.ts
│   ├── experience.ts
│   ├── portfolio.ts
│   ├── projects.ts
│   ├── skills.ts
│   └── testimonials.ts
├── hooks/
├── lib/
│   ├── constants.ts
│   ├── email.ts
│   ├── gsap.ts
│   ├── utils.ts
│   └── validations/
├── public/
│   └── og-image.png
├── types/
│   └── index.ts
├── .env.example
├── license
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── vercel.json