✨ 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
portfolio/ ├── public/ # Static assets ├── src/ │ ├── components/ # UI components │ ├── content/ # Content collections │ │ ├── blog/ # Blog posts in MD/MDX format │ │ └── projects/ # Project data │ ├── layouts/ # Page layouts │ ├── lib/ # Utility functions │ ├── pages/ # Page routes │ └── styles/ # Global styles ├── astro.config.mjs # Astro configuration ├── tailwind.config.cjs # Tailwind CSS configuration ├── tsconfig.json # TypeScript configuration └── 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.
