README

Shafin Ahmed — Portfolio

Personal portfolio website built with Next.js, TypeScript, and Tailwind CSS.

Desktop: Windows-style app layout with sidebar navigation
Mobile: Android-style layout with bottom navigation

Getting Started

npm install
npm run dev

Open http://localhost:3000.

Scripts

Command	Description
`npm run dev`	Start development server
`npm run build`	Create production build
`npm run start`	Run production server
`npm run lint`	Run ESLint
`npm run cf:build`	Build for Cloudflare Workers
`npm run preview`	Build and preview on Workers runtime locally
`npm run deploy`	Build and deploy to Cloudflare (`wrangler deploy`)

Deploy to Cloudflare Workers

First-time setup (one time only)

Install dependencies

npm install

Log in to Cloudflare

npx wrangler login

This opens your browser. Sign in to your Cloudflare account and allow Wrangler access.

Deploy your site

npm run deploy

This runs two steps automatically:

opennextjs-cloudflare build — builds your Next.js app for Workers
wrangler deploy — uploads it to Cloudflare

Your site will be live at a URL like:

https://portfolio.<your-subdomain>.workers.dev

You can also add a custom domain later in the Cloudflare dashboard.

After you change code — how to update the live site

Whenever you edit your portfolio (text, design, new sections, etc.), follow this workflow:

Step 1 — Test locally

npm run dev

Check your changes at http://localhost:3000.

Step 2 — Save to GitHub (recommended)

git add .
git commit -m "describe your change"
git push origin main

This keeps your code backed up on GitHub. It does not update Cloudflare by itself unless you set up auto-deploy (see below).

Step 3 — Deploy to Cloudflare

Run this again from your project folder:

npm run deploy

Or step by step:

npm run cf:build
npx wrangler deploy

Cloudflare replaces the old version with your new build. Changes usually go live within 1–2 minutes.

Quick reference — update workflow

Edit code → npm run dev (test) → git push (backup) → npm run deploy (go live)

What you want	Command
Test changes locally	`npm run dev`
Push code to GitHub	`git add .` → `git commit -m "..."` → `git push`
Update live Cloudflare site	`npm run deploy`

Option A — Manual deploy (what you use now)

You run npm run deploy yourself after each change. Simple and full control.

You change code → npm run deploy → site updates

Option B — Auto deploy from GitHub (optional)

Connect your repo so Cloudflare deploys automatically when you push to main.

Go to Cloudflare Dashboard → Workers & Pages
Click Create → Workers → Connect to Git
Select your repo: Shafin5556/portfolio
Set build settings:

Setting	Value
Production branch	`main`
Build command	`npm install && npx opennextjs-cloudflare build`
Deploy command	`npx wrangler deploy`

Save and deploy.

After this, your workflow becomes:

Edit code → git push origin main → Cloudflare builds and deploys automatically

You no longer need to run npm run deploy manually.

Preview before deploying (optional)

Test the production build locally in the Workers runtime:

npm run preview

Troubleshooting

Problem	Solution
`Not logged in`	Run `npx wrangler login`
Build fails on Windows	Try WSL, or deploy via GitHub (Option B)
Old site still showing	Wait 1–2 min, then hard-refresh (`Ctrl+Shift+R`)
Wrong worker name	Check `name` in `wrangler.jsonc` (currently `portfolio`)

Stack

Next.js 15
React 19
TypeScript
Tailwind CSS
Framer Motion
Cloudflare Workers (OpenNext)