Astro Sphere is a static, minimalist, lightweight, lightning fast portfolio and blog theme based on my personal website.
It is primarily Astro, Tailwind and Typescript, with a very small amount of SolidJS for stateful components.
- ✅ 100/100 Lighthouse performance
- ✅ Responsive
- ✅ Accessible
- ✅ SEO-friendly
- ✅ Typesafe
- ✅ Minimal style
- ✅ Light/Dark Theme
- ✅ Animated UI
- ✅ Tailwind styling
- ✅ Auto generated sitemap
- ✅ Auto generated RSS Feed
- ✅ Markdown support
- ✅ MDX Support (components in your markdown)
- ✅ Searchable content (posts and projects)
- ✅ Code Blocks - copy to clipboard
All pages under 100kb (including fonts)
Rendered in ~40ms on localhost
The blog posts on the demo serve as the documentation and configuration.
All commands are run from the root of the project, from a terminal:
Replace npm with your package manager of choice. npm, pnpm, yarn, bun, etc
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run dev:network |
Starts dev server on local network |
npm run sync |
Generates TypeScript types for all Astro modules. |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run preview:network |
Starts preview server on local network |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
npm run lint |
Run ESLint |
npm run lint:fix |
Auto-fix ESLint issues |
A few features I plan to implement
- ⬜ Article Pages - Table of Contents
- ⬜ Article Pages - Share on social media
Theme inspired by Paco Coursey, Lee Robinson and Hayden Bleasel
MIT
Added ability to run dev and preview on local network. added npm run dev:network added npm run preview:network
Added slightly more particle density in both light and dark mode.
Added subtle dark mode star and meteor animations.
Removed eslint config