T

This Portfolio Website

Next.jsReactTypeScriptTailwind CSSVercel

Overview

A full-stack website built with Next.js 16 and deployed on Vercel. It started as a portfolio and grew into the tools I use every day. Next to the portfolio pages is School: practice exams with PDF import and on-screen question scanning, spaced-repetition flashcards, and an AI study workspace that turns a PDF, a link or a recording into notes, flashcards and a quiz. There is also a live collaborative whiteboard, a floor-plan editor, and Watch, a film and series tracker that sends me a Telegram message when something I follow is out. Everything is stored in Vercel KV, and signing in takes a password and a TOTP code.

My Contributions

  • Designed and built the entire site from scratch with Next.js App Router and Tailwind CSS v4
  • Built the sign-in: an HMAC-signed session cookie, TOTP 2FA (otplib) and a 30-day trusted-device cookie, with rate limits on sign-in attempts
  • Hardened it with a per-request nonce Content Security Policy and a same-origin check on every API request
  • Stored all data in Vercel KV (Redis): the site text, exams, flashcard decks, boards, plans, study sessions and the Watch library
  • Built the School tools: practice exams with PDF import (pdf.js) and OCR question scanning (tesseract.js), spaced-repetition flashcards, and an AI study workspace that falls back across free AI providers
  • Built a collaborative whiteboard (React Flow, with its own live sync on Cloudflare Durable Objects) and a floor-plan editor
  • Built Watch on TMDB data, with a daily Vercel Cron job that sends Telegram alerts
  • Added consent-based visitor analytics and a contact form that notifies me on Telegram

Tech Breakdown

Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS v4, Vercel and Vercel KV, otplib for TOTP 2FA, React Flow, Cloudflare Workers and Durable Objects, pdf.js, tesseract.js, Gemini, Groq, OpenRouter, Ollama and the Anthropic SDK for AI, TMDB API, Telegram Bot API