A minimalist portfolio website with subtle interactive animations and a markdown-powered blog.
- Single-page portfolio with scroll-triggered fade animations
- Interactive glow effects on cards and buttons
- Blog with markdown file support
- Dark theme with teal accent colors
- Fully responsive design
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS 4
- UI Components: shadcn/ui, Radix UI
- Blog: Markdown with gray-matter and remark
- Icons: Lucide React
- Language: TypeScript
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm startOpen http://localhost:3000 to view the site.
├── app/
│ ├── blog/
│ │ ├── [slug]/page.tsx # Individual blog post
│ │ └── page.tsx # Blog listing
│ ├── globals.css # Global styles and theme
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/
│ ├── portfolio/ # Portfolio-specific components
│ ├── shared/ # Reusable components
│ └── ui/ # shadcn/ui components
├── content/
│ └── blog/ # Markdown blog posts
├── hooks/ # Custom React hooks
└── lib/ # Utilities and blog functions
Create a markdown file in content/blog/ with frontmatter:
---
title: "Post Title"
date: "2025-01-30"
excerpt: "A brief description of the post."
tags: ["Tag1", "Tag2"]
published: true
---
Your content here...A Resume section is included with download and view functionality. The resume is served as a PDF from the public folder.
- Edit the HTML resume: Update
public/resume.htmlwith your information - Generate PDF (recommended):
This creates
npm install puppeteer --save-dev node scripts/generate-resume-pdf.js
public/resume.pdf - Or provide your own: Simply place your PDF file at
public/resume.pdf
The Resume section displays on the home page with quick links to blog, projects, and contact information.
MIT