refactor: home page.

fezcode · fezcode · commit 0d47da148401 · 2025-12-12T04:35:14.000+03:00
diff --git a/public/apps/apps.json b/public/apps/apps.json
@@ -147,6 +147,14 @@
     "icon": "SparkleIcon",
     "order": 2,
     "apps": [
+      {
+        "slug": "sprite-editor",
+        "to": "/apps/sprite-editor",
+        "title": "Sprite Editor",
+        "description": "A retro pixel art editor for creating sprites.",
+        "icon": "PencilSimpleIcon",
+        "created_at": "2025-12-12T00:00:00+03:00"
+      },
       {
         "slug": "rotary-phone",
         "to": "/apps/rotary-phone",
diff --git a/public/roadmap/roadmap.piml b/public/roadmap/roadmap.piml
@@ -121,7 +121,7 @@
     (title) Sprite Editor App.
     (description) A pixel art editor that allows transparency and exporting as .bmp and .png
     (category) Feature
-    (status) Planned
+    (status) Completed
     (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.
@@ -131,7 +131,7 @@
     (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
+    (status) Completed
     (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/public/timeline/timeline.json b/public/timeline/timeline.json
@@ -1,4 +1,20 @@
 [
+  {
+    "date": "2025-12-12",
+    "title": "About Me Page Overhaul",
+    "description": "Added 4 major version of the about me page.",
+    "type": "refactor",
+    "icon": "SparkleIcon",
+    "link": "/#/about"
+  },
+  {
+    "date": "2025-12-12",
+    "title": "Home Page Overhaul Refactor",
+    "description": "Modernized Home Page section.",
+    "type": "refactor",
+    "icon": "SparkleIcon",
+    "link": "/#/"
+  },
   {
     "date": "2025-12-11",
     "title": "Global Side Panel & Vocabulary Links",
@@ -202,7 +218,7 @@
     "description": "Initial implementation of the About Me page.",
     "type": "content",
     "icon": "BriefcaseIcon",
-    "link": "/#/about-me"
+    "link": "/#/about"
   },
   {
     "date": "2025-10-15",
@@ -220,4 +236,4 @@
     "icon": "CodeIcon",
     "link": "/"
   }
-]
+]
diff --git a/src/components/AnimatedRoutes.js b/src/components/AnimatedRoutes.js
@@ -98,6 +98,7 @@ const WordLadderPage = lazy(() => import('../pages/apps/WordLadderPage'));
 const LightsOutPage = lazy(() => import('../pages/apps/LightsOutPage'));
 const NonogramPage = lazy(() => import('../pages/apps/NonogramPage'));
 const WhackABugPage = lazy(() => import('../pages/apps/WhackABugPage'));
+const SpriteEditorPage = lazy(() => import('../pages/apps/SpriteEditorPage'));
 const BubbleWrapPage = lazy(() => import('../pages/apps/BubbleWrapPage'));
 const LoremIpsumGeneratorPage = lazy(
   () => import('../pages/apps/LoremIpsumGeneratorPage'),
@@ -853,6 +854,10 @@ function AnimatedRoutes() {
           path="/apps::phone"
           element={<Navigate to="/apps/rotary-phone" replace />}
         />
+        <Route
+          path="/apps::se"
+          element={<Navigate to="/apps/sprite-editor" replace />}
+        />
         {/* End of hardcoded redirects */}
         <Route
           path="/apps/ip"
@@ -1591,6 +1596,22 @@ function AnimatedRoutes() {
             </motion.div>
           }
         />
+        <Route
+          path="/apps/sprite-editor"
+          element={
+            <motion.div
+              initial="initial"
+              animate="in"
+              exit="out"
+              variants={pageVariants}
+              transition={pageTransition}
+            >
+              <Suspense fallback={<Loading />}>
+                <SpriteEditorPage />
+              </Suspense>
+            </motion.div>
+          }
+        />
         <Route
           path="/apps/simon-says"
           element={
diff --git a/src/components/ProjectCard.js b/src/components/ProjectCard.js
@@ -60,7 +60,7 @@ const ProjectCard = ({ project, size = 1 }) => {
   return (
     <div
       ref={cardRef}
-      className={`group relative flex flex-col overflow-hidden rounded-xl bg-gray-900/90 border border-gray-800 hover:border-cyan-500/50 transition-all duration-500 ease-out hover:shadow-[0_0_20px_-5px_rgba(6,182,212,0.4)] hover:-translate-y-1 ${colSpanClass}`}
+      className={`group relative flex flex-col overflow-hidden rounded-xl bg-gray-900/90 border border-gray-800 hover:border-cyan-500/50 transition-all duration-500 ease-out hover:shadow-[0_0_20px_-5px_rgba(6,182,212,0.4)] hover:-translate-y-1 ${colSpanClass} min-h-[300px]`}
     >
       {/* Background Grid Effect */}
       <div className="absolute inset-0 z-0 opacity-20 pointer-events-none bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
diff --git a/src/pages/apps/SpriteEditorPage.js b/src/pages/apps/SpriteEditorPage.js

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ const ProjectCard = ({ project, size = 1 }) => {`
`60`	`60`	`return (`
`61`	`61`	`<div`
`62`	`62`	`ref={cardRef}`
`63`		- className={`group relative flex flex-col overflow-hidden rounded-xl bg-gray-900/90 border border-gray-800 hover:border-cyan-500/50 transition-all duration-500 ease-out hover:shadow-[0_0_20px_-5px_rgba(6,182,212,0.4)] hover:-translate-y-1 ${colSpanClass}`}
	`63`	+ className={`group relative flex flex-col overflow-hidden rounded-xl bg-gray-900/90 border border-gray-800 hover:border-cyan-500/50 transition-all duration-500 ease-out hover:shadow-[0_0_20px_-5px_rgba(6,182,212,0.4)] hover:-translate-y-1 ${colSpanClass} min-h-[300px]`}
`64`	`64`	`>`
`65`	`65`	`{/* Background Grid Effect */}`
`66`	`66`	`<div className="absolute inset-0 z-0 opacity-20 pointer-events-none bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />`