A simple portfolio theme for Astro powered by Tailwind CSS.
- Beautiful and simple design.
- Easy configuration
- Markdown & MDX support
- Search functionality
- Tags support.
- Dark / Light toggle.
- 100/100 Lighthouse performance
- SEO-friendly with canonical URLs and OpenGraph data
- Uses
astro:assetsfor optimized images - Sitemap and RSS feed support
- Blog drafts
- Blog pagination
https://astro-portfolio-starter.netlify.app/
npm create astro@latest -- --template peoray/astro-portfolio-starter
Edit the values in src/consts.ts to match your brand or company:
// site artefacts
export const SITE_TITLE = 'Astro Portfolio Starter'
export const SITE_URL = 'https://astro-portfolio-starter.netlify.app/'
export const SITE_DESCRIPTION = 'Welcome to my personal website!'
export const PAGE_DESCRIPTION =
'A simple portfolio theme for Astro powered by Tailwind CSS'
export const AUTHOR = 'Emmanuel Raymond'
export const IMAGE = '/images/photo.png'
export const IMAGE_ALT = 'Photo of an avatar'
// social links
export const EMAIL = 'mailto:[email protected]'
export const TWITTER = 'https://twitter.com/peoray_'
export const GITHUB = 'https://github.com/peoray/astro-portfolio-starter'
export const YOUTUBE = 'https://youtube.com'
export const INSTAGRAM = 'https://instagram.com'
Change any lines or add more in the <head> tags in src/components/MetaTags.astro, like the favicon:
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.
There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the public/ directory.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
Feel free to check the Astro documentation or jump into the Discord server.
This theme is a port of Gridsome Portfolio Starter made by Andre Madarang.
Feel free to open an issue if you find bugs or want to request new features.
Licensed under the MIT License, Copyright © Emmanuel Raymond 2023