Project

Projects

DYNAMIC DEVELOPER PORTFOLIO

A MERN-shaped portfolio with a custom admin, Mongo-backed sections, and server-rendered pages.

DYNAMIC DEVELOPER PORTFOLIO

Next.js · React · MongoDB · Mongoose · Tailwind

Most developer sites go stale the week after they launch. This one is built so the public site always reflects what I actually ship — roles, schools, credentials, and project write-ups live as documents, not hardcoded pages.

The problem

A static template looks finished until the next certificate, job, or case study. Then you are back in the repo. I wanted a portfolio that behaves like a small product: visitors get a fast public site, and I get a private place to own the content.

What I built

A full-stack personal site with two surfaces:

  • A public, server-rendered portfolio — hero, experience, education, affiliations, certificates, trainings, projects, skills, and contact.
  • A private content dashboard — authenticated, role-aware, with drag-and-drop ordering, publish/feature toggles, markdown case studies, and image uploads with crop. Custom sections can be added, labeled, reordered, or hidden without a deploy. System sections stay structured (dates, logos, stacks) so the public layout stays consistent.

Product decisions

Content is the product. Experience, education, and credentials are first-class records with logos, date ranges, and optional website links. Projects have a cover, a markdown case study, live/repo links, and a screenshot gallery. Media is treated as an asset, not a filename. Uploads go through crop before they land in Cloudinary. Replacing or removing an image also removes the old file from storage, including gallery shots when a project is deleted. The public UI has to feel designed, not generated. Ink and vermillion, glass navigation, scroll-linked motion, and a mobile section bar that stays usable even with a long list of sections. Company and school logos sit in padded frames so crests and circular marks are not clipped.

Architecture (high level)

  • Next.js App Router and TypeScript for the application layer
  • MongoDB + Mongoose for profiles, sections, and every collection
  • Server-rendered public pages so search engines and first paint see real content
  • A locked-down dashboard for CRUD, media, and section visibility
  • Cloudinary (with a local fallback in development) for images I did not use a hosted CMS. The dashboard is part of the same codebase, so the data model and the public UI stay in lockstep.

What I would show in a review

  • Adding a project with cover, gallery, stack, and markdown — then seeing it on the public site without a rebuild
  • Reordering sections and hiding ones that are not ready
  • Uploading a PNG logo with transparency and having it stay sharp on a white plate
  • Removing a gallery image and confirming the file is gone from storage

Outcome

This site is both the portfolio and a working sample of how I ship: data models, auth-gated tools, media lifecycle, and a public interface that is meant to be operated, not abandoned after launch.

Gallery