v2.2.0: Blueprint hero and color themes

Overview

Version 2.2.0 reworks the hero, the stack, the reviews and the footer of kamycoding.com and brings VS Code color themes. The top bar and the intro now read the version from package.json, so they follow every release.

Highlights

• Color themes: colors follow VS Code. The dark theme uses Dark Modern, and a Color Theme picker (T, the top bar or the status bar) switches between Dark Modern, Light Modern, Monokai and Solarized Dark with live preview. The default follows the system, and every theme meets WCAG AA for text
• Hero: only the name and role. The editor can be slid between a live-measured blueprint and the build, and the entrance plays it after the intro. The terminal is rebuilt with a modern prompt, ghost suggestions and real commands such as ls projects, git log and blueprint
• Stack: two blocks, the stack as a VS Code style explorer (folders per group, technologies as files, real names on hover and focus) and a full-width GitHub contributions grid for the last 52 weeks with a reveal wave, a pulse on today and a stats line
• Reviews: shown as GitHub-style pull request reviews with line-drawn avatars, an approval summary and the quotes as review comments
• Footer: a large "kamycoding" line drawing that draws itself once, with the cat lying on its "m". The bottom bar keeps only the copyright and the template credit
• Version display: the top bar and the intro show the version from package.json instead of a hardcoded 2.0

Maintenance

• @types/node follows the Node 24 runtime (24.19.2, was 22.19.3)
• Dependabot no longer proposes major updates of @types/node; they are raised together with the Node version

Getting started

Requirements: Node.js 24 (.nvmrc) and pnpm (pinned in package.json, enabled through corepack).

git clone https://github.com/kamycoding/portfolio.git
cd portfolio
git checkout v2.2.0
corepack enable pnpm
pnpm install
pnpm dev

The app runs at http://localhost:3000. The contact function needs the variables in .env.example and is tested end to end on Netlify Deploy Previews.

Full changelog

https://github.com/kamycoding/portfolio/blob/v2.2.0/CHANGELOG.md

v2.1.0: Real GitHub contributions

Overview

The contribution heatmap in the stack section now shows real GitHub activity instead of placeholder data, and refreshes itself every day.

Changed

• The heatmap shows the public GitHub contributions of kamycoding for the last 17 weeks, using GitHub's own contribution levels
• Stats below the heatmap (best day, current streak, active days) are calculated from the same data

Added

• Build-time fetch of the GitHub contribution calendar through the GraphQL API (scripts/fetch-contributions.ts)
• Response validation with zod
• A committed snapshot (src/content/contributions.json) as fallback, so the build never fails when GitHub is unavailable or the token is missing
• Daily refresh: a GitHub Action runs at 03:00 UTC and triggers a Netlify build hook; it can also be started manually
• ADR 0006 documents the decision

Notes

• Only public contributions are counted, so the number can be lower than the total on the GitHub profile
• The GitHub token lives only in the Netlify environment and never reaches the browser

Full Changelog: v2.0.0...v2.1.0

v2.0.0: Next.js redesign

Overview

Version 2 is a full rebuild of kamycoding.com, the personal portfolio of Kamyar Zamanfar, in Next.js. The whole site is designed as a code editor: each section is a file, with a terminal, a command palette, line-drawing project covers and a cat. It ships in English and German, in a dark and a light theme, as static pages on Netlify. v1 (Angular) stays available at v1.0.0.

Highlights

• Editor design: file tabs as navigation, rulers, breadcrumbs and a status bar; sections as index.tsx, work.tsx, about.md, stack.json and contact.ts
• Hero: typed headline, editor panel with TypeScript-style hover cards, and a terminal with 13 commands, history and Tab completion
• Work: ls -la project list with a pointer preview and a README drawer per project; line-drawing covers as SVG components
• About: Markdown-style text, an ASCII portrait with a lens that reveals the photo, experience as a git log and reviews as pull request approvals with links to the reviewers' LinkedIn profiles
• Stack: foldable JSON tree, a commit heatmap of the v1 history and services as functions
• Contact: a sendMessage({ ... }) form with TypeScript-style errors, validated by the same schema in the browser and in the Netlify function
• Global interactions: a pnpm build intro on load, command palette (Ctrl K / ⌘ K), keyboard shortcuts and a custom cursor with action labels
• English and German: English at /, German at /de, browser language detection; a language switch keeps the reading position
• Legal pages: legal notice and privacy policy in both languages; the privacy policy describes the language cookie and the theme setting

