Web Portfolio Frameworks Astro + TailwindCSS

A minimal, easy-to-customize developer portfolio template built with Astro and TailwindCSS. No JavaScript in final build. 100/100 Google PageSpeed Score – for both mobile and desktop. SEO & Social Media Ready, includes OpenGraph, Twitter, and DublinCore metadata.

Why Choose This Portfolio Website?

• Attractive and Responsive Design: | This website is not only beautiful to look at, but is also responsive on all devices. Your portfolio will look perfect on desktop, tablet and mobile, ensuring visitors stay for long.
• High Performance: | Built with Astro, this website has very fast load times. Visitors don’t have to wait, and this contributes to a better user experience as well as better SEO rankings.
• Easy to Maintain and Manage: | With the use of Markdown for content, you can easily and quickly update and add new work, without requiring in-depth knowledge of coding.
• Optimasi SEO: | The structure produced by Astro makes the website search engine friendly, helping you gain more visibility and potential new customers.
• Ready to Access and Launch: | This portfolio website is ready to use and easy to Deploy straight away. You just need to upload it to the server of your choice, but I recommend using the Netlify App.

Feature :

• No bundled JavaScript – optimized for performance and speed.
• Fully responsive – mobile-friendly and adaptable across all devices.
• SEO & Social Media Ready – includes OpenGraph, Twitter, and DublinCore metadata.
• 100/100 Google PageSpeed Score – for both mobile and desktop.
• Code highlighting – clean and readable syntax with Shiki.
• Developer Portfolio & Projects Showcase – display your work with ease.
• Code Editor-Inspired Design – modern and developer-friendly aesthetics.

Tech Stack :

• Astro
• TailwindCSS
• Shiki

Getting Started :

# 1. Install depenencies

npm install

# 2. Run the development server

npm run dev

# 3. Build for production

npm run build

# Deploy the contents of the ./dist folder wherever you like.

Site & Domain Configuration :

Modify astro.config.mjs to update your site settings, including metadata for SEO.

Theme Customization :

Adjust the primary theme color in tailwind.config.js, to fit your branding.

Updating Content & SEO :

Edit the Frontmatter variables in these files

src/layouts/Layout.astro – General page info (title, SEO, etc.)

src/components/Socials.astro – Update your social media links.

src/components/Profile.astro – Personal profile information.

src/components/ContentProjects.astro – Projects/portfolio section content.

src/components/ContentAbout.astro – About section content.

Profile Picture :

Replace /src/assets/profile.png with your own image

Logo & OpenGraph Image :

Update these files

/public/img/logo.svg (your logo)

/public/img/meta.png (your OpenGraph image)

Need a free OpenGraph image?

https://tailwind-generator.com/og-image-generator/generator

Sitemap & Robots.txt :

Adjust /public/robots.txt to match your domain.

Live Preview | https://demo-portfolio-fs.netlify.app

Bonuses :

Additionally, I will provide technical support for 1 month after purchase to help you with the transition and adjustment.

🌟 Support My Journey! 🌟

Donate : https://sociabuzz.com/xyzlivy/donate