This is my personal corner of the internet where I document what I am working on and share my thoughts, ideas, and all sorts of random stuff that comes to mind.
It is also intended as an exploration of the front-end world and a way for me to tinker with some of the tools and frameworks that I find interesting.
- Main Framework - Astro
- Type Checking - TypeScript
- Component Framework - Vue.JS
- Styling - TailwindCSS
- Icons - Iconify
- Search - PageFind
- Comments - Giscus
- Headless CMS - Tina
- Deployment - DigitalOcean
- Type-safe markdown
- Highly customizable
- Fully responsive on desktops, tablets, and smartphones
- Light and dark mode support
- SEO-friendly with dynamic OG image support
- Sitemap and automatic RSS feed
- Fast performance
- Similar post suggestion
- Tags and categories support
- Post comments through Giscus
- Support for draft posts and pagination
- Search functionality with PageFind
- Post social media sharing
- Google Analytics implemented
- Followed best practices (debatable)
- Optimize posts search
- Switch to Pretty Code plugin
- Add skills section in about Page
- Add similar posts for every blog post
- Implement custom resources section
- Implement custom snippets section
- Isolate blog categories into a separate collection with added customization based on category
- Re-enable and create a custom style for Giscus comments
- Some styling touches and redistribute components
- Switch to Nuxt with Nuxt Content maybe? Too soon?
The source wasn't meant to be a template or theme. It's mainly customized to suit my needs, but you're welcome to take anything that might be useful for you.
All commands are run from the root of the project.
Command | Action |
---|---|
npm install |
Installs dependencies |
npm run dev |
Starts Astro local dev server |
npm run dev:tina |
Starts Tina dev server along with astro |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
Inside Astro project, you'll see the following folders and files:
/
├── .github/
│
├── public/
│ ├── admin/
│ ├── uploads/
│ └── favicon.svg
│
├── src/
│ ├── assets/
│ ├── components/
│ ├── config/
│ ├── content/
│ ├── layouts/
│ ├── pages/
│ ├── styles/
│ ├── utils/
│ └── types.ts
│
├── tina/
│
└── package.json
Design inspired by AstroWind template created by onWidget.
Thanks to Kevin Lee Drum for the amazing animated table of content guide.
This project is open source and available under the MIT license.