Made changes to allow DNS from backstory-beta

2025-05-19 12:24:09 -07:00 · 2025-05-19 12:24:09 -07:00 · 540d286d7a
commit 540d286d7a
parent 705bbf146e
14 changed files with 358 additions and 164 deletions
--- a/1
+++ b/1
@ -12,6 +12,7 @@ RUN apt-get update \
    wget \
    nano \
    rsync \ 
+    iputils-ping \
    jq \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/{apt,dpkg,cache,log}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -78,6 +78,8 @@ services:
      - 3000:3000 # REACT expo while developing frontend
    volumes:
      - ./frontend:/opt/backstory/frontend:rw    # Live mount frontend src 
+    networks:
+      - internal

  ollama:
    build:
--- a/frontend/craco.config.js
+++ b/frontend/craco.config.js
@ -7,6 +7,13 @@ module.exports = {
      //   cert: '/path/to/cert.pem',
      //   key: '/path/to/key.pem',
      // }
+    },
+    proxy: {
+    '/api': {
+      target: 'https://backstory:8911', // Replace with your FastAPI server URL
+      changeOrigin: true,
+      secure: false, // Set to true if your FastAPI server uses HTTPS
+    },
    }
  },
  webpack: {
--- a/frontend/package.json
+++ b/frontend/package.json
@ -41,7 +41,7 @@
    "web-vitals": "^2.1.4"
  },
  "scripts": {
-    "start": "HTTPS=true craco start",
+    "start": "HTTPS=true WDS_SOCKET_HOST=backstory-beta.ketrenos.com WDS_SOCKET_PORT=443 craco start",
    "build": "craco build",
    "test": "craco test"
  },
