switch to go backend

Frontend/src/App.css

@@ -0,0 +1,19 @@
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.profile-image {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.hero-image {
+  width: 100%;
+  border-radius: 8px;
+  display: block;
+}

Frontend/src/App.tsx

@@ -0,0 +1,48 @@
+import { BrowserRouter, Routes, Route, useNavigate, useLocation } from "react-router-dom";
+import AppLayout from "@cloudscape-design/components/app-layout";
+import SideNavigation from "@cloudscape-design/components/side-navigation";
+import "@cloudscape-design/global-styles/index.css";
+import "./App.css";
+import Home from "./pages/Home";
+import Resume from "./pages/Resume";
+import NotFound from "./pages/NotFound";
+
+function AppContent() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (
+    <AppLayout
+      toolsHide
+      navigation={
+        <SideNavigation
+          header={{ text: "Stephen Parkinson", href: "/" }}
+          activeHref={location.pathname}
+          onFollow={(event) => {
+            event.preventDefault();
+            navigate(event.detail.href);
+          }}
+          items={[
+            { type: "link", text: "Home", href: "/" },
+            { type: "link", text: "Resume", href: "/resume" },
+          ]}
+        />
+      }
+      content={
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/resume" element={<Resume />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      }
+    />
+  );
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <AppContent />
+    </BrowserRouter>
+  );
+}

Frontend/src/main.tsx

@@ -0,0 +1,17 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { applyMode, Mode } from "@cloudscape-design/global-styles";
+
+import App from "./App.tsx";
+
+const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+applyMode(darkQuery.matches ? Mode.Dark : Mode.Light);
+darkQuery.addEventListener("change", (e) => {
+  applyMode(e.matches ? Mode.Dark : Mode.Light);
+});
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

Frontend/src/pages/Home.tsx

@@ -0,0 +1,42 @@
+import ContentLayout from "@cloudscape-design/components/content-layout";
+import Header from "@cloudscape-design/components/header";
+import Container from "@cloudscape-design/components/container";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+import Link from "@cloudscape-design/components/link";
+import Box from "@cloudscape-design/components/box";
+
+export default function Home() {
+  return (
+    <ContentLayout
+      header={
+        <div className="page-header">
+          <img src="/images/me.jpg" alt="Stephen Parkinson" className="profile-image" />
+          <Header variant="h1" description="Systems Development Engineer">
+            Stephen Parkinson
+          </Header>
+        </div>
+      }
+    >
+      <SpaceBetween size="l">
+        <Container header={<Header variant="h2">About Me</Header>}>
+          <Box variant="p">I'm doing a lot of stuff with computers right now.</Box>
+        </Container>
+
+        <Container>
+          <img src="/images/trees.jpg" alt="Trees" className="hero-image" />
+        </Container>
+
+        <Container header={<Header variant="h2">Contact</Header>}>
+          <SpaceBetween size="s" direction="horizontal">
+            <Link href="https://www.linkedin.com/in/stephen-parkinson" external>
+              LinkedIn
+            </Link>
+            <Link href="https://github.com/smparkin" external>
+              GitHub
+            </Link>
+          </SpaceBetween>
+        </Container>
+      </SpaceBetween>
+    </ContentLayout>
+  );
+}

Frontend/src/pages/NotFound.tsx

@@ -0,0 +1,14 @@
+import ContentLayout from "@cloudscape-design/components/content-layout";
+import Header from "@cloudscape-design/components/header";
+import Box from "@cloudscape-design/components/box";
+import Link from "@cloudscape-design/components/link";
+
+export default function NotFound() {
+  return (
+    <ContentLayout header={<Header variant="h1">404</Header>}>
+      <Box variant="p">
+        The page you're looking for doesn't exist. <Link href="/">Go home</Link>
+      </Box>
+    </ContentLayout>
+  );
+}

Frontend/src/pages/Resume.tsx

