This is my personal website built with Next.js, Tailwind CSS, and deployed to Vercel.
- Next.js - React framework for building the site
- Tailwind CSS - Utility-first CSS framework
- Bun - JavaScript runtime and package manager
- React Icons - Icon library
- Puppeteer - Headless browser for capturing website screenshots
- Vercel for hosting
# Install dependencies
bun install
# Run development server
bun dev
# Build for production
bun build
# Capture website screenshots for link previews
bun capture-screenshots
The site includes a link preview feature that displays metadata and screenshots of linked websites. Link previews work in two ways:
- API-based previews: Uses the Next.js API route at
/api/link-preview
to fetch and parse website metadata in real-time - Static screenshots: For faster loading and to reduce API calls, the site also uses pre-captured screenshots
To update the screenshots:
- Edit the URLs in
scripts/capture-screenshots.ts
- Run
bun capture-screenshots
- Commit the new screenshots to the repository
The site is automatically deployed to GitHub Pages via GitHub Actions whenever changes are pushed to the main branch. Note that GitHub Pages only supports static content, so API routes will not function in this environment.
For full functionality including API routes, the site can be deployed to Vercel:
# Install Vercel CLI
npm install -g vercel
# Deploy
vercel
src/app/page.tsx
- Main page componentsrc/app/layout.tsx
- Root layout with metadata and SEO optimizationsrc/app/robots.ts
- Robots.txt configurationsrc/app/sitemap.ts
- Sitemap configurationsrc/app/api/link-preview/
- API route for fetching website metadatasrc/app/components/LinkPreview.tsx
- Component for displaying link previewsscripts/capture-screenshots.ts
- Script to capture website screenshotspublic/images/previews/
- Stored website screenshotspublic/
- Other static assets (images, resume PDF, etc.)
This project is licensed under the MIT License.