--- a/frontend/src/Components/Scrollable.tsx
+++ b/frontend/src/Components/Scrollable.tsx
@ -24,7 +24,9 @@ const Scrollable = (props: ScrollableProps) => {
      className={`Scrollable ${className || ""}`}
      sx={{
        display: 'flex',
+        flexDirection: 'column',
        margin: '0 auto',
+        p: 0,
        flexGrow: 1,
        overflow: 'auto',
        // backgroundColor: '#F5F5F5',
--- a/frontend/src/Components/VectorVisualizer.css
+++ b/frontend/src/Components/VectorVisualizer.css
@ -3,11 +3,7 @@
  display: flex;
  flex-grow: 1;
  flex-direction: column;
-  background-color: #F5F5F5;
-  border: 1px solid #E0E0E0;
  font-size: 0.9rem;
-  margin: 0 auto;
-  padding: 10px;
  position: relative;
-  width: 100%;
+  max-width: 100%;
 }
--- a/frontend/src/Components/VectorVisualizer.tsx
+++ b/frontend/src/Components/VectorVisualizer.tsx
@ -21,6 +21,7 @@ import { connectionBase } from '../Global';

 import './VectorVisualizer.css';
 import { BackstoryPageProps } from './BackstoryTab';
+import { relative } from 'path';

 interface VectorVisualizerProps extends BackstoryPageProps {
  inline?: boolean;
@ -478,19 +479,13 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '
        ...sx
      }}>
      <Box sx={{ p: 0, m: 0, gap: 0 }}>
-        {
-          !inline &&
-          <Paper sx={{ display: 'flex', flexDirection: 'column', flexGrow: 0, minHeight: '2.5rem', maxHeight: '2.5rem', height: '2.5rem', justifyContent: 'center', alignItems: 'center', m: 0, p: 0, mb: 1 }}>
-            RAG Vector Visualization
-          </Paper>
-        }
        <Paper sx={{
          p: 0.5, m: 0,
          display: "flex",
          flexGrow: 0,
-          height: isMobile ? "auto" : "320px",
-          minHeight: isMobile ? "auto" : "320px",
-          maxHeight: isMobile ? "auto" : "320px",
+          height: isMobile ? "auto" : "auto", //"320px",
+          minHeight: isMobile ? "auto" : "auto", //"320px",
+          maxHeight: isMobile ? "auto" : "auto", //"320px",
          position: "relative",
          flexDirection: "column"
        }}>
@ -528,20 +523,20 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '

        <Paper sx={{ display: "flex", flexDirection: isMobile ? "column" : "row", mt: 0.5, p: 0.5, flexGrow: 1, minHeight: "fit-content" }}>
          {node !== null && 
-            <Box sx={{ display: "flex", fontSize: "0.75rem", flexDirection: "column", minWidth: "25rem", flexBasis: 0, maxHeight: "min-content" }}>
+            <Box sx={{ display: "flex", fontSize: "0.75rem", flexDirection: "column", flexGrow: 1, maxWidth: "100%", flexBasis: 1, maxHeight: "min-content" }}>
              <TableContainer component={Paper} sx={{ mb: isMobile ? 1 : 0, mr: isMobile ? 0 : 1 }}>
                <Table size="small" sx={{ tableLayout: 'fixed' }}>
-                  <TableBody sx={{ '& td': { verticalAlign: "top", fontSize: "0.75rem", }, '& td:first-of-type': { whiteSpace: "nowrap", width: "5rem" } }}>
+                  <TableBody sx={{ '& td': { verticalAlign: "top", fontSize: "0.75rem", }, '& td:first-of-type': { whiteSpace: "nowrap", width: "1rem" } }}>
                    <TableRow>
                      <TableCell>Type</TableCell>
                      <TableCell>{node.emoji} {node.doc_type}</TableCell>
                    </TableRow>
                    {node.source_file !== undefined && <TableRow>
                      <TableCell>File</TableCell>
-                      <TableCell>{node.source_file.replace(/^.*\//, '')}, lines: {node.line_begin}-{node.line_end}</TableCell>
+                      <TableCell>{node.source_file.replace(/^.*\//, '')}</TableCell>
                    </TableRow>}
                    {node.path !== undefined && <TableRow>
-                      <TableCell>Location</TableCell>
+                      <TableCell>Section</TableCell>
                      <TableCell>{node.path}</TableCell>
                    </TableRow>}
                    {node.distance !== undefined && <TableRow>
@ -560,7 +555,7 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '
            </Box>
          }

-          <Box sx={{ display: "flex", flexDirection: "column", flexGrow: 1 }}>
+          <Box sx={{ display: "flex", flexDirection: "column", flexGrow: 2, flexBasis: 0, flexShrink: 1 }}>
            {node === null &&
              <Paper sx={{ m: 0.5, p: 2, flexGrow: 1 }}>
                Click a point in the scatter-graph to see information about that node.
@ -576,6 +571,8 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '
                  p: 0.5,
                  pl: 1,
                  flexShrink: 1,
+                  position: "relative",
+                  maxWidth: "100%",
                }}
              >
                {
@ -584,7 +581,7 @@ The scatter graph shows the query in N-dimensional space, mapped to ${view2D ? '
                    const bgColor = (index > node.line_begin && index <= node.line_end) ? '#f0f0f0' : 'auto';
                    return <Box key={index} sx={{ display: "flex", flexDirection: "row", borderBottom: '1px solid #d0d0d0', ':first-of-type': { borderTop: '1px solid #d0d0d0' }, backgroundColor: bgColor }}>
                      <Box sx={{ fontFamily: 'courier', fontSize: "0.8rem", minWidth: "2rem", pt: "0.1rem", align: "left", verticalAlign: "top" }}>{index}</Box>
-                      <pre style={{ margin: 0, padding: 0, border: "none", minHeight: "1rem" }} >{line || " "}</pre>
+                      <pre style={{ margin: 0, padding: 0, border: "none", minHeight: "1rem", overflow: "hidden" }} >{line || " "}</pre>
                    </Box>;
                  })
                }
--- a/frontend/src/NewApp/BackstoryApp.tsx
+++ b/frontend/src/NewApp/BackstoryApp.tsx
@ -17,24 +17,30 @@ import BusinessIcon from '@mui/icons-material/Business';
 import { SxProps, Theme } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';

+import { backstoryTheme } from '../BackstoryTheme';
+
 import {Header} from './Components/Header';
 import { Scrollable } from '../Components/Scrollable';
 import { Footer } from './Components/Footer';
-import { HomePage } from './Pages/HomePage';
-// import { BackstoryThemeVisualizer } from './BackstoryThemeVisualizer';
-import { HomePage as ChatPage } from '../Pages/HomePage';
-import { ResumeBuilderPage } from '../Pages/ResumeBuilderPage';
 import { Snack, SeverityType } from '../Components/Snack';
 import { Query } from '../Components/ChatQuery';
 import { ConversationHandle } from '../Components/Conversation';
+
+
+import { HomePage } from './Pages/HomePage';
+import { HomePage as ChatPage } from '../Pages/HomePage';
+import { ResumeBuilderPage } from '../Pages/ResumeBuilderPage';
+// import { BackstoryThemeVisualizer } from './BackstoryThemeVisualizer';
 import { AboutPage } from './Pages/AboutPage';
-import { backstoryTheme } from '../BackstoryTheme';
+import { BetaPage } from './Pages/BetaPage';
+import { CreateProfilePage } from './Pages/CreateProfilePage';

 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 import { VectorVisualizerPage } from 'Pages/VectorVisualizerPage';
+import { calculatePoint } from 'mermaid/dist/utils';

 type NavigationLinkType = {
    name: string;
@ -133,21 +139,18 @@ interface BackstoryPageContainerProps {
 const BackstoryPageContainer = (props : BackstoryPageContainerProps) => {
    const { children, sx } = props;
    return (
-        <Container maxWidth="xl" sx={{ mt: 2, mb: 2, height: "calc(1024px - 72px)", ...sx }}>
-        <Paper 
-            elevation={2} 
-            sx={{ 
-            p: 3, 
-            backgroundColor: 'background.paper',
-            borderRadius: 2,
-            minHeight: '80vh',
-            }}
-        >
-            <Scrollable>
-            {children}
-            </Scrollable>
-        </Paper>
-    </Container>
+        <Container maxWidth="xl" sx={{ mt: 2, mb: 2, ...sx }}>
+            <Paper
+                elevation={2}
+                sx={{
+                    p: 3,
+                    backgroundColor: 'background.paper',
+                    borderRadius: 2,
+                    minHeight: '80vh',
+                }}>
+                {children}
+            </Paper>
+        </Container>
    );
 }
 const BackstoryApp = () => {
@ -187,6 +190,7 @@ const BackstoryApp = () => {
            flexDirection: 'column',
            backgroundColor: 'background.default',
            maxHeight: "calc(100vh - 72px)",
+                minHeight: "calc(100vh - 72px)",
            }}>
            <BackstoryPageContainer userContext={userContext}>
                <Routes>
@ -195,6 +199,7 @@ const BackstoryApp = () => {
                    <Route path="/about/:subPage" element={<AboutPage  setSnack={setSnack} sessionId={"684a0c7e-e638-4db7-b00d-0558bfefb710"} submitQuery={submitQuery}/>} />
                    <Route path="/resume-builder" element={<ResumeBuilderPage setSnack={setSnack} sessionId={"684a0c7e-e638-4db7-b00d-0558bfefb710"} submitQuery={submitQuery}/>} />
                        <Route path="/rag-visualizer" element={<VectorVisualizerPage setSnack={setSnack} sessionId={"684a0c7e-e638-4db7-b00d-0558bfefb710"} submitQuery={submitQuery} />} />
+                        <Route path="/create-your-profile" element={<CreateProfilePage />} />
                    <Route path="/dashboard" element={<DashboardPage />} />
                    <Route path="/" element={<HomePage/>}/>
                    {/* Candidate-specific routes */}
@ -221,11 +226,11 @@ const BackstoryApp = () => {
                    <Route path="/analytics" element={<AnalyticsPage />} />
                    <Route path="/settings" element={<SettingsPage />} />
                    
-                    {/* Redirect to dashboard by default */}
-                    <Route path="*" element={<HomePage />} />
-                </Routes>
+                        {/* Redirect to BETA by default */}
+                        <Route path="*" element={<BetaPage />} />
+                    </Routes>
+                    {location.pathname === "/" && <Footer />}
                </BackstoryPageContainer>
-            { location.pathname === "/" && <Footer /> }
        </Scrollable>
        <Snack ref={snackRef}/>
        </ThemeProvider>
--- a/frontend/src/NewApp/Pages/AboutPage.tsx
+++ b/frontend/src/NewApp/Pages/AboutPage.tsx
@ -1,24 +1,89 @@
 import React, { useState, useEffect } from 'react';
-import {useNavigate, useLocation, useParams } from 'react-router-dom';
-
-import { Box } from '@mui/material';
-
-import { BackstoryPageProps } from '../../Components/BackstoryTab';
+import { useNavigate, useLocation, useParams } from 'react-router-dom';
+import { FileText, Code, Layers, Layout, Activity, Palette, Menu, X } from 'lucide-react';
 import { Document } from '../../Components/Document';
-import { BackstoryUIOverviewPage} from './BackstoryUIOverviewPage';
+import { BackstoryPageProps } from '../../Components/BackstoryTab';
+import { BackstoryUIOverviewPage } from './BackstoryUIOverviewPage';
 import { BackstoryAppAnalysisPage } from './BackstoryAppAnalysisPage';
 import { BackstoryThemeVisualizerPage } from './BackstoryThemeVisualizerPage';
 import { MockupPage } from './MockupPage';

+// Get appropriate icon for document type
+const getDocumentIcon = (title: string) => {
+  switch (title) {
+    case 'About':
+      return <FileText className="w-5 h-5" />;
+    case 'BETA':
+      return <Code className="w-5 h-5" />;
+    case 'Resume Generation Architecture':
+    case 'Application Architecture':
+      return <Layers className="w-5 h-5" />;
+    case 'UI Overview':
+    case 'UI Mockup':
+      return <Layout className="w-5 h-5" />;
+    case 'Theme Visualizer':
+      return <Palette className="w-5 h-5" />;
+    case 'App Analysis':
+      return <Activity className="w-5 h-5" />;
+    default:
+      return <FileText className="w-5 h-5" />;
+  }
+};
+
+// Sidebar navigation component with improved styling
+const Sidebar: React.FC<{
+  currentPage: string;
+  onDocumentSelect: (docName: string, open: boolean) => void;
+}> = ({ currentPage, onDocumentSelect }) => {
+  // Document definitions
+  const documents = [
+    { title: "About", route: "about" },
+    { title: "BETA", route: "beta" },
+    { title: "Resume Generation Architecture", route: "resume-generation" },
+    { title: "Application Architecture", route: "about-app" },
+    { title: "UI Overview", route: "ui-overview" },
+    { title: "Theme Visualizer", route: "theme-visualizer" },
+    { title: "App Analysis", route: "app-analysis" },
+    { title: "UI Mockup", route: "ui-mockup" }
+  ];
+
+  return (
+    <div className="bg-white rounded-lg shadow-md p-3 h-full">
+      <h2 className="text-xl font-bold px-2 py-3 border-b mb-4">Documentation</h2>
+      <nav>
+        <ul className="space-y-1">
+          {documents.map((doc, index) => (
+            <li key={index}>
+              <button
+                onClick={() => onDocumentSelect(doc.route, true)}
+                className={`w-full text-left px-4 py-3 rounded-md flex items-center transition-colors ${currentPage === doc.route
+                    ? 'bg-blue-50 text-blue-700 font-medium shadow-sm'
+                    : 'text-gray-700 hover:bg-gray-50'
+                  }`}
+              >
+                <span className={`mr-3 ${currentPage === doc.route ? 'text-blue-600' : 'text-gray-500'}`}>
+                  {getDocumentIcon(doc.title)}
+                </span>
+                <span className="text-base">{doc.title}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  );
+};
+
+// AboutPage main component
 const AboutPage = (props: BackstoryPageProps) => {
  const { sessionId, submitQuery, setSnack } = props;
  const navigate = useNavigate();
  const location = useLocation();
  const { paramPage = '' } = useParams();
  const [page, setPage] = useState<string>(paramPage);
+  const [sidebarOpen, setSidebarOpen] = useState(true);

-  /* If the location changes, set the page based on the
-   * second part of the path, or clear if no path */
+  // Track location changes
  useEffect(() => {
    const parts = location.pathname.split('/');
    if (parts.length > 2) {
@ -28,6 +93,7 @@ const AboutPage = (props: BackstoryPageProps) => {
    }
  }, [location]);

+  // Handle document navigation
  const onDocumentExpand = (docName: string, open: boolean) => {
    console.log("Document expanded:", { docName, open, location });
    if (open) {
@ -42,84 +108,173 @@ const AboutPage = (props: BackstoryPageProps) => {
      const basePath = location.pathname.split('/').slice(0, -1).join('/');
      navigate(`${basePath}`);
    }
-  }
+  };

-  return (<Box sx={{gap: 1}}>
-    <Document {...{
-      title: "About",
-      filepath: "/docs/about.md",
-      onExpand: (open: boolean) => { onDocumentExpand('about', open); },
-      expanded: page === 'about',
-      sessionId,
-      submitQuery: submitQuery,
-      setSnack,
-    }} />
-    <Document {...{
-      title: "BETA",
-      filepath: "/docs/beta.md",
-      onExpand: (open: boolean) => { onDocumentExpand('beta', open); },
-      expanded: page === 'beta',
-      sessionId,
-      submitQuery: submitQuery,
-      setSnack,
-    }} />
-    <Document {...{
-      title: "Resume Generation Architecture",
-      filepath: "/docs/resume-generation.md",
-      onExpand: (open: boolean) => { onDocumentExpand('resume-generation', open); },
-      expanded: page === 'resume-generation',
-      sessionId,
-      submitQuery: submitQuery,
-      setSnack,
-    }} />
-    <Document {...{
-      title: "Application Architecture",
-      filepath: "/docs/about-app.md",
-      onExpand: (open: boolean) => { onDocumentExpand('about-app', open); },
-      expanded: page === 'about-app',
-      sessionId,
-      submitQuery: submitQuery,
-      setSnack,
-    }} />
-    <Document {...{
-      title: "UI Overview",
-      children: <BackstoryUIOverviewPage/>,
-      onExpand: (open: boolean) => { onDocumentExpand('ui-overview', open); },
-      expanded: page === 'ui-overview',
-      sessionId,
-      submitQuery: submitQuery,
-      setSnack,
-    }} />
-    <Document {...{
-      title: "Theme Visualizer",
-      onExpand: (open: boolean) => { onDocumentExpand('theme-visualizer', open); },
-      expanded: page === 'theme-visualizer',
-      children: <BackstoryThemeVisualizerPage/>,
-      sessionId,
-      submitQuery: submitQuery,
-      setSnack,
-    }} />
-    <Document {...{
-      title: "App Analysis",
-      onExpand: (open: boolean) => { onDocumentExpand('app-analysis', open); },
-      expanded: page === 'app-analysis',
-      children: <BackstoryAppAnalysisPage/>,
-      sessionId,
-      submitQuery: submitQuery,
-      setSnack,
-    }} />
-    <Document {...{
-      title: "UI Mockup",
-      onExpand: (open: boolean) => { onDocumentExpand('ui-mockup', open); },
-      expanded: page === 'ui-mockup',
-      children: <MockupPage />,
-      sessionId,
-      submitQuery: submitQuery,
-      setSnack,
-    }} />
-  </Box>)
+  // Toggle sidebar on mobile
+  const toggleSidebar = () => {
+    setSidebarOpen(!sidebarOpen);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Mobile Toggle Button */}
+      <button
+        className="md:hidden flex items-center justify-center gap-2 mx-auto mb-4 px-4 py-2 bg-white rounded-md shadow-sm border text-gray-700 hover:bg-gray-50"
+        onClick={toggleSidebar}
+      >
+        {sidebarOpen ? (
+          <>
+            <X size={18} />
+            <span>Hide Navigation</span>
+          </>
+        ) : (
+          <>
+            <Menu size={18} />
+            <span>Show Navigation</span>
+          </>
+        )}
+      </button>
+
+      <div className="flex flex-col md:flex-row gap-5 h-full">
+        {/* Sidebar - hidden on mobile when closed */}
+        {sidebarOpen && (
+          <div className="w-full md:w-64 flex-shrink-0 mb-4 md:mb-0">
+            <Sidebar
+              currentPage={page}
+              onDocumentSelect={onDocumentExpand}
+            />
+          </div>
+        )}
+
+        {/* Main Content Area */}
+        <div className="flex-grow">
+          {page === 'about' && (
+            <Document
+              title="About"
+              filepath="/docs/about.md"
+              onExpand={(open: boolean) => { onDocumentExpand('about', open); }}
+              expanded={page === 'about'}
+              sessionId={sessionId}
+              submitQuery={submitQuery}
+              setSnack={setSnack}
+            />
+          )}
+          {page === 'beta' && (
+            <Document
+              title="BETA"
+              filepath="/docs/beta.md"
+              onExpand={(open: boolean) => { onDocumentExpand('beta', open); }}
+              expanded={page === 'beta'}
+              sessionId={sessionId}
+              submitQuery={submitQuery}
+              setSnack={setSnack}
+            />
+          )}
+          {page === 'resume-generation' && (
+            <Document
+              title="Resume Generation Architecture"
+              filepath="/docs/resume-generation.md"
+              onExpand={(open: boolean) => { onDocumentExpand('resume-generation', open); }}
+              expanded={page === 'resume-generation'}
+              sessionId={sessionId}
+              submitQuery={submitQuery}
+              setSnack={setSnack}
+            />
+          )}
+          {page === 'about-app' && (
+            <Document
+              title="Application Architecture"
+              filepath="/docs/about-app.md"
+              onExpand={(open: boolean) => { onDocumentExpand('about-app', open); }}
+              expanded={page === 'about-app'}
+              sessionId={sessionId}
+              submitQuery={submitQuery}
+              setSnack={setSnack}
+            />
+          )}
+          {page === 'ui-overview' && (
+            <Document
+              title="UI Overview"
+              children={<BackstoryUIOverviewPage />}
+              onExpand={(open: boolean) => { onDocumentExpand('ui-overview', open); }}
+              expanded={page === 'ui-overview'}
+              sessionId={sessionId}
+              submitQuery={submitQuery}
+              setSnack={setSnack}
+            />
+          )}
+          {page === 'theme-visualizer' && (
+            <Document
+              title="Theme Visualizer"
+              onExpand={(open: boolean) => { onDocumentExpand('theme-visualizer', open); }}
+              expanded={page === 'theme-visualizer'}
+              children={<BackstoryThemeVisualizerPage />}
+              sessionId={sessionId}
+              submitQuery={submitQuery}
+              setSnack={setSnack}
+            />
+          )}
+          {page === 'app-analysis' && (
+            <Document
+              title="App Analysis"
+              onExpand={(open: boolean) => { onDocumentExpand('app-analysis', open); }}
+              expanded={page === 'app-analysis'}
+              children={<BackstoryAppAnalysisPage />}
+              sessionId={sessionId}
+              submitQuery={submitQuery}
+              setSnack={setSnack}
+            />
+          )}
+          {page === 'ui-mockup' && (
+            <Document
+              title="UI Mockup"
+              onExpand={(open: boolean) => { onDocumentExpand('ui-mockup', open); }}
+              expanded={page === 'ui-mockup'}
+              children={<MockupPage />}
+              sessionId={sessionId}
+              submitQuery={submitQuery}
+              setSnack={setSnack}
+            />
+          )}
+
+          {/* Show welcome grid if no specific page is selected */}
+          {!page && (
+            <div className="bg-white rounded-lg shadow-md p-6">
+              <h1 className="text-2xl font-bold mb-3">Documentation</h1>
+              <p className="text-gray-600 mb-6">
+                Select a document from the sidebar to view detailed technical information about the application.
+              </p>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {[
+                  { title: "About", route: "about", description: "General information about the application and its purpose" },
+                  { title: "BETA", route: "beta", description: "Details about the current beta version and upcoming features" },
+                  { title: "Resume Generation Architecture", route: "resume-generation", description: "Technical overview of how resumes are processed and generated" },
+                  { title: "Application Architecture", route: "about-app", description: "System design and technical stack information" },
+                  { title: "UI Overview", route: "ui-overview", description: "Guide to the user interface components and interactions" },
+                  { title: "Theme Visualizer", route: "theme-visualizer", description: "Explore and customize application themes and visual styles" },
+                  { title: "App Analysis", route: "app-analysis", description: "Statistics and performance metrics of the application" },
+                  { title: "UI Mockup", route: "ui-mockup", description: "Visual previews of interfaces and layout concepts" }
+                ].map((doc, index) => (
+                  <button
+                    key={index}
+                    onClick={() => onDocumentExpand(doc.route, true)}
+                    className="text-left p-4 bg-white border rounded-lg shadow-sm hover:shadow-md transition-shadow"
+                  >
+                    <div className="flex items-center mb-2">
+                      <span className="text-blue-600 mr-3">{getDocumentIcon(doc.title)}</span>
+                      <span className="font-medium">{doc.title}</span>
+                    </div>
+                    <p className="text-sm text-gray-500 ml-8">{doc.description}</p>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
 };

-export {
-  AboutPage
-};
+export { AboutPage };
--- a/frontend/src/NewApp/Pages/HomePage.tsx
+++ b/frontend/src/NewApp/Pages/HomePage.tsx
@ -1,7 +1,9 @@
 import React from 'react';
+import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import {
  Box,
  Button,
+  ButtonProps,
  Container,
  Paper,
  Typography,
@ -37,17 +39,53 @@ const HeroSection = styled(Box)(({ theme }) => ({
  },
 }));

-const HeroButton = styled(Button)(({ theme }) => ({
-  marginTop: theme.spacing(2),
-  padding: theme.spacing(1, 3),
-  fontWeight: 500,
-  backgroundColor: theme.palette.action.active,
-  color: theme.palette.background.paper,
-  '&:hover': {
+interface HeroButtonProps extends ButtonProps {
+  children?: string;
+}
+const HeroButton = (props: HeroButtonProps) => {
+  const { children, onClick, ...rest } = props;
+
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    const path = children?.replace(/ /g, '-').toLocaleLowerCase() || '/';
+    navigate(path);
+  };
+
+  const HeroStyledButton = styled(Button)(({ theme }) => ({
+    marginTop: theme.spacing(2),
+    padding: theme.spacing(1, 3),
+    fontWeight: 500,
    backgroundColor: theme.palette.action.active,
-    opacity: 0.9,
-  },
-}));
+    color: theme.palette.background.paper,
+    '&:hover': {
+      backgroundColor: theme.palette.action.active,
+      opacity: 0.9,
+    },
+  }));
+  return <HeroStyledButton onClick={onClick ? onClick : handleClick} {...rest}>
+    {children}
+  </HeroStyledButton>
+}
+
+
+interface ActionButtonProps extends ButtonProps {
+  children?: string;
+}
+const ActionButton = (props: ActionButtonProps) => {
+  const { children, onClick, ...rest } = props;
+
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    const path = children?.replace(/ /g, '-').toLocaleLowerCase() || '/';
+    navigate(path);
+  };
+
+  return <Button onClick={onClick ? onClick : handleClick} {...rest}>
+    {children}
+  </Button>
+}

 const FeatureIcon = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.action.active,
@ -95,6 +133,8 @@ const FeatureCard = ({
 };

 const HomePage = () => {
+  const navigate = useNavigate();
+
  return (<Box sx={{display: "flex", flexDirection: "column"}}>
      {/* Hero Section */}
      <HeroSection>
@ -251,14 +291,14 @@ const HomePage = () => {
              </Box>
            </Stack>

-            <Button
+          <ActionButton
              variant="contained"
              color="secondary"
              sx={{ mt: 4 }}
              endIcon={<ArrowForwardIcon />}
            >
              Create Your Profile
-            </Button>
+          </ActionButton>
          </Box>

          <Box sx={{ flex: 1 }}>
@ -339,14 +379,14 @@ const HomePage = () => {
              </Box>
            </Stack>

-            <Button
+          <ActionButton
              variant="contained"
              color="secondary"
              sx={{ mt: 4 }}
              endIcon={<ArrowForwardIcon />}
            >
              Start Recruiting
-            </Button>
+          </ActionButton>
          </Box>
        </Box>
      </Container>
--- a/frontend/src/Pages/ResumeBuilderPage.tsx
+++ b/frontend/src/Pages/ResumeBuilderPage.tsx
@ -189,7 +189,7 @@ const ResumeBuilderPage: React.FC<BackstoryPageProps> = (props: BackstoryPagePro
    setHasFacts(false);
  }, [setHasFacts]);

-  const renderJobDescriptionView = useCallback((sx: SxProps) => {
+  const renderJobDescriptionView = useCallback((sx?: SxProps) => {
    console.log('renderJobDescriptionView');
    const jobDescriptionQuestions = [
      <Box sx={{ display: "flex", flexDirection: "column" }}>
@ -262,7 +262,7 @@ See [About > Resume Generation Architecture](/about/resume-generation) for more
  /**
   * Renders the resume view with loading indicator
   */
-  const renderResumeView = useCallback((sx: SxProps) => {
+  const renderResumeView = useCallback((sx?: SxProps) => {
    const resumeQuestions = [
      <Box sx={{ display: "flex", flexDirection: "column" }}>
        <ChatQuery query={{ prompt: "Is this resume a good fit for the provided job description?", tunables: { enable_tools: false } }} submitQuery={handleResumeQuery} />
@ -311,7 +311,7 @@ See [About > Resume Generation Architecture](/about/resume-generation) for more
  /**
   * Renders the fact check view
   */
-  const renderFactCheckView = useCallback((sx: SxProps) => {
+  const renderFactCheckView = useCallback((sx?: SxProps) => {
    const factsQuestions = [
      <Box sx={{ display: "flex", flexDirection: "column" }}>
        <ChatQuery query={{ prompt: "Rewrite the resume to address any discrepancies.", tunables: { enable_tools: false } }} submitQuery={handleFactsQuery} />
@ -368,9 +368,9 @@ See [About > Resume Generation Architecture](/about/resume-generation) for more
        display: 'flex', flexDirection: 'column', flexGrow: 1, p: 0, width: "100%", ...sx,
        overflow: "hidden"
      }}>
-        <Box sx={{ display: activeTab === 0 ? "flex" : "none" }}>{renderJobDescriptionView({ height: "calc(100vh - 72px - 48px)" })}</Box>
-        <Box sx={{ display: activeTab === 1 ? "flex" : "none" }}>{renderResumeView({ height: "calc(100vh - 72px - 48px)" })}</Box>
-        <Box sx={{ display: activeTab === 2 ? "flex" : "none" }}>{renderFactCheckView({ height: "calc(100vh - 72px - 48px)" })}</Box>
+        <Box sx={{ display: activeTab === 0 ? "flex" : "none" }}>{renderJobDescriptionView(/*{ height: "calc(100vh - 72px - 48px)" }*/)}</Box>
+        <Box sx={{ display: activeTab === 1 ? "flex" : "none" }}>{renderResumeView(/*{ height: "calc(100vh - 72px - 48px)" }*/)}</Box>
+        <Box sx={{ display: activeTab === 2 ? "flex" : "none" }}>{renderFactCheckView(/*{ height: "calc(100vh - 72px - 48px)" }*/)}</Box>
      </Box>
    </Box>
  );
--- a/frontend/src/Pages/VectorVisualizerPage.css
+++ b/frontend/src/Pages/VectorVisualizerPage.css
@ -9,7 +9,4 @@
  margin: 0 auto;
  padding: 10px;
  position: relative;
-  width: 100%;
-  max-width: 1024px;
-  height: calc(100vh - 72px);
 }
--- a/frontend/src/Pages/VectorVisualizerPage.tsx
+++ b/frontend/src/Pages/VectorVisualizerPage.tsx
@ -1,6 +1,5 @@
 import React from 'react';

-import { Scrollable } from '../Components/Scrollable';
 import { VectorVisualizer } from '../Components/VectorVisualizer';
 import { BackstoryPageProps } from '../Components/BackstoryTab';

@ -12,15 +11,7 @@ interface VectorVisualizerProps extends BackstoryPageProps {
 };

 const VectorVisualizerPage: React.FC<VectorVisualizerProps> = (props: VectorVisualizerProps) => {
-  return <Scrollable
-    className="VectorVisualizerPage"
-    autoscroll={false}
-    sx={{
-      overflowY: "scroll",
-    }}
-  >
-    <VectorVisualizer {...props} />
-  </Scrollable>;
+  return <VectorVisualizer inline={false} {...props} />;
 };

 export type { VectorVisualizerProps };
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -8,6 +8,7 @@ body {
  padding: 0;
  height: 100dvh;
  overflow: hidden;
+  min-width: 300px;
 }

 code {