Full-Stack Web Development

Tayler Carney's Portfolio

A Next.js portfolio for a fashion designer featuring an inline admin editor — authenticated owners edit content directly on published pages, with all data living in Hygraph and no separate application database.

Tayler Carney's Website
Role
Solo Developer
Stack
Next.js · TypeScript · Hygraph · SCSS
Visit websiteView on GitHub

The Problem

Most portfolio sites require either a separate CMS dashboard or a full application database. The goal here was to let the site owner edit content exactly where it lives — on the published page itself — with no extra interfaces, no database to maintain, and no write credentials ever reaching the browser.

The Solution

Built on React Server Components with Next.js App Router, every page renders fresh GraphQL content from Hygraph on each request. Authenticated admins get pencil controls and a structured block editor overlaid directly on the live page. A single HMAC-signed httpOnly cookie handles sessions; every write re-verifies credentials in a Server Action before touching the CMS, keeping mutation tokens completely server-side.

Key Features

  1. Inline Page Editing

    Admins edit content directly where it appears — pencil controls for fields, a block editor for page bodies — no separate dashboard.

  2. Database-Free Architecture

    All content lives in Hygraph; the app holds no data of its own, eliminating an entire operational layer.

  3. Reusable Block System

    Nine structured block types (richText, gallery, specs, callout, and more) drive consistent layouts across every page type.

  4. Integrated Media Library

    Admins browse, rename, publish, delete, and crop-upload assets without leaving the site.

  5. Security-Hardened

    Strict CSP headers, frame denial, referrer policies, and HMAC sessions — mutation tokens never reach client code.

  6. Optimistic Updates

    Edits atomically draft, publish, and reflect in the UI immediately, keeping the experience snappy.

📷 Add screenshots here

Built With

Framework
  • Next.js 16 (App Router)
  • React 19
Language & Styling
  • TypeScript
  • SCSS Modules
  • CSS Custom Properties
Content & Data
  • Hygraph (GraphCMS)
  • GraphQL
Auth & Security
  • Web Crypto HMAC
  • httpOnly Cookies
  • Content Security Policy
Motion & Deployment
  • Framer Motion
  • Vercel

See the source

Browse the full codebase, including the block system, Server Actions, and HMAC auth layer.

View on GitHub