How I Build My Personal Website

---

I recently rebuilt my personal website using modern web technologies and AI-assisted development. In this post, I'll share my experience and thought process behind the technical decisions.

Tech Stack Selection

After careful consideration, I chose the following technologies:

• Remix App Router: For its excellent server-side rendering and modern routing capabilities
• React: The go-to library for building interactive UIs
• TypeScript: To ensure type safety and better developer experience
• Shadcn UI: A collection of beautifully designed, accessible components
• Tailwind CSS: For rapid styling and consistent design
• Supabase: As my backend service for data storage and authentication

AI-Assisted Development with Cursor

One of the most interesting aspects of this project was leveraging Cursor, an AI-powered IDE. Here's how it transformed my development workflow:

1. Code Generation and Refactoring

Cursor's AI agent helped me:

• Generate boilerplate code for components
• Refactor complex functions into more maintainable pieces
• Implement TypeScript interfaces and types
• Debug and fix type errors

Here's an example of a component structure that Cursor helped me design:

interface GreetingProps {
  name: string;
  role?: string;
}

export function Greeting({ name, role }: GreetingProps) {
  return (
    <div className="p-4 rounded-lg bg-primary/10">
      <h2 className="text-2xl font-bold">Hello, {name}!</h2>
      {role && <p className="text-muted-foreground">Role: {role}</p>}
    </div>
  );
}

2. Project Structure

With Cursor's guidance, I organized my project following best practices:

app/
├── components/     # Reusable UI components
├── lib/           # Utility functions and shared logic
├── routes/        # Remix route components
├── styles/        # Global styles and Tailwind config
└── types/         # TypeScript type definitions

3. Component Architecture

I followed a modular approach, breaking down the UI into:

• Layout components (header, footer, navigation)
• Feature components (blog posts, projects, contact form)
• Shared UI components (buttons, cards, inputs)

Key Features and Implementation

1. Blog System

• Markdown-based blog posts with frontmatter
• Syntax highlighting using highlight.js
• Dynamic routing for blog posts
• Tag system for categorization

2. Project Showcase

• Interactive project cards
• Live demos integration
• GitHub repository links
• Technology stack badges

3. AI Integration

I've integrated several AI features:

• AI-powered blog post suggestions
• Code snippet generation
• Interactive AI demos (like the Orbito game - try it here!)

Development Process

My development workflow involved:

1. Planning Phase

   • Wireframing with Figma
   • Component hierarchy design
   • Data model planning with Supabase

2. Implementation Phase

   • Setting up the Remix project
   • Implementing core components
   • Building the blog system
   • Adding interactive features

3. AI Assistance

   • Using Cursor's AI for code generation
   • Leveraging AI for debugging
   • Getting suggestions for optimizations
   • Automated testing setup

Lessons Learned

1. AI as a Development Partner

   • AI agents can significantly speed up development
   • They're excellent for boilerplate and repetitive tasks
   • Still need human oversight for architecture decisions

2. Modern Web Development

   • Server components can greatly improve performance
   • TypeScript is worth the initial setup time
   • Component libraries save significant development time

3. Performance Considerations

   • Server-side rendering is crucial for SEO
   • Image optimization is important for Core Web Vitals
   • Code splitting helps with initial load times

What's Next?

I plan to continue improving the site with:

1. More interactive AI demos
2. Enhanced blog features
3. Performance optimizations
4. Integration with more AI tools

Feel free to explore the site and try out the interactive features. The source code is available on my GitHub, and I'm always open to suggestions and improvements!