Dark Minimal

Dark Minimal (listed as Darkminimal on the Astro themes directory) is a dark-mode, single-page portfolio template built with Astro, React, TypeScript, and Tailwind CSS, maintained by Gothsec and released under the MIT License.

What is Dark Minimal?

Dark Minimal is an official Astro theme that generates a static portfolio website from .astro components plus a small set of React islands. You supply your name, social links, project entries, a Spotify album embed, and a Formspree form endpoint, and it outputs a single dark-themed index page with navigation, hero, projects, a logo wall, and a footer. It runs on Astro's build tooling (Node.js v18 or higher, using npm or pnpm) and can be deployed to Vercel, Netlify, or GitHub Pages. The open-source repository sits at github.com/Gothsec/dark-minimal with roughly 259 stars.

Key Features

• Astro static site generation — ships a single src/pages/index.astro page that renders to static HTML, with the live demo hosted on Vercel.
• Tailwind CSS styling — the dark visual theme is configured through tailwind.config.mjs, so colors, spacing, and typography are changed in one place.
• React islands — three interactive components live in src/React/: LetterGlitch.tsx (taken from ReactBits.dev), LikeButton.tsx, and SkillsList.tsx.
• TypeScript — the React components are written in TypeScript rather than plain JavaScript.
• Spotify album embed — src/Components/footer.astro contains an iframe slot where you paste a Spotify album embed code so visitors can play your current favorite record.
• Working contact form — src/Components/contact.astro posts to Formspree once you replace the form action with your own endpoint URL.
• Pre-built sections — nav.astro, home.astro, projects.astro, logoWall.astro, contact.astro, and footer.astro, plus an SVG folder under public/.
• SEO metadata and structured data — src/layouts/Layout.astro holds the page title, meta description, canonical URL, Open Graph tags, and a JSON-LD schema block.
• Design tooling — the author credits Figma (and Canva, Prettier) in the project stack.

Who should use Dark Minimal?

• Developers building a personal portfolio: edit home.astro and projects.astro, then deploy to Vercel or Netlify to get a live site without writing layout CSS from scratch.
• Designers who want a dark, minimal aesthetic: theme the palette in tailwind.config.mjs and keep the shipped component structure.
• Freelancers and students: collect inbound enquiries through the Formspree-powered contact form instead of a public email address.
• Astro learners: study a small, readable project that mixes .astro files with React islands and TypeScript.

What can you do with Dark Minimal?

• Showcase projects: replace the generic "Project One" style entries in src/components/projects.astro with your own titles, descriptions, and links.
• Feature a song: copy a Spotify "embed album" share code and paste it into src/Components/footer.astro so the footer plays the album.
• Take messages: create a Formspree project, copy the endpoint that looks like https://formspree.io/f/your_id, and set it as the form's action attribute.
• Publish for free: import the GitHub repository into Vercel or Netlify and let the Astro build output be served statically.

How do you customize Dark Minimal?

Clone the repository, run npm install, then npm run dev to start the local development server. Before deploying, work through the checklist: update src/layouts/Layout.astro (title, description, canonical URL, Open Graph tags, JSON-LD), change the "Your Name" greeting and the GitHub, LinkedIn, and email links in src/components/home.astro, swap the placeholder projects, and update the footer social links, Spotify iframe, and copyright name.

Pros and cons

• Static output from Astro keeps the shipped pages fast to load.
• Small file count makes the template easy to read and modify.
• Content lives in .astro files, so there is no CMS or admin panel for non-technical editors.
• The contact form depends on a third-party Formspree account you must create yourself.
• The Spotify album is added by hand-pasting embed code into the footer file.

Pricing

Dark Minimal is free and open source under the MIT License.

FAQ

Is Dark Minimal free to use?

Yes. The project is licensed under the MIT License, so you can use, modify, and deploy it, including for client work, and only the license terms require keeping attribution.

What do I need to run Dark Minimal locally?

You need Node.js version 18 or higher plus npm or pnpm. Clone the repository, install dependencies, and run npm run dev to launch the local development server.

Does Dark Minimal include a working contact form?

The template ships a contact form in src/Components/contact.astro, but it only works after you create a Formspree form and replace the action URL with your own endpoint.

Where is Dark Minimal deployed?

The demo runs on Vercel, and the documentation states the Astro build can also be deployed to Netlify or GitHub Pages, typically by importing the repository from GitHub.

Can I show my own Spotify album on the page?

Yes. Pick an album in Spotify, use the share options to copy the embed code, and paste it into src/Components/footer.astro. If you skip this step, the footer keeps whatever placeholder album is shipped.