Portfolio

A minimal, highly customizable, and performant personal portfolio template built with Astro, React, and Tailwind CSS.

---

Demo | Astro Themes | ReactBits Showcase

Features

• 🚀 Blazing fast performance powered by Astro
• 🎨 Beautifully styled with Tailwind CSS
• 🎵 Spotify integration for showcasing your favorite album
• ✉️ Working contact form powered by Formspree
• ⚛️ Interactive UI including the <LetterGlitch /> component from ReactBits.dev

Stack

Frontend

Tools

Configuration Guides

Show your favorite Spotify album (or your own)

1. Choose your Spotify album
2. Access the share options
3. Select 'copy embed code'

<iframe src="https://open.spotify.com/embed/album/YOUR_ALBUM_ID_HERE" style="border-radius:12px border:0;" class="w-full h-40" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>

4. Insert the embed code on src/Components/footer.astro

Set up contact form (Formspree)

1. Create an account on Formspree
2. Create a new project/form and copy your form endpoint URL (it looks like https://formspree.io/f/your_id)
3. Open the src/Components/contact.astro file
4. Replace the action attribute in the <form> tag with your endpoint URL:

<form action="https://formspree.io/f/YOUR_FORM_ID_HERE" method="POST">

Customization

To make this portfolio your own, you can edit the following files:

• Global Settings: Update metadata and title in src/layouts/Layout.astro.
• Content: Modify the text, links, and details inside the components in src/Components/ (e.g., home.astro, projects.astro, contact.astro).
• Styling: The design uses Tailwind CSS. You can adjust the theme configuration in tailwind.config.mjs and custom styles if needed.

Project structure

public/
└── svg/
src/
├── Components/
|    ├── contact.astro
|    ├── footer.astro
|    ├── home.astro
|    ├── logoWall.astro
|    ├── nav.astro
|    └── projects.astro
├── layouts/
|    └── Layout.astro
├── React/
|    ├── LetterGlitch.tsx
|    ├── LikeButton.tsx
|    └── SkillsList.tsx
└── pages/
     └── index.astro

Local configuration

Prerequisites

• Node.js (v18 or higher recommended)
• npm or pnpm

1. Clone the repo:

git clone https://github.com/Gothsec/Astro-portfolio

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

Deployment

This project is built with Astro and can be easily deployed to Vercel, Netlify, or GitHub Pages. For the easiest setup, push your repository to GitHub and import it directly into Vercel or Netlify.

Important Notice:
This project is licensed under the MIT License.
According to the license terms, any redistribution (including compiled or modified versions), you must retain the original copyright notice and the full license text. Copyright © 2026 Oscar Hernandez. All rights reserved.