Modern Astro Portfolio

A personal portfolio website built with Astro, Tailwind CSS and TypeScript, with performance optimisation and integrated SEO.

January 15, 2024 • afrolino02 • Web Development
#astro#portfolio#frontend#seo#performance#web development
View Repository View Demo

📋 Description

A personal portfolio website built with Astro, Tailwind CSS and TypeScript, with performance optimisation and integrated SEO.

Status
completed
Difficulty
intermediate
Version
2.0.0
License
MIT
Last updated
February 20, 2024

🛠️ Tech Stack

Astro
TypeScript
Tailwind CSS
Vercel
ESLint
Prettier
sass

✨ Features

⚡

Optimal performance

Perfect Lighthouse scores (100/100 on performance, SEO, accessibility)

📱

Responsive design

Fully responsive on all devices with a Mobile-First approach

🔍

Integrated SEO

Auto meta tags, generated sitemap.xml and optimised Open Graph

🌙

Dark mode

Toggle between light and dark mode with localStorage persistence

Project Description

This project is my personal portfolio built with Astro, taking advantage of static site generation and the performance optimisation that this framework offers.

Main objectives

  1. High performance: Achieve the best scores on web analysis tools.
  2. User experience: Smooth navigation and attractive design.
  3. Maintainability: Clean and well-documented code.
  4. SEO: Optimal positioning on search engines.

Technical configuration

Project structure

src/
├── components/
│   ├── ui/
│   ├── layout/
│   └── sections/
├── content/
│   ├── projects/
│   └── blog/
├── layouts/
├── pages/
│   ├── index.astro
│   ├── blog/
│   │   └── [slug].astro
│   └── projects/
│       └── [slug].astro
└── styles/

Tech stack

  • Astro 6.x for the static site framework
  • TypeScript for type-safe code
  • Tailwind CSS for utility-first styling
  • Vercel for deployment and CI/CD
  • ESLint + Prettier for consistent code style
  • Sass for nested styles where needed

Features

  • ⚡ Perfect Lighthouse score
  • 📱 Mobile-First responsive
  • 🔍 Built-in SEO with sitemap
  • 🌙 Dark mode with localStorage
  • 🌍 i18n support (ES/EN)
  • 📚 Markdown content with syntax highlighting
  • 🎨 Custom design system with CSS variables

Conclusion

A modern portfolio built with the best practices of 2024: typesafe, fast, accessible, and easy to maintain.

Similar projects