Building My Personal Website with 11ty, HTML, CSS, JS, and AI-Powered Tools

The story behind how I built DuncanHann.com

For years, I relied on Squarespace to manage my personal website. It's a fantastic platform with beautifully designed templates and a simple UI, but as I started to explore web development more seriously, I felt increasingly limited by its constraints. I wanted more flexibility and the opportunity to sharpen my coding skills—so I decided to move away from Squarespace and build my site from scratch using 11ty (Eleventy), HTML, CSS, JavaScript, and Cursor Composer, with AI tools like ChatGPT and Claude Sonnet assisting me along the way.

Why I Moved Away from Squarespace and CMS-Based Solutions

Squarespace is great for quickly launching a professional-looking site, but I found myself bumping into the following frustrations:

• Template limitations – While the templates are visually stunning, they can be restrictive if you want to tweak things beyond what the UI allows.
• Customisation challenges – I wanted to experiment with different layouts and interactions, which required more flexibility than Squarespace's editor could offer.
• A desire to improve my coding skills – I needed a real-world project to apply my HTML, CSS, and JavaScript knowledge.
• Avoiding a full CMS – I didn't want to deal with the complexity of managing a database-driven CMS like WordPress.

Why I Avoided WordPress and Other CMS Platforms

As much as CMS platforms like WordPress are powerful, I found them:

• Cumbersome – Plug-ins often introduce unnecessary complexity, requiring constant updates and maintenance.
• Expensive – Many essential plug-ins are premium, adding to costs.
• Limiting – While plug-ins expand functionality, they often introduce bloated code and restrict flexibility when fine-tuning layouts or performance.

Instead, I wanted something lightweight, flexible, and easy to maintain, which led me to 11ty.

Why I Chose 11ty

I considered several static site generators, including Jekyll, Hugo, and Next.js, but 11ty (Eleventy) stood out because:

• It's lightweight and flexible, allowing me to structure my site however I want.
• It uses plain HTML, CSS, and JavaScript, making it a great way to reinforce my front-end skills without unnecessary complexity.
• It's static, meaning the site loads fast with no reliance on databases or server-side processing.
• It integrates well with Markdown, allowing me to write content easily without a CMS.

11ty Makes Content Management Simple

Unlike full CMS platforms, 11ty lets you create your site structure and styling from scratch while making content updates incredibly straightforward.

• Adding a new page or blog post is just a matter of duplicating an existing file, renaming it, and updating the front matter (metadata).
• There's no complex database setup—each page is just a file in your project directory.
• This makes 11ty ideal for static websites and blogs where you want full control over content and design but without CMS overhead.

My Tech Stack

To build the site, I'm using:

• 11ty (Eleventy) – A static site generator that provides flexibility and speed.
• HTML, CSS, and JavaScript – The core of my site's structure, design, and interactions.
• Cursor Composer – An AI-powered code editor that helps with multi-file changes and complex coding tasks.
• ChatGPT & Claude Sonnet – AI assistants that help with debugging, generating code snippets, and explaining concepts.
• Git & GitHub – Version control and hosting my code.
• Vercel V0 – A powerful deployment and AI-based UI generation tool.

Using Cursor Composer for Multi-File Code Changes

More recently, I've been using Cursor Composer to create complex, multi-file changes with detailed prompts, suggested files, screenshots, and references to code snippets or external documentation.

This has been an excellent tool for Product Managers (PMs) like myself to:

• Quickly create functioning demos of ideas.
• Show developers a rough working version of a concept rather than just describing it.
• Test hypotheses and see if an approach is viable before handing it over to developers.

Claude Sonnet in Cursor Composer is far superior to GPT-4o-mini in understanding complex coding requests, making it my go-to for refining changes and getting better, structured output.

Vercel V0: A Game-Changer for UI Development

I've also been experimenting with Vercel V0, a fantastic tool for generating React components and building UI quickly. Combined with Cursor Composer, it makes prototyping and iterating on UI components incredibly efficient.

How AI Has Helped Me Learn and Build Faster

Since I'm still learning, having AI as a coding assistant has been invaluable. I've used ChatGPT and Claude Sonnet for:

• Debugging errors – I can paste an error message and get a quick, clear explanation.
• Explaining concepts – When I need a breakdown of how a particular JavaScript function works or best practices in CSS, AI helps me understand it.
• Generating boilerplate code – AI helps me quickly get a starting point for scripts, layouts, or UI components.
• Learning best practices – AI tools help me structure my code more efficiently.

What's Next?

I'm still iterating on my site, but my next steps include:

• Enhancing accessibility – Improving keyboard navigation, ensuring proper colour contrast, adding ARIA attributes, and testing with screen readers to make the site more inclusive.
• Adding JavaScript interactions – Implementing animations, a dark mode toggle, and interactive elements while keeping accessibility in mind.
• Optimising performance – Improving load speeds with compressed images and efficient code.
• Deploying the site with Vercel – Using modern tools for continuous deployment.

As I continue refining my skills, accessibility is an area I want to expand my knowledge of, ensuring that my site is usable for as many people as possible.

Useful Resources

📌 11ty (Eleventy) Official Site
📌 Cursor Composer
📌 Vercel V0
📌 ChatGPT & Claude Sonnet
📌 GitHub Docs

🚀