arvid.tech - Personal Website

A modern, performant personal website showcasing my work, thoughts, and professional experience. Built with cutting-edge web technologies and deployed on Cloudflare’s global edge network.

Project Overview

This website serves as my digital portfolio and blog, featuring:

• Blog section for technical articles and thoughts
• Project showcase with detailed case studies
• Professional experience timeline
• Skills and certifications display
• Contact and social links

Technical Architecture

Frontend Stack

• Astro 5 with server-side rendering and island architecture
• TypeScript for type safety and developer experience
• Tailwind CSS for utility-first styling
• React for interactive island components
• MDX with Astro Content Collections for type-safe content

Backend & Infrastructure

• Cloudflare Pages via @astrojs/cloudflare adapter
• Edge runtime for global performance
• Custom domain with SSL/TLS

Content Management

• MDX for rich content with React components
• YAML frontmatter for metadata
• Tag system for content organization

Key Features

Performance

• 98/100 Lighthouse Performance score
• < 1s First Contentful Paint
• Edge caching for global speed
• Minimal JavaScript via Astro’s island architecture

SEO & Accessibility

• Structured data (JSON-LD) for search engines
• Open Graph and Twitter Card meta tags
• Semantic HTML and ARIA labels
• Keyboard navigation support

Developer Experience

• Type-safe content with Astro Content Collections
• Hot reload during development
• ESLint and Prettier for code quality
• GitHub Actions for CI/CD

Development Process

Planning Phase

1. Requirements gathering and feature prioritization
2. Technology selection based on performance and DX needs
3. Architecture design for scalability and maintainability

Implementation

1. Project setup with Astro and TypeScript
2. Content structure design with Content Collections
3. Component development with Tailwind and React islands
4. Content migration from previous site

Deployment

1. Cloudflare Pages setup with custom domain
2. Environment configuration for production
3. Performance monitoring and optimization

Challenges & Solutions

Challenge: Global Performance

Solution: Deployed on Cloudflare Pages with edge caching and Astro’s zero-JS-by-default approach.

Challenge: Content Management

Solution: Implemented Astro Content Collections for type-safe MDX processing with automatic type generation.

Challenge: SEO Optimization

Solution: Built comprehensive meta tag system with structured data and Open Graph support.

Results

• 98/100 Lighthouse Performance score
• < 1s page load times globally
• 100% uptime on Cloudflare’s network
• Improved SEO with proper meta tags and structured data

Future Enhancements

• Dark/light theme toggle
• Newsletter subscription system
• Interactive project demos
• Swedish translations
• Advanced search functionality
• RSS feed generation

Technologies Used

• Framework: Astro 5
• Language: TypeScript
• Styling: Tailwind CSS
• Interactive Components: React (islands)
• Content: MDX + Astro Content Collections
• Deployment: Cloudflare Pages
• Version Control: Git + GitHub

---

This project demonstrates modern web development practices with a focus on performance, accessibility, and developer experience. The source code is open source and available on GitHub.