My First Portfolio Blog with Astro + Tailwind

Introduction to building a personal portfolio website using Astro, Tailwind, and Markdown for educational purposes.

Hello everyone, I’m Isaac Talb. This is my very first blog post on my portfolio website, and I’d like to introduce how I built this project — so that newer developers can learn, copy, and apply it for their educational purposes.

Project Stack

For this site, I combined three powerful tools:

Astro → A modern static site builder, perfect for content-heavy sites.
Tailwind CSS → A utility-first CSS framework that keeps styling fast and consistent.
Markdown → Simple and developer-friendly for writing blog content.

This combination allows me (and you) to create a clean, fast, and easily maintainable portfolio website.

Project Implementation

Here’s a quick overview of how I set up this project:

Created an Astro project → npm create astro@latest my-portfolio
Integrated Tailwind CSS → followed Astro’s official Tailwind integration guide.
Configured Markdown support → blogs are written directly in .md files under src/content/blog.
Used a layout component → every blog post uses a shared layout (MainLayout.astro).
Deployed to GitHub Pages → free hosting for static sites.

With these steps, you can have a working personal portfolio and blogging system in no time.

Preview

Here’s a preview image of the project setup:

I built this not just for myself, but also to inspire newer developers who want to learn how to:

Build a simple yet professional portfolio.
Write content in Markdown.
Deploy projects publicly for free.

You are welcome to copy this project structure and modify it for your own learning. Please note this is meant for educational purposes only.

Live Demo

Check out the live project here: Portfolio Website Demo

Closing

This is just the beginning. In my next blog post, I’ll provide a more complete guide on how to write Markdown content so that anyone using this project can easily create their own posts.