Update website layout to be more M3-like, reorganize lore into lore r…

…outer path, add analytics path to navigation rail, update bottom navigation for mobile to match desktop
Alan19 · Sep 8, 2024 · 740f341 · 740f341
1 parent fde1d24
commit 740f341
Show file tree

Hide file tree

Showing 69 changed files with 799 additions and 612 deletions.
diff --git a/api/routes/images.json b/api/routes/images.json
@@ -4764,5 +4764,95 @@
     "src": "https://alcorsiteartbucket.s3.amazonaws.com/alts/Sweet+Couple+%3C3_1.png",
     "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/thumbnail/alts/sweet_couple_3_1.webp",
     "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/alts/sweet_couple_3_1.webp"
+  },
+  {
+    "title": "Egyptian Costume Sketch",
+    "artist": "@KuroPenguinEx",
+    "tags": [
+      "Rastaban Form"
+    ],
+    "href": "https://bsky.app/profile/faintalcor.bsky.social/post/3l2y5hyqpdq2h",
+    "published": "2024-08-30",
+    "aspectRatio": 0.7069555302166477,
+    "rating": "general",
+    "characters": [
+      "Alcor"
+    ],
+    "src": "https://alcorsiteartbucket.s3.amazonaws.com/egyptian_costume_sketch.png",
+    "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/thumbnail/egyptian_costume_sketch.webp",
+    "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/egyptian_costume_sketch.webp"
+  },
+  {
+    "title": "Prevernal Sage Outfit",
+    "artist": "@hyper_whoz",
+    "tags": [
+      "Techwear",
+      "Knives",
+      "Rastaban Form",
+      "Hoodie"
+    ],
+    "href": "https://x.com/hyper_whoz/status/1830205089510023272",
+    "published": "2024-09-01",
+    "aspectRatio": 0.8813344594594594,
+    "rating": "mainstream",
+    "characters": [
+      "Alcor"
+    ],
+    "src": "https://alcorsiteartbucket.s3.amazonaws.com/prevernal_sage_outfit.png",
+    "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/thumbnail/prevernal_sage_outfit.webp",
+    "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/prevernal_sage_outfit.webp"
+  },
+  {
+    "title": "Lifewonders Water Gun Fight!",
+    "artist": "@sumiwohakuneko",
+    "tags": [
+      "Techwear",
+      "Rastaban Form"
+    ],
+    "href": "https://x.com/sumiwohakuneko/status/1830251675996860822",
+    "published": "2024-09-01",
+    "aspectRatio": 1.7777777777777777,
+    "rating": "sensitive",
+    "characters": [
+      "Alcor",
+      "Darwin"
+    ],
+    "src": "https://alcorsiteartbucket.s3.amazonaws.com/lifewonders_water_gun_fight.png",
+    "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/thumbnail/lifewonders_water_gun_fight.webp",
+    "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/lifewonders_water_gun_fight.webp"
+  },
+  {
+    "title": "Serotinal Evening at the Pier",
+    "artist": "@phy_sen",
+    "tags": [
+      "Serotinal Circuitboard",
+      "Eltanin Form",
+      "Techwear"
+    ],
+    "href": "https://x.com/phy_sen/status/1832797211790320011",
+    "published": "2024-09-08",
+    "aspectRatio": 1.7776666666666667,
+    "rating": "sensitive",
+    "characters": [
+      "Alcor"
+    ],
+    "src": "https://alcorsiteartbucket.s3.amazonaws.com/serotinal_evening_at_the_pier.png",
+    "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/thumbnail/serotinal_evening_at_the_pier.webp",
+    "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/serotinal_evening_at_the_pier.webp"
+  },
+  {
+    "tags": [
+      "Eltanin Form"
+    ],
+    "href": "https://x.com/phy_sen/status/1832797211790320011",
+    "aspectRatio": 1.7776666666666667,
+    "parent": "Serotinal Evening at the Pier",
+    "rating": "sensitive",
+    "characters": [
+      "Alcor"
+    ],
+    "src": "https://alcorsiteartbucket.s3.amazonaws.com/alts/Serotinal+Evening+at+the+Pier_1.png",
+    "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/thumbnail/alts/serotinal_evening_at_the_pier_1.webp",
+    "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/alts/serotinal_evening_at_the_pier_1.webp"
   }
 ]
diff --git a/package.json b/package.json
@@ -71,8 +71,8 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.6",
-    "gh-pages": "^6.1.1",
-    "@types/react-calendar-heatmap": "^1.6.7"
+    "@types/react-calendar-heatmap": "^1.6.7",
+    "gh-pages": "^6.1.1"
   },
   "pnpm": {
     "overrides": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/castor_stamp.png b/public/castor_stamp.png
diff --git a/src/App.css b/src/App.css
@@ -6,3 +6,8 @@
     /*noinspection CssUnresolvedCustomProperty*/
     color: var(--md-sys-color-primary) !important;
 }
