Personal portfolio and blog built with Astro, Tailwind CSS, and MDX.
# Install dependencies
npm install
# Start dev server (http://localhost:4321)
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewsrc/
├── components/ # Reusable UI components
│ ├── Hero.astro
│ ├── FeaturedProject.astro
│ ├── ProjectCard.astro
│ ├── Expertise.astro
│ └── Writing.astro
├── content/
│ └── writing/ # Blog posts (Markdown / MDX)
│ └── example-post.md
├── layouts/
│ ├── BaseLayout.astro # Site shell (nav, footer, meta)
│ └── WritingLayout.astro # Article page layout with prose styles
├── pages/
│ ├── index.astro # Homepage
│ └── writing/
│ └── [slug].astro # Dynamic blog post routes
└── styles/
└── global.css # Tailwind directives + custom utilities
Create a .md or .mdx file in src/content/writing/:
---
title: "Your Post Title"
description: "A short description for SEO and social sharing."
date: "2025-04-15"
tags: ["architecture", "laravel"]
draft: false
---
Your article content here. Supports full Markdown and code blocks.- Posts with
draft: trueare excluded from the production build. - Posts automatically appear on the homepage (latest 5) and get their own URL at
/writing/your-post-slug.
The site uses a professional light-mode palette defined in tailwind.config.mjs:
- Background: Warm off-white (#FAFAF9)
- Accent: Deep forest green (#1A5C3A)
- Typography: Source Serif 4 (display), Instrument Sans (body), IBM Plex Mono (code/labels)
- Push this repo to GitHub
- Go to Cloudflare Pages
- Connect your GitHub repo
- Set build settings:
- Build command:
npm run build - Build output directory:
dist - Node.js version:
20(set in Environment Variables asNODE_VERSION=20)
- Build command:
- Add custom domain:
davorminchorov.com
Every push to main will auto-deploy. Preview deployments are created for pull requests.
- Import repo at vercel.com/new
- Framework preset: Astro (auto-detected)
- Deploy — it handles everything automatically
- Add custom domain in project settings
- Colors/fonts: Edit
tailwind.config.mjs - Content: Edit components in
src/components/ - Meta/SEO: Edit defaults in
src/layouts/BaseLayout.astro - Projects: Edit project cards directly in
src/pages/index.astro