Complete for 9/29/21 career fair

I still don't think this is complete, but it's all I can muster right now.

package-lock.json

@@ -16,6 +16,7 @@
         "node-dom": "^0.1.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-responsive-carousel": "^3.2.21",
         "react-router-dom": "^5.3.0",
         "react-scripts": "4.0.3",
         "web-vitals": "^1.0.1"
@@ -4935,6 +4936,11 @@
       "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
       "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4="
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -15554,6 +15560,17 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-easy-swipe": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+      "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.9",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
@@ -15572,6 +15589,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive-carousel": {
+      "version": "3.2.21",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.21.tgz",
+      "integrity": "sha512-y2ueGqv/yo6HQJi9IbrJVRJobp4EOrNe6BQOC61CoADg3wUjq0gqAcrtSsLQIRLtbt6nCo7cTPRX4wAkSwdiTA==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.21"
+      }
+    },
     "node_modules/react-router": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
@@ -25049,6 +25076,11 @@
       "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
       "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4="
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -33489,6 +33521,14 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-easy-swipe": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+      "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.9",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
@@ -33504,6 +33544,16 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-responsive-carousel": {
+      "version": "3.2.21",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.21.tgz",
+      "integrity": "sha512-y2ueGqv/yo6HQJi9IbrJVRJobp4EOrNe6BQOC61CoADg3wUjq0gqAcrtSsLQIRLtbt6nCo7cTPRX4wAkSwdiTA==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.21"
+      }
+    },
     "react-router": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",

package.json

@@ -7,11 +7,12 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "aos": "^2.3.4",
     "node": "^16.9.1",
     "node-dom": "^0.1.0",
-    "aos": "^2.3.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-responsive-carousel": "^3.2.21",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"

public/index.html

@@ -1,32 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
-    <meta charset="utf-8" />
+<head>
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="theme-color" content="#000000" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
+  <meta name="theme-color" content="#000000" />
-      name="Simonson - Portfolio"
+  <meta name="Simonson - Portfolio" content="Digital portfolio of Andrew Simonson" />
-      content="Digital portfolio of Andrew Simonson"
+  <!--
-    />
-    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+  <link rel="stylesheet" href="/path/to/flickity.css" media="screen">
-      work correctly both with client-side routing and a non-root public URL.
+
-      Learn how to configure a non-root public URL by running `npm run build`.
+  <title>Simonson - Portfolio</title>
-    -->
+</head>
-    <title>Simonson - Portfolio</title>
+
-  </head>
+<body>
-  <body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
-    <div id="root"></div>
+  <script src="/path/to/flickity.pkgd.min.js"></script>
-  </body>
+</body>
-</html>
+
+</html>

src/App.css

@@ -4,9 +4,11 @@ html, body{
 }
 body{
   margin: 0;
-  background-image: url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')
+  background-image: url('assets/plexus.jpg');/*url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')*/
+  background-attachment: fixed;
+  background-size: 100% auto;
 }
-h1, h2, p{
+*{
   font-family: "Roboto Condensed",sans-serif;
 }
 h1, h2{
@@ -30,29 +32,39 @@ a {
 }
 .header h1{
   display: inline-block;
+  transition: .4s;
   margin-bottom: 0px;
   margin-top: .5rem;
   font-size: 2.5rem;
 }
 .header{
   margin-bottom: 0px;
-  margin-left: .3rem;
+  margin-left: 0rem;
   padding-bottom: .2rem;
-  background-color: #0f1216;
+  background-color: #1a1a1a;
+  border-bottom: solid black 1px;
   width: 100%;
-  z-index: 10;
+  z-index: 99;
   position: fixed;
   top: 0;
   left: 0;
+  transition: .4s;
   overflow: hidden;
 }
+.navControl{
+  float:right;
+}
 .navBar li{
   display: inline;
+  text-align: right;
   background-color: rgb(156,49,45,.5);
   border-top: .2rem black solid;
   border-bottom: .2rem black solid;
   border-right: .2rem black solid;
+  padding-top: .3rem;
+  padding-bottom: .3rem;
   font-size: 1.2rem;
+  transition: .4s;
 }
 .navBar li:hover{
   background-color: rgb(156,49,45,.8);
@@ -64,9 +76,9 @@ a {
   color: white;
   padding-left: 2rem;;
   padding-right: 2rem;
-  line-height: 1.2vmax;
 }
 .navBar{
+  display: flex;
   margin-top: 1rem;
   margin-bottom: 0px;
   padding-left: 0px;
@@ -79,15 +91,50 @@ a {
   padding-bottom: 1rem;
   overflow: hidden;
 }
+.foreground *{
+  padding-left: .5rem;
+}
 .foreground p{
+  line-height: 1.5em;
   max-width: 40rem;
 }
 .sideimg{
-  float: right;
+  float:right;
+  top: 0;
+  right: 0;
   display: block;
-  margin-right: 10rem;
+  max-width: min(40rem,80%);
-  max-width: 20rem;
+  max-height: min(30rem,100%);
-  max-height: 20rem;
+}
+.centerContent{
+  margin-top: 10rem;
+  margin-bottom: 10rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 60rem;
+}
+#aboutMe{
+  float: left;
+  width: 45%;
+}
+#skills{
+  float: right;
+  width: 45%;
+  margin-right: 3rem;
+}
+.skills{
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.3);
+  border: solid rgba(156,49,45, .8) .3rem;
+  text-align: center;
+}
+.skill{
+  display: inline-block;
+  border:rgba(156,49,45, .8) solid .15rem;
+  padding:.2rem;
+  margin: .5rem;
+  background-color: rgba(11,11,11,.8);
+  color:rgb(212, 212, 212);
 }
 .projectList{
   padding: 0;
@@ -104,7 +151,7 @@ a {
   text-align: left;
   margin: 1rem;
   width: 20rem;
-  height: 15rem;
+  height: 20rem;
   border: .3rem rgba(156,49,45, .8) solid;
   background-color: rgba(22,22,22,.8);
 }
@@ -124,13 +171,13 @@ a {
   height:3rem;
 }
 .topBox{
-  padding-left: 1rem;
+  padding-left: .5rem;
   padding-right: 1rem;
-  height: 65%;
+  height: 75%;
 }
 .bottomBox{
   height: auto;
-  padding-left: 1rem;
+  padding-left: 0rem;
   padding-right: 1rem;
 }
 .bottomBox a{
@@ -176,4 +223,28 @@ a {
   .projectList{
     width: 95%;
   }
+  .sideimg{
+    position: relative;
+  }
+  body{
+    background-size: auto 100%;
+  }
+  .navBar li a{
+    padding-left: 3vw;
+    padding-right: 3vw;
+  }
+  .navControl{
+    float: none;
+  }
+  #aboutMe{
+    float: none;
+    display:block;
+    width: 90%;
+  }
+  #skills{
+    float: none;
+    margin-right: auto;
+    display: block;
+    width: 90%;
+  }
 }

src/App.js

@@ -3,8 +3,9 @@ import { Route, Link, HashRouter as Router } from 'react-router-dom'
 import './App.css';
 import Nav from './componets/Nav.js'
 import Socials from './componets/Socials.js'
-import About from './componets/About.js'
+import Home from './pages/Home.js'
-import Projects from './Projects';
+import Projects from './pages/Projects';
+import AboutMe from './pages/AboutMe';
 import AOS from 'aos';
 import 'aos/dist/aos.css'; // You can also use <link> for styles
 
@@ -15,17 +16,19 @@ function App() {
     <Router>
     <div className="App">
       <div className="header">
-        <h1>Andrew Simonson</h1>
+        <a href="/"><h1>Andrew Simonson</h1></a>
-        <Nav>
+        <Nav id='navbar'>
           <Link to='/'>Home</Link>
           <a href='resume.pdf' target='_blank'>Resume</a>
           <Link to='/projects'>Projects</Link>
+          <Link to='/about'>About</Link>
         </Nav>
       </div>
       <div className='foreground'>
         
-          <Route exact path='/'><About /></Route>
+          <Route exact path='/'><Home /></Route>
           <Route exact path='/projects'><Projects /></Route>
+          <Route exact path='/about'><AboutMe /></Route>
         
       </div>
       <div className='footer'>

src/componets/About.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import picture from '../assets/itsa_me.JPG'
-import AOS from 'aos'
-
-export default function About(){
-    return(
-        <>
-        <div data-aos="fade-in">
-            <h2>A biography</h2>
-            <p>Ahoy, I'm Andrew Simonson</p>
-            <p>I'm primarily an <strong>extremely</strong> forgetful person 
-                who, when productive, rewrites fate in favor of my own 
-                short-term interests, or rather, whatever half-assed mistake
-                results from the attempt.</p>
-            <p>When I'm not <del>losing my mind</del>wasting time, 
-                you can find me building discord bots, playing chess, 
-                or actually exercising, doing things like, idk, playing
-                racquetball or soccer.</p>
-            <p>I'm a first year student at <strong>Rochester Institute of Technology </strong>
-                in the <b>Computing Exploration</b> program.  I'm from Hagerstown, 
-                Maryland.</p>
-        </div>
-            <img alt='me' src={picture} className='sideimg' data-aos='fade-up' />
-        </>
-    )
-}

src/componets/Carousel.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Carousel } from "react-responsive-carousel";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+
+export default function ResponsiveCarousel(props) {
+  let slides = [];
+  props.children.forEach(x => {
+    slides.push (
+        <div>
+          <img src={x[0]} alt={x[1] } />
+          <p className="legend">{x[1]}</p>
+        </div>
+    )
+  });
+  return (
+    <div>
+      <div className="carousel-container">
+        <Carousel infiniteLoop autoPlay useKeyboardArrows centerMode dynamicHeight>
+          {slides}
+        </Carousel>
+      </div>
+    </div>
+  );
+}

src/componets/Nav.js

@@ -11,8 +11,10 @@ export default function Nav(props){
         )
     }
     return(
-        <ul className='navBar'>
+        <div className = 'navControl'>
-            {items}
+            <ul className='navBar'>
-        </ul>
+                {items}
+            </ul>
+        </div>
     )
 }

