Portfolio Forge

A full-stack, headless CMS to power my personal portfolio.

Comment

Inspiration

My personal portfolio started as a simple, static website. However, every time I wanted to add a new project or update a skill, I had to manually edit the HTML, rebuild, and redeploy the entire site. This process was slow and inefficient. I realized I wasn't just building a portfolio; I needed to build the system that manages the portfolio. This led to the creation of "Portfolio Forge," a full-stack, headless Content Management System (CMS) designed to make my portfolio dynamic, instantly updatable, and a powerful project in its own right.

What it does

Portfolio Forge is a complete, decoupled system that powers my public-facing portfolio. It separates content management from content presentation, following a professional headless architecture with three distinct parts:

  1. The Public Portfolio (Frontend): A vanilla JavaScript site that is only responsible for displaying content fetched from the database.
  2. Firebase (Backend): A secure Firestore database that stores all portfolio content—projects, skills, education, and even blog posts—in a structured format.
  3. Portfolio Forge (Admin Panel): A private, feature-rich React application that provides an intuitive interface for me to perform CRUD (Create, Read, Update, Delete) operations on the portfolio content.

The most powerful feature is its real-time capability. I can log into the Portfolio Forge admin panel from any web browser, add a new project, and the change goes live on my public portfolio instantly, without touching a single line of frontend code or triggering a redeployment.

How we built it

The project demonstrates a full-stack skill set, integrating modern web technologies to create a seamless content management workflow.

  • Portfolio Forge (The Admin Panel): The core of the system is a single-page application built with React and Vite for a blazing-fast development experience and a responsive UI. The interface is styled with custom CSS and uses lucide-react for icons.
  • AI-Powered Content Creation: To accelerate content creation, I integrated the Google Gemini API. It allows for one-click generation of professional project descriptions and entire blog posts directly within the admin panel, based on a project's title and technologies.
  • Backend & Database: Firebase serves as the backend, utilizing Firestore as the NoSQL database to store all portfolio data in a single, easily manageable document. Firebase Authentication is used to secure the admin panel, ensuring only authorized users can make changes.
  • Public Portfolio (The Frontend): The public site remains a lightweight application built with vanilla HTML, CSS, and JavaScript. Its core logic was refactored to fetch all dynamic content from Firestore on page load, ensuring the information is always current.

Accomplishments that we're proud of

This project is a "meta-project" a portfolio piece that, quite literally, builds my portfolio. I'm proud of having architected and built a complete, scalable, and user-friendly system from the ground up, demonstrating a deep understanding of full-stack development, headless CMS architecture, and practical AI integration.

What's next for Portfolio Forge

The headless architecture makes the system highly scalable. Future plans include expanding the schema to support more complex content types, adding user roles and permissions, and potentially open-sourcing a template version for other developers to use for their own portfolios.

Live Links & Credentials

Login Details For Forge Viewer:

  • Email: viewer@krishnasingh.live
  • Password: 12345678

Built With

Share this project:

Updates