---
name: 'Personal Portfolio'
description: 'Personal Portfolio is a personal website that showcases my work and projects. It is built with Astro.js and styled with Tailwind CSS, providing a fast and responsive user experience. The website features a clean design, easy navigation, and a focus on showcasing my skills and projects.'
tags: ['astro', 'tailwindcss', 'typescript', 'svelte']
image: '../../../public/static/portfolio.webp'
link: 'https://patrick.jaroszew.ski'
order: 4
startDate: '2026-03-10'
---
# Developer Portfolio & Blog

<div class="flex flex-wrap gap-2 my-0! [&>img]:my-0! [&>img]:mt-2!" >
  <img src="https://img.shields.io/badge/Astro-FF5D01?style=for-the-badge&logo=astro&logoColor=white" alt="Astro" />
  <img src="https://img.shields.io/badge/Svelte-FF3E00?style=for-the-badge&logo=svelte&logoColor=white" alt="Svelte" />
  <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="TailwindCSS" />
  <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
</div>

A modern, high-performance personal portfolio and blog built with Astro.js. Designed to showcase your projects and technical writing with blazing-fast performance and exceptional SEO.

## ✨ Features

- 🚀 **Blazing fast performance** - Built with Astro.js for optimal loading speeds
- 📝 **Full-featured blog** - Support for technical articles with code highlighting
- 🎨 **Beautiful UI** - Modern, responsive design powered by Tailwind CSS
- 🌙 **Dark mode support** - Seamless light/dark theme switching
- 📱 **Fully responsive** - Looks great on all devices from mobile to desktop
- 🔍 **SEO optimized** - Structured data, meta tags, and optimized for search engines
- 🏷️ **Tag system** - Categorize blog posts and projects with tags
- 📊 **Content collection** - Organized content management with Astro's content collections
- 🖼️ **Project showcase** - Display your work with images, descriptions, and technology tags
- 📬 **Contact form** - Integrated contact form with Cloudflare Turnstile protection
- 🎓 **Education section** - Timeline-based display of academic background and achievements
- 📄 **Resume download** - Downloadable resume/CV for potential employers

## 🛠️ Tech Stack

- **[Astro.js](https://astro.build/)** - Static site generator with excellent performance
- **[Svelte](https://svelte.dev/)** - For interactive components
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[TypeScript](https://www.typescriptlang.org/)** - Type safety and improved developer experience
- **[MDX](https://mdxjs.com/)** - Markdown with JSX for rich content creation

## 📋 Prerequisites

Before you begin, ensure you have the following installed:
- [Node.js](https://nodejs.org/) (v18 or higher)
- [pnpm](https://pnpm.io)
- [Git](https://git-scm.com/)

## ⚙️ Installation & Setup

1. **Clone the repository**
   ```bash
   git clone https://git.jaroszew.ski/patrick/portfolio.git
   cd portfolio
   ```

2. **Install dependencies**
   ```bash
   pnpm install
   ```

### Development Server

1. **Start the development server**
   ```bash
   pnpm run dev
   ```

2. **Open your browser**
   Navigate to `http://localhost:3010` to see the site running locally.

### Production Server

1. **Build the static site**
```bash
pnpm build
```

Your static files are now available in `./dist`

2. **Preview your site**
```bash
pnpm preview
```

3. **Open your browser**
Navigate to `http://localhost:3000` to see the site running locally.

### Deployment

Deploy to Cloudflare Pages:
```bash
pnpm deploy
```

## 📄 License

This project is licensed under the MIT License - see the LICENSE file for details.