personal-website

Portfolio website for Jake Morales (Software Engineer). Built with Next.js, Shadcn UI, and Tailwind CSS.

Tech Stack

• Next.js — React framework with App Router, static export for Netlify
• Shadcn UI — Component library (Card, Badge, Button, NavigationMenu)
• Tailwind CSS v4 — Utility-first CSS framework
• Lucide React — Icon library

Project Structure

personal-website/
├── app/
│   ├── layout.tsx              Root layout (Navbar + Footer, defined once)
│   ├── page.tsx                Home page (hero, experience, education, projects)
│   ├── globals.css             Tailwind directives, Shadcn variables, custom theme
│   └── projects/
│       ├── usc-volunteer/      USC Volunteer Technical Staff
│       ├── matcha-guide/       Matcha Interactive Guide (coming soon)
│       └── bird-watching/      Bird Watching App (coming soon)
├── components/
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   ├── ExperienceSection.tsx
│   ├── EducationSection.tsx
│   ├── ProjectsSection.tsx
│   ├── ProjectCard.tsx
│   ├── ScrollFadeIn.tsx        IntersectionObserver scroll animations
│   └── ui/                     Shadcn-generated components
├── data/
│   ├── experience.ts           Work experience content
│   ├── education.ts            Education content
│   └── projects.ts             Project metadata
├── public/
│   ├── images/                 Static images
│   └── favicon.svg
├── netlify.toml                Netlify deployment config
└── package.json

Local Development

npm install       # Install dependencies
npm run dev       # Start dev server at http://localhost:3000

Build

npm run build     # Produces static HTML in the out/ directory

Deployment (Netlify)

Deployed to Netlify via netlify.toml:

• Build command: npm install && npm run build
• Publish directory: out (Next.js static export)
• Deploys automatically on push to main

Adding a New Project

1. Add an entry to data/projects.ts with a unique slug, title, subtitle, description, image, and status
2. Create app/projects/[your-slug]/page.tsx for the detail page (copy an existing one as a template)
3. The project card appears automatically on the home page
4. If status: "complete", it also appears in the navbar dropdown automatically