leyen.me

#Overview

A modern personal website featuring:

• Blog — Markdown-powered articles with syntax highlighting and table of contents
• Projects — Portfolio showcase with live previews and source links
• Quotes — Curated collection organised by content type
• Interviews — Q&A-style interview archive with category filtering
• Movies — Personal movie watchlist with genre filtering
• Resume — Downloadable résumé with a custom-printed template mode
• Password Vault — Encrypted, slide-captcha-protected credential manager
• Photos — Image showcase page
• 3D Hero — Interactive WebGL (Three.js / React Three Fiber) hero section
• Admin Panel — Full CRUD admin dashboard for managing all content types, plus AI-powered writing assistance (slug generation, content drafting, markdown preview)

#Tech Stack

#Getting Started

#Prerequisites

• Node.js 18+
• A Sanity.io account

#Clone & Install

git clone https://github.com/leyen-me/leyen.me.git
cd leyen.me
npm install

#Configure Environment

Copy the example env file:

cp .env.example .env.local

You'll need the following Sanity credentials:

#Set Up Sanity

npm create sanity@latest -- --template clean --create-project "My Portfolio" --dataset production

After setup, copy the projectId from the generated sanity.config.ts into your .env.local.

#Run

npm run dev

Visit http://localhost:3000 for the frontend, and http://localhost:3000/admin for the Sanity Studio.

The UI starts blank. Use the admin panel to create your own content.

#Project Structure

app/                  — Next.js App Router pages and API routes
├── admin/            — Admin dashboard, Sanity Studio mounting
├── api/              — API routes (admin CRUD, auth, AI, upload, revalidate)
├── blog/             — Blog listing and post pages
├── components/       — React components (global, shared, page-specific)
├── data/             — Static data (social links, graph theme)
├── interviews/       — Interview archive and detail pages
├── movies/           — Movie watchlist page
├── password/         — Encrypted password vault
├── photos/           — Photo gallery page
├── projects/         — Project listing and detail pages
├── quotes/           — Quote collection page
├── resume/           — Résumé page and print template
└── styles/           — Global CSS and Prism theme

lib/                  — Business logic, Sanity queries, utilities
schemas/              — Sanity content type schemas
components/ui/        — Reusable UI primitives (shadcn-style)
public/               — Static assets (images, 3D models)
types/                — TypeScript type definitions

#Scripts

#Key Features

#Admin Dashboard

Full CRUD management for posts, projects, interviews, movies, quotes, jobs, authors, and profile. Includes AI-powered tools for:

• Content drafting and rewriting
• Slug generation
• Markdown preview

#Password Vault

A slide-captcha-protected, locally encrypted password manager. Credentials are encrypted with AES-256-GCM before being stored.

#3D Hero

An interactive 3D scene on the homepage using React Three Fiber and a Tesla Cybertruck GLB model.

#Blog

Articles written in Markdown with GFM support, syntax highlighting via Refractor, reading time estimation, and a sticky table of contents.

#License

This project is MIT licensed. You're free to use it as inspiration or directly — just link back to leyen.me in the footer as attribution.