Aya Portfolio — CMS-Driven Engineering Portfolio
A custom Next.js portfolio connected to Sanity CMS, allowing projects, text, links and image galleries to be managed without editing the website's source code.
Overview
I built this portfolio as more than a static page containing project cards. I wanted a platform that could grow as I complete new academic and personal projects. The public interface was developed with Next.js, TypeScript and Tailwind CSS, while Sanity Studio provides a private content-management area at /studio. From the admin panel, I can create projects, edit case-study text, upload covers and galleries, add links, reorder content, save drafts and publish updates. Each published project automatically receives its own page through a dynamic slug. I also added local fallback data so the portfolio can continue displaying its projects if Sanity is temporarily unavailable.
My goal
My goal was to create a portfolio that I could maintain without editing React components every time I wanted to change a paragraph or upload a screenshot.
The problem
A hardcoded portfolio requires code changes and redeployment for every new project, image or text correction.
What I built
- Custom responsive homepage
- Dynamic project pages
- Reusable case-study template
- Sanity Studio admin panel
- Project content schema
- Gallery image management
- Draft and publishing workflow
- Dynamic slug routes
- External-link management
- Local project fallback
- Local cover fallback
- Seed and migration scripts
- Studio noindex configuration
How it works
Project content is created and published through Sanity Studio. Next.js queries the published documents, converts them into the portfolio's internal data format and renders the project cards and case-study pages.
A route such as /projects/velora-monitor is generated from the project slug rather than requiring a separate page file.
If Sanity is not available, the website can use the local fallback data.
Main challenges
- Matching Sanity versions with Next.js 15 and React 19
- Handling the site before Sanity was configured
- Removing the invalid placeholder Project ID
- Configuring CORS
- Protecting environment variables and tokens
- Migrating six projects without duplicates
- Supporting local and Sanity images
- Preserving the approved design while changing the content source
- Keeping drafts private
- Building dynamic routes
What I learned
This project taught me how to separate content from presentation. I gained experience with headless CMS architecture, schema design, content queries, normalisation, migrations, environment configuration, CORS, authentication boundaries and secure token handling.
Current status
The portfolio is connected to Sanity and functional. I am currently enriching the case studies with more technical explanations and visual galleries.
