Louai | Portfolio Website

Astro TailwindCSS TypeScript Prettier Framer Motion

Minimalistic Portfolio Website

Screenshot

Overview

This is a sleek, modern, and highly customizable portfolio template built using Astro. Designed with performance, accessibility, and SEO in mind, it offers a clean and minimalistic experience while providing all the essential features needed for a professional online presence.

Features

  • ๐ŸŒ™ Light & Dark Mode โ€“ Seamlessly switch between themes.
  • ๐Ÿ“ฑ Mobile-Friendly โ€“ Fully responsive design.
  • ๐Ÿ“– Blog Section โ€“ Supports MDX with automatic table of contents (TOC) and pagination.
  • ๐Ÿท๏ธ Categorized Articles โ€“ Filter posts by series or category.
  • ๐Ÿš€ Projects Showcase โ€“ Detailed overview of projects with images and descriptions.
  • ๐Ÿ–ผ๏ธ SEO & Open Graph โ€“ Optimized metadata and dynamic OG images.
  • ๐ŸŽจ Sleek & Modern Design โ€“ Crafted with a focus on simplicity and elegance.

Tech Stack

Built using the following technologies:

  • Astro โ€“ Blazing fast static site generation.
  • TailwindCSS โ€“ Highly customizable utility-first CSS framework.
  • TypeScript โ€“ Strict type safety for maintainability.
  • Prettier โ€“ Code formatting for consistency.
  • Framer Motion โ€“ Smooth animations and transitions.

How to Use

Customization is simple and straightforward:

  • All customizable data (name, links, content, etc.) is stored in lib/constants/ dir.
  • Images can be replaced in the public folder.
  • OG images for blogs and projects are stored in public/og/.
  • Theming follows shadcnโ€™s color palette and can be easily tweaked.

Contribute & Support

Love the project? Give it a โญ on GitHub! Contributions are always welcomeโ€”whether itโ€™s fixing a bug, adding a new feature, or even correcting a small typo.

๐Ÿ‘‰ Check out the repo and make your first pull request!


Built with โค๏ธ using Astro.