modern-portfolio

Developer Portfolio & Blog

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

🛠️ Tech Stack

Astro.js - Static site generator with excellent performance
React.js - For interactive components
Tailwind CSS - Utility-first CSS framework
TypeScript - Type safety and improved developer experience
MDX - Markdown with JSX for rich content creation
Preact - Lightweight alternative to React for UI components

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher)
npm or yarn
Git

⚙️ Installation & Setup

Clone the repository

git clone https://github.com/cojocaru-david/portfolio.git
cd portfolio

Install dependencies
```
npm install
# or
yarn install
```
Start the development server
```
npm run dev
# or
yarn dev
```
Open your browser Navigate to http://localhost:4321 to see the site running locally.

📁 Project Structure

1
portfolio/
2
├── public/                 # Static assets
3
├── src/
4
│   ├── components/         # UI components
5
│   ├── content/            # Content collections
6
│   │   ├── blog/           # Blog posts in MD/MDX format
7
│   │   └── projects/       # Project data
8
│   ├── layouts/            # Page layouts
9
│   ├── lib/                # Utility functions
10
│   ├── pages/              # Page routes
11
│   └── styles/             # Global styles
12
├── astro.config.mjs        # Astro configuration
13
├── tailwind.config.cjs     # Tailwind CSS configuration
14
├── tsconfig.json           # TypeScript configuration
15
└── package.json            # Project dependencies

🚀 Usage

Creating a Blog Post

Create a new .mdx or .md file in src/content/blog
Add frontmatter with title, description, date, tags, and authors
Write your content using Markdown and MDX components

---
title: "Your Post Title"
description: "A brief description of your post"
date: 2025-04-20
tags: ["tag1", "tag2", "tag3"]
authors: ["Your Name", "Co-author (optional)"]
---
 
# Your Post Title
 
Write your content here using Markdown.
 
## Subheading
 
More content...

Adding a Project

Create a new .md file in projects
Add project details including name, description, tags, and image path

🌙 Dark Mode

The project includes dark mode support using Tailwind CSS and Preact. It detects user preferences and applies the appropriate theme, with an option to toggle between light and dark modes.

📊 Data Utilities

The project includes several utility functions in data-utils.ts:

getAllPosts() - Retrieve all blog posts
getRecentPosts(count) - Get the most recent posts
getAdjacentPosts(currentId) - Get next and previous posts
getAllTags() - Get all tags used in posts
getSortedTags() - Get tags sorted by usage count
getPostsByAuthor(authorId) - Get all posts by a specific author

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

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

Modern Portfolio

Table of Contents