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)
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
- ⬜ Code Blocks - copy to clipboard
- ⬜ 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent