job changes

src/App.css

@@ -144,14 +144,10 @@ h1 {
   animation: move-left-atx-anim 1s forwards;
 }
 
-ul {
-  list-style-type: none;
-  margin-left: -35px;
 
-}
 
 html {
-  scroll-snap-type: y proximity;
+  scroll-snap-type: y mandatory;
 }
 
 .child {

src/App.tsx

@@ -8,6 +8,11 @@ import Projects from "./components/projects/Projects";
 import Hobbies from "./components/hobbies/Hobbies";
 import Contact from "./components/contact/Contact";
 import Terminal from "./components/terminal/Terminal";
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route
+} from 'react-router-dom';
 
 function App() {
 
@@ -16,18 +21,26 @@ function App() {
 
     return (
         <div className="App">
-            {showTerm && <Terminal isTerminalVisible={isTerminalVisible} setIsTerminalVisible={setIsTerminalVisible}/>}
-            {!isTerminalVisible &&
-                <div>
-                    <Hero/>
-                    <AboutMe/>
-                    <Jobs/>
-                    <Projects/>
-                    <Hobbies/>
-                    <Contact/>
-                    <Footer/>
-                </div>
-            }
+            <Router>
+                <Switch>
+                    <Route path='/' exact={true}>
+                        {showTerm && <Terminal isTerminalVisible={isTerminalVisible} setIsTerminalVisible={setIsTerminalVisible}/>}
+                        {!isTerminalVisible &&
+                            <div>
+                                <Hero/>
+                                <AboutMe/>
+                                <Jobs/>
+                                <Projects/>
+                                <Hobbies/>
+                                <Contact/>
+                                <Footer/>
+                            </div>
+                        }
+                    </Route>
+                    <Route path='/privacy' exact={true}>
+                    </Route>
+                </Switch>
+            </Router>
         </div>
       );
 }

src/components/footer/Footer.tsx

@@ -3,11 +3,8 @@ import React from "react";
 export default function Footer() {
     return (
         <footer>
-            <div style={{minHeight: "10vh"}}>
-                <p className={"m-0"}>Copyright © 2021 Nicholas Orlowsky</p>
-                <p className={"m-0"}>Licensed under GNU General Public License v3</p>
-                <p className={"m-0"}>Original source available <a
-                    href={"https://github.com/nickorlow/personal-site"}>here</a></p>
+            <div style={{height: 12, marginTop: -50}}>
+                <p style={{color: "grey"}} className={"m-0"}>Created by 2021 Nicholas Orlowsky - Licensed under GNU General Public License v3 - Original source available <a href={"https://github.com/nickorlow/personal-site"}>here</a></p>
             </div>
         </footer>
     )

src/components/job-card/JobCard.css

@@ -1,9 +1,3 @@
-@media only screen and (min-width: 993px) {
-    .center-card {
-        border-left: .5px rgba(255,255,255,.25) solid;
-        border-right: .5px rgba(255,255,255,.25) solid;
-    }
-}
 
 @media only screen and (max-width: 768px) {
 

src/components/job-card/JobCard.tsx

@@ -3,18 +3,22 @@ import React from "react";
 import Job from "../../types/Job";
 import "./JobCard.css";
 
-export default function JobCard(props: {style?: any, className?: string, job: Job, isCenter: boolean}){
+export default function JobCard(props: {style?: any, className?: string, job: Job}){
     return (
-        <ScrollAnimation className={"job-card "+(props.isCenter ? "center-card " : "")+(props.className || "")} style={props.style} animateIn="fade-up" duration={2} animateOnce={true} offset={50} delay={200}>
-            <div style={{padding: 20}}>
-                <img alt={props.job.company+" company logo"} src={props.job.image} style={{maxHeight: 70, padding: 10,width: "auto", maxWidth: "100%"}}/>
-                <h2>{props.job.title}</h2>
-                {props.job.uri == null && <h5>{props.job.company}</h5>}
-                {props.job.uri != null && <a href={props.job.uri}><h5>{props.job.company}</h5></a>}
-                <p>{props.job.timespan}</p>
-                <ul>
-                    {props.job.items.map((s) =>  <li>{s}</li>)}
-                </ul>
+        <ScrollAnimation className={"job-card "+(props.className || "")} style={props.style} animateIn="fade-up" duration={2} animateOnce={true} offset={50} delay={200}>
+            <div className={"row"} style={{padding: 20}}>
+                <img className={"col-md-4"} alt={props.job.company+" company logo"} src={props.job.image} style={{objectFit: "contain" ,maxHeight: 70, padding: 10,width: "auto", maxWidth: "100%"}}/>
+                <div className={"col-md-8 row"}>
+                    <div className={"col-md-6 text-left"}>
+                        <h2>{props.job.title}</h2>
+                        {props.job.uri == null && <h5>{props.job.company}</h5>}
+                        {props.job.uri != null && <a href={props.job.uri}><h5>{props.job.company}</h5></a>}
+                        <p>{props.job.timespan}</p>
+                    </div>
+                    <ul  className={"col-md-6 text-left"}>
+                        {props.job.items.map((s) =>  <li>{s}</li>)}
+                    </ul>
+                </div>
             </div>
         </ScrollAnimation>
     );

src/components/jobs/Jobs.tsx

@@ -6,12 +6,9 @@ import "./Jobs.css";
 export default function Jobs() {
     return (
         <div className={"child"} style={{minHeight: "100vh"}}>
-            <div className={"row"} style={{justifyContent: "center", alignItems: "center", alignContent: "center"}}>
-                <h1 className={"col-12"} style={{marginBottom: 20}}>Work</h1>
-
-                    {AllJobs.map((job, i) =><JobCard className={"col-md-4"} job={job}
-                                                               isCenter={i % 2 === 1}/>)}
-
+            <div style={{alignContent: "center", padding: 50}}>
+                <h1 style={{marginBottom: 40}}>Work</h1>
+                {AllJobs.map((job, i) =><JobCard job={job}/>)}
             </div>
         </div>
     )

src/static/data/Hobbies.ts

@@ -10,6 +10,14 @@ const RunningHobby: InfoCardProps = {
     listClassName: "col-12"
 }
 
+const Listing: InfoCardProps = {
+    title: "Lifting",
+    description: "Began lifting when I got into college. (TODO: add more before publishing)",
+    listTitle: "Personal Records",
+    list:["Bench - 200lbs", "Squat - 305lbs"],
+    listClassName: "col-12"
+}
+
 const VideogameHobby: InfoCardProps = {
     title: "Video Games",
     description: "Video games are what got me interested in programming in the first place. I tend to play them a lot less now in favor of programming though, I'll occasionally sink a couple hours into a game.",

src/static/data/Jobs.ts

@@ -2,6 +2,7 @@ import Job from "../../types/Job";
 import VrboImage from "../images/vrbo-logo-min.png";
 import CavImage from "../images/cavcash-logo-min.png";
 import ChicksImage from "../images/chicks-logo.svg";
+import CompImage from "../images/compwallet-logo.png";
 
 const VrboJob: Job = {
     title: "Data Scientist",
@@ -19,15 +20,13 @@ const VrboJob: Job = {
 
 const CavCashJob: Job = {
     title: "CEO & Software Engineer",
-    company: "CavCash Inc",
+    company: "CavCash",
     timespan: "May 2017 - Present",
     items: [
         "Founded the company",
         "Wrote a C# webAPI",
         "Managed mongoDB and MSSQL databases",
-        "Deployed and maintained k8s clusters on bare metal",
-        "Managed CI/CD & DevOps in Azure DevOps",
-        "Ran & migrated services between Azure, AWS, and GCP"
+        "Deployed and maintained k8s clusters on bare metal on in-house datacenter",
     ],
     image: CavImage
 }
@@ -36,7 +35,7 @@ const ChicksJob: Job = {
     title: "Software Engineer",
     company: "Chicks Gold",
     uri: "https://chicksgold.com",
-    timespan: "April 2021 - Present",
+    timespan: "April 2021 - October 2021",
     items: [
         "Added features & bugfixes to .NET 5 API",
         "Added features & bugfixes to Aurelia website",
@@ -46,6 +45,17 @@ const ChicksJob: Job = {
     image: ChicksImage
 }
 
+const CompWalletJob: Job = {
+    title: "Lead Software Developer",
+    company: "Casino CompWallet",
+    timespan: "October 2021 - Present",
+    items: [
+        "Work on Ruby-On-Rails API",
+        "Updated a React Native mobile app"
+    ],
+    image: CompImage
+}
 
-export const AllJobs: Job[] = [VrboJob, CavCashJob, ChicksJob];
+
+export const AllJobs: Job[] = [CompWalletJob, CavCashJob, ChicksJob, VrboJob];
 

src/static/data/Projects.ts

@@ -2,7 +2,7 @@ import InfoCardProps from "../../types/InfoCardProps";
 
 const WebsiteProject: InfoCardProps = {
     title: "personal-site (this website)",
-    description: "As a primairly backend guy, I wrote my last website as a JSON file (imatating a webAPI). Feedback showed that that was a bad idea so I made this pretty neat site (in my opinion). If you like it, feel free to use it yourself!",
+    description: "As a primairly backend guy, I wrote my last website as a JSON file (imatating a webAPI). Feedback showed that that was a bad idea so I made this pretty neat site (in my opinion). If you like it, feel free to use it yourself! The backend is run in a homemade datacenter (a few Dell Poweredges on a rack) running on Kubernetes.",
     listTitle: "Technologies & Resources used",
     list:["React", "Typescript", "Bootstrap", "Icons8", "Docker", "Kubernetes"],
     link: "https://github.com/nickorlow/personal-site",