diff --git a/package-lock.json b/package-lock.json index 939d33f..9d74135 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a0faf6f..13a80d4 100644 --- a/package.json +++ b/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" diff --git a/public/index.html b/public/index.html index 2717965..08a1876 100644 --- a/public/index.html +++ b/public/index.html @@ -1,32 +1,27 @@ - - - - - - - - - - Simonson - Portfolio - - - -
- - + + + Simonson - Portfolio + + + + +
+ + + + \ No newline at end of file diff --git a/public/resume.pdf b/public/resume.pdf index 0858aa2..1181315 100644 Binary files a/public/resume.pdf and b/public/resume.pdf differ diff --git a/src/App.css b/src/App.css index d33ddfa..9fc8d5c 100644 --- a/src/App.css +++ b/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: 20rem; - max-height: 20rem; + max-width: min(40rem,80%); + max-height: min(30rem,100%); +} +.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%; + } } \ No newline at end of file diff --git a/src/App.js b/src/App.js index dad9736..681baa9 100644 --- a/src/App.js +++ b/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 Projects from './Projects'; +import Home from './pages/Home.js' +import Projects from './pages/Projects'; +import AboutMe from './pages/AboutMe'; import AOS from 'aos'; import 'aos/dist/aos.css'; // You can also use for styles @@ -15,17 +16,19 @@ function App() {
-

Andrew Simonson

-
- + +
diff --git a/src/assets/itsa_me.JPG b/src/assets/itsa_me.JPG index b4cc72b..6cd7514 100644 Binary files a/src/assets/itsa_me.JPG and b/src/assets/itsa_me.JPG differ diff --git a/src/assets/me_dog.jpg b/src/assets/me_dog.jpg new file mode 100644 index 0000000..a507374 Binary files /dev/null and b/src/assets/me_dog.jpg differ diff --git a/src/assets/me_robot.jpeg b/src/assets/me_robot.jpeg new file mode 100644 index 0000000..540f3a5 Binary files /dev/null and b/src/assets/me_robot.jpeg differ diff --git a/src/assets/plexus.jpg b/src/assets/plexus.jpg new file mode 100644 index 0000000..b4de7b2 Binary files /dev/null and b/src/assets/plexus.jpg differ diff --git a/src/componets/About.js b/src/componets/About.js deleted file mode 100644 index 5c273df..0000000 --- a/src/componets/About.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import picture from '../assets/itsa_me.JPG' -import AOS from 'aos' - -export default function About(){ - return( - <> -
-

A biography

-

Ahoy, I'm Andrew Simonson

-

I'm primarily an extremely 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.

-

When I'm not losing my mindwasting time, - you can find me building discord bots, playing chess, - or actually exercising, doing things like, idk, playing - racquetball or soccer.

-

I'm a first year student at Rochester Institute of Technology - in the Computing Exploration program. I'm from Hagerstown, - Maryland.

-
- me - - ) -} \ No newline at end of file diff --git a/src/componets/Carousel.js b/src/componets/Carousel.js new file mode 100644 index 0000000..35562d7 --- /dev/null +++ b/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 ( +
+ {x[1] +

{x[1]}

+
+ ) + }); + return ( +
+
+ + {slides} + +
+
+ ); +} \ No newline at end of file diff --git a/src/componets/Nav.js b/src/componets/Nav.js index ff25b60..44201d0 100644 --- a/src/componets/Nav.js +++ b/src/componets/Nav.js @@ -11,8 +11,10 @@ export default function Nav(props){ ) } return( -
    - {items} -
+
+
    + {items} +
+
) } \ No newline at end of file diff --git a/src/componets/Project.js b/src/componets/Project.js index f5a36e6..23b618d 100644 --- a/src/componets/Project.js +++ b/src/componets/Project.js @@ -7,7 +7,7 @@ export default class Project extends React.Component { render(){ return ( -
  • +

  • {this.props.title}

    ⬤

    diff --git a/src/componets/ProjectList.js b/src/componets/ProjectList.js index 65a8e8c..c324a9d 100644 --- a/src/componets/ProjectList.js +++ b/src/componets/ProjectList.js @@ -12,7 +12,7 @@ export default function ProjectList(props){ }); return( <> -
      +
        {projects}
      diff --git a/src/componets/Skills.js b/src/componets/Skills.js new file mode 100644 index 0000000..08625a8 --- /dev/null +++ b/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} +
    • {x}
      • + + ) + }); + return ( +
        + {allSkills} +
      ); +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 7998135..b3bf05b 100644 --- a/src/index.js +++ b/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( diff --git a/src/pages/AboutMe.js b/src/pages/AboutMe.js new file mode 100644 index 0000000..141aa28 --- /dev/null +++ b/src/pages/AboutMe.js @@ -0,0 +1,32 @@ +import React from 'react' +import Skills from '../componets/Skills' + +export default function AboutMe(){ + return( + <> +
      +

      About Me

      +

      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. +

      +

      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. +

      +

      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. +

      +
      +
      +

      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']} +
      + + ) +} \ No newline at end of file diff --git a/src/pages/Home.js b/src/pages/Home.js new file mode 100644 index 0000000..e254195 --- /dev/null +++ b/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 ( + <> +
      +

      Ahoy, I'm Andrew Simonson

      +

      I'm a first year student at Rochester Institute of Technology + in the Computing Exploration program and am pursuing a career in data + science with a focus on predictive analytics. +

      +

      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. +

      + + {[[img1, "Me, chilling"],[img2, "VEX Robotics 2019"]]} + +
      + + ) +} \ No newline at end of file diff --git a/src/Projects.js b/src/pages/Projects.js similarity index 77% rename from src/Projects.js rename to src/pages/Projects.js index a37931d..14b7c3a 100644 --- a/src/Projects.js +++ b/src/pages/Projects.js @@ -1,19 +1,22 @@ -import ProjectList from './componets/ProjectList' -import Project from './componets/Project' -import github from './assets/github.svg' +import ProjectList from '../componets/ProjectList' +import Project from '../componets/Project' +import github from '../assets/github.svg' export default function Projects(){ return( <> +

      Projects

      -

      Project status is indicated by the color of the project card:
      ⬤ - Complete
      - ⬤ - Work In Progress
      ⬤ - incomplete

      +

      Project status is indicated by the color of the project card:
      ⬤ - Complete
      + ⬤ - Work In Progress
      ⬤ - incomplete +

      +
      }> A personal portfolio site made with React.js }> - Slate is a thing + Slate is a web app designed to help event coordinators schedule events by congregating participant calendar data }> A modular discord bot to manage class discord servers. diff --git a/src/responsive.js b/src/responsive.js new file mode 100644 index 0000000..1af8f8a --- /dev/null +++ b/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'}); + } +} \ No newline at end of file