Personal Portfolio & Professional Platform

This is my own professional platform. It brings together project case studies, background information and a contact journey in a responsive website. Its development shows how I approach content, interface decisions, accessibility, testing and ongoing improvement.

I originally built the site to present my work and professional background. Its direction is now shifting towards prospective clients, my own products and sharing the work behind them. The content and design review asks a practical question: can a visitor understand what I offer, inspect relevant work and decide whether to contact me?

• Explain the proposed service and who it is for.
• Make project evidence and limitations easy to find.
• Keep the site usable on phones and with a keyboard.
• Provide a clear contact journey and maintainable content.

I direct the product decisions, design and development, review the output, and remain responsible for the result. I use AI tools — Claude Code and ChatGPT — to support research, planning, implementation, debugging, and review; their suggestions are checked before acceptance. Architecture, security controls, content, release decisions, and acceptance criteria remain under my authority.

1. 1Defined the product scope, audience, content model, and security-first delivery plan before implementation.
2. 2Built the typed content foundation, design system, security headers, and nonce-based Content Security Policy.
3. 3Implemented the main sections, experience timeline, project case studies, and the secure contact boundary.
4. 4Explored a procedural 3D hero as progressive enhancement. It was measured, then retired: the current presentation uses typography, project imagery, and finite interaction feedback instead (ADR-0010).
5. 5Organise the public content, review the important visitor journeys, and use tests and manual checks to assess changes — keeping each change small enough to inspect and release deliberately.

• Next.js App Router with React Server Components by default and client components only where interaction requires them.
• Typed content modules kept separate from presentation components.
• A per-request nonce Content Security Policy generated in the Next.js proxy, with complementary security headers configured centrally.
• Build-time font optimisation and no runtime third-party font dependency.
• A server-side contact route with a swappable email transport. The 3D renderers remain in the repository with their unit coverage so the decision can be reversed, but no decorative scene is mounted in the current presentation.

• Responsive and accessible interface with clear navigation and calls to action.
• Project case studies and structured, typed public content.
• Secure contact handling with server-side validation and honest mock-delivery behaviour.
• Technical SEO, metadata routes, structured data, and social preview support.
• Automated unit and browser testing.
• Strict Content Security Policy, reduced-motion support, and progressive enhancement.

• Semantic landmarks, a logical heading structure, skip navigation, keyboard support, visible focus, and reduced-motion handling are verified through automated and manual checks.
• Decorative elements are kept out of the accessibility tree, and interaction feedback is finite and cancelled by a reduced-motion preference.
• A strict nonce-based Content Security Policy is combined with HSTS, X-Content-Type-Options, X-Frame-Options, Referrer-Policy, and Permissions-Policy.
• The contact boundary uses bounded server-side validation, a honeypot, rate limiting, plain-text email output, generic errors, and server-only credentials.

• No continuous decorative canvas or infinite CSS animation is mounted; interaction feedback is bounded and event-driven.
• Expensive visual effects and unnecessary compositor layers were reduced after profiling.
• Scroll-linked behaviour uses requestAnimationFrame throttling and compositor-friendly transforms rather than per-frame React updates.
• Performance choices preserve readable content and navigation when animation is unavailable. The measurements recorded in ADR-0010 came from a 4x-throttled local sample and do not establish real-phone or universal smoothness.

A working website with typed content, a responsive interface, project case studies, and an implemented contact boundary — code and decisions a prospective client can inspect. What it does not demonstrate matters too: this is a personal project, not evidence of a client’s revenue, lead growth, or commercial return, and it carries no invented visitor metrics or outcomes. Release evidence belongs to the dated version it was gathered for, and work still in local development is not described here as deployed.

• A visually distinctive site still needs a clear offer. Long skill lists and repeated statements of purpose can make that offer harder to find.
• Content, navigation, and the supporting assistant answers have to be reviewed together when the audience changes.
• Use primary framework documentation and verify assumptions against the installed version.
• Measure before optimising; visible symptoms do not always reveal the main performance cost.
• Security, privacy, and accessibility are easier to maintain when included in the product design from the beginning.
• Small, reviewable releases produce clearer evidence and safer rollback than large, mixed changes.

• Next.js (App Router)
• React
• TypeScript (strict)
• Tailwind CSS
• Framer Motion
• Three.js (retained for rollback; no scene currently mounted)
• React Three Fiber (retained for rollback)
• Drei (retained for rollback)
• Vitest
• Playwright
• Vercel
• Resend
• AI-assisted engineering with human review