modern-portfolio

AI Engineer Portfolio & Blog

A modern, high-performance portfolio showcasing AI engineering expertise, LLM-powered agents, Model Context Protocol integrations, and intelligent automation solutions. Built with Astro.js for optimal performance and exceptional SEO.

✨ Features

🚀 Blazing fast performance - Built with Astro.js for optimal loading speeds
🤖 AI project showcase - Detailed documentation of LLM agents and MCP integrations
📝 Technical blog - Deep-dive articles on AI engineering and intelligent automation
🎨 Beautiful UI - Modern, responsive design powered by Tailwind CSS
🌙 Dark mode support - Seamless light/dark theme switching
📱 Fully responsive - Optimized for all devices from mobile to desktop
🔍 SEO optimized - Structured data, meta tags, and search engine optimization
🏷️ Technology tags - Categorize projects by AI frameworks and tools
📊 Project metrics - Performance impacts and technical achievements
🛠️ Architecture diagrams - Visual representation of AI system designs

🛠️ 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/abhinav/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 proprietary software owned by __init__abs.