Astrom ⚡ Astro Portfolio & Blog Template

⚡ Astro Portfolio & Blog Template

A lightning-fast, developer-friendly website template built with Astro 5.7+ and Tailwind CSS 4.1+. Fully responsive, SEO-optimized, and ready to customize—perfect for designers, developers, and creators looking to launch a modern, personal site in minutes.

💡 Editable Hero Section

Let your visitors see the site as if it’s already theirs.

• Upload any image (desktop or mobile)
• Edit name/title text live
• Hue slider to customize the entire site’s brand color

👀 Simple logo creation

Your logo automatically gets created from your name's initials using the theme colors. Great for starters!

🕹️ Built-in Mini Game

Reward users with discount codes for winning a lightweight, embedded mini game—great for engagement. You can also play and get discount codes for any of my templates before your purchase! Desktop only!

🖼️ Swiper-Powered Sliders

Three slick sliders built with Swiper.js:

• Hobbies
• Portfolio items
• A CTA carousel linking directly to projects

🗂️ Essential Pages Included

• Home, About, Services, Portfolio, Blog, Contact, Search, 404
• Example detail pages for portfolio items and services

🧠 Supercharged Blog System

• Sticky bottom TOC with read percentage & next post reveal
• Expandable panel with post metadata, headings, tags, share buttons
• Pagination, draft support, and tag pages

🔍 Smart React Search

• Fuzzy matching
• Keyboard navigation
• Highlighted results

📬 React Contact Form

• Ready to use
• 250+ free monthly submissions
• Accessible and clean

📱 Smooth Mobile Menu

No bulky UI libraries—just clean, performant JavaScript and Swiper where needed.

🌘 Clean Dark Mode

Minimalist and accessible dark theme with a sleek visual flow.

📈 SEO & Social Ready

• Meta component for SEO + OG tags
• Sitemap and RSS feed included
• Figma file included for easy Open Graph customization

💨 Peak Performance

• Perfect Page Speed Scores
• Clean, modular code with zero bloat

🧰 Built With

• Astro 5.7.2
• Tailwind CSS 4.1.3
• React (used only for dynamic components)
• FuseJs (for search)
• SwiperJs (for sliders)
• No additional UI libraries

🎁 Bonus Features

🗃️ Centralized Data System

All key content lives in a single data/ folder, including:

• Hobbies
• Links/Socials
• Projects/Portfolio
• Services
• Skills
• Stats
• Testimonials

Edit your content in one place—no need to dig through components.

🧩 Flexible Blog Layouts

Whether your posts have images or not, you're covered:
Toggle POSTS_HAS_IMAGE in consts.ts to switch between card layouts site-wide—no design breaking, no extra effort.

👍 Grid, dot or any other svg backgrounds made easy

With the function in tailwind.config.js file you can create and use any svg as background.

💾 What’s Included

• Complete Astro project
• All of the used images and icons
• Example Figma OG image file
• Documentation with extensive code comments everywhere.
• Email support

🤝 Become an Affiliate – Earn 10%

Love the template? Share it and earn! Also browse others below, share one or all of them!
Join the affiliate program and receive 10% commission on every sale you refer.

✅ Get your own unique referral link
✅ Track clicks, conversions, and earnings
✅ Instant dashboard access after approval

Looking for a higher commission? Just mention it in your request—I'm open to custom deals.

👉 Sent request for affiliate program here