feat: minimalist modern project page

fezcode · fezcode · commit 849af0c32f06 · 2026-01-17T12:23:04.000+03:00
diff --git a/public/images/projects/yap/01.webp b/public/images/projects/yap/01.webp
diff --git a/public/images/projects/yap/02.webp b/public/images/projects/yap/02.webp
diff --git a/public/images/projects/yap/cover.webp b/public/images/projects/yap/cover.webp
diff --git a/public/images/projects/yap/yap-banner.webp b/public/images/projects/yap/yap-banner.webp
diff --git a/public/images/projects/yap/yap.webp b/public/images/projects/yap/yap.webp
diff --git a/public/projects/bm/description.txt b/public/projects/bm/description.txt
@@ -0,0 +1,9 @@
+## Overview
+
+BM is a command-line utility designed for speed and simplicity. Built in Rust, it provides a fast way to manage and navigate your most frequent terminal paths.
+
+## Key Features
+
+- **Blazing Fast**: Written in Rust for near-instant execution.
+- **TOML Store**: Uses a standard TOML file for easy manual editing if needed.
+- **Minimalist**: Focuses on doing one thing extremely well.
diff --git a/public/projects/projects.piml b/public/projects/projects.piml
@@ -119,6 +119,7 @@
   > (project)
     (slug) yap
     (title) yap
+    (style) minimal-modern
     (size) 1
     (repo_link) https://github.com/fezcode/yap
     (pinned) false
@@ -130,7 +131,7 @@
       > Audio
     (shortDescription) A lightweight, terminal-based YouTube audio player written in Go with synced lyrics and advanced playback controls.
     (date) 2026-01-12
-    (image) /images/projects/yap-banner.webp
+    (image) /images/projects/yap/yap-banner.webp
 
   > (project)
     (slug) go-piml
diff --git a/public/projects/yap.txt b/public/projects/yap.txt
@@ -1,6 +1,6 @@
 # Yap - Youtube Audio Player
 
-![Yap Banner](/images/projects/yap-banner.webp)
+![Yap Banner](/images/projects/yap/yap-banner.webp)
 
 Yap is a lightweight, terminal-based YouTube audio player written in Go. It allows users to stream audio directly from YouTube URLs, offering features such as playback queuing, synced lyrics, and advanced playback controls.
 
