Skip to content

Commit e2a1a56

Browse files
fezcodefezcode
committed
feat: stylish project page
1 parent 83f5af7 commit e2a1a56

30 files changed

+892
-19
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@
2121
npm-debug.log*
2222
yarn-debug.log*
2323
yarn-error.log*
24+
25+
/templates

‎PROJECTS.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
# Stylish Project Showcases
2+
3+
Fezcodex supports a "Stylish" project details page variant. This layout is designed for high-production, landing-page style showcases that are isolated from the main site's global layout.
4+
5+
## 1. Activation
6+
7+
To enable the stylish layout for a project, you must set the `(stylish)` flag to `true` in `public/projects/projects.piml`:
8+
9+
```piml
10+
> (project)
11+
(slug) my-cool-project
12+
(stylish) true
13+
...
14+
```
15+
16+
When this flag is detected, the site will automatically bypass the global sidebar/navbar and render the project using the `StylishProjectDetailsPage` component.
17+
18+
## 2. Directory Structure
19+
20+
All content for a stylish project must be placed in a dedicated folder under `public/projects/[slug]/`.
21+
22+
```text
23+
public/projects/my-cool-project/
24+
├── hero.txt # Hero title, typewriter words, and main image
25+
├── partners.txt # Tech stack or "Trusted by" list
26+
├── terminal.txt # Interactive terminal tabs
27+
├── integrations.txt # Feature showcase with images (Exploration Modes)
28+
├── features.txt # Grid of feature cards
29+
├── technical.txt # Technical architecture overview
30+
├── details.txt # Long-form markdown (Philosophy/Deep Dive)
31+
└── cta.txt # Call to action and install command
32+
```
33+
34+
## 3. MDX File Specifications
35+
36+
### `hero.txt`
37+
The hero section expects a specific header format:
38+
* **Line 1**: The prefix (e.g., `# Built for`)
39+
* **Line 2**: Comma-separated words for the typewriter effect.
40+
* **image:** tag: Path to the main hero image.
41+
* **Body**: The main description paragraph.
42+
43+
```mdx
44+
# Built for
45+
explorers, hackers, builders
46+
47+
image: /images/projects/my-hero.webp
48+
49+
This is the main description of the project.
50+
```
51+
52+
### `partners.txt`
53+
Used to show a list of technologies or partners.
54+
* **label**: The small header text.
55+
* **logos**: Comma-separated list of items to display.
56+
57+
```mdx
58+
label: Built with
59+
logos: REACT, TAILWIND, RUST
60+
```
61+
62+
### `terminal.txt`
63+
Defines the interactive terminal component. Uses `:::tab` blocks.
64+
* **id**: Unique identifier for the tab.
65+
* **label**: Text displayed on the tab button.
66+
* **command**: The "input" command shown after the `$`.
67+
* **output**: The response text.
68+
69+
```mdx
70+
:::tab
71+
id: scan
72+
label: Scan
73+
command: project --scan
74+
output: Scanning system... Done.
75+
:::
76+
```
77+
78+
### `integrations.txt`
79+
Renders as a 3-column grid with images at the top. Uses `:::integration` blocks.
80+
* **title**, **description**, **image**, **link** (optional).
81+
82+
```mdx
83+
# Navigation Modes
84+
:::integration
85+
title: Mobile App
86+
description: Access on the go.
87+
image: /images/projects/mobile.webp
88+
link: /download
89+
:::
90+
```
91+
92+
### `features.txt`
93+
Renders as a 4-column grid of icon cards. Uses `:::feature` blocks.
94+
* **icon**: Phosphor icon name (without 'Icon' suffix, e.g., `Cpu`, `Command`, `Globe`).
95+
* **title**, **description**.
96+
97+
```mdx
98+
:::feature
99+
icon: Lightning
100+
title: Fast
101+
description: Blazing fast execution.
102+
:::
103+
```
104+
105+
### `technical.txt`
106+
Renders as a grid of architectural cards. Uses `:::tech` blocks.
107+
* **Bold text** inside the block becomes the card title (Instrument Serif font).
108+
109+
```mdx
110+
:::tech
111+
**Frontend:** Built with React 19.
112+
:::
113+
```
114+
115+
### `details.txt`
116+
Standard markdown for the "Philosophy" section.
117+
* Supports `image: /path/to/img` for auto-styled image containers.
118+
* Supports `## Headings` for section titles.
119+
* Links are automatically rendered as stylized buttons.
120+
121+
### `cta.txt`
122+
The final section.
123+
* The first `# Heading` is the title.
124+
* A code block (e.g., ` ```bash `) is rendered inside a terminal-style `ProjectUrlLine` component.
125+
126+
## 4. Assets
127+
128+
* **Images**: Place images in `public/images/projects/` or `public/images/asset/`.
129+
* **Icons**: Use any icon name from `@phosphor-icons/react` (e.g., `User`, `Gear`, `ShieldCheck`).
130+
131+
## 5. Adding a New Project Checklist
132+
133+
1. Create the folder `public/projects/[your-slug]`.
134+
2. Copy existing `.txt` files from `fezcodex` as templates.
135+
3. Fill in the content.
136+
4. Add the project to `public/projects/projects.piml` with `(stylish) true`.
137+
5. Run `npm run lint` to ensure everything is correct.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,6 @@ Stories are managed via git subtrees. Because subtree remotes are not tracked by
9191
2. Select the `gh-pages` branch
9292
3. Add `fezcode.com` as the custom domain.
9393

94-
--
94+
---
9595

9696
Created by [Ahmed Samil Bulbul](https://fezcode.com).

‎public/images/projects/fezcodex/about-my-page.webp‎

301 KB
Loading

public/images/projects/fezcodex.webp renamed to public/images/projects/fezcodex/fezcodex.webp

File renamed without changes.

‎public/images/projects/fezcodex/terminal.webp‎

25 KB
Loading

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
3636
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
3737
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
38+
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
3839
<title>fezcodex</title>
3940
</head>
4041
<body class="bg-slate-950">

‎public/projects/fezcodex.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Fezcodex: The Digital Sanctum
22

3-
![Fezcodex - Cover Art](/images/projects/fezcodex.webp)
3+
![Fezcodex - Cover Art](/images/projects/fezcodex/fezcodex.webp)
44

55
**Fezcodex** is more than just a portfolio; it's a living digital garden, a personal operating system, and a testament to the brutalist aesthetic of the modern web. Built with **React** and **Tailwind CSS**, it serves as the central hub for my development journey, thoughts, and experiments.
66

‎public/projects/fezcodex/cta.txt‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Explore the Source
2+
3+
Fezcodex is open-source. Clone the repository to see how it works under the hood:
4+
5+
```bash
6+
git clone https://github.com/fezcode/fezcode.github.io.git
7+
```

‎public/projects/fezcodex/details.txt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
## Core Philosophy
2+
Fezcodex was designed to break away from the sterile, corporate look of standard portfolios. It embraces brutalism, raw honesty, and a level of interactivity that rewards exploration.
3+
4+
image: /images/projects/fezcodex/about-my-page.webp
5+
6+
image: /images/projects/fezcodex/terminal.webp
7+
8+
9+
## Tech Stack
10+
Built on a modern foundation of React and Tailwind CSS, utilizing a custom Markdown pipeline for rich, dynamic content delivery and Framer Motion for high-fidelity animations.

0 commit comments

Comments
 (0)