Portfolio

A personal site for developers who build real products.
Interactive, fast, light and dark, and built to show how you think, not just what you've made.

Highlights  ·  Quick start  ·  Make it yours  ·  Settings  ·  Project layout

Highlights

A system map you can play Hover any box to see what it does and why it is built that way. Press Play an order to watch a request travel through the system, with real timings.

Case studies with live demos Long write-ups of real engineering work. Each one has a small demo next to it, so readers can try the idea instead of just reading about it.

_{The footer skyline follows the local time of day: dawn, daylight, dusk and night.}

What else is in it

Typeable console	The hero has a small terminal. Type help, ls or cat to explore the site. Press ` anywhere for a full drop-down terminal.
Ask	A chat panel that answers questions about your work and shows its sources.
Smart contact form	Visitors pick a topic (hiring, a project, or just hello). A pasted job description can turn into a tailored page.
Blog	Posts with code highlighting, tags, reading time and an RSS feed.
Resume	A web resume, plus a print layout that makes a clean PDF.
Polish	Light and dark themes with a ripple switch, smooth scrolling, card-to-page transitions, a command menu (Ctrl K) and sound effects you can turn off.
Every page shares well	Link previews are drawn for each page, and search engines get structured data.
Languages	Pick a language from the menu. Strings are translated on demand.
Also included	Setup, Now, Guestbook, Status, Book a call, Code highlights and Colophon pages.

Quick start

You need Node.js 18 or newer.

git clone https://github.com/your-github/Portfolio.git
cd Portfolio
npm install
npm run dev

Open http://localhost:3000.

For a production build:

npm run build
npm start

Make it yours

1. Your details. Edit config.js: name, short bio, social links and navigation.
2. Your pictures. Replace the grey placeholders in public/: portrait.jpg, portrait-face.png, portrait-bust.png, the icons, and the images in public/assets/. Keep the same file names and sizes, or update the code that uses them.
3. Your words. The home page text lives in app/page.jsx and lib/i18n.js. Every page has its own folder in app/.
4. Your content. Blog posts, case studies, the resume, the guestbook and Ask come from a separate backend that you run yourself. It is not part of this repo. Point the site at it with SITE_API_URL. Without it, the site still runs and those sections stay empty.

flowchart LR
  A[Visitor] --> B[This site<br/>Next.js]
  B --> C[(Your backend<br/>posts, contact, Ask)]

Loading

Settings

All settings are optional. Put them in a .env.local file in the project root, and never commit that file.

Name	What it does
SITE_API_URL	Address of your backend
GITHUB_ACCESS_TOKEN	Lets the Repositories page read public GitHub data
REVALIDATE_SECRET	Protects the endpoint that refreshes cached pages
HOTJAR_ID	Optional analytics

Scripts

Command	What it does
npm run dev	Start the development server
npm run build	Build for production
npm start	Serve the production build
npm run lint	Check the code
npm run format	Format the code with Prettier
npm run analyze	Build and show bundle sizes

Project layout

Show folders

app/            one folder per page (home, work, blog, architecture, resume ...)
components/
  content/        article layout and lists
  demos/          the small interactive demos used in case studies
  diagrams/       the architecture map
  elements/       header, footer, buttons, forms
  features/       bigger interactive parts: console, Ask, skyline, terminal ...
lib/            helpers: backend client, translations, link previews, markdown
public/         images, icons and fonts
styles/         global CSS
config.js       your name, links and navigation

Built with

Next.js · React · Tailwind CSS · Headless UI · Shiki · unified · Inter

License

MIT. Use it, change it, ship it.