diff --git a/public/projects/yap/access.txt b/public/projects/yap/access.txt
@@ -0,0 +1,5 @@
+LABEL: Access
+SUBTEXT: Get Started
+IMAGE: /images/projects/yap/yap.webp
+
+Check out the [GitHub Repository](https://github.com/fezcode/yap) for installation instructions.
diff --git a/public/projects/yap/features.txt b/public/projects/yap/features.txt
@@ -0,0 +1,18 @@
+LABEL: Features
+SUBTEXT: Functionality
+IMAGE: /images/projects/yap/01.webp
+
+- **Direct Streaming**: Stream audio directly from YouTube URLs.
+- **Playback Queuing**: Queue up multiple songs.
+- **Synced Lyrics**: Display lyrics synced with the music (fetched via LRCLib API).
+- **TUI Interface**: Built with Bubble Tea and Lip Gloss for a modern terminal user interface.
+- **Advanced Controls**:
+    - Pause/Resume (Space)
+    - Volume Adjustment (+/-)
+    - Mute/Unmute (M)
+    - Toggle Synced Lyrics (L)
+    - Toggle Playlist View (V)
+    - Shuffle (R)
+    - Skip Next (N)
+    - Previous Track (P)
+    - Seek (Left/Right Arrow)
diff --git a/public/projects/yap/overview.txt b/public/projects/yap/overview.txt
@@ -0,0 +1,5 @@
+LABEL: YAP
+SUBTEXT: The Overview
+IMAGE: /images/projects/yap/cover.webp
+
+Yap is a lightweight, terminal-based YouTube audio player written in Go. It allows users to stream audio directly from YouTube URLs, offering features such as playback queuing, synced lyrics, and advanced playback controls.
diff --git a/public/projects/yap/technical.txt b/public/projects/yap/technical.txt
@@ -0,0 +1,9 @@
+LABEL: Technical
+SUBTEXT: The Stack
+IMAGE: /images/projects/yap/02.webp
+
+- **Language**: Go
+- **TUI Framework**: Bubble Tea
+- **Audio Decoding**: FFmpeg
+- **Audio Playback**: Beep
+- **Data Parsing**: go-piml
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -49,7 +49,7 @@ const Layout = ({
   const project = projectSlug ? projects.find(p => p.slug === projectSlug) : null;
 
   const projectStyle = project?.style || 'default';
-  const isSpecialProject = projectStyle === 'stylish' || projectStyle === 'editorial';
+  const isSpecialProject = projectStyle === 'stylish' || projectStyle === 'editorial' || projectStyle === 'minimal-modern';
 
   const hideLayout = isAboutPage || isGraphPage || isSpecialProject;
 
diff --git a/src/components/ProjectRouteHandler.jsx b/src/components/ProjectRouteHandler.jsx
@@ -6,6 +6,7 @@ import Loading from './Loading';
 const ProjectPage = lazy(() => import('../pages/ProjectPage'));
 const StylishProjectDetailsPage = lazy(() => import('../pages/StylishProjectDetailsPage'));
 const EditorialProjectDetailsPage = lazy(() => import('../pages/EditorialProjectDetailsPage'));
+const MinimalModernProjectPage = lazy(() => import('../pages/MinimalModernProjectPage'));
 
 const ProjectRouteHandler = () => {
   const { slug } = useParams();
@@ -38,6 +39,14 @@ const ProjectRouteHandler = () => {
     );
   }
 
+  if (projectStyle === 'minimal-modern') {
+    return (
+      <Suspense fallback={<Loading />}>
+        <MinimalModernProjectPage />
+      </Suspense>
+    );
+  }
+
   return (
     <Suspense fallback={<Loading />}>
       <ProjectPage />
diff --git a/src/components/minimal-modern-project/MinimalDescription.jsx b/src/components/minimal-modern-project/MinimalDescription.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+const MinimalDescription = ({ content }) => {
+  if (!content) return null;
+
+  return (
+    <section className="py-32 bg-[#f3f1e9] font-instr-sans">
+      <div className="max-w-[1400px] mx-auto px-8 grid grid-cols-1 lg:grid-cols-12 gap-16">
+        <div className="lg:col-span-4 lg:col-start-1">
+           <h3 className="text-[10px] font-bold uppercase tracking-[0.4em] text-black/30 mb-12">
+             Detailed Overview
+           </h3>
+        </div>
+        <div className="lg:col-span-6 lg:col-start-5 prose prose-neutral prose-lg max-w-none">
+          <ReactMarkdown
+            components={{
+              h2: ({node, children, ...props}) => <h2 className="text-4xl font-instr-serif font-medium mb-12 tracking-tight text-black" {...props}>{children}</h2>,
+              p: ({node, ...props}) => <p className="text-black/70 leading-relaxed mb-8 font-light" {...props} />,
+              li: ({node, ...props}) => <li className="text-black/70 font-light mb-2" {...props} />,
+            }}
+          >
+            {content}
+          </ReactMarkdown>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default MinimalDescription;
diff --git a/src/components/minimal-modern-project/MinimalFooter.jsx b/src/components/minimal-modern-project/MinimalFooter.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+const MinimalFooter = ({ content, photoCredit }) => {
+  return (
+    <footer className="bg-[#f3f1e9] text-black pt-40 pb-20 font-instr-sans">
+      <div className="max-w-[1400px] mx-auto px-8">
+        <div className="flex flex-col md:flex-row justify-between items-end gap-20 mb-40">
+           <div className="max-w-2xl">
+             <h2 className="text-8xl md:text-[12rem] font-instr-serif font-bold tracking-tighter leading-[0.8] mb-12">
+               LET'S<br/>WORK
+             </h2>
+             <p className="text-2xl font-light text-black/40">
+               Exploring the boundaries of digital experience and visual storytelling.
+             </p>
+           </div>
+
+           <div className="flex flex-col items-end gap-4 text-[10px] font-bold uppercase tracking-[0.2em]">
+             <a href="mailto:hello@fezcode.com" className="hover:text-black transition-colors">Contact</a>
+             <a href="https://github.com/fezcode" target="_blank" rel="noopener noreferrer" className="hover:text-black transition-colors">GitHub</a>
+             <a href="https://twitter.com/fezcode" target="_blank" rel="noopener noreferrer" className="hover:text-black transition-colors">Twitter</a>
+           </div>
+        </div>
+
+        <div className="flex flex-col md:flex-row justify-between items-center pt-12 border-t border-black/5 text-[9px] font-bold uppercase tracking-widest text-black/20">
+          <div className="flex gap-8">
+            <span>© 2026 FEZCODEX</span>
+            <span>BUILT WITH REACT & TAILWIND</span>
+          </div>
+
+          {photoCredit && photoCredit.text && (
+            <div className="mt-4 md:mt-0">
+               Photo by <a href={photoCredit.link} className="text-black/40 hover:text-black underline">{photoCredit.text}</a>
+            </div>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+};
+export default MinimalFooter;
diff --git a/src/components/minimal-modern-project/MinimalHero.jsx b/src/components/minimal-modern-project/MinimalHero.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+
+const MinimalHero = ({ content, title: projectTitle, image }) => {
+  if (!content) return null;
+
+  const lines = content.split('\n');
+  const tagLine = lines.find(l => l.startsWith('tag:'))?.replace('tag:', '').trim() || 'DEFINE';
+  const subtitleLine = lines.find(l => l.startsWith('subtitle:'))?.replace('subtitle:', '').trim() || '';
+  const listItems = lines.filter(l => l.startsWith('- ')).map(l => l.replace('- ', '').trim());
+  const contentImage = lines.find(l => l.startsWith('image:'))?.replace('image:', '').trim();
+
+  const displayImage = contentImage || image;
+
+  return (
+    <section className="min-h-screen flex flex-col pt-32 pb-20 font-instr-sans">
+      <div className="max-w-[1400px] mx-auto px-8 w-full grid grid-cols-1 lg:grid-cols-12 gap-x-20 items-start">
+
+        {/* Left Column: Image Area */}
+        <div className="lg:col-span-4 relative">
+          <div className="flex justify-between items-end mb-4">
+             <span className="bg-black text-white px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest">
+               {tagLine}
+             </span>
+             <div className="flex gap-1">
+                <div className="w-2 h-6 bg-black"></div>
+                <div className="w-2 h-6 bg-black"></div>
+                <div className="w-2 h-6 bg-black"></div>
+             </div>
+          </div>
+          <div className="w-full bg-[#e8e6de] relative rounded-sm overflow-hidden shadow-sm aspect-[5/8]">
+            {displayImage ? (
+              <img
+                src={displayImage}
+                alt={projectTitle}
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <div className="w-full h-full flex items-center justify-center text-black/5 font-black text-9xl">
+                {projectTitle?.charAt(0)}
+              </div>
+            )}
+          </div>
+          <div className="mt-3 flex gap-1.5 items-center">
+              <div className="w-6 h-6 rounded-full border border-black/20 flex items-center justify-center text-[7px] font-bold text-black/60">DL</div>
+              <div className="w-6 h-6 rounded-full border border-black/20 flex items-center justify-center text-[7px] font-bold text-black/60">90</div>
+          </div>
+        </div>
+
+        {/* Right Column: Content Area */}
+        <div className="lg:col-span-8 lg:pl-10">
+          <div className="max-w-md">
+            <h2 className="text-[28px] font-medium text-black leading-tight mb-40 tracking-tight">
+              {subtitleLine}
+            </h2>
+
+            <div className="mb-10">
+              <button className="bg-[#eef35d] text-black px-4 py-1.5 flex items-center gap-2 font-bold uppercase text-[10px] tracking-widest border border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-none transition-all">
+                BEISPIEL ANZEIGEN <span className="text-[8px]">↗</span>
+              </button>
+            </div>
+
+            <div className="space-y-1 relative">
+              {/* Click floating tag */}
+              <div className="absolute right-[-40px] top-[10px] bg-black text-white px-3 py-1 text-[9px] font-bold uppercase tracking-widest rotate-[-5deg] shadow-lg flex items-center gap-2">
+                KLICKEN
+              </div>
+
+              {listItems.map((item, idx) => (
+                <div key={idx} className="group flex items-center gap-3 cursor-pointer py-1">
+                  <span className={`text-xl ${idx === 0 ? 'text-black opacity-100' : 'text-black/30'}`}>
+                    {idx === 0 ? '✦' : ''}
+                  </span>
+                  <div className="relative">
+                    <span className={`text-[36px] font-medium tracking-tight transition-all ${idx === 0 ? 'text-black' : 'text-black/30 group-hover:text-black/60'}`}>
+                      {item}
+                    </span>
+                    {idx === 0 && (
+                        <>
+                         <div className="absolute right-[-20px] top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-black" />
+                         <div className="absolute left-[-10px] top-[10px] pointer-events-none">
+                            <svg width="24" height="24" viewBox="0 0 24 24" className="text-black">
+                                <path fill="currentColor" d="M11.5,1.5L12,5L15.5,4.5L14,8L17.5,9.5L14,11L15.5,14.5L12,13L11.5,16.5L11,13L7.5,14.5L9,11L5.5,9.5L9,8L7.5,4.5L11,5L11.5,1.5Z" className="animate-spin-slow origin-center" />
+                            </svg>
+                         </div>
+                        </>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      {/* Divider line from image */}
+      <div className="max-w-[1400px] mx-auto px-8 w-full mt-24">
+        <div className="h-[1px] bg-black/10 w-full" />
+      </div>
+    </section>
+  );
+};
+
+export default MinimalHero;
diff --git a/src/components/minimal-modern-project/MinimalNavbar.jsx b/src/components/minimal-modern-project/MinimalNavbar.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const MinimalNavbar = ({ title, repoLink }) => {
+  return (
+    <nav className="absolute top-0 left-0 w-full z-50 font-instr-sans">
+      <div className="max-w-[1400px] mx-auto px-8 h-24 flex items-center justify-between">
+        <Link to="/" className="group flex items-center gap-2">
+          <span className="text-sm font-bold tracking-[0.3em] uppercase text-black">
+            Fezcodex
+          </span>
+          <div className="w-1.5 h-1.5 rounded-full bg-black" />
+        </Link>
+
+        <div className="flex items-center gap-10 text-[10px] font-bold uppercase tracking-[0.3em] text-black/40">
+          <Link to="/projects" className="hover:text-black transition-colors">Projects</Link>
+          <Link to="/about" className="hover:text-black transition-colors">About</Link>
+          {repoLink && (
+            <a
+              href={repoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="px-4 py-1.5 bg-black text-white hover:bg-black/80 transition-colors"
+            >
+              Github
+            </a>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default MinimalNavbar;
diff --git a/src/pages/MinimalModernProjectPage.jsx b/src/pages/MinimalModernProjectPage.jsx