src/componets/Project.js

@@ -7,7 +7,7 @@ export default class Project extends React.Component {
 
     render(){
         return (
-            <li className={'project'} data-aos='fade-in' data-aos-offset={0}>
+            <li className={'project'} data-aos='fade-up' data-aos-offset={0}>
                 <div className='topBox'>
                     <h3>{this.props.title}</h3>
                     <p className={this.props.status + " tab"}>⬤</p>

src/componets/ProjectList.js

@@ -12,7 +12,7 @@ export default function ProjectList(props){
     });
     return(
         <>
-        <ul className='projectList'>
+        <ul className='projectList' data-aos='fade-up'>
             {projects}
         </ul>
         </>

src/componets/Skills.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default function Skills(props){
+    let allSkills;
+    props.children.forEach(x => {
+        allSkills = (
+            <>
+                {allSkills}
+                <li className='skill'>{x}</li>
+            </>
+        )
+    });
+    return (
+        <ul className='skills'>
+            {allSkills}
+        </ul>);
+}

src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import './responsive.js'
 
 ReactDOM.render(
   <React.StrictMode>

src/pages/AboutMe.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import Skills from '../componets/Skills'
+
+export default function AboutMe(){
+    return(
+    <>
+        <div id='aboutMe' data-aos='fade-up'>
+            <h2>About Me</h2>
+            <p>My main goal in life is to always strive to make the biggest positive impact on
+                the world that I can.  Regardless of whether that is done behind the scenes or
+                on the front lines, that is how I'll know I have purpose.
+            </p>
+            <p>I also value the ability to understand the world at large.  That awareness is 
+                what grounds a person into reality and gives their place in the world value.  
+                When I learn about geography or international politics, my favorite parts are
+                when I can understand the causality to shifts both in history and the present
+                because it presents an inside look into how we can learn from related events.
+            </p> 
+            <p>There is one single special interest that makes me unique, so it is my goal to
+                be the one with a collection of distinct interests and a knack for bridging 
+                the gap between them.
+            </p>
+        </div>
+        <div id='skills' data-aos='fade-up'>
+            <h2>Skills</h2>
+            <Skills>{['Python','JavaScript','Java','C++','SQL','SQLite','Sequelize','SQLAclchemy',
+                'HTML','CSS','Object-Oriented Programming','Git','Github','Linux','Raspberry Pi',
+                'LaTeX','Flask','DOM Scraping','Google API','React.js','Node.js']}</Skills>
+        </div>
+    </>
+    )
+}

src/pages/Home.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import MyCarousel from '../componets/Carousel.js';
+import img1 from '../assets/itsa_me.JPG'
+import img2 from '../assets/me_robot.jpeg'
+import img3 from '../assets/me_dog.jpg'
+
+export default function Home() {
+    return (
+        <>
+            <div class='centerContent' data-aos="fade-up">
+                <h2>Ahoy, I'm Andrew Simonson</h2>
+                <p>I'm a first year student at <strong>Rochester Institute of Technology </strong>
+                    in the <b>Computing Exploration</b> program and am pursuing a career in data
+                    science with a focus on predictive analytics.
+                </p>
+                <p>When I'm not in class, you can find me working on extra collaborative projects,
+                    building discord bots, playing chess, reading up on some recent geopolitical
+                    development, or in my dorm with a fat pint of ice cream.
+                </p>
+                <MyCarousel>
+                    {[[img1, "Me, chilling"],[img2, "VEX Robotics 2019"]]}
+                </MyCarousel>
+            </div>
+        </>
+    )
+}

src/pages/Projects.js

@@ -1,19 +1,22 @@
-import ProjectList from './componets/ProjectList'
+import ProjectList from '../componets/ProjectList'
-import Project from './componets/Project'
+import Project from '../componets/Project'
-import github from './assets/github.svg'
+import github from '../assets/github.svg'
 
 export default function Projects(){
     return(
       <>
+        <div data-aos='fade-up'>
         <h2>Projects</h2>
-        <p>Project status is indicated by the color of the project card:<br /><span className='complete'>⬤</span> - Complete<br />
+          <p>Project status is indicated by the color of the project card:<br /><span className='complete'>⬤</span> - Complete<br />
-          <span className='WIP'>⬤</span> - Work In Progress<br /><span className='incomplete'>⬤</span> - incomplete</p>
+            <span className='WIP'>⬤</span> - Work In Progress<br /><span className='incomplete'>⬤</span> - incomplete
+          </p>
+        </div>
         <ProjectList>
           <Project status='complete' title='Digital Portfolio' link='https://github.com/asimonson1125/asimonson1125.github.io' linkText={<img alt='github' src={github} />}>
             A personal portfolio site made with React.js
           </Project>
           <Project status='WIP' title='Slate' link='https://github.com/asimonson1125/Slate' linkText={<img alt='github' src={github} />}>
-            Slate is a thing
+            Slate is a web app designed to help event coordinators schedule events by congregating participant calendar data
           </Project>
           <Project status='WIP' title='Querist' link='https://github.com/asimonson1125/Querist' linkText={<img alt='github' src={github} />}>
             A modular discord bot to manage class discord servers.

src/responsive.js

@@ -0,0 +1,15 @@
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
+    document.querySelector('.header').style.backgroundColor = '#1a1a1a';
+    document.querySelector('.header > a > h1').style.fontSize = "2rem";
+    // document.querySelector('.header > h1').style.color = "#a8a8a8";
+    document.querySelectorAll('.navBar > li').forEach(x => {x.style.paddingTop = '0rem'; x.style.paddingBottom = '0rem'});
+  } else {
+    document.querySelector('.header').style.backgroundColor = 'rgba(0,0,0,0)';
+    document.querySelector('.header > a > h1').style.fontSize = "2.5rem";
+    // document.querySelector('.header > h1').style.color = "#ecebeb";
+    document.querySelectorAll('.navBar > li').forEach(x => {x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'});
+  }
+}