How I Rebuilt My Portfolio with a Little Help from AI

What started as a messy side project is now a smarter, easier to maintain site, thanks to a configuration-driven approach and modern dev tools.

The Messy Start

Like many developers, my portfolio started as a quick weekend project. It was built with plain HTML, CSS, and JavaScript, functional but outdated, hard to maintain, and definitely not something I was proud of.

Every small update meant digging through multiple files, tweaking styles, and hoping nothing broke. So the project sat untouched for months… until I decided to finish it properly.

Before

Cleaning It Up with AI

The first step was cleaning up the mess. This time, I used AI as a coding partner to help with repetitive work like:

• Refactoring messy code
• Organizing files properly
• Making CSS more consistent
• Adding basic JavaScript structure

Tasks I had procrastinated for weeks were done in days. AI didn’t build the project for me, it simply accelerated the boring parts so I could focus on structure and decisions.

After

Making It Configuration-Driven

Next, I tackled the real problem: content was scattered everywhere. Adding a new project or skill meant editing multiple HTML files manually.

My solution was simple: create a single data.json file to store all the content. This one file now controls:

• Bio and personal info
• Project showcases
• Timeline (work, education, certifications)
• Skills and social links

{
  "_comment": "This file controls all content and navigation for the portfolio website.",
  "config": {
    "name": "...",
    "real_name": "...",
    "title": "...",
    "subtitle": "...",
    "summary": "...",
    "email": "...",
    "website": "...",
    "typedMessages": [...],
    "cvDriveId": "..."
  },
  "social": [
    {
      "platform": "...",
      "icon": "...",
      "url": "..."
    }
  ],
  "showcase": [
    {
      "id": "...",
      "title": "...",
      "backgroundImage": "...",
      "technologies": [...],
      "modalContent": {
        "title": "...",
        "description": "...",
        "links": [...]
      }
    }
  ],
  "skills": {
    "languages": [...],
    "cloud": [...],
    "web": [...],
    "devops": [...],
    "databases": [...],
    "ai": [...]
  },
  "timeline": [
    {
      "category": "...",
      "order": 0,
      "startDate": "...",
      "endDate": "...",
      "company": "...",
      "title": "...",
      "modalContent": {...}
    }
  ],
  "navigation": [
    {
      "id": "...",
      "enabled": true,
      "title": "...",
      "icon": "..."
    }
  ]
}

Now, updating the site means editing one file. Add a new project or certification to data.json, and the site updates automatically, no HTML editing required.

Upgrading the Tooling

With the structure in place, I modernized the build process using Vite.

The migration was smooth and made development much more enjoyable.

Automating the Workflow

To finish things off, I added CI/CD with GitHub Actions. Now every change follows this flow:

1. Update data.json
2. Commit and push
3. Tests run automatically, the site builds, and it deploys

No more manual steps, and no more deployment headaches.

Github Actions

What I Learned

✅ Centralize your content. A single JSON source of truth makes updates simple and scalable.

✅ AI is a helper, not a replacement. It speeds up development and removes friction.

✅ Modern tools matter. Vite, TypeScript, and CI/CD make even small projects more maintainable.

✅ Automation saves time. Build, test, and deploy steps should run without effort.

Connect with me on LinkedIn| GitHub| Portfolio