A Modern Approach to Building Our Online Home
We recently gave our website a complete overhaul, and we wanted to share how we used AI tools to build something we’re truly proud of. Here’s our journey from concept to launch.
The Goal
We wanted a site that was:
- Modern and clean - No outdated themes
- Fast and lightweight - No unnecessary bloat
- Maintainable - Easy to update and manage
- Personal - Reflecting our style and story
Choosing the Stack
We settled on:
- Jekyll for static site generation
- Tailwind CSS for styling
- Formspree for the subscription form
- GitHub Pages for hosting
This combination gave us everything we needed without unnecessary complexity.
The AI-Assisted Development Process
This is where things got interesting. We used GitHub Copilot to:
1. Design the Layout
We described what we wanted, and Copilot generated clean HTML structures with Tailwind classes. No guessing at classnames — just intelligent suggestions based on context.
2. Create Reusable Components
Instead of copying header and footer code across every page, we extracted them into Jekyll includes. Copilot helped us understand the best practices for component organization.
3. Build Responsive Pages
Pages like our Travel and Projects sections were built quickly with Copilot suggesting responsive grid layouts and animations.
4. Set Up Project Structure
We organized our assets, created a .gitignore, and generated a comprehensive README.md — all guided by AI suggestions that understood our project type.
The Benefits of Using AI
Speed: What might have taken days took hours. We could iterate quickly and focus on content rather than boilerplate.
Learning: Seeing well-written code suggestions helped us understand best practices we might not have known.
Consistency: AI helped maintain consistent patterns across the site.
Accessibility: Suggested semantic HTML and proper ARIA attributes.
What We Kept Manual
We made conscious decisions about what NOT to automate:
- Content creation - Our words, our stories
- Design decisions - Our aesthetic choices
- Configuration - Our personal setup
Lessons Learned
- AI is a collaborator, not a replacement - It’s most powerful when you know what you want
- Clarity in requests matters - Specific prompts yield better results
- Review everything - AI-generated code needs human judgment
- Documentation is your friend - Having a good README saved us time later
The Result
We’re incredibly happy with how our site turned out. It’s fast, it’s beautiful, and most importantly, it’s ours. We built it together, with some helpful guidance from AI.
For Others Considering This Approach
If you’re building a website and thinking about using AI tools, here’s my advice:
- Start with a clear vision
- Use AI for the heavy lifting (structure, boilerplate)
- Maintain creative control over design and content
- Don’t be afraid to ask for alternatives and iterations
- Test everything thoroughly
The future of web development isn’t “humans vs AI” — it’s about humans using AI tools to build better things faster.