Skip to main content

​
Bennett Eghan Portfolio

A personal portfolio website built with React, Vite, and MDX for blogging and project showcases. This documentation covers the architecture, components, styling, and development workflow.

​
Overview

This portfolio website is a modern frontend application showcasing personal projects, technical blog posts, and professional experience. Built with performance and developer experience in mind, it uses cutting-edge web technologies.

Get Started

Set up the development environment and run locally

Components

Explore the React component architecture

Styling System

Learn about Tailwind CSS configuration and design tokens

Content Management

Understand how to write and manage MDX blog posts

​
Key Features

Modern development stack with fast hot module replacement (HMR), TypeScript for type safety, and optimized production builds. The application uses React 18 features including hooks, context, and concurrent rendering.
Write blog posts in MDX (Markdown + JSX) with full support for:
  • Syntax highlighting via rehype-prism-plus
  • GitHub-flavored markdown with remark-gfm
  • Emoji support with remark-emoji
  • Custom React components within content
  • Automatic reading time calculation
Utility-first CSS framework with a custom design system featuring:
  • Courier New monospace typography
  • Custom color palette (#0e2544, #84949d, #c9cdd3)
  • Tailwind CSS v4 with @tailwindcss/vite plugin
  • Responsive design patterns
  • Custom animations via tailwindcss-animate
Built for Vercel deployment with:
  • Automatic sitemap generation via vite-plugin-sitemap
  • SEO meta tags via react-helmet-async
  • Vite production builds for fast page loads
  • Excellent Core Web Vitals
Dynamic project listing with:
  • Motion animations using Framer Motion
  • Interactive hover states
  • GitHub and live demo links
  • Technology stack badges

​
Technology Stack

The portfolio is built with the following technologies:
CategoryTechnologies
FrameworkReact 18, Vite 6
LanguageTypeScript 5.7
StylingTailwind CSS 4, @tailwindcss/typography
ContentMDX 3, remark-gfm, rehype-prism-plus
AnimationFramer Motion 12
RoutingReact Router 6
Iconsiconsax-react, lucide-react, pikaicons
BuildVite, vite-plugin-sitemap
DeploymentVercel

​
Project Structure

bennett-eghan/
├── src/
│   ├── pages/          # Route pages
│   │   ├── home.tsx    # Homepage
│   │   ├── projects.tsx # Projects showcase
│   │   ├── blog/       # Blog posts (MDX)
│   │   └── layout.tsx  # Layout wrapper
│   ├── components/
│   │   └── ui/         # UI components
│   ├── custom/         # Custom components (nav, etc.)
│   ├── lib/            # Utilities
│   └── assets/         # Static assets
├── public/             # Public static files
├── vite.config.ts      # Vite configuration
├── tsconfig.json       # TypeScript configuration
└── package.json        # Dependencies

​
Use Cases

This portfolio template is ideal for:
  • Software Engineers — Showcase projects, write technical blog posts, and maintain an online presence
  • Frontend Developers — Demonstrate React, TypeScript, and modern CSS skills
  • Technical Writers — Publish articles with code examples and rich formatting
  • Open Source Contributors — Document and share your contributions

​
Next Steps

1

Clone the repository

Get started by cloning the repository and installing dependencies:
git clone https://github.com/abena07/bennett-eghan.git
cd bennett-eghan
2

Install dependencies

Install all required packages:
bun install
# or
npm install
# or
yarn install
3

Run development server

Start the development server with hot reload:
bun dev
Open http://localhost:5173 to view the site.
4

Customize content

Replace personal information, blog posts, and project data with your own content.
License Notice: This project is MIT licensed. When forking or cloning, please remove all personal information (resume, blog posts, images) before deploying your own version.

​
Support & Contribution

For questions, issues, or contributions, visit the GitHub repository. Pull requests are welcome!

Build docs developers (and LLMs) love

Get started for freeTalk to us