How I built my portfolio site using ChatGPT

As a product designer with some basic coding skills, I wanted more control over my portfolio site. My previous site was built on WordPress, and while it worked, it felt restrictive. I wanted to go beyond templates and gain full control over the design and functionality. Plus, I wanted to keep costs low, ideally only paying for the domain.

⚠️ Challenges with previous platforms

Using WordPress had its frustrations. Managing the site was time-consuming, and it was vulnerable to malware attacks, which added extra stress. I also had to renew the SSL certificate each year, and keeping plugins and themes updated felt like a constant burden. I realised that these hassles were holding me back from having the streamlined, flexible portfolio I wanted.

🔨 Why build from scratch?

Starting from scratch would let me create a simpler, lightweight site without relying on plugins or pre-made templates. It was also a chance to gain more coding experience by learning how to structure and style my site on my own. My goal was to build something fully under my control, with minimal upkeep and just the basic cost of the domain.

🤖 Enter ChatGPT

Not knowing where to start, I turned to ChatGPT for advice. After a few conversations, I realised that using a static site generator and free hosting options could give me everything I needed to create a fast, modern portfolio without the usual expenses or technical hassle. ChatGPT showed me how a simple tech setup could help me create the site I envisioned.

🧰 The tech stack

After I shared my goals, ChatGPT recommended a simple, budget-friendly stack that would give me control without the usual complexity. Here’s what I settled on:

• 11ty: A fast, flexible static site generator, ideal for a custom portfolio. It allows me to create custom layouts and templates without heavy code, and I can add content easily using Markdown, a simple text format.
• GitHub: A version control system that acts as my code repository, storing and tracking changes I make to the site. It also integrates seamlessly with Netlify, making it easy to manage updates and improvements over time.
• Netlify: A hosting platform that makes it easy to deploy and manage my site. When I push changes to GitHub, Netlify automatically updates my live site. It includes free SSL for security, scalability options, and a free plan that’s ideal for personal sites like portfolios, keeping my costs low and maintenance minimal.

🛠️ The build process

Once I had my tech stack in place, it was time to start building.

First, I set up 11ty to generate my site’s basic structure. 11ty creates static HTML files, which makes the site fast and lightweight. ChatGPT guided me on how to create layouts and templates using Markdown, keeping everything simple and easy to edit.

Next, I uploaded my project to GitHub, a safe place to store my code and track any changes I made, so I could experiment without worrying about losing work.

Finally, I connected the project to Netlify, which handled deployment. Each time I pushed changes to GitHub, Netlify would automatically update my live site.

🌟 Final thoughts

Building my portfolio from scratch was both challenging and rewarding. By stepping away from template-based platforms and using a simple, cost-effective tech setup, I gained complete control over my site’s design, performance, and functionality. I learned a lot about coding, best practices, and how to make it accessible for all users. The final result is a personalised portfolio that’s easy to update, free to host, and truly reflects my work as a designer.

If you’re considering coding your own portfolio, I hope this gives you the confidence and ideas to get started. It’s a great way to learn, build skills, and create something truly your own.