Skip to content

Commit 3d3cc4d

Browse files
fezcodefezcode
committed
refactor: project styles
1 parent e2a1a56 commit 3d3cc4d

File tree

4 files changed

+109
-6
lines changed

4 files changed

+109
-6
lines changed

‎public/projects/projects.piml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
> (project)
33
(slug) fezcodex
44
(title) Fezcodex Project
5-
(stylish) true
5+
(style) stylish
66
(repo_link) https://github.com/fezcode/fezcode.github.io
77
(demo_link) https://fezcode.com/about
88
(pinned) true

‎src/components/Layout.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,16 @@ const Layout = ({
4444
const isAboutPage = location.pathname.startsWith('/about');
4545
const isGraphPage = location.pathname === '/graph';
4646

47-
// Check for stylish project
47+
// Check for special project styles that require hiding the default layout
4848
const projectSlug = location.pathname.startsWith('/projects/') ? location.pathname.split('/')[2] : null;
4949
const project = projectSlug ? projects.find(p => p.slug === projectSlug) : null;
50-
const isStylishProject = project?.stylish;
5150

52-
const hideLayout = isAboutPage || isGraphPage || isStylishProject;
51+
const projectStyle = project?.style || 'default';
52+
const isSpecialProject = projectStyle === 'stylish' || projectStyle === 'techno';
5353

54-
if (location.pathname.startsWith('/stories') || isStylishProject) {
54+
const hideLayout = isAboutPage || isGraphPage || isSpecialProject;
55+
56+
if (location.pathname.startsWith('/stories') || isSpecialProject) {
5557
return (
5658
<DndProvider>
5759
{children}

‎src/components/ProjectRouteHandler.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Loading from './Loading';
55

66
const ProjectPage = lazy(() => import('../pages/ProjectPage'));
77
const StylishProjectDetailsPage = lazy(() => import('../pages/StylishProjectDetailsPage'));
8+
const TechnoProjectDetailsPage = lazy(() => import('../pages/TechnoProjectDetailsPage'));
89

910
const ProjectRouteHandler = () => {
1011
const { slug } = useParams();
@@ -18,14 +19,25 @@ const ProjectRouteHandler = () => {
1819
return <Suspense fallback={<Loading />}><ProjectPage /></Suspense>;
1920
}
2021

21-
if (project.stylish) {
22+
// Handle different project styles
23+
const projectStyle = project.style || 'default';
24+
25+
if (projectStyle === 'stylish') {
2226
return (
2327
<Suspense fallback={<Loading />}>
2428
<StylishProjectDetailsPage />
2529
</Suspense>
2630
);
2731
}
2832

33+
if (projectStyle === 'techno') {
34+
return (
35+
<Suspense fallback={<Loading />}>
36+
<TechnoProjectDetailsPage />
37+
</Suspense>
38+
);
39+
}
40+
2941
return (
3042
<Suspense fallback={<Loading />}>
3143
<ProjectPage />

‎src/pages/TechnoProjectDetailsPage.jsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React from 'react';
2+
import { useParams } from 'react-router-dom';
3+
import { useProjects } from '../utils/projectParser';
4+
import Loading from '../components/Loading';
5+
6+
const TechnoProjectDetailsPage = () => {
7+
const { slug } = useParams();
8+
const { projects, loading } = useProjects();
9+
10+
if (loading) return <Loading />;
11+
12+
const project = projects.find(p => p.slug === slug);
13+
14+
if (!project) {
15+
return (
16+
<div className="min-h-screen bg-black text-emerald-500 p-8 font-mono">
17+
<h1 className="text-4xl mb-4">404: PROJECT_NOT_FOUND</h1>
18+
<p>The requested project slug does not exist in the database.</p>
19+
</div>
20+
);
21+
}
22+
23+
return (
24+
<div className="min-h-screen bg-black text-emerald-500 p-8 font-mono">
25+
<div className="max-w-4xl mx-auto border border-emerald-500 p-6 bg-emerald-950/10">
26+
<div className="flex justify-between items-center mb-6 border-b border-emerald-500 pb-2">
27+
<h1 className="text-3xl uppercase tracking-tighter font-bold">{project.title}</h1>
28+
<span className="text-xs bg-emerald-500 text-black px-2 py-1">TECHNO_VARIANT_v1.0</span>
29+
</div>
30+
31+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
32+
<div>
33+
<img
34+
src={project.image}
35+
alt={project.title}
36+
className="w-full border border-emerald-500 filter grayscale contrast-125 brightness-75 hover:grayscale-0 transition-all duration-500"
37+
/>
38+
</div>
39+
<div className="flex flex-col justify-center">
40+
<h2 className="text-xl mb-4 text-emerald-300">SYSTEM_OVERVIEW</h2>
41+
<p className="mb-6 leading-relaxed">
42+
{project.shortDescription}
43+
</p>
44+
<div className="flex gap-4">
45+
{project.repo_link && (
46+
<a
47+
href={project.repo_link}
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
className="px-4 py-2 border border-emerald-500 hover:bg-emerald-500 hover:text-black transition-colors"
51+
>
52+
ACCESS_REPOSITORY
53+
</a>
54+
)}
55+
{project.demo_link && (
56+
<a
57+
href={project.demo_link}
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
className="px-4 py-2 bg-emerald-500 text-black hover:bg-emerald-400 transition-colors"
61+
>
62+
RUN_DEMO
63+
</a>
64+
)}
65+
</div>
66+
</div>
67+
</div>
68+
69+
<div className="border-t border-emerald-500 pt-6">
70+
<h2 className="text-xl mb-4 text-emerald-300">TECHNICAL_SPECIFICATIONS</h2>
71+
<div className="flex flex-wrap gap-2">
72+
{project.technologies?.map((tech, idx) => (
73+
<span key={idx} className="px-2 py-1 border border-emerald-500/50 text-xs">
74+
{tech.toUpperCase()}
75+
</span>
76+
))}
77+
</div>
78+
</div>
79+
80+
<div className="mt-12 text-[10px] text-emerald-500/30 font-mono">
81+
<p>WARNING: THIS PAGE IS UNDER DEVELOPMENT</p>
82+
<p>FEZCODEX_SECURITY_LEVEL: ALPHA</p>
83+
</div>
84+
</div>
85+
</div>
86+
);
87+
};
88+
89+
export default TechnoProjectDetailsPage;

0 commit comments

Comments
 (0)