kamycoding.com

Kamyar Zamanfar, Full-Stack Developer.

Website · v1.0.0 release · LinkedIn

Personal portfolio of Kamyar Zamanfar, full-stack developer near Cologne.

Concept

The whole site is designed as a code editor. Each section is a file (index.tsx, work.tsx, about.md, stack.json, contact.ts) with file tabs, rulers, breadcrumbs and a status bar. The page builds itself with a pnpm build log on load, and the contact form is written as a function call. It ships in English and German, in four VS Code color themes, as static pages.

Features

• Hero with the name and role, an editor panel with TypeScript-style hover cards and a slider between a live-measured blueprint and the build, played as the entrance after the intro
• Terminal with 11 commands, a modern prompt and ghost suggestions, including ls projects, git log, blueprint and theme
• Color themes from VS Code: Dark Modern, Light Modern, Monokai and Solarized Dark, chosen in a Color Theme picker (T, the top bar or the status bar) with live preview; the default follows the system
• Project list as ls -la with a pointer preview and a README drawer per project; line-drawing covers as SVG components
• About as Markdown with an ASCII portrait, experience as a git log and reviews as GitHub-style pull request reviews with line-drawn avatars and an approval summary
• Stack as a VS Code style explorer (folders per group, technologies as files), a GitHub contributions grid for the last 52 weeks refreshed daily, and services as functions
• Contact form as sendMessage({ ... }) with TypeScript-style errors, validated by the same schema in the browser and in the Netlify function
• Footer with a large "kamycoding" line drawing that draws itself once, with the cat lying on its "m"
• Command palette (Ctrl K / ⌘ K), keyboard shortcuts, a custom cursor, and a cat that wakes up
• Version in the top bar and the intro, read from package.json
• Legal notice and privacy policy in both languages

Tech stack

Area	Tools
Framework	Next.js 16 (App Router, static generation), React 19, TypeScript
Styling	Tailwind CSS v4 with design tokens, CSS Modules, Geist fonts
Content	next-intl (English at /, German at /de), next-themes
Validation and tests	zod (shared schema), Vitest
Hosting	Netlify CDN, Netlify Functions, Brevo for email delivery
Tooling	pnpm, ESLint, Prettier, husky, lint-staged, commitlint, GitHub Actions

Architecture

flowchart LR
  B["Browser"] -->|"pages and assets"| E["Netlify Edge: proxy.ts (language)"]
  E --> C["Netlify CDN: static pages (en, de)"]
  B -->|"POST /api/contact"| F["Netlify Function: contact.mts"]
  F -->|"validated message"| M["Brevo: transactional email"]
  G["GitHub GraphQL API"] -.->|"contributions, at build time"| C

Loading

The site has no separate backend (ADR 0002). The only server code is the contact function: it accepts JSON from the own origin only, checks the size, validates with the shared schema, uses a honeypot and Netlify's rate limit, and logs one line per request without personal data.

Folder	Contents
src/app/	Routes and layouts per locale, design tokens, metadata, sitemap, Open Graph images
src/components/	Sections (hero, work, about, stack, contact, legal) and the editor shell
src/content/	Projects, experience, reviews, stack and services in English and German
src/hooks/, src/lib/	Small shared stores and helpers, the contact schema
src/i18n/, src/proxy.ts	Locale routing and detection (ADR 0004)
messages/	UI copy in English and German
netlify/	The contact function and its tests

Getting started

Requirements: Node from .nvmrc and pnpm, pinned in package.json.

nvm use                # Node 24 from .nvmrc
corepack enable pnpm   # pnpm version from package.json
pnpm install           # also installs the git hooks
pnpm dev               # http://localhost:3000

Script	What it does
pnpm dev	Development server with hot reload
pnpm build	Production build, after refreshing the GitHub contributions
pnpm contributions:update	Refresh src/content/contributions.json (needs GITHUB_CONTRIBUTIONS_TOKEN)
pnpm start	Serve the production build (security headers are active here)
pnpm lint / pnpm lint:fix	ESLint, with automatic fixes
pnpm format	Prettier on src/
pnpm check-types	TypeScript check without emitting files
pnpm test	Vitest, single run (app and contact function)

The contact function needs the variables in .env.example, set per deploy context in Netlify. There is no local Netlify setup: the function is covered by tests, and the form is tested end to end on Deploy Previews.

The contribution heatmap is fetched from the GitHub API during production builds only. Without GITHUB_CONTRIBUTIONS_TOKEN (local builds, Deploy Previews, forks) the build uses the committed snapshot (ADR 0006).

Commits follow Conventional Commits. Git hooks check the message and lint and format staged files.

Quality and security

• CI on every push and pull request: frozen install, lint, type check, tests and build, with actions pinned to full commit SHAs
• CodeQL code scanning, Dependabot, secret scanning with push protection
• Enforced Content Security Policy and security headers (ADR 0005)
• Accessibility: keyboard access everywhere, visible focus, reduced motion respected, text contrast at WCAG AA in every color theme
• security.txt and a security policy for private reports

Architecture decisions

• ADR 0001: Move the portfolio from Angular to Next.js
• ADR 0002: No separate backend for the portfolio
• ADR 0003: Replace the Zolt UI with a custom editor design
• ADR 0004: Locale routing with next-intl
• ADR 0005: Content Security Policy strategy
• ADR 0006: GitHub contributions at build time

The design spec and the approved prototype are in docs/design/, the phase plan in docs/ROADMAP.md.

Versions

• v1 (Angular) is preserved at v1.0.0.
• v2 went live with v2.0.0. The current release is v2.2.0. Changes are listed in the changelog.

License

• Source code: MIT.
• Content (texts, photos, the design, illustrations and the cat): all rights reserved.

See LICENSE for both parts.

Credits

• v2 started from the free Zolt template by shadcn/studio (MIT). The UI was replaced by the custom editor design (ADR 0003); LICENSE.md keeps its notice.
• Geist fonts by Vercel.

Contact

• Website: kamycoding.com
• LinkedIn: kamyarzamanfar
• Email: contact@kamycoding.com
• Contributions: see CONTRIBUTING.md and the code of conduct