Shubh Agarwal — Portfolio

A terminal/IDE-themed personal portfolio built with Next.js 14, TypeScript, and Tailwind CSS.

Quick Start

npm install
npm run dev

Open http://localhost:3000.

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS with custom terminal color palette
• Animations: Framer Motion (typewriter, fade-in, scroll reveal)
• Icons: Lucide React
• Font: JetBrains Mono (self-hosted in /public/fonts/)

Features

• Terminal boot sequence on first load (skippable)
• Typewriter effect on hero section
• Code editor-style panels with syntax highlighting and line numbers
• Command palette (Ctrl+K / Cmd+K) for navigation
• CRT scanline overlay (toggleable)
• Konami code easter egg (matrix rain)
• DevTools console hiring message
• Fully responsive
• Respects prefers-reduced-motion
• SEO meta tags + dynamic OG image

Customization

• Colors: Edit tailwind.config.ts — all terminal colors are in theme.extend.colors
• Content: Edit components in src/components/ — each section is its own file
• Font: Replace .woff2 files in public/fonts/ and update globals.css

Deploy to Vercel

npm run build   # verify build succeeds

Push to GitHub, then import the repo at vercel.com/new. No extra configuration needed.

Project Structure

src/
  app/
    layout.tsx          # Root layout with metadata/SEO
    page.tsx            # Main page orchestrator
    globals.css         # Global styles + @font-face
    og/route.tsx        # Dynamic OG image generation
  components/
    Navbar.tsx          # Editor-tab navigation bar
    HeroSection.tsx     # Terminal window with typewriter intro
    AboutSection.tsx    # about.ts code editor view
    EducationSection.tsx # Git log style education
    SkillsSection.tsx   # package.json editor view
    ProjectsSection.tsx # Expandable project cards
    LeadershipSection.tsx # Terminal cat output
    ContactSection.tsx  # Terminal-style contact links
    StatusBar.tsx       # VS Code-style footer
    CommandPalette.tsx  # Ctrl+K fuzzy navigation
    BootSequence.tsx    # Terminal boot animation
    MatrixRain.tsx      # Konami code easter egg
    TerminalWindow.tsx  # Reusable terminal chrome
    EditorWindow.tsx    # Reusable editor chrome
    BlinkingCursor.tsx  # Block cursor component
    TypewriterText.tsx  # Typewriter animation
    ScrollReveal.tsx    # Scroll-triggered fade-in
    LineNumbers.tsx     # Code line numbers
public/
  fonts/                # JetBrains Mono woff2 files
  og-image.svg          # Fallback OG image