Skip to content

Latest commit

 

History

History
164 lines (117 loc) · 3.98 KB

README.md

File metadata and controls

164 lines (117 loc) · 3.98 KB

waleed.de - Personal Website & Blog

A high-performance, technically sophisticated personal website built with modern web technologies. The site prioritizes maintainability, performance, and longevity through careful technical choices.

Tech Stack

  • Framework: Astro - Static site generator with excellent performance characteristics
  • UI Components: React - For interactive components
  • Styling: Tailwind CSS - Utility-first CSS framework
  • Content: MDX with custom plugins for enhanced markdown features
  • Interactive Elements: Animations with canvas-confetti
  • Performance Optimizations:
    • Font optimization with Fontaine
    • Image optimization with Sharp
    • View Transitions API support
    • Efficient asset bundling

Project Structure

blog/
├── src/
│   ├── components/     # React components
│   ├── content/       # MDX blog posts
│   ├── layouts/       # Page layouts
│   ├── styles/        # Global styles and Tailwind config
│   └── lib/          # Utility functions and constants
├── public/           # Static assets
└── tests/           # Vitest test suites

Key Features

  • Performance First

    • Zero client-side JavaScript by default (islands architecture)
    • Optimal asset loading and caching strategies
    • Core Web Vitals optimization

  • Content Management

    • MDX support with custom components
    • Math equations via remark-math
    • Diagrams with Mermaid.js
    • Automatic table of contents generation
    • Reading time estimation

  • Music Integration

    • Last.fm API integration
    • Real-time "Now Playing" status
    • Music listening statistics
    • Weekly and monthly listening reports
    • Favorite artists and tracks display

  • Interactive Elements

    • Canvas confetti animation with basic cannon effect
    • Client list display in single column layout
    • Command palette for quick navigation
    • Theme switching functionality

  • Developer Experience

    • TypeScript for type safety
    • ESLint with @antfu/eslint-config
    • Vitest for unit testing
    • Playwright for E2E testing

Build and Deploy

# Install dependencies
pnpm install

# Development
pnpm run dev

# Build
pnpm run build

# Preview production build
pnpm run preview

# Run tests
pnpm run test

Content Authoring

Blog posts are written in MDX and support:

  • Custom Vue components
  • Mathematical equations (LaTeX syntax)
  • Code syntax highlighting with Shiki
  • Embedded tweets
  • Automatic image optimization

Example MDX post:

---
title: Example Post
date: 2024-03-21
description: An example blog post
---

import MyComponent from "@/components/MyComponent.vue";

# {frontmatter.title}

<MyComponent />

## Math Example

$E = mc^2$

## Diagram Example

```mermaid
graph TD
    A-->B
```

Performance Optimizations

  • View Transitions API for smooth page navigation
  • Automatic font optimization with Fontaine
  • Image processing with Sharp
  • Critical CSS extraction
  • Asset optimization and minification
  • SEO optimizations and meta tags
  • Open Graph images generation

Bookmarks Management with Raycast

This repository includes a Raycast extension for managing the blog's bookmarks directly from Raycast.

Installation

  1. Install the extension locally:

    cd extensions/raycast-bookmarks
npm install

  2. Link the extension to Raycast:

    npm run dev

Usage

The extension provides the following commands:

  • List Bookmarks: View and manage all your bookmarks
  • Add Bookmark: Add a new bookmark

The extension edits your local src/data/bookmarks.json file, which you can then commit and push to your repository manually when ready to update your live site.

License

This project is licensed under the MIT license