From e0907b544e77e4a320d7ea0f9061a21d70d83376 Mon Sep 17 00:00:00 2001
From: John Rho <55637821+john7rho@users.noreply.github.com>
Date: Tue, 3 Jun 2025 13:29:52 -0400
Subject: [PATCH] Add settings page and integrate with sidebar
---
src/app/layout/App.tsx | 2 +
src/app/layout/Sidebar.tsx | 16 ++++-
src/app/pages/SettingsPage.tsx | 126 +++++++++++++++++++++++++++++++++
3 files changed, 143 insertions(+), 1 deletion(-)
create mode 100644 src/app/pages/SettingsPage.tsx
diff --git a/src/app/layout/App.tsx b/src/app/layout/App.tsx
index 49f7e3f..313944c 100644
--- a/src/app/layout/App.tsx
+++ b/src/app/layout/App.tsx
@@ -16,6 +16,7 @@ import { Routes, Route, useNavigate, Navigate } from "react-router-dom";
import AppButtons from "./AppButtons";
import MDContainer from "../components/MDContainer";
import Home from "../pages/Home";
+import SettingsPage from "../pages/SettingsPage";
import { pages } from "../pages/pages";
import usePageTracking from "../hooks/usePageTracking";
import { isBrowser } from "react-device-detect";
@@ -226,6 +227,7 @@ export default function App() {
element={}
/>
))}
+ } />
} />
diff --git a/src/app/layout/Sidebar.tsx b/src/app/layout/Sidebar.tsx
index e951001..8358876 100644
--- a/src/app/layout/Sidebar.tsx
+++ b/src/app/layout/Sidebar.tsx
@@ -7,6 +7,7 @@ import { VscFiles, VscSettingsGear } from "react-icons/vsc";
import { BiGitBranch } from "react-icons/bi";
import Divider from "@mui/material/Divider";
import { links } from "../pages/links";
+import { useNavigate } from "react-router-dom";
// Update the keyframes definition
const pulse = keyframes`
@@ -38,6 +39,12 @@ const bubbleAnimation = keyframes`
}
`;
+const shine = keyframes`
+ 0% { filter: brightness(1); }
+ 50% { filter: brightness(2); }
+ 100% { filter: brightness(1); }
+`;
+
interface Props {
expanded: boolean;
setExpanded: React.Dispatch>;
@@ -51,6 +58,7 @@ export default function Sidebar({
darkMode,
handleThemeChange,
}: Props) {
+ const navigate = useNavigate();
return (
navigate('/settings')}
>
-
+
diff --git a/src/app/pages/SettingsPage.tsx b/src/app/pages/SettingsPage.tsx
new file mode 100644
index 0000000..0fc5cb6
--- /dev/null
+++ b/src/app/pages/SettingsPage.tsx
@@ -0,0 +1,126 @@
+import { Box, Container, Divider, Typography } from "@mui/material";
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function SettingsPage() {
+ const { pathname } = useLocation();
+ useEffect(() => {
+ let title = pathname.substring(1, pathname.length);
+ title = title[0].toUpperCase() + title.substring(1);
+ document.title = `${process.env.REACT_APP_NAME!} | ${title}`;
+ }, [pathname]);
+
+ return (
+
+
+ Settings
+
+
+
+
+ 
+
+
+
+ Bridges Across Boundaries: A Journey of Exploration and Innovation
+
+
+ At twenty-two, I carry within me the wide-open spirit of Texas—that
+ place where horizons stretch endlessly and possibility feels as vast
+ as the summer sky. Born and raised in a state where cultures blend
+ seamlessly from border to metropolis, I learned early that the most
+ fascinating discoveries happen at the intersections where different
+ worlds meet.
+
+
+ My approach to life mirrors what we call the
+ exploration-exploitation paradigm in reinforcement learning—that
+ delicate dance between venturing into uncharted territory and
+ deepening our understanding of what we’ve already discovered. Like
+ an algorithm learning to navigate a complex environment, I’ve found
+ that the most rewarding path forward requires balancing bold
+ curiosity with the wisdom gained from experience. Sometimes you must
+ venture beyond the familiar to find unexpected rewards; other times,
+ you deepen your mastery of known terrain. This philosophy has shaped
+ every major decision I’ve made.
+
+
+ During college, this mindset led me to seek experiences across vastly
+ different domains. At StubHub, a company poised on the exciting
+ precipice of an IPO, I immersed myself in product development—learning
+ how consumer needs translate into features that millions of people
+ use to create memories at concerts and games. The energy was
+ palpable; every day brought new challenges as we scaled systems and
+ refined experiences for an ever-growing audience.
+
+
+ From there, I pivoted to investment banking at Lazard, where I
+ focused on growth-stage fundraising. The transition felt like
+ learning a new language—from product metrics to financial modeling,
+ from user journeys to capital structures. Each deal told a story of
+ entrepreneurs building something meaningful, and I found myself
+ fascinated by how different perspectives in the room could shape the
+ narrative and unlock value. Meanwhile, my engineering work with
+ various startups kept me grounded in the technical realities of
+ building—reminding me that behind every financial model is code, and
+ behind every code base are real people solving real problems.
+
+
+ Today, I’ve planted myself across three dynamic cities—San
+ Francisco, Boston, and New York—building a technical consultancy that
+ embodies this philosophy of exploration. Each city offers its own
+ unique ecosystem: San Francisco’s relentless innovation, Boston’s
+ academic depth, and New York’s financial sophistication. Moving
+ between these worlds, I’ve discovered that the most impactful
+ solutions emerge when we bridge different domains of knowledge and
+ connect diverse communities of builders.
+
+
+ We’re living through what feels like a fundamental transformation in
+ human capability—artificial intelligence isn’t just another
+ technological advancement, it’s a paradigm shift that’s reshaping how
+ we think, create, and collaborate. Like the printing press or the
+ internet before it, AI represents a new chapter in our collective
+ story, one where the boundaries between human insight and machine
+ capability blur in extraordinary ways. Every conversation I have,
+ every project I take on, is touched by this reality that we’re not
+ just building software anymore—we’re crafting tools that augment human
+ potential itself.
+
+
+ What excites me most is how this moment demands exactly the kind of
+ cross-pollination I’ve always gravitated toward. The most meaningful
+ AI applications don’t emerge from technical prowess alone, but from
+ understanding human needs, market dynamics, and the intricate ways
+ that different communities approach problems. My journey from Texas
+ to these coastal cities, from product to finance to engineering,
+ feels like preparation for this moment when diverse perspectives
+ aren’t just valuable—they’re essential.
+
+
+ Each day brings new opportunities to explore uncharted territory
+ while building on the foundations we’ve already established. Whether
+ I’m working with a startup founder in Boston, collaborating with
+ researchers in San Francisco, or meeting with investors in New York,
+ I’m reminded that our differences aren’t barriers to overcome—they’re
+ bridges to cross, leading us toward solutions we could never have
+ imagined alone.
+
+
+ This is the adventure I find myself on: using the
+ exploration-exploitation framework not just as a technical concept,
+ but as a philosophy for building connections, creating value, and
+ navigating a world where artificial intelligence is opening
+ possibilities we’re only beginning to understand. The horizon ahead
+ feels as vast and full of promise as those Texas skies that first
+ taught me to dream big.
+
+
+
+
+ );
+}