Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aleksa-codes/astro-portfolio
Personal portfolio and blog using MDX. From Gatsby, to Next.js and now on Astro! This website has come a long way... and will always be under construction.
https://github.com/aleksa-codes/astro-portfolio
astro blog daisyui portfolio tailwindcss tinacms
Last synced: about 1 month ago
JSON representation
Personal portfolio and blog using MDX. From Gatsby, to Next.js and now on Astro! This website has come a long way... and will always be under construction.
- Host: GitHub
- URL: https://github.com/aleksa-codes/astro-portfolio
- Owner: aleksa-codes
- License: mit
- Created: 2022-09-08T10:49:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-12T22:11:40.000Z (about 1 month ago)
- Last Synced: 2024-11-12T23:20:21.717Z (about 1 month ago)
- Topics: astro, blog, daisyui, portfolio, tailwindcss, tinacms
- Language: XSLT
- Homepage: https://aleksa.codes
- Size: 7.09 MB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Astro • Tailwind CSS • DaisyUI • Portfolio & MDX Blog
👉 A responsive portfolio website featuring a project showcase, personal information, and a rich blogging platform.
## 🌐 Demo
Check out a live demo at [aleksa.codes](https://aleksa.codes)
This portfolio/blog is inspired by [daisy-blog](https://github.com/saadeghi/daisy-blog) by [@saadeghi](https://github.com/saadeghi), the creator of DaisyUI.
### Key Features
- 🌌 **Responsive Design** – Optimized for all devices with Night Mode support
- 📰 **Dynamic Blog** – Write blog posts with MDX (or Markdown) support and auto-generated Open Graph images
- 🕒 **Read Time Calculation** – Calculates estimated read time for each post
- 💬 **Interactive Blog** – Comment section, draft mode, and RSS feed
- 📬 **Contact Form** – Easily get in touch through a built-in form
- 🔄 **Local CMS** – Manage content with ease using TinaCMS
- 🖼️ **Social Profiles & Resume** – Integrated links for social networks and resume download
- ☕ **"Buy Me a Coffee" Button** – Desktop-friendly support feature
- 🧩 **PWA Ready** – Installable on all devices with Google Lighthouse scores hitting 💯 (97-98 performance on mobile occasionally)
> **Note:** To enable automatic Open Graph image generation, build locally before deployment.
## 🚀 Project Structure
This project is organized as follows:
```
/
├── public/ # Static assets (images, icons, etc.)
├── src/
│ ├── components/ # Astro/React/Vue/Svelte/Preact components
│ └── pages/ # Page routes (.astro or .md files)
│ └── index.astro # Homepage
└── package.json
```
Astro automatically exposes `.astro` and `.md` files in `src/pages/` as routes, creating a clean and modular structure.
## 🧩 Commands
Run these commands from the project root:
| Command | Action |
| :------------------ | :------------------------------------------------------------------------------------------- |
| `yarn install` | Install dependencies |
| `yarn dev` | Start local development server at `localhost:4321` |
| `yarn cms` | Start development server with TinaCMS at `localhost:4321/admin/index.html` |
| `yarn build` | Build production site to `./dist/` and generate Open Graph images for blog posts |
| `yarn preview` | Preview the production build locally before deploying |
| `yarn astro ...` | Run Astro CLI commands (e.g., `astro add`, `astro check`) |
| `yarn astro --help` | View help for Astro CLI commands |
> **Note:** For npm users, replace `yarn` with `npm run`.
---
Feel free to contribute by opening issues or submitting pull requests!