Table of Contents

• OOS - Ojo Oluwasetemi Stephen's Blog
  • 🚀 Features
  • 🛠️ Tech Stack
  • 📁 Project Structure
  • 🚀 Getting Started
    • Prerequisites
    • Installation
    • Development
    • Building for Production
  • 📝 Content Management
    • Blog Posts
    • Portfolio Projects
  • 🎨 Styling
  • 🧪 Testing
  • 📦 Deployment
  • 🔧 Configuration
  • 🤝 Contributing
  • 📄 License

OOS - Ojo Oluwasetemi Stephen's Blog

A modern, fast, and SEO-optimized personal blog and portfolio website built with Astro. Originally created with Gatsby and migrated to Astro for better performance and developer experience.

🚀 Features

• ⚡ Lightning Fast: Built with Astro for optimal performance
• 📱 Responsive Design: Mobile-first approach with Tailwind CSS
• 🎨 Modern UI: Clean, accessible design with smooth animations
• 📝 Content Collections: Type-safe content management with MDX
• 🔍 SEO Optimized: Built-in sitemap, RSS feeds, and meta tags
• 📊 Portfolio Showcase: Dedicated section for project highlights
• 🏷️ Tag System: Organized content with tags and categories
• 🌙 Dark Mode Ready: Prepared for future dark mode implementation
• 🧪 Testing: Comprehensive test suite with Vitest
• 📦 TypeScript: Full type safety throughout the application

🛠️ Tech Stack

• Astro - Static site generator
• Tailwind CSS v4 - Utility-first CSS framework
• TypeScript - Type safety
• MDX - Markdown with JSX support
• React - Interactive components
• Vitest - Unit testing
• ESLint - Code linting
• Netlify - Hosting and deployment

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── blog-post-card.astro
│   ├── portfolio-card.astro
│   ├── header.astro
│   └── headerlink.astro
├── content/            # Content collections
│   ├── blog/          # Blog posts (MDX)
│   ├── portfolio/     # Portfolio projects (MDX)
│   └── config.ts      # Collection schemas
├── layouts/           # Page layouts
│   ├── layout.astro   # Base layout component
│   └── blogpost.astro # Blog post layout
├── pages/             # Astro pages
│   ├── index.astro    # Homepage
│   ├── about.astro    # About page
│   ├── blog/          # Blog pages
│   └── portfolio/     # Portfolio pages
├── styles/            # Global styles
│   └── global.css     # Tailwind imports and custom styles
└── utils/             # Utility functions

🚀 Getting Started

Prerequisites

• Node.js >= 20
• Bun (recommended) or npm/yarn

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd oluwasetemi.dev

2. Install dependencies

   # Using Bun (recommended)
   bun install
   
   # Or using npm
   npm install

3. Start the development server

   bun dev
   # or
   npm run dev

4. Open your browser Navigate to http://localhost:4321

Development

# Start development server
bun dev

# Build for production
bun run build

# Preview production build
bun run preview

# Run linting
bun run lint

# Fix linting issues
bun run lint:fix

# Run tests
bun test

# Run tests with UI
bun run test:ui

Building for Production

# Build the site
bun run build

# Preview the build
bun run preview

📝 Content Management

Blog Posts

Create new blog posts in src/content/blog/:

---
title: "My New Blog Post"
description: "A brief description of the post"
pubDate: 2024-01-15
tags: ["astro", "web-development", "tutorial"]
heroImage: "/path/to/image.jpg"
---

# My New Blog Post

Your content here...

Portfolio Projects

Add portfolio projects in src/content/portfolio/:

---
title: "Project Name"
description: "Project description"
date: 2024-01-15
tags: ["react", "typescript", "tailwind"]
url: "https://project-url.com"
github: "https://github.com/username/project"
tech: ["React", "TypeScript", "Tailwind CSS"]
heroImage: "/path/to/project-image.jpg"
---

# Project Details

Project description and details...

🎨 Styling

This project uses Tailwind CSS v4 with a custom configuration:

• Custom Colors: Accent colors defined in tailwind.config.js
• Custom Fonts: IBM Plex Mono and Ubuntu font stack
• Component Classes: Reusable component styles in global.css
• Responsive Design: Mobile-first approach with breakpoint utilities

Custom Styling

Add custom styles in src/styles/global.css:

@import "tailwindcss";

@layer base {
  /* Base styles */
}

@layer components {
  /* Component styles */
}

@layer utilities {
  /* Utility styles */
}

🧪 Testing

The project includes a comprehensive test suite:

# Run all tests
bun test

# Run tests with UI
bun run test:ui

# Run tests in watch mode
bun test --watch

Tests are written using:

• Vitest - Fast unit testing framework
• Testing Library - React component testing
• jsdom - DOM environment for testing

📦 Deployment

This site is deployed on Netlify with the following features:

• Automatic Deploys: Connected to Git repository
• Edge Functions: Server-side functionality
• CDN: Global content delivery
• HTTPS: Secure by default

Deployment Configuration

The site uses the @astrojs/netlify adapter for optimal Netlify integration:

// astro.config.ts
import netlify from "@astrojs/netlify";

export default defineConfig({
  output: "server",
  adapter: netlify({
    edgeMiddleware: false,
  }),
});

🔧 Configuration

Key Configuration Files

• astro.config.ts - Astro configuration
• tailwind.config.js - Tailwind CSS configuration
• tsconfig.json - TypeScript configuration
• eslint.config.js - ESLint rules and settings
• vitest.config.ts - Test configuration

Environment Variables

Create a .env file for local development:

# Site configuration
SITE_URL=https://oluwasetemi.dev

🤝 Contributing

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

Development Guidelines

• Follow TypeScript best practices
• Write tests for new features
• Use conventional commit messages
• Ensure all linting checks pass
• Maintain responsive design principles

📄 License

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

---

Built with ❤️ by Ojo Oluwasetemi Stephen