Overview

Artistfolio is a modern, minimal portfolio template built with Astro 6, Tailwind CSS v4, Alpine.js, and Bootstrap Icons. Designed for graphic artists, illustrators, and creative professionals.

Requirements

Before getting started, ensure you have the following installed:

  • Node.js v18 or higher — download from nodejs.org
  • npm v9 or higher (included with Node.js)
  • A code editor — VS Code recommended

Installation

1. Extract the Template

Unzip the artistfolio-astro.zip file and open the project folder in your code editor.

2. Install Dependencies

npm install

3. Run the Development Server

npm run dev

Visit http://localhost:4321 in your browser. The site will reload automatically as you edit files.

4. Build for Production

npm run build

Output is generated in the dist/ folder, ready for deployment.

Project Structure

artistfolio-astro/
├── public/img/           ← Your images go here
├── src/
│   ├── components/       ← Reusable Astro components
│   ├── content/
│   │   ├── blog/         ← Blog posts (*.mdx)
│   │   └── page/         ← Page content (*.mdx)
│   ├── data/             ← Data files (projects, services)
│   ├── layouts/          ← Page layouts
│   ├── pages/            ← Route pages
│   ├── styles/           ← Global CSS
│   └── utils/            ← Utility functions

Customization

Personal Information

Edit the default props in each component. All components accept overridable props:

<HeroSection
  title="Your Name"
  subtitle="Your Title"
  profileImage="/img/your-photo.png"
/>

Colors & Fonts

Modify src/styles/style.css to change font variables and theme colors.

Portfolio Projects

Edit src/data/portfolioData.ts to add or update your portfolio items:

{ id: 1, title: "My Project", image: "/img/project.jpg", category: "digital", year: 2025 }

Services

Edit src/data/servicesData.ts to update your service offerings including titles, descriptions, and pricing.

Blog Posts

Add new .mdx files to src/content/blog/ with the required frontmatter:

---
title: "Post Title"
excerpt: "Short description"
image: "/img/blog-cover.jpg"
alt: "Image description"
date: "January 1, 2025"
author: "Your Name"
tags: ["tag1", "tag2"]
featured: false
---

Images

Replace placeholder images in public/img/ with your own:

File Used In
profile.png Hero, blog sidebar, story section
about.png About section, services page
portfolio1–6.jpg Portfolio grid
blog1–6.jpg Blog posts
female1–2.jpg, male1.jpg Testimonials

Base URL

To deploy to a subdirectory (e.g., GitHub Pages at /artistfolio/), set the base option in astro.config.mjs:

export default defineConfig({
  base: "/artistfolio/",
  // ...
});

All internal links automatically use the url() utility from src/utils/path.ts.

Deployment

The template supports any static hosting platform:

  • Netlify — drag and drop the dist/ folder
  • Vercel — connect your GitHub repository
  • GitHub Pages — set base in config, then push to gh-pages branch

Need Help?

If you have questions or encounter any issues, please reach out: