Building My Personal Website: A Journey from Domain to Deployment

Building My Personal Website: A Journey from Domain to Deployment

Introduction

In this post, I’ll share my experience of building my personal website. From choosing the right domain to selecting the perfect framework, I’ll walk you through the entire process and the decisions that shaped the final result.

The Beginning: Domain and Hosting

The journey started with domain registration and hosting setup:

• Purchased domain through Cloudflare
• Set up DNS records and SSL certificates
• Configured Cloudflare’s security features
• Established a reliable hosting solution

Framework Selection: Why Astro?

After researching various options, I chose Astro for several reasons:

• Excellent performance with minimal JavaScript
• Built-in support for multiple frameworks
• Great developer experience
• Strong community support
• Perfect for content-focused websites

Design Decisions

The website’s design went through several iterations:

Initial Structure

• Home page with personal introduction
• About page for detailed background
• CV/Resume section
• Publications and research work
• Blog section for sharing thoughts
• Projects showcase

Visual Design

• Clean, academic-focused layout
• Card-based design for projects and blog posts
• Responsive design for all devices
• Dark/light mode support
• Subtle animations for better UX

Technical Implementation

Core Features

1. Responsive Navigation

   • Mobile-friendly menu
   • Smooth transitions
   • Social media integration

2. Content Management

   • Markdown support for blog posts
   • Organized content structure
   • Easy-to-maintain format

3. Performance Optimization

   • Fast loading times
   • Optimized images
   • Efficient routing

Key Components

• Header with navigation
• Footer with social links
• Card components for projects
• Publication list with year separators
• Blog post templates
• Responsive image handling

Challenges and Solutions

Mobile Optimization

• Implemented responsive design
• Optimized navigation for small screens
• Adjusted spacing and typography

Content Organization

• Created clear content structure
• Implemented proper metadata
• Set up efficient routing

Performance

• Optimized image loading
• Implemented lazy loading
• Reduced JavaScript bundle size

Future Plans

The website is continuously evolving:

• Adding more interactive features
• Expanding blog content
• Enhancing mobile experience
• Implementing analytics
• Adding more personalization options

Lessons Learned

1. Start with a clear content structure
2. Focus on performance from the beginning
3. Make mobile-first decisions
4. Keep the design simple and clean
5. Plan for scalability

Conclusion

Building a personal website is an ongoing process. While the initial setup is complete, there’s always room for improvement and new features. The key is to maintain a balance between functionality, performance, and user experience.

Resources

• Astro Documentation
• Cloudflare Documentation
• Tailwind CSS
• Markdown Guide

This post will be updated as the website evolves with new features and improvements.