Shadcn mdx

.github/workflows/deploy.yml

@@ -0,0 +1,85 @@
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_exports: true
+
+      - name: Build with Next.js
+        run: pnpm build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -3,8 +3,13 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
-.yarn/install-state.gz
+/.pnpm-store
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -24,9 +29,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel

CONTENT_LICENSE

@@ -0,0 +1,20 @@
+Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
+
+This license applies to all original written blog content, articles, and media files
+(e.g., images, diagrams) in this repository, excluding source code.
+
+You are free to:
+
+- Share — copy and redistribute the material in any medium or format
+- Adapt — remix, transform, and build upon the material
+
+Under the following terms:
+
+- Attribution — You must give appropriate credit, provide a link to the license,
+  and indicate if changes were made. You may do so in any reasonable manner,
+  but not in any way that suggests the licensor endorses you or your use.
+- NonCommercial — You may not use the material for commercial purposes.
+- ShareAlike — If you remix, transform, or build upon the material,
+  you must distribute your contributions under the same license as the original.
+
+Full license text: <https://creativecommons.org/licenses/by-nc-sa/4.0/>

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Sayfullah Eid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,36 +1,199 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Sayfullah Eid - Developer Portfolio
 
-## Getting Started
+A modern, responsive portfolio website built with Next.js 15, TypeScript, and Tailwind CSS. Features a clean design, blog functionality with MDX, and automatic deployment to GitHub Pages.
 
-First, run the development server:
+## ✨ Features
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+- **🏠 Welcome Page** - Modern hero section with skills showcase and quick links
+- **💼 Experience Page** - Professional experience timeline with detailed achievements
+- **🚀 Projects Page** - Interactive project showcase with featured and regular projects
+- **📝 Blog** - MDX-powered blog with syntax highlighting and responsive design
+- **🌙 Dark/Light Theme** - Automatic theme switching with system preference support
+- **📱 Responsive Design** - Optimized for all device sizes
+- **⚡ Fast Performance** - Static site generation for optimal loading times
+- **🚀 Auto Deployment** - GitHub Actions workflow for automatic deployment to GitHub Pages
+
+## 🛠️ Tech Stack
+
+- **Framework**: Next.js 15 with App Router
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS
+- **UI Components**: Shadcn/ui
+- **Blog**: MDX with gray-matter for frontmatter
+- **Icons**: Lucide React
+- **Deployment**: GitHub Pages
+- **Package Manager**: pnpm
+
+## 📁 Project Structure
+
+```
+├── app/                    # Next.js app directory
+│   ├── blog/              # Blog pages
+│   ├── experience/        # Experience page
+│   ├── projects/          # Projects page
+│   ├── layout.tsx         # Root layout
+│   └── page.tsx           # Home page
+├── components/            # Reusable components
+│   ├── ui/               # Shadcn/ui components
+│   ├── nav-menu.tsx      # Navigation component
+│   └── mdx-components.tsx # MDX component mappings
+├── content/              # Content directory
+│   └── blog/            # Blog post MDX files
+├── lib/                 # Utility functions
+│   ├── blog.ts         # Blog utilities
+│   └── utils.ts        # General utilities
+├── .github/workflows/   # GitHub Actions
+└── public/             # Static assets
+```
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- pnpm (recommended) or npm
+
+### Installation
+
+1. **Clone the repository**
+
+   ```bash
+   git clone https://github.com/FusionStreak/FusionStreak.github.io.git
+   cd FusionStreak.github.io
+   ```
+
+2. **Install dependencies**
+
+   ```bash
+   pnpm install
+   ```
+
+3. **Run the development server**
+
+   ```bash
+   pnpm dev
+   ```
+
+4. **Open in browser**
+   Navigate to [http://localhost:3000](http://localhost:3000)
+
+## 📝 Adding Content
+
+### Adding Blog Posts
+
+Create new MDX files in the `content/blog/` directory:
+
+```markdown
+---
+title: "Your Post Title"
+date: "2024-01-15"
+excerpt: "A brief description of your post"
+author: "Your Name"
+tags: ["tag1", "tag2", "tag3"]
+featured: true
+readTime: "5 min read"
+---
+
+# Your Post Title
+
+Your content here using Markdown/MDX syntax...
+```
+
+### Adding Experience
+
+Edit the `experiences` array in `app/experience/page.tsx`:
+
+```typescript
+const experiences: Experience[] = [
+  {
+    id: "new-id",
+    title: "Your Job Title",
+    company: "Company Name",
+    location: "Location",
+    startDate: "2024-01",
+    endDate: undefined, // or "2024-12" for past roles
+    description: "Job description...",
+    achievements: ["Achievement 1", "Achievement 2"],
+    technologies: ["React", "TypeScript", "Node.js"],
+    website: "https://company.com"
+  },
+  // ... existing experiences
+];
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### Adding Projects
+
+Edit the `projects` array in `app/projects/page.tsx`:
+
+```typescript
+const projects: Project[] = [
+  {
+    id: "new-project",
+    title: "Project Name",
+    description: "Short description",
+    longDescription: "Detailed description...",
+    technologies: ["Next.js", "TypeScript"],
+    githubUrl: "https://github.com/username/repo",
+    liveUrl: "https://project-demo.com",
+    featured: true,
+    createdAt: "2024-01-15",
+    status: "completed"
+  },
+  // ... existing projects
+];
+```
+
+## 🎨 Customization
+
+### Updating Personal Information
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+1. **Update metadata** in `app/layout.tsx`
+2. **Modify hero section** in `app/page.tsx`
+3. **Update social links** in `app/page.tsx`
+4. **Change skills** in `app/page.tsx`
+
+### Styling
+
+- **Colors**: Modify CSS variables in `app/globals.css`
+- **Components**: Customize Shadcn/ui components in `components/ui/`
+- **Layout**: Adjust the main layout in `app/layout.tsx`
+
+## 🚀 Deployment
+
+### Automatic Deployment (Recommended)
+
+The repository includes a GitHub Actions workflow that automatically deploys to GitHub Pages when you push to the main branch.
+
+1. **Enable GitHub Pages** in your repository settings
+2. **Set source** to "GitHub Actions"
+3. **Push to main branch** - deployment will trigger automatically
+
+### Manual Deployment
+
+```bash
+# Build the static site
+pnpm build
+
+# The output will be in the 'out' directory
+# Upload the contents to your hosting provider
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## 📦 Scripts
 
-## Learn More
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm start` - Start production server
+- `pnpm lint` - Run ESLint
 
-To learn more about Next.js, take a look at the following resources:
+## 🛡️ Licensing
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+This repository uses a dual-license model:
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+- **Code** (in `/app`, `/components`, etc.): Licensed under the [MIT License](./LICENSE)
+- **Content** (in `/content`, `/public`, etc.): Licensed under [CC BY-NC 4.0](./CONTENT_LICENSE)
 
-## Deploy on Vercel
+If you want to reuse or republish parts of the content commercially, please contact me for permission.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+---
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Built with ❤️ by [Sayfullah Eid](https://github.com/FusionStreak)