Siddharth Patel - Portfolio

A modern portfolio website built with Next.js 15, React 19, and Tailwind CSS 4. Deployed as a static site on AWS Amplify.

Live Site: sid-patel.com

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm run start

Tech Stack

Project Structure

portfolio/
├── src/                       # Source code directory
│   ├── components/
│   │   ├── ui/                # Reusable UI components
│   │   │   ├── Button.jsx
│   │   │   ├── Card.jsx
│   │   │   ├── NavLink.jsx
│   │   │   ├── Section.jsx
│   │   │   └── index.jsx
│   │   ├── Layout.jsx         # Main layout wrapper
│   │   ├── StatusDot.jsx      # Status indicator
│   │   ├── PanelHeader.jsx    # Panel headers
│   │   ├── Panel.jsx          # Container panels
│   │   ├── MetricCard.jsx     # Stats cards
│   │   ├── HeroSection.jsx    # Page heroes
│   │   ├── ServiceCard.jsx    # Service cards
│   │   ├── Timeline.jsx       # Experience timeline
│   │   └── studyguide/
│   │       └── StudyGuideContent.jsx
│   ├── pages/                 # Next.js pages
│   │   ├── _app.jsx
│   │   ├── _document.jsx
│   │   ├── index.jsx          # Home
│   │   ├── about.jsx          # About + Skills
│   │   ├── projects.jsx       # Resources
│   │   ├── resume.jsx         # Resume + Certifications
│   │   ├── contact.jsx        # Contact
│   │   ├── portfolio-details.jsx  # This page (auto-generated from README)
│   │   ├── aws-study-guide.jsx
│   │   └── devops-uat.jsx
│   ├── styles/
│   │   ├── global.css         # Tailwind + all component styles
│   │   └── variables.css      # CSS custom properties (design tokens)
│   ├── config/
│   │   └── navigation.js      # Navigation links config
│   ├── lib/
│   │   └── utils.js           # Utility functions (cn, debounce, throttle)
│   └── utils/
│       └── markdown.js        # Markdown processing
├── public/                    # Static assets (stays at root)
│   ├── content/               # Markdown content files
│   ├── images/
│   │   ├── profile/
│   │   ├── projects/
│   │   └── svgs/
│   ├── js/
│   └── Siddharth Patel Resume.pdf
├── next.config.js
├── amplify.yml                # AWS Amplify build config
├── package.json
├── CLAUDE.md                  # AI coding standards
└── README.md                  # This file (shown on /portfolio-details)

Pages

Components

UI Components (components/ui/)

Reusable components with consistent styling:

import { Button, Card, Section, NavLink } from '../components/ui';

// Button variants: primary, secondary, outline, ghost
<Button variant="primary" size="md" href="/about">Learn More</Button>

// Card variants: default, content, project, service
<Card variant="project">
  <CardHeader>
    <CardTitle>Project Name</CardTitle>
  </CardHeader>
  <CardContent>Description here</CardContent>
</Card>

// Section with title
<Section title="Experience" subtitle="My professional journey">
  {content}
</Section>

Layout Components (components/layout/)

• Layout.jsx - Main wrapper with header/footer
• Header.jsx - Logo, navigation, mobile menu
• Footer.jsx - Social links, copyright
• Navigation.jsx - Nav links with active state

Section Components (components/sections/)

• Timeline.jsx - Vertical timeline for experience/education
• MetricsDashboard.jsx - Stats display panel
• CertificationGrid.jsx - Certificate cards with modal
• EducationGrid.jsx - Education cards

Styling

CSS Architecture

All styles are centralized in two files:

1. styles/variables.css - Design tokens (colors, spacing, fonts)
2. styles/global.css - Tailwind directives + component classes

Design Tokens

/* styles/variables.css */
:root {
  --color-primary: #00aaff;
  --color-accent: #ff9900;
  --color-background: #000a1a;
  --color-surface: rgba(0, 20, 40, 0.6);
  --color-text: #ffffff;
  --color-text-muted: #888888;

  --color-success: #00ff00;
  --color-warning: #ffaa00;
  --color-error: #ff4444;

  --font-mono: 'Courier New', monospace;
  --font-sans: 'Montserrat', sans-serif;
}

Tailwind Usage

Use Tailwind utilities directly. For repeated patterns, use @layer components:

/* styles/global.css */
@layer components {
  .enterprise-panel {
    @apply bg-surface border-2 border-primary/30 rounded-2xl;
  }
}

Configuration

Navigation (config/navigation.js)

export const NAV_LINKS = [
  { href: '/', label: 'Home' },
  { href: '/about', label: 'About' },
  { href: '/projects', label: 'Resources' },
  { href: '/resume', label: 'Resume' },
  { href: '/contact', label: 'Contact' },
];

Deployment

Deployed on AWS Amplify with automatic builds from GitHub.

Build Configuration (amplify.yml)

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: out
    files:
      - '**/*'

Requirements

• Node.js 18+
• Static export enabled in next.config.js

Development

Adding a New Page

1. Create pages/new-page.jsx
2. Use the Layout component
3. Add route to config/navigation.js if needed

Adding a New Component

1. Create in appropriate folder (ui/, sections/, etc.)
2. Use .jsx extension
3. Add PropTypes validation
4. Export from index file if in ui/

Styling Guidelines

• Use Tailwind utilities first
• Add to global.css only for repeated patterns
• Use CSS variables for colors/fonts
• No inline <style jsx> blocks

Scripts

Troubleshooting

"next: No such device" error

Use npx next dev instead of npm run dev

Memory issues during build

Already configured with optimized webpack settings in next.config.js

Three.js import errors

Configured with transpilePackages: ['three'] in next.config.js