Portfolio Project

A simple and to-the-point personal portfolio built with modern web technologies.

Preview

Desktop

Mobile

Tech Stack

• Framework: Next.js (App Router)
• Library: React
• Styling: Tailwind CSS & clsx / tailwind-merge
• UI Components: Radix UI & shadcn/ui
• Content: MDX & Remark
• Animations: Motion (Framer Motion) & GSAP
• Icons: Lucide React & React Icons
• Caching/Storage: Cloudflare Workers & R2

Features

• MDX Support: Write content (like the about page and projects) quickly using MDX.
• Interactive Animations: Smooth page transitions and text splitting animations powered by Framer Motion and GSAP.
• Dark/Light Mode: Seamless theme switching with next-themes.
• Responsive Layout: Fully responsive UI relying on Tailwind CSS.
• Dynamic Open Graph Images: Automatically generated OG images for every page, cached on Cloudflare R2 for better performance.

Getting Started

First, install the dependencies (assuming you use npm, yarn, pnpm, or bun):

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

• src/app/ - Next.js App Router (pages, layout, routing)
• src/components/ - Reusable UI components (buttons, nav, layouts, sections)
• content/ - MDX content files for projects and general pages
• public/ - Static assets like images and site manifests
• cloudflare-r2-worker/ - Cloudflare Worker for caching Open Graph images in R2

Cloudflare R2 Worker Setup

This project uses a Cloudflare Worker to cache generated Open Graph images. Follow these steps to setup and deploy:

1. Navigate to the worker directory:

   cd cloudflare-r2-worker

2. Login to Cloudflare:

   npx wrangler login

3. Create an R2 bucket:

   npx wrangler r2 bucket create portfolio-og

   [!IMPORTANT] portfolio-og is the recommended bucket name. You can use a different bucket name, but you must update wrangler.jsonc (line 19), src/index.ts (lines 21 & 26), and regenerate types using npx wrangler types.

4. Verify the bucket:

   npx wrangler r2 bucket list

5. Deploy:

   # Optional: Local testing
   npx wrangler dev
   
   # Deploy to production
   npx wrangler deploy

6. Configure Environment Variable: Get the worker URL from the deployment output (e.g., https://cloudflare-r2-worker.yourcloudflare.workers.dev) or use http://localhost:8787 for local development (output from npx wrangler dev), and set it as an environment variable in your project:

   # Production
   CLOUDFLARE_R2_WORKER_URL=https://your-worker-url.workers.dev
   # or
   # Development
   CLOUDFLARE_R2_WORKER_URL=http://localhost:8787

Routing & Build Preview

Here is an overview of the app's routing structure generated during a production build:

Route (app)
┌ ○ /
├ ○ /_not-found
├ ƒ /og
├ ● /project/[slug]
│ ├ /project/example2
│ └ /project/example
├ ○ /robots.txt
└ ○ /sitemap.xml

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses generateStaticParams)
ƒ  (Dynamic)  server-rendered on demand