Overview
This project started from a simple activity in the Google Cybersecurity Professional Certificate: create a cybersecurity portfolio where future employers could review the work completed throughout the program.
The activity suggested straightforward options such as a document folder, Google Drive, Google Sites, or a Git repository. Instead of stopping there, I decided to build my own portfolio from the ground up.
What began as a place to store cybersecurity exercises gradually became a full personal platform for documenting my development in networking, cybersecurity, and IT.
The Goal
I wanted more than a collection of certificates and finished projects.
The portfolio needed to show:
what I built
how I approached problems
what went wrong
how I troubleshot them
what I learned afterward
This became especially important as I started doing more hands-on networking labs. A successful configuration alone does not show the subnetting mistakes, VLAN confusion, routing decisions, or troubleshooting that actually produced the learning.
The portfolio became a record of that process.
What I Built
The application now includes dedicated areas for Projects, Networking/Security Labs, Journal entries, Certifications, Skills, and my About page.
Instead of manually editing files whenever I learn something new, I built an integrated CMS that allows the entire portfolio to be managed through an administrative interface.
The CMS includes content creation and editing, metadata management, categories, tags and related skills, reusable content templates, media uploads, rich-text editing, publishing controls, and draft management.
I also built a media system so screenshots, diagrams, files, and other supporting material can be attached directly to technical documentation.
Design & Visual
The portfolio eventually went through a complete visual redesign based around a modern Bauhaus-inspired system.
I wanted it to look different from the typical developer portfolio without sacrificing readability or professionalism.
The resulting interface uses strong typography, structured grids, geometric elements, restrained accent colors, and minimal animation. The same visual language is carried into the CMS so the administrative side feels like part of the product instead of a separate generic dashboard.
A major part of development involved repeatedly comparing the implementation against the intended design and correcting small inconsistencies in spacing, forms, dialogs, editor controls, metadata sheets, navigation, and responsive behavior.
Engineering & How It Was Structured
The project evolved beyond a static portfolio into a database-backed application built around Next.js, TypeScript, React, Tailwind CSS, Prisma, PostgreSQL, TipTap, authentication, and cloud media storage.
One of the biggest architectural changes was moving away from manually maintained MDX content toward structured database content managed through the CMS.
That introduced a new set of problems to solve: editor serialization, autosaving, validation, database relationships, publishing states, media handling, server actions, cache revalidation, and keeping the public site synchronized with administrative changes.
Challenges
Most of the work on this project has not been adding new pages. It has been refining the system after discovering where the original architecture or UI stopped working well.
Some of the problems I worked through included unreliable editor saves, Server Action serialization errors, inconsistent loading states, content-template behavior, inserting media into the editor, taxonomy management, CMS/public-site design mismatches, modal positioning, responsive layouts, database-backed About content, and several redesign iterations.
There were also decisions that looked small initially but eventually required changes across the frontend, backend, validation, and data model.
The project taught me that building software is rarely a straight line from design to completion. A large part of development is identifying assumptions that no longer work and improving the system without breaking what already does.
What It Became
The original Google activity was simply about having somewhere to present cybersecurity work. The course itself encourages learners to gradually add things such as security audits, network analysis, Linux exercises, SQL work, vulnerability assessments, and incident documentation to their portfolios.
I ended up building the platform that will hold all of those things — along with everything I learn beyond the certificate.
Today, this portfolio is both a software project and a living record of my technical development.
It will continue growing alongside me as my networking and cybersecurity projects become more advanced.