Ernest Nde Portfolio
Creation of a personal portfolio developed from scratch using Next.js (App Router), Tailwind CSS, and TypeScript. More than just a showcase website, this project integrates a fully customized mini-CMS (managed with Prisma ORM and MySQL) for dynamically administering projects, skills, career paths, and services. The interface features an original Cyberpunk/Terminal theme, seamless light/dark mode switching, and rich animations powered by Framer Motion.
# Interface_Snapshots
Behind_The_Build
Context & objective
This portfolio is not just a static showcase: it's also my own back office. Rather than hard-coding each new project, I built a platform where I can add, illustrate, and document my work directly from an administration interface — without having to redeploy everything with each content update.
Technical choices
Prisma + MySQL as the source of truth, but each section of the site falls back to static data if the database is unavailable — the site always remains visible, even in case of an incident.
Two distinct visual identities in the same app: the front office retains a dark and monospace "terminal" aesthetic, the back office uses a neutral palette and a sans-serif font designed for scanning lists all day long — each driven by its own CSS tokens, without duplicating style files.
The ADMIN role is checked on the server side for each sensitive route (media upload, project write), not just hidden on the interface side.
Key integrations
Resend — Transactional sending of emails from the contact form, without managing an SMTP server.
Cloudflare R2 — media storage (thumbnails, project gallery) uploaded from the back office, compatible with S3.
TipTap — rich text editor to document each project directly from the admin, without depending on an external CMS.
Better Auth — authentication and back-office session management.
Three.js — 3D canvas in the background of the hero section, to give depth to the first impression without weighing down the rest of the site.
Challenges encountered
Rich content without a dedicated CMS — integrate TipTap while keeping the content field as a simple text column on the database side, to avoid a cumbersome migration. The HTML is cleaned up on the server side before display, rather than being trusted as is.
Two design systems, one global CSS — preventing dashboard colors from spilling over onto the public site, or vice versa. This was resolved by isolating the CSS variables under a dedicated scope rather than duplicating the stylesheets.
Content resilience — every database call is protected, with an identical-looking fallback rendering, so that the page never breaks even in case of an error.
Results
Adding a project no longer requires touching the code: image uploads, rich text editing, status and stack management—everything is done from the admin panel. The site remains readable even without a database, and the two interfaces (public and admin) evolve visually without interfering with each other.