From 56db441cf1f4b4fe0b1f47c546e7959465499794 Mon Sep 17 00:00:00 2001 From: User Date: Sat, 17 Jan 2026 16:27:22 -0600 Subject: [PATCH 01/23] git ignore --- .gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 5ef6a52..e6ef384 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - +.cursor/ +ai-notes/ +docs/ # dependencies /node_modules /.pnp From 540a516325ecb052b7bc8ccbf6b300933052f131 Mon Sep 17 00:00:00 2001 From: User Date: Sat, 17 Jan 2026 16:33:40 -0600 Subject: [PATCH 02/23] feat: Add new dependencies for UI components and utility functions, including Radix UI, class variance authority, clsx, and tailwind-merge. --- lib/themes.ts | 169 ++++++++++++++++++++++++++++++++++++++++++++++ lib/utils.ts | 6 ++ package-lock.json | 68 +++++++++++++++++++ package.json | 4 ++ 4 files changed, 247 insertions(+) create mode 100644 lib/themes.ts create mode 100644 lib/utils.ts diff --git a/lib/themes.ts b/lib/themes.ts new file mode 100644 index 0000000..6d011f5 --- /dev/null +++ b/lib/themes.ts @@ -0,0 +1,169 @@ +export interface Theme { + name: string + label: string + cssVars: { + light: Record + dark: Record + } +} + +export const themes: Theme[] = [ + { + name: "zinc", + label: "Zinc", + cssVars: { + light: { + "--background": "0 0% 100%", + "--foreground": "240 10% 3.9%", + "--card": "0 0% 100%", + "--card-foreground": "240 10% 3.9%", + "--popover": "0 0% 100%", + "--popover-foreground": "240 10% 3.9%", + "--primary": "240 5.9% 10%", + "--primary-foreground": "0 0% 98%", + "--secondary": "240 4.8% 95.9%", + "--secondary-foreground": "240 5.9% 10%", + "--muted": "240 4.8% 95.9%", + "--muted-foreground": "240 3.8% 46.1%", + "--accent": "240 4.8% 95.9%", + "--accent-foreground": "240 5.9% 10%", + "--destructive": "0 84.2% 60.2%", + "--destructive-foreground": "0 0% 98%", + "--border": "240 5.9% 90%", + "--input": "240 5.9% 90%", + "--ring": "240 10% 3.9%", + "--radius": "0.5rem", + }, + dark: { + "--background": "240 10% 3.9%", + "--foreground": "0 0% 98%", + "--card": "240 10% 3.9%", + "--card-foreground": "0 0% 98%", + "--popover": "240 10% 3.9%", + "--popover-foreground": "0 0% 98%", + "--primary": "0 0% 98%", + "--primary-foreground": "240 5.9% 10%", + "--secondary": "240 3.7% 15.9%", + "--secondary-foreground": "0 0% 98%", + "--muted": "240 3.7% 15.9%", + "--muted-foreground": "240 5% 64.9%", + "--accent": "240 3.7% 15.9%", + "--accent-foreground": "0 0% 98%", + "--destructive": "0 62.8% 30.6%", + "--destructive-foreground": "0 0% 98%", + "--border": "240 3.7% 15.9%", + "--input": "240 3.7% 15.9%", + "--ring": "240 4.9% 83.9%", + }, + }, + }, + { + name: "ocean", + label: "Ocean", + cssVars: { + light: { + "--background": "0 0% 100%", + "--foreground": "222.2 84% 4.9%", + "--card": "0 0% 100%", + "--card-foreground": "222.2 84% 4.9%", + "--popover": "0 0% 100%", + "--popover-foreground": "222.2 84% 4.9%", + "--primary": "221.2 83.2% 53.3%", + "--primary-foreground": "210 40% 98%", + "--secondary": "210 40% 96.1%", + "--secondary-foreground": "222.2 47.4% 11.2%", + "--muted": "210 40% 96.1%", + "--muted-foreground": "215.4 16.3% 46.9%", + "--accent": "210 40% 96.1%", + "--accent-foreground": "222.2 47.4% 11.2%", + "--destructive": "0 84.2% 60.2%", + "--destructive-foreground": "210 40% 98%", + "--border": "214.3 31.8% 91.4%", + "--input": "214.3 31.8% 91.4%", + "--ring": "221.2 83.2% 53.3%", + "--radius": "0.5rem", + }, + dark: { + "--background": "222.2 84% 4.9%", + "--foreground": "210 40% 98%", + "--card": "222.2 84% 4.9%", + "--card-foreground": "210 40% 98%", + "--popover": "222.2 84% 4.9%", + "--popover-foreground": "210 40% 98%", + "--primary": "217.2 91.2% 59.8%", + "--primary-foreground": "222.2 47.4% 11.2%", + "--secondary": "217.2 32.6% 17.5%", + "--secondary-foreground": "210 40% 98%", + "--muted": "217.2 32.6% 17.5%", + "--muted-foreground": "215 20.2% 65.1%", + "--accent": "217.2 32.6% 17.5%", + "--accent-foreground": "210 40% 98%", + "--destructive": "0 62.8% 30.6%", + "--destructive-foreground": "210 40% 98%", + "--border": "217.2 32.6% 17.5%", + "--input": "217.2 32.6% 17.5%", + "--ring": "224.3 76.3% 48%", + }, + }, + }, + { + name: "midnight", + label: "Midnight", + cssVars: { + light: { + "--background": "0 0% 100%", + "--foreground": "224 71.4% 4.1%", + "--card": "0 0% 100%", + "--card-foreground": "224 71.4% 4.1%", + "--popover": "0 0% 100%", + "--popover-foreground": "224 71.4% 4.1%", + "--primary": "262.1 83.3% 57.8%", + "--primary-foreground": "210 20% 98%", + "--secondary": "220 14.3% 95.9%", + "--secondary-foreground": "220.9 39.3% 11%", + "--muted": "220 14.3% 95.9%", + "--muted-foreground": "220 8.9% 46.1%", + "--accent": "220 14.3% 95.9%", + "--accent-foreground": "220.9 39.3% 11%", + "--destructive": "0 84.2% 60.2%", + "--destructive-foreground": "210 20% 98%", + "--border": "220 13% 91%", + "--input": "220 13% 91%", + "--ring": "262.1 83.3% 57.8%", + "--radius": "0.5rem", + }, + dark: { + "--background": "224 71.4% 4.1%", + "--foreground": "210 20% 98%", + "--card": "224 71.4% 4.1%", + "--card-foreground": "210 20% 98%", + "--popover": "224 71.4% 4.1%", + "--popover-foreground": "210 20% 98%", + "--primary": "263.4 70% 50.4%", + "--primary-foreground": "210 20% 98%", + "--secondary": "215 27.9% 16.9%", + "--secondary-foreground": "210 20% 98%", + "--muted": "215 27.9% 16.9%", + "--muted-foreground": "217.9 10.6% 64.9%", + "--accent": "215 27.9% 16.9%", + "--accent-foreground": "210 20% 98%", + "--destructive": "0 62.8% 30.6%", + "--destructive-foreground": "210 20% 98%", + "--border": "215 27.9% 16.9%", + "--input": "215 27.9% 16.9%", + "--ring": "263.4 70% 50.4%", + }, + }, + }, +] + +export function applyTheme(themeName: string, isDark: boolean = true) { + const theme = themes.find((t) => t.name === themeName) || themes[0] + const vars = isDark ? theme.cssVars.dark : theme.cssVars.light + + const root = document.documentElement + + Object.entries(vars).forEach(([key, value]) => { + root.style.setProperty(key, value) + }) +} diff --git a/lib/utils.ts b/lib/utils.ts new file mode 100644 index 0000000..03aaa4b --- /dev/null +++ b/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/package-lock.json b/package-lock.json index 6dc3229..ea89502 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "open-superintelligence-lab-github-io", "version": "0.1.0", "dependencies": { + "@radix-ui/react-slot": "^1.2.4", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", "highlight.js": "^11.11.1", "lucide-react": "^0.544.0", "next": "15.5.3", @@ -18,6 +21,7 @@ "rehype-katex": "^7.0.1", "remark-gfm": "^4.0.1", "remark-math": "^6.0.0", + "tailwind-merge": "^3.4.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { @@ -892,6 +896,39 @@ "node": ">=14" } }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz", + "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz", + "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.2" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -2142,11 +2179,32 @@ "node": ">= 6" } }, + "node_modules/class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "^2.1.1" + }, + "funding": { + "url": "https://polar.sh/cva" + } + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", @@ -6884,6 +6942,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tailwind-merge": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz", + "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.17", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", diff --git a/package.json b/package.json index b08ac6b..2be3772 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,9 @@ "serve:out": "npx serve out" }, "dependencies": { + "@radix-ui/react-slot": "^1.2.4", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", "highlight.js": "^11.11.1", "lucide-react": "^0.544.0", "next": "15.5.3", @@ -22,6 +25,7 @@ "rehype-katex": "^7.0.1", "remark-gfm": "^4.0.1", "remark-math": "^6.0.0", + "tailwind-merge": "^3.4.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { From 929e8a3a9100b5db7e6bd4a7d7ee1c1a2baa8a0d Mon Sep 17 00:00:00 2001 From: User Date: Sat, 17 Jan 2026 17:21:19 -0600 Subject: [PATCH 03/23] pallette provider --- app/globals.css | 126 ++++++++++++++++---------------- app/layout.tsx | 6 +- app/page.tsx | 46 ++++++------ components/palette-provider.tsx | 12 +++ lib/palettes/loader.ts | 90 +++++++++++++++++++++++ lib/palettes/utils.ts | 69 +++++++++++++++++ public/palettes/default.json | 50 +++++++++++++ public/palettes/ink-wash.json | 50 +++++++++++++ styles/math-styles.css | 64 ++++++++-------- tailwind.config.js | 50 ++++++++++--- 10 files changed, 435 insertions(+), 128 deletions(-) create mode 100644 components/palette-provider.tsx create mode 100644 lib/palettes/loader.ts create mode 100644 lib/palettes/utils.ts create mode 100644 public/palettes/default.json create mode 100644 public/palettes/ink-wash.json diff --git a/app/globals.css b/app/globals.css index 0e28869..2ac6495 100644 --- a/app/globals.css +++ b/app/globals.css @@ -6,22 +6,22 @@ body { font-family: system-ui, sans-serif; } -/* Custom scrollbar for dark theme */ +/* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { - background: #1e293b; + background: hsl(var(--scrollbar-track)); } ::-webkit-scrollbar-thumb { - background: #475569; + background: hsl(var(--scrollbar-thumb)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { - background: #64748b; + background: hsl(var(--scrollbar-thumb-hover)); } /* Smooth transitions for all interactive elements */ @@ -78,57 +78,59 @@ body { @layer base { :root { - --background: 0 0% 100%; - --foreground: 0 0% 3.9%; - --card: 0 0% 100%; - --card-foreground: 0 0% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 0 0% 3.9%; - --primary: 0 0% 9%; - --primary-foreground: 0 0% 98%; - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; - --muted: 0 0% 96.1%; - --muted-foreground: 0 0% 45.1%; - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --ring: 0 0% 3.9%; + /* Base theme colors - dark theme as default */ + --background: 222 47% 11%; + --foreground: 210 40% 98%; + --card: 222 47% 11%; + --card-foreground: 210 40% 98%; + --popover: 222 47% 11%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222 47% 11%; + --secondary: 217 32% 17%; + --secondary-foreground: 210 40% 98%; + --muted: 217 32% 17%; + --muted-foreground: 215 20% 65%; + --accent: 217 32% 17%; + --accent-foreground: 210 40% 98%; + --destructive: 0 84% 60%; + --destructive-foreground: 210 40% 98%; + --border: 217 32% 17%; + --input: 217 32% 17%; + --ring: 217 91% 60%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; - } - .dark { - --background: 0 0% 3.9%; - --foreground: 0 0% 98%; - --card: 0 0% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 0 0% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 0 0% 9%; - --secondary: 0 0% 14.9%; - --secondary-foreground: 0 0% 98%; - --muted: 0 0% 14.9%; - --muted-foreground: 0 0% 63.9%; - --accent: 0 0% 14.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --border: 0 0% 14.9%; - --input: 0 0% 14.9%; - --ring: 0 0% 83.1%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; + /* Scrollbar colors */ + --scrollbar-track: 222 47% 11%; + --scrollbar-thumb: 217 32% 28%; + --scrollbar-thumb-hover: 215 20% 50%; + /* Math styling colors */ + --math-primary: 213 94% 68%; + --math-secondary: 270 91% 65%; + --math-accent: 160 84% 39%; + --math-text: 45 93% 47%; + --math-relation: 330 81% 60%; + --math-bracket: 215 16% 47%; + /* Syntax highlighting colors */ + --syntax-bg: 222 47% 11%; + --syntax-text: 213 27% 84%; + --syntax-keyword: 270 91% 65%; + --syntax-string: 160 84% 39%; + --syntax-comment: 215 16% 47%; + --syntax-number: 45 93% 47%; + --syntax-function: 213 94% 68%; + --syntax-variable: 330 81% 60%; + /* Gradient colors */ + --gradient-start: 222 47% 11%; + --gradient-mid: 222 47% 17%; + --gradient-end: 222 47% 11%; + --gradient-accent-1: 217 91% 60%; + --gradient-accent-2: 270 91% 65%; + --gradient-accent-3: 187 85% 53%; } } @@ -249,14 +251,14 @@ body { .chatbot-markdown .hljs-comment, .chatbot-markdown .hljs-quote { - color: #6a737d; + color: hsl(var(--syntax-comment)); font-style: italic; } .chatbot-markdown .hljs-keyword, .chatbot-markdown .hljs-selector-tag, .chatbot-markdown .hljs-subst { - color: #d73a49; + color: hsl(var(--syntax-keyword)); font-weight: bold; } @@ -265,59 +267,59 @@ body { .chatbot-markdown .hljs-variable, .chatbot-markdown .hljs-template-variable, .chatbot-markdown .hljs-tag .hljs-attr { - color: #005cc5; + color: hsl(var(--syntax-function)); } .chatbot-markdown .hljs-string, .chatbot-markdown .hljs-doctag { - color: #032f62; + color: hsl(var(--syntax-string)); } .chatbot-markdown .hljs-title, .chatbot-markdown .hljs-section, .chatbot-markdown .hljs-selector-id { - color: #6f42c1; + color: hsl(var(--syntax-keyword)); font-weight: bold; } .chatbot-markdown .hljs-type, .chatbot-markdown .hljs-class .hljs-title { - color: #d73a49; + color: hsl(var(--syntax-variable)); font-weight: bold; } .chatbot-markdown .hljs-tag, .chatbot-markdown .hljs-name, .chatbot-markdown .hljs-attribute { - color: #22863a; + color: hsl(var(--syntax-string)); font-weight: normal; } .chatbot-markdown .hljs-regexp, .chatbot-markdown .hljs-link { - color: #032f62; + color: hsl(var(--syntax-string)); } .chatbot-markdown .hljs-symbol, .chatbot-markdown .hljs-bullet { - color: #e36209; + color: hsl(var(--syntax-number)); } .chatbot-markdown .hljs-built_in, .chatbot-markdown .hljs-builtin-name { - color: #005cc5; + color: hsl(var(--syntax-function)); } .chatbot-markdown .hljs-meta { - color: #6a737d; + color: hsl(var(--syntax-comment)); } .chatbot-markdown .hljs-deletion { - background: #ffeef0; + background: hsl(var(--destructive) / 0.1); } .chatbot-markdown .hljs-addition { - background: #f0fff4; + background: hsl(var(--math-accent) / 0.1); } .chatbot-markdown .hljs-emphasis { diff --git a/app/layout.tsx b/app/layout.tsx index 9ee9fff..9f3c9c1 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -4,6 +4,7 @@ import "./globals.css"; import "highlight.js/styles/github-dark.css"; import { Navigation } from "@/components/navigation"; import { Footer } from "@/components/footer"; +import { PaletteProvider } from "@/components/palette-provider"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -26,11 +27,12 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + -
+ +
{children} diff --git a/app/page.tsx b/app/page.tsx index 47ab88f..2766a5f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -8,13 +8,13 @@ export default function Home() { {/* Hero Section */}
{/* Animated mesh gradient background */} -
+
{/* Animated gradient mesh overlay */}
-
-
-
+
+
+
{/* Grid pattern overlay */} @@ -40,7 +40,7 @@ export default function Home() {
{/* Subtitle with typing effect styling */} -

+

Do AI research with top tier AI researchers

@@ -75,9 +75,9 @@ export default function Home() {
diff --git a/components/palette-provider.tsx b/components/palette-provider.tsx index a8a9a6f..31f1a63 100644 --- a/components/palette-provider.tsx +++ b/components/palette-provider.tsx @@ -1,11 +1,16 @@ 'use client'; import { useEffect } from 'react'; -import { initPalette } from '@/lib/palettes/loader'; +import { applyPalette } from '@/lib/palettes/loader'; + +const STORAGE_KEY = 'palette-preference'; export function PaletteProvider() { useEffect(() => { - initPalette(); + // Check for saved preference first, otherwise use default + const saved = localStorage.getItem(STORAGE_KEY); + const paletteName = saved || 'default'; + applyPalette(paletteName).catch(console.error); }, []); return null; diff --git a/components/palette-switcher.tsx b/components/palette-switcher.tsx new file mode 100644 index 0000000..10d9bbf --- /dev/null +++ b/components/palette-switcher.tsx @@ -0,0 +1,114 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { applyPalette } from '@/lib/palettes/loader'; + +const AVAILABLE_PALETTES = [ + { name: 'default', label: 'Default (Dark)' }, + { name: 'ink-wash', label: 'Ink Wash (Light)' }, +]; + +const STORAGE_KEY = 'palette-preference'; + +export function PaletteSwitcher() { + const [currentPalette, setCurrentPalette] = useState('default'); + const [isOpen, setIsOpen] = useState(false); + + useEffect(() => { + // Load saved preference or use default + const saved = localStorage.getItem(STORAGE_KEY); + if (saved && AVAILABLE_PALETTES.some(p => p.name === saved)) { + setCurrentPalette(saved); + applyPalette(saved).catch(console.error); + } + }, []); + + const handlePaletteChange = async (paletteName: string) => { + try { + await applyPalette(paletteName); + setCurrentPalette(paletteName); + localStorage.setItem(STORAGE_KEY, paletteName); + setIsOpen(false); + } catch (error) { + console.error('Failed to apply palette:', error); + } + }; + + return ( +
+
+ {/* Dropdown Menu */} + {isOpen && ( + <> +
setIsOpen(false)} + /> +
e.stopPropagation()} + > +
+ {AVAILABLE_PALETTES.map((palette) => ( + + ))} +
+
+ + )} + + {/* Toggle Button */} + +
+
+ ); +} From 25beac9993f18d904a9324a59185b171666c82e2 Mon Sep 17 00:00:00 2001 From: User Date: Sat, 17 Jan 2026 17:48:38 -0600 Subject: [PATCH 05/23] site wide color pallete abstraction --- app/globals.css | 30 +++ app/learn/page.tsx | 414 +++++++++++++++---------------- app/page.tsx | 10 +- components/course-navigation.tsx | 26 +- components/footer.tsx | 56 ++--- components/lesson-page.tsx | 24 +- components/markdown-renderer.tsx | 26 +- components/navigation.tsx | 26 +- public/palettes/default.json | 31 ++- public/palettes/ink-wash.json | 105 +++++--- tailwind.config.js | 81 +++++- 11 files changed, 498 insertions(+), 331 deletions(-) diff --git a/app/globals.css b/app/globals.css index 2ac6495..6e3f195 100644 --- a/app/globals.css +++ b/app/globals.css @@ -131,6 +131,36 @@ body { --gradient-accent-1: 217 91% 60%; --gradient-accent-2: 270 91% 65%; --gradient-accent-3: 187 85% 53%; + /* Project-specific colors */ + --indigo-900: 251 84% 27%; + --indigo-600: 239 84% 67%; + --indigo-500: 239 84% 67%; + --indigo-400: 239 84% 77%; + --indigo-300: 239 84% 85%; + --green-900: 142 76% 16%; + --green-600: 142 71% 45%; + --green-500: 142 71% 45%; + --green-400: 142 71% 55%; + --green-300: 142 71% 75%; + --emerald-900: 160 84% 16%; + --emerald-600: 160 84% 39%; + --emerald-500: 160 84% 39%; + --emerald-400: 160 84% 54%; + --emerald-300: 160 84% 71%; + --amber-600: 38 92% 50%; + --amber-500: 38 92% 50%; + --amber-400: 38 92% 60%; + --amber-300: 38 92% 75%; + --orange-600: 25 95% 53%; + --orange-500: 25 95% 53%; + --orange-400: 25 95% 63%; + --violet-900: 262 83% 33%; + --violet-600: 262 83% 58%; + --violet-500: 262 83% 58%; + --violet-400: 262 83% 73%; + --pink-600: 330 81% 60%; + --pink-500: 330 81% 60%; + --pink-400: 330 81% 70%; } } diff --git a/app/learn/page.tsx b/app/learn/page.tsx index 13fe725..dd8f637 100644 --- a/app/learn/page.tsx +++ b/app/learn/page.tsx @@ -4,19 +4,19 @@ import Link from "next/link"; export default function LearnPage() { return ( -
+
{/* Hero Section */}
-
+

- + Learn Everything You Need To Be An AI Researcher

-

+

Master the fundamentals and publish your own papers

@@ -34,18 +34,18 @@ export default function LearnPage() {
{/* Math Module */} -
+
-
- +
+
-

+

Mathematics Fundamentals

-

+

Essential math concepts for AI

@@ -54,85 +54,85 @@ export default function LearnPage() {
-

+

1.Functions

- +
-

+

Linear, quadratic, and activation functions

-

+

2.Derivatives

- +
-

+

Understanding rates of change and gradients

-

+

3.Vectors

-

+

Understanding magnitude, direction, and vector operations

-

+

4.Matrices

-

+

Matrix operations and transformations

-

+

5.Gradients

-

+

Partial derivatives and gradient descent

@@ -143,15 +143,15 @@ export default function LearnPage() {
- +
-

+

PyTorch Fundamentals

-

+

Working with tensors and PyTorch basics

@@ -160,136 +160,136 @@ export default function LearnPage() {
-

+

1.Creating Tensors

-

+

Building blocks of deep learning

-

+

2.Tensor Addition

-

+

Element-wise operations on tensors

-

+

3.Matrix Multiplication

-

+

The core operation in neural networks

-

+

4.Transposing Tensors

-

+

Flipping dimensions and axes

-

+

5.Reshaping Tensors

- +
-

+

Changing tensor dimensions

-

+

6.Indexing and Slicing

-

+

Accessing and extracting tensor elements

-

+

7.Concatenating Tensors

-

+

Combining multiple tensors

-

+

8.Creating Special Tensors

-

+

Zeros, ones, identity matrices and more

@@ -300,15 +300,15 @@ export default function LearnPage() {
- +
-

+

Neuron From Scratch

-

+

Understanding the fundamental unit of neural networks

@@ -317,119 +317,119 @@ export default function LearnPage() {
-

+

1.What is a Neuron

-

+

The basic building block of neural networks

-

+

2.The Linear Step

-

+

Weighted sums and bias in neurons

-

+

3.The Activation Function

-

+

Introducing non-linearity to neurons

-

+

4.Building a Neuron in Python

-

+

Implementing a single neuron from scratch

-

+

5.Making a Prediction

-

+

How a neuron processes input to output

-

+

6.The Concept of Loss

-

+

Measuring prediction error

-

+

7.The Concept of Learning

-

+

How neurons adjust their parameters

@@ -440,15 +440,15 @@ export default function LearnPage() {
- +
-

+

Activation Functions

-

+

Understanding different activation functions

@@ -457,102 +457,102 @@ export default function LearnPage() {
-

+

1.ReLU

-

+

Rectified Linear Unit - The most popular activation function

-

+

2.Sigmoid

- +
-

+

The classic S-shaped activation function

-

+

3.Tanh

-

+

Hyperbolic tangent - Zero-centered activation

-

+

4.SiLU

- +
-

+

Sigmoid Linear Unit - The Swish activation

-

+

5.SwiGLU

- +
-

+

Swish-Gated Linear Unit - Advanced activation

-

+

6.Softmax

-

+

Multi-class classification activation function

@@ -563,15 +563,15 @@ export default function LearnPage() {
- +
-

+

Neural Networks from Scratch

-

+

Build neural networks from the ground up

@@ -580,119 +580,119 @@ export default function LearnPage() {
-

+

1.Architecture of a Network

- +
-

+

Understanding neural network structure and design

-

+

2.Building a Layer

-

+

Constructing individual network layers

-

+

3.Implementing a Network

-

+

Putting together a complete neural network

-

+

4.The Chain Rule

-

+

Mathematical foundation of backpropagation

-

+

5.Calculating Gradients

- +
-

+

Computing derivatives for network training

-

+

6.Backpropagation in Action

- +
-

+

Understanding the backpropagation algorithm

-

+

7.Implementing Backpropagation

-

+

Coding the backpropagation algorithm from scratch

@@ -703,16 +703,16 @@ export default function LearnPage() {
- +
-

+

Attention Mechanism

-

+

Understanding attention and self-attention

@@ -721,102 +721,102 @@ export default function LearnPage() {
-

+

1.What is Attention

-

+

Understanding the attention mechanism

-

+

2.Self Attention from Scratch

-

+

Building self-attention from the ground up

-

+

3.Calculating Attention Scores

-

+

Computing query-key-value similarities

-

+

4.Applying Attention Weights

-

+

Using attention scores to weight values

-

+

5.Multi Head Attention

- +
-

+

Parallel attention mechanisms

-

+

6.Attention in Code

-

+

Implementing attention mechanisms in Python

@@ -827,15 +827,15 @@ export default function LearnPage() {
- +
-

+

Transformer Feedforward

-

+

Feedforward networks and Mixture of Experts

@@ -844,136 +844,136 @@ export default function LearnPage() {
-

+

1.The Feedforward Layer

- +
-

+

Understanding transformer feedforward networks

-

+

2.What is Mixture of Experts

-

+

Introduction to MoE architecture

-

+

3.The Expert

- +
-

+

Understanding individual expert networks

-

+

4.The Gate

-

+

Routing and gating mechanisms in MoE

-

+

5.Combining Experts

-

+

Merging multiple expert outputs

-

+

6.MoE in a Transformer

-

+

Integrating mixture of experts in transformers

-

+

7.MoE in Code

-

+

Implementing mixture of experts in Python

-

+

8.The DeepSeek MLP

-

+

DeepSeek's advanced MLP architecture

@@ -984,15 +984,15 @@ export default function LearnPage() {
- +
-

+

Building a Transformer

-

+

Complete transformer implementation from scratch

@@ -1001,102 +1001,102 @@ export default function LearnPage() {
-

+

1.Transformer Architecture

-

+

Understanding the complete transformer structure

-

+

2.RoPE Positional Encoding

-

+

Rotary position embeddings for transformers

-

+

3.Building a Transformer Block

-

+

Constructing individual transformer layers

-

+

4.The Final Linear Layer

-

+

Output projection and prediction head

-

+

5.Full Transformer in Code

-

+

Complete transformer implementation

-

+

6.Training a Transformer

-

+

Training process and optimization

@@ -1107,15 +1107,15 @@ export default function LearnPage() {
- +
-

+

Large Language Models

-

+

Understanding LLM training and optimization

@@ -1124,17 +1124,17 @@ export default function LearnPage() {
-

+

1.Batch Size vs Sequence Length

-

+

Understanding the trade-offs between batch size and sequence length

diff --git a/app/page.tsx b/app/page.tsx index 2766a5f..493453e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -17,8 +17,8 @@ export default function Home() {
- {/* Grid pattern overlay */} -
+ {/* Grid pattern overlay - theme aware */} +
{/* Floating geometric shapes - Removed for cleaner look */} {/*
@@ -33,7 +33,7 @@ export default function Home() { {/* Main Heading with modern gradient */}

- + Open Superintelligence Lab

@@ -111,8 +111,8 @@ export default function Home() { {/* Main Projects Section */}
- {/* Background effects */} -
+ {/* Background effects - theme aware */} +
{/* Section Header */} diff --git a/components/course-navigation.tsx b/components/course-navigation.tsx index 0b737a6..3425a0b 100644 --- a/components/course-navigation.tsx +++ b/components/course-navigation.tsx @@ -40,10 +40,10 @@ export function CourseNavigation() { const NavigationContent = () => ( <>
-

+

Course Contents

-

+

Navigate through the lessons

@@ -52,10 +52,10 @@ export function CourseNavigation() { {modules.map((module, moduleIndex) => (
-
+
{module.icon}
-

+

{module.title}

@@ -73,8 +73,8 @@ export function CourseNavigation() { className={` block px-3 py-2 rounded-lg text-sm transition-all duration-200 ${isActive - ? 'bg-blue-600/20 text-blue-400 font-medium border-l-2 border-blue-400' - : 'text-slate-400 hover:text-slate-200 hover:bg-white/5' + ? 'bg-gradient-accent-1/20 text-gradient-accent-1 font-medium border-l-2 border-gradient-accent-1' + : 'text-muted-foreground hover:text-foreground hover:bg-card/50' } `} > @@ -89,10 +89,10 @@ export function CourseNavigation() { ))} -
+
@@ -108,10 +108,10 @@ export function CourseNavigation() { {/* Mobile Toggle Button */} @@ -127,14 +127,14 @@ export function CourseNavigation() { {/* Mobile Sidebar */}
- {/* Scroll indicator */} -
+ {/* Scroll indicator - below buttons */} +
diff --git a/components/vaporwave-grid.tsx b/components/vaporwave-grid.tsx index a61be07..f80fdef 100644 --- a/components/vaporwave-grid.tsx +++ b/components/vaporwave-grid.tsx @@ -199,25 +199,32 @@ export default function VaporwaveGrid() { } function drawSunrise(horizon: number, w: number, h: number) { - let g = ctx.createLinearGradient(0, horizon - 90, 0, horizon + 110); + // Main gradient - extended and more gradual + let g = ctx.createLinearGradient(0, horizon - 180, 0, horizon + 220); g.addColorStop(0.00, `rgba(${colorCache.SUN_COLOR}, 0.00)`); - g.addColorStop(0.25, `rgba(${colorCache.SUN_COLOR}, 0.42)`); - g.addColorStop(0.50, `rgba(${colorCache.SUN_COLOR}, 0.62)`); - g.addColorStop(0.75, `rgba(${colorCache.SUN_COLOR}, 0.42)`); + g.addColorStop(0.20, `rgba(${colorCache.SUN_COLOR}, 0.28)`); + g.addColorStop(0.35, `rgba(${colorCache.SUN_COLOR}, 0.45)`); + g.addColorStop(0.50, `rgba(${colorCache.SUN_COLOR}, 0.55)`); + g.addColorStop(0.65, `rgba(${colorCache.SUN_COLOR}, 0.45)`); + g.addColorStop(0.80, `rgba(${colorCache.SUN_COLOR}, 0.28)`); g.addColorStop(1.00, `rgba(${colorCache.SUN_COLOR}, 0.00)`); ctx.fillStyle = g; - ctx.fillRect(0, horizon - 90, w, 200); + ctx.fillRect(0, horizon - 180, w, 400); ctx.save(); ctx.globalCompositeOperation = "lighter"; - g = ctx.createLinearGradient(0, horizon - 70, 0, horizon + 80); + // Secondary gradient - more extended + g = ctx.createLinearGradient(0, horizon - 120, 0, horizon + 140); g.addColorStop(0.00, `rgba(${colorCache.SUN_COLOR}, 0.00)`); - g.addColorStop(0.50, `rgba(${colorCache.SUN_COLOR}, 0.18)`); + g.addColorStop(0.35, `rgba(${colorCache.SUN_COLOR}, 0.12)`); + g.addColorStop(0.50, `rgba(${colorCache.SUN_COLOR}, 0.16)`); + g.addColorStop(0.65, `rgba(${colorCache.SUN_COLOR}, 0.12)`); g.addColorStop(1.00, `rgba(${colorCache.SUN_COLOR}, 0.00)`); ctx.fillStyle = g; - ctx.fillRect(0, horizon - 70, w, 150); + ctx.fillRect(0, horizon - 120, w, 260); ctx.restore(); + // Horizon line glow g = ctx.createLinearGradient(0, horizon - 8, 0, horizon + 8); g.addColorStop(0, `rgba(${colorCache.GRID_COLOR},0.00)`); g.addColorStop(0.5, `rgba(${colorCache.GRID_COLOR},0.10)`); @@ -225,17 +232,21 @@ export default function VaporwaveGrid() { ctx.fillStyle = g; ctx.fillRect(0, horizon - 8, w, 16); - g = ctx.createLinearGradient(0, horizon - 150, 0, horizon); + // Top fade - more extended + g = ctx.createLinearGradient(0, horizon - 240, 0, horizon); g.addColorStop(0, `rgba(${colorCache.SUN_COLOR}, 0.00)`); + g.addColorStop(0.6, `rgba(${colorCache.SUN_COLOR}, 0.06)`); g.addColorStop(1, `rgba(${colorCache.SUN_COLOR}, 0.10)`); ctx.fillStyle = g; - ctx.fillRect(0, horizon - 150, w, 150); + ctx.fillRect(0, horizon - 240, w, 240); - g = ctx.createLinearGradient(0, horizon, 0, horizon + 60); + // Bottom fade - more extended + g = ctx.createLinearGradient(0, horizon, 0, horizon + 100); g.addColorStop(0, `rgba(${colorCache.SUN_COLOR}, 0.18)`); + g.addColorStop(0.5, `rgba(${colorCache.SUN_COLOR}, 0.08)`); g.addColorStop(1, `rgba(${colorCache.SUN_COLOR}, 0.00)`); ctx.fillStyle = g; - ctx.fillRect(0, horizon, w, 60); + ctx.fillRect(0, horizon, w, 100); } const draw = () => { From a8ce1694e73d701b35413d8e8b6f90dd96466233 Mon Sep 17 00:00:00 2001 From: User Date: Sat, 17 Jan 2026 20:04:09 -0600 Subject: [PATCH 12/23] vaporwave and landing page done --- app/page.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 247b9d8..9a87d69 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -19,19 +19,25 @@ export default function Home() {
*/} -
+
{/* Main Heading with modern gradient */} -
-

- +
+

+ Open Superintelligence Lab

{/* Subtitle with embossed text shadow for readability */} -

@@ -67,7 +73,7 @@ export default function Home() {

{/* Scroll indicator - below buttons */} -
+
From a134ec73a7cfecbcaa8292a346022ae751b160f4 Mon Sep 17 00:00:00 2001 From: User Date: Sat, 17 Jan 2026 20:18:45 -0600 Subject: [PATCH 13/23] page formatting --- app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index 9a87d69..2cac85a 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -74,7 +74,7 @@ export default function Home() { {/* Scroll indicator - below buttons */}
- +
From f12c2c3883e79edd6e900f598c3be05523c9c4f3 Mon Sep 17 00:00:00 2001 From: User Date: Sat, 17 Jan 2026 21:54:20 -0600 Subject: [PATCH 14/23] logo --- components/navigation.tsx | 227 ++++++++++++++++++++++++++------------ components/osl-logo.tsx | 146 ++++++++++++++++++++++++ 2 files changed, 305 insertions(+), 68 deletions(-) create mode 100644 components/osl-logo.tsx diff --git a/components/navigation.tsx b/components/navigation.tsx index 2e3e217..26d7120 100644 --- a/components/navigation.tsx +++ b/components/navigation.tsx @@ -1,12 +1,57 @@ 'use client'; import Link from "next/link"; +import { useState, useEffect, useRef } from "react"; +import { OSLLogo } from "./osl-logo"; interface NavigationProps { currentPath?: string; } export function Navigation({ }: NavigationProps) { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const menuRef = useRef(null); + const buttonRef = useRef(null); + + // Close menu when clicking outside + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + menuRef.current && + buttonRef.current && + !menuRef.current.contains(event.target as Node) && + !buttonRef.current.contains(event.target as Node) + ) { + setIsMenuOpen(false); + } + }; + + if (isMenuOpen) { + document.addEventListener('mousedown', handleClickOutside); + } + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [isMenuOpen]); + + // Close menu on escape key + useEffect(() => { + const handleEscape = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + setIsMenuOpen(false); + } + }; + + if (isMenuOpen) { + document.addEventListener('keydown', handleEscape); + } + + return () => { + document.removeEventListener('keydown', handleEscape); + }; + }, [isMenuOpen]); + return (
{/* Glassmorphism Navigation Bar */} @@ -14,79 +59,125 @@ export function Navigation({ }: NavigationProps) {
); -} - +} \ No newline at end of file diff --git a/components/osl-logo.tsx b/components/osl-logo.tsx new file mode 100644 index 0000000..6ff401f --- /dev/null +++ b/components/osl-logo.tsx @@ -0,0 +1,146 @@ +'use client'; + +import Link from 'next/link'; +import { useEffect, useRef } from 'react'; + +export function OSLLogo() { + const canvasRef = useRef(null); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + const ctx = canvas.getContext('2d', { alpha: true }); + if (!ctx) return; + + const dpr = window.devicePixelRatio || 1; + const width = 80; // Wider to fit OSL without overlap + const height = 36; // Height for the letters + canvas.width = width * dpr; + canvas.height = height * dpr; + canvas.style.width = `${width}px`; + canvas.style.height = `${height}px`; + ctx.scale(dpr, dpr); + + // Get colors from CSS variables + const getCSSColor = (varName: string, fallback: string) => { + if (typeof window === 'undefined') return fallback; + const root = getComputedStyle(document.documentElement); + const value = root.getPropertyValue(varName).trim(); + return value || fallback; + }; + + const drawLogo = () => { + // Clear canvas + ctx.clearRect(0, 0, width, height); + + // Get gradient colors from palette + const accent1 = getCSSColor('--gradient-accent-1', '210 100% 83%'); + const accent2 = getCSSColor('--gradient-accent-2', '270 100% 86%'); + const accent3 = getCSSColor('--gradient-accent-3', '180 77% 81%'); + + // Parse HSL to RGB for canvas + const hslToRgb = (hsl: string): [number, number, number] => { + const parts = hsl.split(/\s+/); + const h = parseFloat(parts[0]) / 360; + const s = parseFloat(parts[1]) / 100; + const l = parseFloat(parts[2]) / 100; + + let r: number, g: number, b: number; + if (s === 0) { + r = g = b = l; + } else { + const hue2rgb = (p: number, q: number, t: number) => { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1/6) return p + (q - p) * 6 * t; + if (t < 1/2) return q; + if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + }; + const q = l < 0.5 ? l * (1 + s) : l + s - l * s; + const p = 2 * l - q; + r = hue2rgb(p, q, h + 1/3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1/3); + } + return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; + }; + + const [r1, g1, b1] = hslToRgb(accent1); + const [r2, g2, b2] = hslToRgb(accent2); + const [r3, g3, b3] = hslToRgb(accent3); + + // Create gradient + const gradient = ctx.createLinearGradient(0, 0, width, height); + gradient.addColorStop(0, `rgb(${r1}, ${g1}, ${b1})`); + gradient.addColorStop(0.5, `rgb(${r2}, ${g2}, ${b2})`); + gradient.addColorStop(1, `rgb(${r3}, ${g3}, ${b3})`); + + ctx.fillStyle = gradient; + ctx.strokeStyle = gradient; + ctx.lineWidth = 1.5; + + // Set font - bold and clear + ctx.font = 'bold 24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'; + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + + const centerY = height / 2; + + // O - Left + ctx.fillText('O', 16, centerY); + + // S - Center + ctx.fillText('S', width / 2, centerY); + + // L - Right + ctx.fillText('L', width - 16, centerY); + + // Add subtle underline accent + ctx.save(); + ctx.strokeStyle = gradient; + ctx.globalAlpha = 0.5; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(4, height - 4); + ctx.lineTo(width - 4, height - 4); + ctx.stroke(); + ctx.restore(); + }; + + // Initial draw + drawLogo(); + + // Redraw on palette changes (check every 2 seconds) + let lastCheck = Date.now(); + const checkInterval = setInterval(() => { + const now = Date.now(); + if (now - lastCheck > 2000) { + drawLogo(); + lastCheck = now; + } + }, 2000); + + return () => clearInterval(checkInterval); + }, []); + + return ( + + + + {/* Brand Name */} +
+ + Open Superintelligence + + Building the Future +
+ + ); +} \ No newline at end of file From 274c03d6c6fb02aad7084ff52108b50362e0f586 Mon Sep 17 00:00:00 2001 From: User Date: Sat, 17 Jan 2026 22:11:40 -0600 Subject: [PATCH 15/23] logo --- components/osl-logo.tsx | 170 +++++++++------------------------------- 1 file changed, 35 insertions(+), 135 deletions(-) diff --git a/components/osl-logo.tsx b/components/osl-logo.tsx index 6ff401f..b56607b 100644 --- a/components/osl-logo.tsx +++ b/components/osl-logo.tsx @@ -1,146 +1,46 @@ 'use client'; import Link from 'next/link'; -import { useEffect, useRef } from 'react'; +import { useState } from 'react'; export function OSLLogo() { - const canvasRef = useRef(null); - - useEffect(() => { - const canvas = canvasRef.current; - if (!canvas) return; - - const ctx = canvas.getContext('2d', { alpha: true }); - if (!ctx) return; - - const dpr = window.devicePixelRatio || 1; - const width = 80; // Wider to fit OSL without overlap - const height = 36; // Height for the letters - canvas.width = width * dpr; - canvas.height = height * dpr; - canvas.style.width = `${width}px`; - canvas.style.height = `${height}px`; - ctx.scale(dpr, dpr); - - // Get colors from CSS variables - const getCSSColor = (varName: string, fallback: string) => { - if (typeof window === 'undefined') return fallback; - const root = getComputedStyle(document.documentElement); - const value = root.getPropertyValue(varName).trim(); - return value || fallback; - }; - - const drawLogo = () => { - // Clear canvas - ctx.clearRect(0, 0, width, height); - - // Get gradient colors from palette - const accent1 = getCSSColor('--gradient-accent-1', '210 100% 83%'); - const accent2 = getCSSColor('--gradient-accent-2', '270 100% 86%'); - const accent3 = getCSSColor('--gradient-accent-3', '180 77% 81%'); - - // Parse HSL to RGB for canvas - const hslToRgb = (hsl: string): [number, number, number] => { - const parts = hsl.split(/\s+/); - const h = parseFloat(parts[0]) / 360; - const s = parseFloat(parts[1]) / 100; - const l = parseFloat(parts[2]) / 100; - - let r: number, g: number, b: number; - if (s === 0) { - r = g = b = l; - } else { - const hue2rgb = (p: number, q: number, t: number) => { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1/6) return p + (q - p) * 6 * t; - if (t < 1/2) return q; - if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - }; - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; - }; - - const [r1, g1, b1] = hslToRgb(accent1); - const [r2, g2, b2] = hslToRgb(accent2); - const [r3, g3, b3] = hslToRgb(accent3); - - // Create gradient - const gradient = ctx.createLinearGradient(0, 0, width, height); - gradient.addColorStop(0, `rgb(${r1}, ${g1}, ${b1})`); - gradient.addColorStop(0.5, `rgb(${r2}, ${g2}, ${b2})`); - gradient.addColorStop(1, `rgb(${r3}, ${g3}, ${b3})`); - - ctx.fillStyle = gradient; - ctx.strokeStyle = gradient; - ctx.lineWidth = 1.5; - - // Set font - bold and clear - ctx.font = 'bold 24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'; - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - - const centerY = height / 2; - - // O - Left - ctx.fillText('O', 16, centerY); - - // S - Center - ctx.fillText('S', width / 2, centerY); - - // L - Right - ctx.fillText('L', width - 16, centerY); - - // Add subtle underline accent - ctx.save(); - ctx.strokeStyle = gradient; - ctx.globalAlpha = 0.5; - ctx.lineWidth = 2; - ctx.beginPath(); - ctx.moveTo(4, height - 4); - ctx.lineTo(width - 4, height - 4); - ctx.stroke(); - ctx.restore(); - }; - - // Initial draw - drawLogo(); - - // Redraw on palette changes (check every 2 seconds) - let lastCheck = Date.now(); - const checkInterval = setInterval(() => { - const now = Date.now(); - if (now - lastCheck > 2000) { - drawLogo(); - lastCheck = now; - } - }, 2000); - - return () => clearInterval(checkInterval); - }, []); + const [isHovering, setIsHovering] = useState(false); return ( - - - - {/* Brand Name */} -
- - Open Superintelligence + setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} + > + {/* Dynamic Background Glow */} +
+ + {/* The OSL Monogram */} +
+ + OSL - Building the Future + + {/* Sleek animated accent line */} +
+ + {/* Decorative "Intelligence" Spark */} +
); -} \ No newline at end of file +} From 10c4027bf24ed44fcdc12107bac4274f267cc16c Mon Sep 17 00:00:00 2001 From: User Date: Sat, 17 Jan 2026 22:23:30 -0600 Subject: [PATCH 16/23] logo done --- components/navigation.tsx | 17 +++++++++++------ components/osl-logo.tsx | 11 ++++------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/components/navigation.tsx b/components/navigation.tsx index 26d7120..428b7c3 100644 --- a/components/navigation.tsx +++ b/components/navigation.tsx @@ -56,13 +56,18 @@ export function Navigation({ }: NavigationProps) {
{/* Glassmorphism Navigation Bar */}
-
-