My personal portfolio website showcasing projects, blog posts, and professional experience. Built with Next.js 14, TypeScript, and Tailwind CSS v4, featuring a unique terminal-inspired dark theme.
- Terminal-Inspired Design: Minimalist dark theme with Linux terminal aesthetics
- Static Site Generation (SSG): Optimized for performance and SEO
- Markdown Content Management: Easy-to-manage blog posts and project details
- Fully Responsive: Mobile-first design that works on all devices
- Dark Mode Only: Pure black background with terminal color palette
- SEO Optimized: Meta tags, Open Graph, and semantic HTML
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS v4
- Content: Markdown with gray-matter
- Rendering: next-mdx-remote
- Deployment: Static Export (compatible with any static host)
sayedmahmoud266.website/
├── app/ # Next.js App Router pages
│ ├── about/ # About page
│ ├── blog/ # Blog listing and posts
│ │ └── [slug]/ # Dynamic blog post pages
│ ├── contact/ # Contact page
│ ├── projects/ # Projects listing and details
│ │ └── [slug]/ # Dynamic project pages
│ ├── globals.css # Global styles with Tailwind
│ ├── layout.tsx # Root layout with SEO
│ ├── not-found.tsx # Custom 404 page
│ └── page.tsx # Home page
├── components/ # Reusable React components
│ ├── Footer.tsx # Site footer
│ └── Header.tsx # Navigation header
├── content/ # Markdown content
│ ├── blog/ # Blog posts (.md)
│ └── projects/ # Project details (.md)
├── lib/ # Utility functions
│ └── markdown.ts # Markdown processing utilities
├── public/ # Static assets
├── .github/ # GitHub-specific files
│ ├── docs/ # Documentation
│ │ ├── MAINTENANCE.md # Complete maintenance guide
│ │ └── AI-INSTRUCTIONS.md # AI assistant guidelines
│ ├── instructions/ # AI coding instructions
│ └── prompts/ # Project prompts
├── next.config.js # Next.js configuration (SSG)
├── package.json # Dependencies
├── postcss.config.mjs # PostCSS + Tailwind v4 config
├── tsconfig.json # TypeScript configuration
├── CHANGELOG.md # Version history
└── README.md # This file
- Node.js: v20.0.0 or higher
- npm: v10.0.0 or higher (or yarn/pnpm)
- Clone the repository
git clone https://github.com/sayedmahmoud266/sayedmahmoud266.website.git
cd sayedmahmoud266.website- Install dependencies
npm install- Start development server
npm run dev- Open your browser
Navigate to http://localhost:3000
| Command | Description |
|---|---|
npm run dev |
Start development server on port 3000 |
npm run build |
Build for production (static export) |
npm start |
Start production server |
npm run lint |
Run ESLint to check code quality |
- Create a new
.mdfile incontent/blog/ - Add frontmatter with required fields:
---
title: "Your Post Title"
description: "A brief description"
date: "2025-10-10"
tags: ["tag1", "tag2"]
author: "Sayed Mahmoud Sayed"
featured: false
---
## Your Content Here
Write your blog post content in markdown...- Create a new
.mdfile incontent/projects/ - Add frontmatter with required fields:
---
title: "Project Name"
description: "Project description"
tech: ["TypeScript", "React", "Node.js"]
github: "https://github.com/username/repo"
demo: "https://demo.example.com"
status: "completed"
featured: true
date: "2025-10-10"
---
## Project Details
Describe your project here...Blog Posts:
title: Post title (required)description: SEO description (required)date: Publication date in YYYY-MM-DD format (required)tags: Array of tags (required)author: Author name (required)featured: Boolean, shows in featured section (required)
Projects:
title: Project name (required)description: Brief description (required)tech: Array of technologies used (required)github: GitHub repository URL (optional)demo: Live demo URL (optional)status: "completed", "in-progress", or "planning" (required)featured: Boolean, shows in featured section (required)date: Project date in YYYY-MM-DD format (required)
Terminal-inspired colors are defined in app/globals.css:
@theme {
--color-terminal-green: #00ff00;
--color-terminal-blue: #0099ff;
--color-terminal-cyan: #00ffff;
--color-terminal-yellow: #ffff00;
--color-terminal-magenta: #ff00ff;
--color-terminal-red: #ff0000;
}The site uses Ubuntu Mono (loaded from Google Fonts) with fallback to Cascadia Code and system monospace fonts.
To change fonts, edit app/layout.tsx:
import { Ubuntu_Mono } from 'next/font/google'
const ubuntuMono = Ubuntu_Mono({
weight: ['400', '700'],
subsets: ['latin'],
variable: '--font-ubuntu-mono',
})The site is configured for static export. You can deploy to:
npm run build
# Vercel will automatically detect and deploynpm run build
# Upload the `out` directorynpm run build
# Deploy the `out` directory to gh-pages branchnpm run buildThe out directory contains the static site ready for deployment.
- Lighthouse Score: 100/100 (Performance, Accessibility, Best Practices, SEO)
- Static Generation: All pages pre-rendered at build time
- Image Optimization: Disabled (for static export compatibility)
- Bundle Size: Optimized with tree-shaking and code splitting
For detailed information about maintaining and updating this website:
- Maintenance Guide - Complete guide for content updates, styling, and deployment
- AI Instructions - Guidelines for AI assistants making updates
- Changelog - Version history and notable changes
This is a personal portfolio website, but suggestions and feedback are welcome!
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
This project is open source and available under the MIT License.
Sayed Mahmoud Sayed
- Website: sayedmahmoud266.website
- GitHub: @sayedmahmoud266
- Email: admin@sayedmahmoud266.website
- Design inspired by Linux terminal aesthetics
- Built with modern web technologies
- Powered by the amazing Next.js and Tailwind CSS communities
Built with ❤️ by Sayed Mahmoud Sayed