The Spark

This website was built by someone with zero coding experience. No computer science degree, no bootcamp, just a vision to showcase projects and the willingness to learn. Here’s the honest story of how it came together.

The challenge? Understanding what a website even is behind the scenes. After researching modern web development, I chose Astro as the framework—not because I understood it fully, but because it promised simplicity for content-focused sites like portfolios.

With AI assistants like GitHub Copilot, I learned by doing. Every error message became a learning opportunity. Every successful feature felt like a small victory.

---

The Blueprint

How do you build a portfolio website when you’ve never coded before?

The plan was simple:

1. Input: Project ideas, content, and a clear vision of what I wanted to showcase
2. Pipeline: Learn enough about web frameworks, styling, and deployment to bring it to life
3. Output: A clean, fast website that displays projects professionally

Technical Architecture:

• Framework Layer: Astro handles static site generation and routing
• Styling Layer: Tailwind CSS provides utility-first design system
• Content Layer: MDX files for rich, component-enhanced project documentation
• Deployment Layer: Cloudflare Pages for global hosting

The Flow:

Design Vision
  ↓ (Research frameworks)
Choose Astro
  ↓ (Set up project structure)
Build Components
  ↓ (Navigation, project cards, layouts)
Style with Tailwind
  ↓ (Responsive design, consistent theme)
Write Project Content (MDX)
  ↓ (Test locally)
Deploy to Cloudflare
  ↓
Live Website ✨

---

The Build

The Constraint: Built on a learning curve with no prior experience. Simplicity and modern tooling made it possible.

Tech Stack:

• Astro — Static site generator optimized for content-focused sites
• TypeScript — Type safety to catch errors before they become bugs
• Tailwind CSS — Utility-first styling for rapid, consistent design
• MDX — Markdown with embedded components for rich project pages
• pnpm — Fast, efficient package management
• Cloudflare Pages — Global deployment with automatic builds

The Learning Journey:

Phase 1: Understanding the Foundation

• Figuring out how to run development servers without breaking things
• Making sense of file structures and routing—where does each file go and why?
• Reading documentation, googling error messages, and slowly piecing together how it all works

Phase 2: Building the Structure

• Creating a navigation bar that actually appears on every page
• Designing reusable project cards so I didn’t have to repeat code
• Understanding layout templates and component composition

Phase 3: Making It Look Good

• Learning Tailwind utilities—what’s the difference between flex and grid? Why does spacing matter so much?
• Wrestling with responsive design until it looked decent on phones, tablets, and desktops
• Building a consistent visual theme that didn’t look like a patchwork

Phase 4: Going Live

• Writing project documentation in MDX and embedding interactive elements
• Configuring Cloudflare deployment (this took many failed attempts)
• Testing everything, fixing bugs, and refining countless small details

---

The Challenges

Deployment Configuration: Getting the site live on Cloudflare took multiple attempts. Environment variables, build commands, and routing rules were confusing at first.

Responsive Design: What looked perfect on desktop broke on mobile. Learning to think in breakpoints and test across devices was essential.

Version Control: Git felt overwhelming initially—commits, branches, merges. But it became invaluable for tracking changes and rolling back mistakes.

TypeScript Errors: Strict typing caught bugs early, but understanding what the error messages meant required patience and AI assistance.

---

The Lessons

• You don’t need to be a “natural coder” to build functional websites. Modern tools lower the barrier significantly.
• Break problems into small steps. One component, one page, one feature at a time.
• AI assistants are game-changers for beginners. They translate ideas into code and explain error messages in plain language.
• Real learning happens through building, breaking, and fixing. Documentation helps, but hands-on practice is what sticks.

---

What’s Next

• Adding more projects and detailed case studies
• Improving accessibility features (ARIA labels, keyboard navigation)
• Experimenting with animations and micro-interactions
• Refining the design and user experience
• Continuing to learn and grow

---

If you’re considering building your own site and feel intimidated—don’t be. Start small, use the tools available, and remember: everyone’s first website is imperfect. This one certainly is, but it’s mine, and it works.