@@ -0,0 +1,137 @@
+import ContentLayout from "@cloudscape-design/components/content-layout";
+import Header from "@cloudscape-design/components/header";
+import Container from "@cloudscape-design/components/container";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+import Box from "@cloudscape-design/components/box";
+import ColumnLayout from "@cloudscape-design/components/column-layout";
+
+export default function Resume() {
+  return (
+    <ContentLayout header={<Header variant="h1">Resume</Header>}>
+      <SpaceBetween size="l">
+        <Container header={<Header variant="h2">Employment</Header>}>
+          <SpaceBetween size="l">
+            <SpaceBetween size="xxs">
+              <Header variant="h3">Systems Development Engineer, Amazon Security</Header>
+              <Box variant="small" color="text-body-secondary">
+                San Luis Obispo, CA &middot; April 2020 &ndash; Present (Promoted to full-time July
+                2022)
+              </Box>
+              <Box variant="p">
+                <ul>
+                  <li>
+                    Create and deploy serverless applications to collect and enrich data for
+                    analysis.
+                  </li>
+                  <li>
+                    Add monitoring and alarming to existing services to allow for easier diagnosing
+                    of potential issues.
+                  </li>
+                  <li>
+                    Work with customers to understand requirements and deliver results quickly.
+                  </li>
+                </ul>
+              </Box>
+            </SpaceBetween>
+
+            <SpaceBetween size="xxs">
+              <Header variant="h3">Student Assistant, On-Site Support Cal Poly ITS</Header>
+              <Box variant="small" color="text-body-secondary">
+                San Luis Obispo, CA &middot; May 2019 &ndash; February 2020
+              </Box>
+              <Box variant="p">
+                <ul>
+                  <li>
+                    Responsible for support of computer services and equipment across multiple
+                    departments.
+                  </li>
+                  <li>Troubleshooting, detecting, and solving of technical problems.</li>
+                  <li>
+                    Managing macOS and Windows based computers using Active Directory, SCCM, and
+                    Jamf.
+                  </li>
+                </ul>
+              </Box>
+            </SpaceBetween>
+          </SpaceBetween>
+        </Container>
+
+        <Container header={<Header variant="h2">Education</Header>}>
+          <SpaceBetween size="l">
+            <SpaceBetween size="xxs">
+              <Header variant="h3">California Polytechnic State University</Header>
+              <Box variant="small" color="text-body-secondary">
+                2017 &ndash; 2022
+              </Box>
+              <Box variant="p">
+                <strong>Software Engineering</strong>
+                <br />
+                Relevant Coursework: Introduction to Computing, Fundamentals of Computer Science,
+                Data Structures, Project-Based Object-Oriented Programming &amp; Design,
+                Introduction to Computer Organization, Systems Programming, and Introduction to
+                Operating Systems.
+              </Box>
+            </SpaceBetween>
+
+            <SpaceBetween size="xxs">
+              <Header variant="h3">Cal Poly Security Education Club &mdash; President</Header>
+              <Box variant="small" color="text-body-secondary">
+                Spring 2020 &ndash; Spring 2021
+              </Box>
+              <Box variant="p">
+                <ul>
+                  <li>
+                    Responsible for planning and logistics of events including iFixit Triathlon and
+                    Security Career Fair.
+                  </li>
+                  <li>
+                    Manage a team of student officers to introduce students to security topics at
+                    all skill levels.
+                  </li>
+                  <li>Coordinate with companies for presentations and special events.</li>
+                  <li>
+                    Presented technical talks such as "iOS Security and Jailbreaking", "machswap, a
+                    vulnerability in XNU IPC", "Intro to SSH", "Nintendo Switch Security", "macOS
+                    Security", and "Mac File Systems and APFS Security".
+                  </li>
+                </ul>
+              </Box>
+            </SpaceBetween>
+          </SpaceBetween>
+        </Container>
+
+        <Container header={<Header variant="h2">Skills</Header>}>
+          <ColumnLayout columns={3} variant="text-grid">
+            <SpaceBetween size="xxs">
+              <Box variant="h3">Languages &amp; Tools</Box>
+              <Box variant="p">
+                Python, TypeScript, React, JavaScript, C, Swift, git, zsh, Burp Suite
+              </Box>
+            </SpaceBetween>
+            <SpaceBetween size="xxs">
+              <Box variant="h3">AWS</Box>
+              <Box variant="p">Lambda, S3, DynamoDB, CloudWatch, KMS, SSM, SES, SQS, SNS, CDK</Box>
+            </SpaceBetween>
+            <SpaceBetween size="xxs">
+              <Box variant="h3">Operating Systems</Box>
+              <Box variant="p">macOS, Windows, Linux</Box>
+            </SpaceBetween>
+          </ColumnLayout>
+        </Container>
+
+        <Container header={<Header variant="h2">Projects</Header>}>
+          <ul>
+            <li>
+              Developed a watchOS app to show the status of the White Hat lab on an Apple Watch.
+            </li>
+            <li>Created a Python script to control Spotify's API from the command line.</li>
+            <li>
+              Upgraded White Hat's network infrastructure to take advantage of the 1Gbps connection
+              to the internet.
+            </li>
+          </ul>
+        </Container>
+      </SpaceBetween>
+    </ContentLayout>
+  );
+}