Building The Data Taylor: From Idea to Live Site with AI

A non-developer's honest account of building a personal website with Claude, Cursor and GitHub, and what I learned along the way.

The Brief

I wanted a home for my data work. Somewhere to showcase my Tableau portfolio, write about tools I use every day: Tableau, Alteryx, Databricks. I wanted to build something that felt like me. I had a name, The Data Taylor, a logo, and a rough idea. What I didn't have was any web development experience.

What followed was a crash course in modern AI-assisted development, and honestly, it was more fun than I expected.

The Tools

Before we get into the journey, here's the full stack of what we used:

• ClaudeAI assistant for planning, prompting, writing and problem solving.
• CursorAI-powered code editor that built the actual website.
• Git & Git BashVersion control to track changes locally.
• GitHubCloud storage for the code.
• GitHub PagesFree hosting that turns the code into a live website.
• Live ServerA Cursor/VS Code extension for previewing changes instantly.

Total cost: £0. Everything above is free. (With the caveat I have paid for my own domain name.)

Step 1: The Prompt that Started Everything

Rather than jumping straight into Cursor and hoping for the best, I started with Claude to build a detailed brief. The idea was simple: if you give an AI vague instructions, you get a vague result. So we spent time crafting a prompt that covered:

• The brand colours (extracted directly from the logo)
• Typography choices that matched the logo's serif style
• Every page needed: Home, Portfolio, Blog, About
• The specific sections within each page
• Technical requirements: pure HTML, CSS and vanilla JavaScript, no frameworks

The prompt ended up being over 200 lines long. That level of detail is what separates a generic AI-generated site from something that actually feels intentional.

Step 2: Getting the Code Live

Cursor generated the whole site (HTML, CSS, JavaScript) in one go. The next challenge was getting it online. This is where Git and GitHub came in, and it's fair to say the learning curve here was the steepest part of the whole process.

A few things that caught me out:

• Git wasn't installed. Windows doesn't come with it. I had to download and install it separately from git-scm.com.
• The terminal needs to be in the right folder. Every time you open Git Bash you need to navigate to your project folder first, otherwise nothing works.
• Spaces in folder names cause problems. The project was saved in a folder called "The Data Taylor" and the space required special handling in commands.
• Case sensitivity. GitHub Pages runs on Linux, which treats Logos and logos as completely different folders. Images that worked locally broke on the live site because of a capital letter.

The three commands you end up using constantly once everything is set up:

cd /c/Users/rober/Documents/The\ Data\ Taylor
git add .
git commit -m "describe your change"
git push

Step 3: Making It Feel Like Mine

This is where the real fun started. Cursor built a solid foundation but making it feel like The Data Taylor required a lot of iteration. Some of the things we tweaked:

• The hero carousel. The homepage features a rotating carousel of my Tableau Public thumbnails. Getting this working properly involved compressing 13MB of PNG images down to JPGs (a Python one-liner in the terminal), fixing folder capitalisation issues, and building a JSON manifest file that maps each image to its Tableau Public URL so visitors can click through. This json manifest build became a whole project and learning experience in itself, where I had to create a python script to do what was required, pulling from Tableau Public API to get the data I needed, then building the manifest file to use in the website.
• The animated bar chart background. Rather than the default diagonal line animation Cursor generated, we replaced it with faint green bar chart bars that rise from the bottom of the hero on page load. A subtle nod to the data theme without screaming about it.
• The gradient border on the carousel. A left-to-right fade from bright green (#00C853) to deep forest green (#1B6B3A). A small detail but one that ties directly to the brand colours.
• The expertise cards. Replaced generic SVG icons with real product logos for Tableau, Alteryx, Databricks and AI. Sounds simple, broke on the live site three times for different reasons.

Step 4: Learning to Edit CSS Yourself

One of the most valuable things that came out of this process was learning to make small changes without needing to ask an AI every time. CSS, the language that controls how everything looks, turns out to be pretty readable once you know what you're looking for.

A few things worth knowing:

• margin-top pushes an element down by adding space above it. Negative values pull it up.
• gap controls the space between elements inside a flex or grid container.
• padding adds space inside an element.
• The M symbol next to files in Cursor means Modified. You have unsaved (unpushed) changes.

For finding the right thing to edit, Ctrl+F inside the CSS file and searching for the class name you can see in the HTML is almost always the fastest route.

Step 5: The Content

A website is only as good as what's in it. For the About page we pulled together experience from LinkedIn, Tableau Public and a CV, then rewrote it to sound like an actual person rather than a job application.

For the blog, which you're reading right now, the approach is to write about things I genuinely know and care about. Iron Viz journeys. Alteryx layout opinions. Tableau calculated fields that make people say "how did you do that?".

The section sign-off on blog posts? I ditched "Conclusion" in favour of "The Last Thread", a small editorial touch that fits a site called The Data Taylor a bit better.

What It All Cost

The only thing that costs money is a custom domain if you want one, thedatataylor.com rather than thedatataylor.github.io. Even that's optional.

The Last Thread

Could I have paid someone to build this? Yes. Would it have looked better on day one? Probably. But I wouldn't have learned how CSS grid works, why image file paths are case sensitive on Linux, or how to push code from a terminal.

The honest truth about AI-assisted development is that it dramatically lowers the barrier to entry, but it doesn't remove the need to understand what's happening. The best results came when I could describe exactly what I wanted, understand roughly why something wasn't working, and make small tweaks myself rather than regenerating everything from scratch.

The Data Taylor website isn't finished. It probably never will be. But it's live, it's mine, and every section of it was deliberately crafted, which feels about right for a site called Crafted Insights.

Built with Claude, Cursor, GitHub Pages and a lot of patience with Git Bash.

Rob.