Contact form and backend

• No separate backend: the contact form is a Netlify Function with Brevo for email delivery (ADR 0002)
• One zod schema for the form and the function; unknown fields and control characters in the name are rejected
• Only JSON from the own origin is accepted (415, 403), bodies above 10 KB are rejected before parsing (413)
• The Brevo request times out after at most 8 seconds
• Rate limiting (5 requests per 3 minutes per IP) and a honeypot that browser autofill leaves alone
• One log line per request (accepted with Brevo's message ID, honeypot, validation rule, rejection reason, provider status), never names, emails or message text

Security

• Enforced Content Security Policy with upgrade-insecure-requests and security headers: HSTS, X-Content-Type-Options, X-Frame-Options, Referrer-Policy, Permissions-Policy and Cross-Origin-Opener-Policy (ADR 0005)
• No X-Powered-By header; the language cookie is a Secure session cookie
• security.txt and a security policy with GitHub private vulnerability reporting
• CodeQL code scanning, Dependabot, secret scanning with push protection
• No tracking, analytics or third-party scripts

Quality

• CI on every push and pull request: frozen install, lint, type check, tests and build, with actions pinned to full commit SHAs
• Unit tests with Vitest for the contact function (including every request check and the privacy-safe logging), the shared schema, the scroll spy, the commit heatmap and the language switch position
• Accessibility: keyboard access everywhere, visible focus, reduced motion respected, labels that include the visible text, small text at WCAG AA contrast
• Metadata per language with canonical and language alternates, Open Graph images, a sitemap; legal pages are noindex

Tech stack

Next.js 16, React 19, TypeScript, Tailwind CSS v4, next-intl, next-themes, Geist, zod, Vitest, Netlify Functions, Brevo, pnpm

Getting started

Requirements: Node.js 24 (.nvmrc) and pnpm (pinned in package.json, enabled through corepack).

git clone https://github.com/kamycoding/portfolio.git
cd portfolio
git checkout v2.0.0
corepack enable pnpm
pnpm install
pnpm dev

The app runs at http://localhost:3000. The contact function needs the variables in .env.example and is tested end to end on Netlify Deploy Previews.

Full changelog

https://github.com/kamycoding/portfolio/blob/v2.0.0/CHANGELOG.md

v1.0.0: Angular portfolio

Overview

First stable release of kamycoding.com, the personal portfolio of Kamyar Zamanfar. This version is built with Angular and deployed on Netlify. It serves as the baseline before the v2 redesign.

Features

• Single-page portfolio with hero, projects, experience, skills and contact sections
• Internationalization in English and German, switchable at runtime
• Contact form with validation on the client and on the server
• Legal pages: legal notice (/legal-notice) and privacy policy (/privacy-policy)
• Responsive layout for mobile, tablet and desktop

Contact form and backend

• Serverless endpoint POST /api/contact running as a Netlify Function
• Transactional email delivery through the Brevo API, with the sender set as reply-to
• Strict request validation with a zod schema; unknown fields are rejected
• Typed environment configuration, validated at startup
• 15 second timeout on outgoing requests, with network, timeout and provider errors handled separately
• Logs contain allow-listed diagnostics only, never API keys or personal data

Security and privacy

• Rate limiting: 5 requests per 3 minutes per IP
• Honeypot field against automated spam
• No tracking, analytics or third-party scripts

Quality

• Unit tests for the contact function with Vitest (success, validation, honeypot, provider errors, network errors, timeout, method handling, rate limit config)

Tech stack

Angular, TypeScript, SCSS, Netlify Functions, Brevo, zod, Vitest

Getting started

Requirements: Node.js 24 and npm.

git clone https://github.com/kamycoding/portfolio.git
cd portfolio
git checkout v1.0.0
npm ci
npm start

The app runs at http://localhost:4200.

What's next

v2 is in development on the redesign/v2 branch: a full redesign built with Next.js, React and TypeScript.

Full history: https://github.com/kamycoding/portfolio/commits/v1.0.0