Back to Projects

Personal

Personal Resume/Portfolio Site

May 20, 2026

Personal Resume/Portfolio Site project screenshot

Front End

This is a personal portfolio site built to present my work, experience, and writing in one place. It is a full-stack React app with a home page, about, projects, experience, blog, and contact, plus a custom 404. The home page uses a hero with a portrait, featured projects pulled from the CMS, an about preview, and a quick look at the technologies I use.

The app is built with React Router 7 in framework mode, TypeScript, and Vite. Pages are server-rendered for faster first loads and better SEO. Content for projects and posts comes from a Strapi headless CMS, with typed loaders that fetch, filter, and map that data on the server. Tailwind CSS v4 handles the design system, including dark surfaces, typography, and reusable UI tokens.

The projects section is a filterable, paginated grid with category chips and Framer Motion layout animations. Each project has a detail page with a screenshot, live-site link, and rich body content rendered from Strapi Blocks. The blog lists posts with search, pagination, and Markdown detail pages so writing can be managed in the CMS without changing the app.

The about and experience pages tell the professional story: intro, stats, career journey, and a grouped tech toolkit. Experience is shown as role cards with company logos, impact metrics, and technology tags, plus education. A Formspree contact form lets visitors send a message without a custom backend.

The UI is responsive, with a mobile nav, accessible labels, and a global error boundary. Production builds run on a Node server.


Skills & Technologies: React 19, TypeScript, React Router 7, Vite, Tailwind CSS, Framer Motion, Strapi, REST APIs, React Markdown, Formspree, Node.js


Back End

The backend is a headless CMS that powers a personal developer site. Built with Strapi 5 and TypeScript, it gives the frontend a clean REST API for portfolio projects and blog posts, so content can be updated in an admin panel without touching the site code.

The content model is tailored for a resume-style site. Projects include a title, description, image, live URL, date, featured flag, and category (Professional, Personal), plus a rich-text body for case-study write-ups. Posts support a title, auto-generated slug, excerpt, featured image, and draft-and-publish workflow so articles can be written privately and released when they are ready.

Media lives on Cloudinary rather than the app server, so images and files scale independently and stay fast to deliver. PostgreSQL is the production database, with environment-based config so the same codebase can run locally or in the cloud. The API is paginated, CORS-ready, and protected with Strapi’s users-and-permissions plugin, which keeps public content readable while locking down create, update, and delete.

Together, this backend separates content from presentation: the portfolio and blog stay easy to maintain, media is handled by a dedicated CDN, and the frontend can stay a fast, static-friendly site that simply consumes structured JSON.

Skills & Technologies

  • Strapi 5
  • TypeScript
  • Node.js
  • REST APIs
  • PostgreSQL
  • Cloudinary
  • content modeling
  • draft-and-publish workflows
  • role-based access control
  • React 19
  • React Router 7
  • Vite
  • Tailwind CSS
  • Framer Motion
  • Strapi
  • React Markdown
  • Formspree