refactor: about me page v2

fezcode · fezcode · commit 458a16192306 · 2025-12-12T03:34:11.000+03:00
diff --git a/public/roadmap/roadmap.piml b/public/roadmap/roadmap.piml
@@ -115,3 +115,25 @@
     (priority) High
     (created_at) 2025-11-30T11:00:00+03:00
     (notes) A route for returning and rendering vocabulary components.
+
+  > (issues)
+    (id) FEZ-11
+    (title) Sprite Editor App.
+    (description) A pixel art editor that allows transparency and exporting as .bmp and .png
+    (category) Feature
+    (status) Planned
+    (priority) High
+    (created_at) 2025-12-12T03:22:00+03:00
+    (notes) App should use a artistic style, not default fezcodex style for the app.
+
+  > (issues)
+    (id) FEZ-12
+    (title) Re-imagine Home Page
+    (description) Current state of the home page is too old w.r.t. the other parts of the system.
+    (category) Feature
+    (status) Planned
+    (priority) High
+    (created_at) 2025-12-12T03:22:00+03:00
+    (notes) A hero or landing page using different styles must be implemented.
+
+
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -54,7 +54,7 @@ const Navbar = ({
           {!isSidebarOpen && (
             <Link to="/" className="flex items-center space-x-2">
               <Fez />
-              <span className="text-2xl font-semibold tracking-tight">
+              <span className="text-2xl tracking-tight font-mono">
                 fez<span className="text-primary-400">codex</span>
               </span>
             </Link>
diff --git a/src/pages/AboutPage.js b/src/pages/AboutPage.js
@@ -11,12 +11,12 @@ import {
 import NeuromancerHUD from './about-views/NeuromancerHUD';
 import SystemArchitecture from './about-views/SystemArchitecture';
 import MindMapConstellation from './about-views/MindMapConstellation';
-import SimpleText from './about-views/SimpleText';
+import ClassifiedDossier from './about-views/ClassifiedDossier';
 import { useAchievements } from '../context/AchievementContext';
 
 const ViewSwitcher = ({ currentView, setView }) => {
   const views = [
-    { id: 'simple', icon: Article, label: 'Simple' },
+    { id: 'dossier', icon: Article, label: 'Dossier' },
     { id: 'hud', icon: Terminal, label: 'Terminal' },
     { id: 'blueprint', icon: TreeStructure, label: 'Blueprint' },
     { id: 'map', icon: Graph, label: 'Mind Map' },
@@ -49,7 +49,7 @@ const ViewSwitcher = ({ currentView, setView }) => {
 };
 
 const AboutPage = () => {
-  const [view, setView] = useState('simple');
+  const [view, setView] = useState('dossier');
   const { unlockAchievement } = useAchievements();
 
   useEffect(() => {
@@ -63,8 +63,8 @@ const AboutPage = () => {
 
   const getButtonStyle = (currentView) => {
     switch (currentView) {
-      case 'simple':
-        return 'bg-transparent text-black border-black border-2 font-mono uppercase tracking-widest text-xs hover:bg-[#4a0404] hover:text-white hover:border-[#4a0404] rounded-none shadow-none';
+      case 'dossier':
+        return 'bg-white text-black border-black border-2 font-mono uppercase tracking-widest text-xs hover:bg-[#4a0404] hover:text-white hover:border-[#4a0404] rounded-none shadow-none';
       case 'hud':
         return 'bg-black text-green-500 border-green-500 border font-mono tracking-wider hover:bg-green-500 hover:text-black shadow-[0_0_10px_rgba(0,255,0,0.3)] rounded-sm';
       case 'blueprint':
@@ -101,12 +101,12 @@ const AboutPage = () => {
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.5 }}
-          className="w-full h-full"
+          className="w-full h-full overflow-y-auto"
         >
           {view === 'hud' && <NeuromancerHUD />}
           {view === 'blueprint' && <SystemArchitecture />}
           {view === 'map' && <MindMapConstellation />}
-          {view === 'simple' && <SimpleText />}
+          {view === 'dossier' && <ClassifiedDossier />}
         </motion.div>
       </AnimatePresence>
 
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
@@ -152,7 +152,7 @@ const HomePage = () => {
   return (
     <div className="py-16 sm:py-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl text-center">
+        <div className="mx-auto max-w-2xl text-center font-mono">
           <h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl">
             Welcome to fez<span className="text-primary-400">codex</span>
           </h1>
diff --git a/src/pages/about-views/ClassifiedDossier.js b/src/pages/about-views/ClassifiedDossier.js
@@ -23,7 +23,7 @@ const LinkRenderer = ({href, children}) => {
   );
 };
 
-const SimpleText = () => {
+const ClassifiedDossier = () => {
   const [content, setContent] = useState('');
   const [title, setTitle] = useState('');
   const [loading, setLoading] = useState(true);
@@ -144,4 +144,4 @@ const SimpleText = () => {
   );
 };
 
-export default SimpleText;
+export default ClassifiedDossier;
diff --git a/src/pages/about-views/MindMapConstellation.js b/src/pages/about-views/MindMapConstellation.js
@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { aboutData } from './aboutData';
-import { X, Sparkle } from '@phosphor-icons/react';
+import { X, Sparkle, Buildings } from '@phosphor-icons/react';
 
 const NODE_COLORS = {
   core: '#a78bfa', // purple
@@ -132,6 +132,7 @@ const MindMapConstellation = () => {
           label: e.company,
           color: NODE_COLORS.experience,
           type: 'Experience',
+          icon: Buildings, // Added default icon
           description: e.desc,
           stats: { role: e.role, period: e.period }
         };
@@ -146,21 +147,29 @@ const MindMapConstellation = () => {
     <div ref={containerRef} className="relative w-full h-screen bg-[#0f172a] overflow-hidden">
       {/* Background Stars */}
       <div className="absolute inset-0" style={{ background: 'radial-gradient(circle at center, #1e293b 0%, #0f172a 100%)' }}>
-          {[...Array(50)].map((_, i) => (
+          {[...Array(150)].map((_, i) => (
              <div
                key={i}
                className="absolute bg-white rounded-full opacity-20 animate-pulse"
                style={{
                   top: `${Math.random() * 100}%`,
                   left: `${Math.random() * 100}%`,
-                  width: Math.random() * 3 + 'px',
-                  height: Math.random() * 3 + 'px',
+                  width: Math.random() * 2 + 'px',
+                  height: Math.random() * 2 + 'px',
                   animationDelay: `${Math.random() * 5}s`
                }}
              />
           ))}
       </div>
 
+      {/* Background Planets */}
+      <div className="absolute inset-0 pointer-events-none opacity-30">
+         <div className="absolute top-[10%] left-[10%] w-32 h-32 rounded-full bg-purple-500 blur-3xl opacity-20" />
+         <div className="absolute top-[80%] left-[20%] w-48 h-48 rounded-full bg-blue-600 blur-3xl opacity-10" />
+         <div className="absolute top-[30%] right-[15%] w-24 h-24 rounded-full bg-cyan-400 blur-2xl opacity-20" />
+         <div className="absolute bottom-[10%] right-[10%] w-64 h-64 rounded-full bg-indigo-900 blur-3xl opacity-30" />
+      </div>
+
       {/* SVG Layer for lines (simplified connection to center) */}
       <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20">
          {nodes.map((node, i) => {
diff --git a/src/pages/about-views/NeuromancerHUD.js b/src/pages/about-views/NeuromancerHUD.js
diff --git a/src/pages/about-views/SystemArchitecture.js b/src/pages/about-views/SystemArchitecture.js
diff --git a/src/pages/about-views/aboutData.js b/src/pages/about-views/aboutData.js
