Skip to content

Commit bc50907

Browse files
FusionStreakFusionStreak
authored
Merge pull request #2 from FusionStreak/shadcn-mdx
Shadcn mdx
2 parents 107a28f + d9b13ad commit bc50907

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+15733
-5545
lines changed

‎.eslintrc.json‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.github/workflows/deploy.yml‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
name: Deploy Next.js site to Pages
2+
3+
on:
4+
# Runs on pushes targeting the default branch
5+
push:
6+
branches: ["main"]
7+
8+
# Allows you to run this workflow manually from the Actions tab
9+
workflow_dispatch:
10+
11+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
17+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
18+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
19+
concurrency:
20+
group: "pages"
21+
cancel-in-progress: false
22+
23+
jobs:
24+
# Build job
25+
build:
26+
runs-on: ubuntu-latest
27+
steps:
28+
- name: Checkout
29+
uses: actions/checkout@v4
30+
31+
- name: Setup Node.js
32+
uses: actions/setup-node@v4
33+
with:
34+
node-version: '20'
35+
36+
- name: Setup pnpm
37+
uses: pnpm/action-setup@v3
38+
with:
39+
version: 8
40+
run_install: false
41+
42+
- name: Get pnpm store directory
43+
shell: bash
44+
run: |
45+
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
46+
47+
- name: Setup pnpm cache
48+
uses: actions/cache@v4
49+
with:
50+
path: ${{ env.STORE_PATH }}
51+
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
52+
restore-keys: |
53+
${{ runner.os }}-pnpm-store-
54+
55+
- name: Install dependencies
56+
run: pnpm install --frozen-lockfile
57+
58+
- name: Setup Pages
59+
uses: actions/configure-pages@v4
60+
with:
61+
# Automatically inject basePath in your Next.js configuration file and disable
62+
# server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
63+
#
64+
# You may remove this line if you want to manage the configuration yourself.
65+
static_exports: true
66+
67+
- name: Build with Next.js
68+
run: pnpm build
69+
70+
- name: Upload artifact
71+
uses: actions/upload-pages-artifact@v3
72+
with:
73+
path: ./out
74+
75+
# Deployment job
76+
deploy:
77+
environment:
78+
name: github-pages
79+
url: ${{ steps.deployment.outputs.page_url }}
80+
runs-on: ubuntu-latest
81+
needs: build
82+
steps:
83+
- name: Deploy to GitHub Pages
84+
id: deployment
85+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@
33
# dependencies
44
/node_modules
55
/.pnp
6-
.pnp.js
7-
.yarn/install-state.gz
6+
/.pnpm-store
7+
.pnp.*
8+
.yarn/*
9+
!.yarn/patches
10+
!.yarn/plugins
11+
!.yarn/releases
12+
!.yarn/versions
813

914
# testing
1015
/coverage
@@ -24,9 +29,10 @@
2429
npm-debug.log*
2530
yarn-debug.log*
2631
yarn-error.log*
32+
.pnpm-debug.log*
2733

28-
# local env files
29-
.env*.local
34+
# env files (can opt-in for committing if needed)
35+
.env*
3036

3137
# vercel
3238
.vercel

‎.gitpod.yml‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎CNAME‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎CONTENT_LICENSE‎

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

‎LICENSE‎

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

‎README.md‎

Lines changed: 185 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,199 @@
1-
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).
1+
# Sayfullah Eid - Developer Portfolio
22

3-
## Getting Started
3+
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.
44

5-
First, run the development server:
5+
## ✨ Features
66

7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
7+
- **🏠 Welcome Page** - Modern hero section with skills showcase and quick links
8+
- **💼 Experience Page** - Professional experience timeline with detailed achievements
9+
- **🚀 Projects Page** - Interactive project showcase with featured and regular projects
10+
- **📝 Blog** - MDX-powered blog with syntax highlighting and responsive design
11+
- **🌙 Dark/Light Theme** - Automatic theme switching with system preference support
12+
- **📱 Responsive Design** - Optimized for all device sizes
13+
- **⚡ Fast Performance** - Static site generation for optimal loading times
14+
- **🚀 Auto Deployment** - GitHub Actions workflow for automatic deployment to GitHub Pages
15+
16+
## 🛠️ Tech Stack
17+
18+
- **Framework**: Next.js 15 with App Router
19+
- **Language**: TypeScript
20+
- **Styling**: Tailwind CSS
21+
- **UI Components**: Shadcn/ui
22+
- **Blog**: MDX with gray-matter for frontmatter
23+
- **Icons**: Lucide React
24+
- **Deployment**: GitHub Pages
25+
- **Package Manager**: pnpm
26+
27+
## 📁 Project Structure
28+
29+
```
30+
├── app/ # Next.js app directory
31+
│ ├── blog/ # Blog pages
32+
│ ├── experience/ # Experience page
33+
│ ├── projects/ # Projects page
34+
│ ├── layout.tsx # Root layout
35+
│ └── page.tsx # Home page
36+
├── components/ # Reusable components
37+
│ ├── ui/ # Shadcn/ui components
38+
│ ├── nav-menu.tsx # Navigation component
39+
│ └── mdx-components.tsx # MDX component mappings
40+
├── content/ # Content directory
41+
│ └── blog/ # Blog post MDX files
42+
├── lib/ # Utility functions
43+
│ ├── blog.ts # Blog utilities
44+
│ └── utils.ts # General utilities
45+
├── .github/workflows/ # GitHub Actions
46+
└── public/ # Static assets
47+
```
48+
49+
## 🚀 Getting Started
50+
51+
### Prerequisites
52+
53+
- Node.js 18+
54+
- pnpm (recommended) or npm
55+
56+
### Installation
57+
58+
1. **Clone the repository**
59+
60+
```bash
61+
git clone https://github.com/FusionStreak/FusionStreak.github.io.git
62+
cd FusionStreak.github.io
63+
```
64+
65+
2. **Install dependencies**
66+
67+
```bash
68+
pnpm install
69+
```
70+
71+
3. **Run the development server**
72+
73+
```bash
74+
pnpm dev
75+
```
76+
77+
4. **Open in browser**
78+
Navigate to [http://localhost:3000](http://localhost:3000)
79+
80+
## 📝 Adding Content
81+
82+
### Adding Blog Posts
83+
84+
Create new MDX files in the `content/blog/` directory:
85+
86+
```markdown
87+
---
88+
title: "Your Post Title"
89+
date: "2024-01-15"
90+
excerpt: "A brief description of your post"
91+
author: "Your Name"
92+
tags: ["tag1", "tag2", "tag3"]
93+
featured: true
94+
readTime: "5 min read"
95+
---
96+
97+
# Your Post Title
98+
99+
Your content here using Markdown/MDX syntax...
100+
```
101+
102+
### Adding Experience
103+
104+
Edit the `experiences` array in `app/experience/page.tsx`:
105+
106+
```typescript
107+
const experiences: Experience[] = [
108+
{
109+
id: "new-id",
110+
title: "Your Job Title",
111+
company: "Company Name",
112+
location: "Location",
113+
startDate: "2024-01",
114+
endDate: undefined, // or "2024-12" for past roles
115+
description: "Job description...",
116+
achievements: ["Achievement 1", "Achievement 2"],
117+
technologies: ["React", "TypeScript", "Node.js"],
118+
website: "https://company.com"
119+
},
120+
// ... existing experiences
121+
];
15122
```
16123

17-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
124+
### Adding Projects
125+
126+
Edit the `projects` array in `app/projects/page.tsx`:
127+
128+
```typescript
129+
const projects: Project[] = [
130+
{
131+
id: "new-project",
132+
title: "Project Name",
133+
description: "Short description",
134+
longDescription: "Detailed description...",
135+
technologies: ["Next.js", "TypeScript"],
136+
githubUrl: "https://github.com/username/repo",
137+
liveUrl: "https://project-demo.com",
138+
featured: true,
139+
createdAt: "2024-01-15",
140+
status: "completed"
141+
},
142+
// ... existing projects
143+
];
144+
```
145+
146+
## 🎨 Customization
147+
148+
### Updating Personal Information
18149

19-
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
150+
1. **Update metadata** in `app/layout.tsx`
151+
2. **Modify hero section** in `app/page.tsx`
152+
3. **Update social links** in `app/page.tsx`
153+
4. **Change skills** in `app/page.tsx`
154+
155+
### Styling
156+
157+
- **Colors**: Modify CSS variables in `app/globals.css`
158+
- **Components**: Customize Shadcn/ui components in `components/ui/`
159+
- **Layout**: Adjust the main layout in `app/layout.tsx`
160+
161+
## 🚀 Deployment
162+
163+
### Automatic Deployment (Recommended)
164+
165+
The repository includes a GitHub Actions workflow that automatically deploys to GitHub Pages when you push to the main branch.
166+
167+
1. **Enable GitHub Pages** in your repository settings
168+
2. **Set source** to "GitHub Actions"
169+
3. **Push to main branch** - deployment will trigger automatically
170+
171+
### Manual Deployment
172+
173+
```bash
174+
# Build the static site
175+
pnpm build
176+
177+
# The output will be in the 'out' directory
178+
# Upload the contents to your hosting provider
179+
```
20180

21-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
181+
## 📦 Scripts
22182

23-
## Learn More
183+
- `pnpm dev` - Start development server
184+
- `pnpm build` - Build for production
185+
- `pnpm start` - Start production server
186+
- `pnpm lint` - Run ESLint
24187

25-
To learn more about Next.js, take a look at the following resources:
188+
## 🛡️ Licensing
26189

27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
190+
This repository uses a dual-license model:
29191

30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
192+
- **Code** (in `/app`, `/components`, etc.): Licensed under the [MIT License](./LICENSE)
193+
- **Content** (in `/content`, `/public`, etc.): Licensed under [CC BY-NC 4.0](./CONTENT_LICENSE)
31194

32-
## Deploy on Vercel
195+
If you want to reuse or republish parts of the content commercially, please contact me for permission.
33196

34-
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.
197+
---
35198

36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
199+
Built with ❤️ by [Sayfullah Eid](https://github.com/FusionStreak)

0 commit comments

Comments
 (0)