A modern, minimalist portfolio template built with Astro and Tailwind CSS. Perfect for developers looking to showcase their skills, experience, and projects in a clean, professional way.
To view a live preview of the site, click here.
- Astro - Static site generator for modern web apps
- Tailwind CSS v4 - Utility-first CSS framework
- Tabler Icons - Free and open source icons
- TypeScript - For type-safe configuration
The template is designed to be easily customizable through the src/config.ts file. This single file controls:
- Personal Information: Name, title, description
- Accent Color: Primary color theme (changing this will change the accent color site wide)
- Social Links: Email, LinkedIn, Twitter, GitHub (all optional)
- About Section: Personal bio/description
- Skills: List of technical skills
- Projects: Project showcase with descriptions and links
- Experience: Work history with bullet points
- Education: Educational background and achievements
If skills, projects, experience, or education are removed from the config, those sections will be hidden entirely.
The template uses Tabler Icons for all icons. If you wish to add more icons and have it look consistent with what's already there, you can browse through their extensive icon library.
devportfolio/
├── public/
│ └── favicon.svg # Site favicon
├── src/
│ ├── components/ # Astro components
│ │ ├── About.astro # About section
│ │ ├── Education.astro # Education section
│ │ ├── Experience.astro # Work experience section
│ │ ├── Footer.astro # Site footer
│ │ ├── Header.astro # Navigation header
│ │ ├── Hero.astro # Hero/intro section
│ │ └── Projects.astro # Projects showcase
│ ├── pages/
│ │ └── index.astro # Main page layout
│ ├── styles/
│ │ └── global.css # Global styles
│ └── config.ts # Site configuration
├── astro.config.mjs # Astro configuration
├── package.json # Project dependencies
├── tailwind.config.js # Tailwind configuration
└── tsconfig.json # TypeScript configuration