+
+.selected-rail-item::part(indicator) {
+    /*noinspection CssUnresolvedCustomProperty*/
+    background-color: var(--md-sys-color-secondaryContainer) !important;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,6 +8,7 @@ import {CssVarsProvider} from "@mui/material-next";
 import {alcorTheme, AppTheme, websiteThemes} from "./Themes";
 import {useLocalStorage} from "./UseLocalStorage";
 import {router} from "./RouterPaths";
+import {drawerColor} from "./components/common/Navigation";
 
 // TODO get rid of this
 export const theme = createTheme({
@@ -29,6 +30,15 @@ export const theme = createTheme({
             main: "#535F70",
             dark: "#BBC7DB"
         }
+    },
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 900,
+            lg: 1200,
+            xl: 2000
+        }
     }
 });
 
@@ -50,7 +60,11 @@ export function Website() {
 function App() {
     return (
         <LocalizationProvider dateAdapter={AdapterDayjs}>
-            <div className="App" style={{backgroundColor: 'var(--md-sys-color-surface)', minHeight: "100vh", color: 'var(--md-palette-text-primary)'}}>
+            <div className="App" style={{
+                backgroundColor: drawerColor,
+                minHeight: "100vh",
+                color: 'var(--md-palette-text-primary)'
+            }}>
                 <RouterProvider router={router}/>
             </div>
         </LocalizationProvider>

diff --git a/src/Root.tsx b/src/Root.tsx
@@ -1,15 +1,15 @@
 import React from "react";
 import {Outlet, useLocation} from "react-router-dom";
-import {NavigationRail} from "./components/navigation/NavigationRail";
+import {Navigation} from "./components/common/Navigation";
 import {LinksPage} from "./components/links/LinksPage";
 
 export function Root() {
-    return <NavigationRail>
+    return <Navigation>
         <div style={{display: 'flex'}}>
             {
                 useLocation().pathname === '/' && <LinksPage/>
             }
             <Outlet/>
         </div>
-    </NavigationRail>;
+    </Navigation>;
 }
diff --git a/src/RouterPaths.tsx b/src/RouterPaths.tsx
@@ -2,17 +2,17 @@ import {createHashRouter} from "react-router-dom";
 import {Root} from "./Root";
 import {Gallery} from "./components/gallery/Gallery";
 import {ArtworkPage} from "./components/gallery/artwork/ArtworkPage";
-import {AboutPage} from "./components/about/AboutPage";
-import {alcorForms, superheroSuits} from "./components/about/about-resources/alcorForms";
-import {FormPage} from "./components/about/FormPage";
-import {AlcorWorldInfo} from "./components/about/AlcorWorldInfo";
-import {BioEnhancementIntro} from "./components/about/BioEnhancementIntro";
-import {AlcorOutfits} from "./components/about/outfits/AlcorOutfits";
-import {SomaInfo} from "./components/about/characters/SomaInfo";
+import {AboutPage} from "./components/lore/world/AboutPage";
+import {BioEnhancementIntro} from "./components/lore/world/BioEnhancementIntro";
+import {AlcorOutfits} from "./components/lore/outfits/AlcorOutfits";
+import {SomaInfo} from "./components/lore/characters/SomaInfo";
 import React from "react";
 import {AnalyticsPage} from "./components/analytics/AnalyticsPage";
 import {MinimalGalleryPage} from "./components/gallery/MinimalGalleryPage";
-import {CharactersPage} from "./components/about/characters/CharactersPage";
+import {CharactersPage} from "./components/lore/characters/CharactersPage";
+import {AboutMePage} from "./components/about/AboutMePage";
+import {FormPage} from "./components/lore/characters/FormPage";
+import {AlcorWorldInfo} from "./components/lore/world/AlcorWorldInfo";
 
 export const router = createHashRouter([
     {
@@ -39,14 +39,22 @@ export const router = createHashRouter([
 
             {
                 path: "/about",
+                element: <AboutMePage/>,
+            },
+            {
+                path: "/lore",
                 element: <AboutPage/>,
                 children: [
-                    ...alcorForms.concat(superheroSuits).map(value => ({
-                        path: `${value.link}`,
-                        element: <FormPage formInformation={value}/>
-                    })),
                     {
-                        path: '',
+                        path: "/lore",
+                        element: <CharactersPage/>,
+                    },
+                    {
+                        path: "/lore/:character",
+                        element: <FormPage/>
+                    },
+                    {
+                        path: "world",
                         element: <AlcorWorldInfo/>
                     },
                     {
@@ -62,10 +70,6 @@ export const router = createHashRouter([
                         element: <SomaInfo/>
                     }
                 ]
-            },
-            {
-                path: "/characters",
-                element: <CharactersPage/>
             }
         ]
     },

diff --git a/src/Themes.tsx b/src/Themes.tsx
@@ -9,65 +9,65 @@ function createAlcorTheme() {
             palette: {
                 "primary": {
                     "0": "#000000",
-                    "10": "#001B3D",
-                    "20": "#003062",
-                    "30": "#00468B",
-                    "40": "#275EA7",
-                    "50": "#4577C1",
-                    "60": "#6091DD",
-                    "70": "#7CACFA",
-                    "80": "#A8C8FF",
-                    "90": "#D6E3FF",
-                    "95": "#ECF0FF",
+                    "10": "#001C3B",
+                    "20": "#00315F",
+                    "30": "#004786",
+                    "40": "#285FA1",
+                    "50": "#4678BC",
+                    "60": "#6192D8",
+                    "70": "#7DADF4",
+                    "80": "#A6C8FF",
+                    "90": "#D5E3FF",
+                    "95": "#EBF1FF",
                     "99": "#FDFBFF",
                     "100": "#FFFFFF"
                 },
                 "secondary": {
                     "0": "#000000",
-                    "10": "#121C2B",
-                    "20": "#273141",
-                    "30": "#3E4758",
-                    "40": "#555F71",
-                    "50": "#6E778A",
-                    "60": "#8791A5",
-                    "70": "#A2ABC0",
-                    "80": "#BDC7DC",
-                    "90": "#D9E3F8",
-                    "95": "#ECF0FF",
+                    "10": "#121C2A",
+                    "20": "#273140",
+                    "30": "#3E4757",
+                    "40": "#555F70",
+                    "50": "#6E7789",
+                    "60": "#8891A3",
+                    "70": "#A2ACBE",
+                    "80": "#BDC7DA",
+                    "90": "#D9E3F7",
+                    "95": "#EBF1FF",
                     "99": "#FDFBFF",
                     "100": "#FFFFFF"
                 },
                 "tertiary": {
                     "0": "#000000",
-                    "10": "#28132F",
-                    "20": "#3E2845",
-                    "30": "#563E5C",
-                    "40": "#6F5675",
-                    "50": "#896E8F",
-                    "60": "#A487A9",
-                    "70": "#BFA1C5",
-                    "80": "#DCBCE1",
-                    "90": "#F9D8FE",
-                    "95": "#FFEBFF",
+                    "10": "#26142E",
+                    "20": "#3D2944",
+                    "30": "#543F5C",
+                    "40": "#6D5675",
+                    "50": "#876F8E",
+                    "60": "#A288A9",
+                    "70": "#BDA2C4",
+                    "80": "#D9BDE0",
+                    "90": "#F6D9FD",
+                    "95": "#FEEBFF",
                     "99": "#FFFBFF",
                     "100": "#FFFFFF"
                 },
                 "neutral": {
                     "0": "#000000",
-                    "10": "#1A1B1E",
-                    "17": "#252629",
+                    "10": "#1A1C1E",
+                    "17": "#32353a",
                     "20": "#2F3033",
-                    "22": "#3A3B3F",
+                    "22": "#32353a",
                     "30": "#46474A",
-                    "40": "#525256",
-                    "50": "#5E5E62",
-                    "60": "#77777A",
-                    "70": "#909094",
-                    "80": "#ABABAF",
-                    "90": "#E2E2E9",
-                    "92": "#E7E8EE",
-                    "95": "#F1F0F4",
-                    "96": "#F3F3FA",
+                    "40": "#5E5E61",
+                    "50": "#77777A",
+                    "60": "#909094",
+                    "70": "#ABABAE",
+                    "80": "#C7C6C9",
+                    "90": "#E3E2E5",
+                    "92": "#e7e8ee",
+                    "95": "#EFF1F1",
+                    "96": "#f3f3fa",
                     "99": "#FDFBFF",
                     "100": "#FFFFFF"
                 },

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -11,7 +11,7 @@ export function Header() {
                 Cougar-dragon doing his best! ✨
             </Typography>
             <Typography variant={"subtitle2"}>
-                He/him ◈ Software Engineer ◈ TTRPG Enthusiast ◈ Casual CFVG Player 🎴
+                He/him ◈ Software Engineer 👨‍💻 ◈ TTRPG Enthusiast 🎲 ◈ Casual CFVG Player 🎴
             </Typography>
         </>
     );