rebuilt about with carousel

2026-02-25 05:09:49 -06:00 · 2021-09-30 13:22:10 -04:00
parent 5e4d05fcdf
commit 052df9795c
7 changed files with 472 additions and 27 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,4 @@
+@import "~react-image-gallery/styles/css/image-gallery.css";
 html, body{
  background-color: #1b1f27;
  overflow-x: hidden;
@@ -89,6 +90,19 @@ a {
  line-height: 1.5em;
  max-width: min(95%, 40rem);
 }
+.centerContent{
+  margin-top: 10vh;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+#Vertical{
+  margin-left: auto;
+  margin-right: auto;
+  width:0;
+  height: 50rem;
+  border-right: rgb(156,49,45) solid 1px;
+}
 .sideimg{
  float:right;
  top: 0;
@@ -97,10 +111,14 @@ a {
  max-width: min(40rem,80%);
  max-height: min(30rem,100%);
 }
-#skills{
-  float: right;
-  width: 45%;
+.col{
+  float:left;
  margin-right: 3rem;
+  width: calc(50% - 3rem);
+}
+.carousel-container{
+  margin-left: 10%;
+  max-width: 80%;
 }
 .skills{
  display: inline-block;
@@ -193,6 +211,10 @@ a {
  height: 2rem;
  margin-bottom: 1rem;
  filter: invert(29%) sepia(20%) saturate(1786%) hue-rotate(314deg) brightness(101%) contrast(110%);
+  transition: .2s;
+}
+.socials img:hover{
+  opacity: .5;
 }
 #vertLine{
  border-right: 1px solid rgb(156,49,45);
@@ -210,6 +232,10 @@ a {
  body{
    background-size: auto 100%;
  }
+  .col{
+    width: 90%;
+    margin-bottom: 3rem;
+  }
  #aboutMe{
    float: none;
    display:block;
--- a/src/componets/Carousel.js
+++ b/src/componets/Carousel.js
@@ -1,23 +1,15 @@
 import React from "react";
-import { Carousel } from "react-responsive-carousel";
-import "react-responsive-carousel/lib/styles/carousel.min.css";
+import ImageGallery from 'react-image-gallery';

 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>
-    )
-  });
+  let items = [{
+    original: 'https://picsum.photos/id/1018/1000/600/',
+    description: "greg"
+  }]
  return (
    <div>
      <div className="carousel-container">
-        <Carousel infiniteLoop autoPlay useKeyboardArrows centerMode dynamicHeight>
-          {slides}
-        </Carousel>
+      <ImageGallery items={props.children}/>
      </div>
    </div>
  );
--- a/src/pages/AboutMe.js
+++ b/src/pages/AboutMe.js
@@ -12,6 +12,7 @@ import img6 from '../assets/photos/WeThePeople.jpg'
 export default function AboutMe(){
    return(
    <>
+    <div className='col'>
        <div id='aboutMe' data-aos='fade-up'>
            <h2>About Me</h2>
                <p>I'm a first year student at <strong>Rochester Institute of Technology </strong>
@@ -37,6 +38,8 @@ export default function AboutMe(){
                the gap between them.
            </p>
        </div>
+    </div>
+    <div className='col'>
        <div id='skills' data-aos='fade-up'>
            <h2>Skills</h2>
            <Skills>{['Python','JavaScript','Java','C++','SQL','SQLite','Sequelize','SQLAlchemy',
@@ -44,9 +47,31 @@ export default function AboutMe(){
                'LaTeX','Flask','DOM Scraping','Google API','React.js','Node.js']}</Skills>
        </div>
        <MyCarousel className='carousel' data-aos='fade-up'>
-                    {[[img1, "Me, chilling"],[img2, "VEX Robotics 2019"],[img3, "Academic Team county championships"], 
-                    [img4, "at RIT"], [img5, "Competing at a Hagerstown VEX competition"], [img6, "We The People State Champions"]]}
+                    {[{original: img1, 
+                        description: "Me, chilling"
+                    },
+                    {
+                        original:img2, 
+                        description: "VEX Robotics 2019"
+                    },
+                    {
+                        original:img3, 
+                        description: "Academic Team county championships"
+                    }, 
+                    {
+                        original: img4, 
+                        description:"at RIT"
+                    }, 
+                    {
+                        original: img5, 
+                        description: "Competing at a Hagerstown VEX competition"
+                    }, 
+                    {
+                        original: img6, 
+                        description: "We The People State Champions"
+                    }]}
                </MyCarousel>
+                </div>
    </>
    )
 }
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,11 +1,13 @@
 import React from 'react';
+import MyCarousel from '../componets/Carousel'

 export default function Home() {
    return (
        <>
            <div class='centerContent' data-aos="fade-up">
-                
-                
+                <h1>Andrew Simonson</h1>
+                <h3>The person who can do things good</h3>
+                <div id='Vertical' />
            </div>
        </>
    )
--- a/src/pages/Projects.js
+++ b/src/pages/Projects.js
@@ -12,21 +12,27 @@ export default function Projects(){
          </p>
        </div>
        <ProjectList>
-          <Project status='complete' title='Digital Portfolio' link='https://github.com/asimonson1125/asimonson1125.github.io' linkText={<img alt='github' src={github} />}>
+          <Project status='WIP' 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 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.
-          </Project>
-          <Project status='complete' title='NationsGame Rolls Sim' link='https://github.com/asimonson1125/NG-Rolls-Simulator' linkText={<img alt='github' src={github} />}>
-            A simulator for the browser game, NationsGame, to analyze unit composition and predict in-game victors and unit statistics.
+          <Project status='complete' title='Resume' link='https://github.com/asimonson1125/Resume' linkText={<img alt='github' src={github} />}>
+            My Resume, made in LaTeX  with a custom design inspired by the AltaCV template on OverLeaf.
          </Project>
          <Project status='complete' title='Humans vs. Zombies Bot' link='https://github.com/asimonson1125/HvZ-bot' linkText={<img alt='github' src={github} />}>
            A Discord bot to handle role management and statistics for RIT's Humans vs. Zombies games.
          </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.
+          </Project>
+          <Project status='complete' title='Acumen' link='https://github.com/asimonson1125/Acumen' linkText={<img alt='github' src={github} />}>
+            A personal Discord bot focused on statistical insight and role management for NationsGame, including NG Rolls Sim accessibility.
+          </Project>
+          <Project status='complete' title='NationsGame Rolls Sim' link='https://github.com/asimonson1125/NG-Rolls-Simulator' linkText={<img alt='github' src={github} />}>
+            A simulator for the browser game, NationsGame, to analyze unit composition and predict in-game victors and unit statistics.
+          </Project>
          <Project status='incomplete' title='WallCycle' link='https://github.com/asimonson1125/WallCycle' linkText={<img alt='github' src={github} />}>
            A GNOME extension that cycles through a folder of wallpapers.
          </Project>