diff --git a/src/assets/css/App.css b/src/assets/css/App.css index 2062da0..3a1199d 100644 --- a/src/assets/css/App.css +++ b/src/assets/css/App.css @@ -225,12 +225,33 @@ a { justify-content: space-around; } +.vFlex { + display: flex; + flex-direction: column; + height: 100%; +} + +.spaceBetween { + justify-content: space-between; +} + .onRight { position: absolute; right: 0; top: 0; } +.bgi { + background-size: contain; + background-repeat: no-repeat; + background-position-y: center; + opacity: 0.4; + height: 100%; + width: 100%; + position: absolute; + z-index: 0; +} + #Vertical { margin-left: auto; margin-right: auto; @@ -406,8 +427,23 @@ a { background-color: rgba(22, 22, 22, .8); } -.project .topBox, .project .bottomBox { - padding-left: 1rem; +.projTitle > * { + margin-bottom: 0; +} + +.projBody { + position: relative; + z-index: 3; +} + +.project .topBox, .project .bottomBox, .project .projTitle { + padding: 0 1rem; + z-index: inherit; +} + +.backedBody { + background-color: #1a1a1a; + padding: .25em; } .tab { @@ -425,18 +461,6 @@ a { height: 3rem; } -.topBox { - padding-left: .5rem; - padding-right: 1rem; - height: 75%; -} - -.bottomBox { - height: auto; - padding-left: 0rem; - padding-right: 1rem; -} - .bottomBox a, .placeholding { vertical-align: middle; display: inline; diff --git a/src/assets/photos/ceoOfYugo.png b/src/assets/photos/ceoOfYugo.png new file mode 100644 index 0000000..0c13e30 Binary files /dev/null and b/src/assets/photos/ceoOfYugo.png differ diff --git a/src/assets/photos/chessbed.png b/src/assets/photos/chessbed.png new file mode 100644 index 0000000..0400d6d Binary files /dev/null and b/src/assets/photos/chessbed.png differ diff --git a/src/assets/photos/geovisF.png b/src/assets/photos/geovisF.png new file mode 100644 index 0000000..172189e Binary files /dev/null and b/src/assets/photos/geovisF.png differ diff --git a/src/assets/photos/occupyRIT.png b/src/assets/photos/occupyRIT.png new file mode 100644 index 0000000..a919a21 Binary files /dev/null and b/src/assets/photos/occupyRIT.png differ diff --git a/src/assets/photos/resume.png b/src/assets/photos/resume.png new file mode 100644 index 0000000..f810c68 Binary files /dev/null and b/src/assets/photos/resume.png differ diff --git a/src/assets/photos/slate.png b/src/assets/photos/slate.png new file mode 100644 index 0000000..2588b8f Binary files /dev/null and b/src/assets/photos/slate.png differ diff --git a/src/assets/photos/vexcodeButtons.jpeg b/src/assets/photos/vexcodeButtons.jpeg new file mode 100644 index 0000000..ad7a861 Binary files /dev/null and b/src/assets/photos/vexcodeButtons.jpeg differ diff --git a/src/assets/photos/website.png b/src/assets/photos/website.png new file mode 100644 index 0000000..2736411 Binary files /dev/null and b/src/assets/photos/website.png differ diff --git a/src/componets/Project.js b/src/componets/Project.js index 72db7b1..4bc58b5 100644 --- a/src/componets/Project.js +++ b/src/componets/Project.js @@ -1,32 +1,44 @@ -import React from 'react' -import placeholder from '../assets/photos/placeholder.png' +import React from "react"; +import placeholder from "../assets/photos/placeholder.png"; export default class Project extends React.Component { - render() { - let links = <>; - if (this.props.links != null) { - this.props.links.forEach(x => { - links = ( - <> - {links} - {x[1]} - - ) - }) - } else{ - links =
no links!
- } - return ( -
-
-

{this.props.title}

-

-

{this.props.children}

-
-
- {links} -
-
- ) + render() { + let style = { + backgroundImage: "url(" + this.props.bgi + ")", + }; + let links = <>; + if (this.props.links != null) { + this.props.links.forEach((x) => { + links = ( + <> + {links} + {x[1]} + + ); + }); + } else { + links = ( +
+ no links! +
+ ); } + return ( +
+
+
+

{this.props.title}

+

+
+
+
+
+

{this.props.children}

+
+
{links}
+
+
+
+ ); + } } diff --git a/src/pages/Projects.js b/src/pages/Projects.js index 9f8f210..751c159 100644 --- a/src/pages/Projects.js +++ b/src/pages/Projects.js @@ -3,6 +3,15 @@ import Project from '../componets/Project' import github from '../assets/icons/github.svg' import globe from '../assets/icons/globe.svg' +import geovisF from '../assets/photos/geovisF.png' +import chessbed from '../assets/photos/chessbed.png' +import occupyrit from '../assets/photos/occupyRIT.png' +import slate from '../assets/photos/slate.png' +import website from '../assets/photos/website.png' +import resume from '../assets/photos/resume.png' +import yugoslavia from '../assets/photos/ceoOfYugo.png' +import vexbutt from '../assets/photos/vexcodeButtons.jpeg' + export default function Projects() { return (
@@ -14,10 +23,13 @@ export default function Projects() {

Pinned:

- ], ["https://slate.csh.rit.edu/", site]]} > + ], ["https://slate.csh.rit.edu/", site]]} > Slate is a web app designed to help event coordinators schedule events by congregating participant calendar data. Includes Computer Science House account integration. - ]]}> + ]]}> + ArcGIS Map of the most effective alternative energy sources in the continental United States + + ]]}> Collects RIT Gym Occupancy data for analysis, determining busiest times. ]]} > @@ -26,22 +38,22 @@ export default function Projects() {

All:

- - An ongoing project with the Computer Science House using bluetooth tracking to monitor the ImagineRIT event + ]]}> + ArcGIS Map of the most effective alternative energy sources in the continental United States - ]]}> + ]]}> Collects RIT Gym Occupancy data for analysis, determining busiest times. - ]]} > + ]]} > A template for creating Chess.com user profile embeds - ]]} > + ], ["https://asimonson.com/Resume.pdf/", site]]} > My Resume, made in LaTeX with a custom design derived by the AltaCV template on OverLeaf. - ]]} > - A personal portfolio site made with React.js. Might overhaul. + ], ["https://asimonson.com/", site]]} > + A personal portfolio site made with React.js. - ], ["https://slate.csh.rit.edu/", site]]} > + ], ["https://slate.csh.rit.edu/", site]]} > Slate is a web app designed to help event coordinators schedule events by congregating participant calendar data. Includes Computer Science House account integration. ]]} > @@ -60,14 +72,14 @@ export default function Projects() { ]]} > A personal Discord bot focused on statistical insight and role management for NationsGame, including NG Rolls Sim accessibility. - ]]} > + ]]} > A simulator for the browser game, NationsGame, to analyze unit composition and predict in-game victors and unit statistics.
Unfortunately, NationsGame is now defunct. Limited screenshots of functionality.
]]} > A GNOME extension that cycles through a folder of wallpapers. - ]]} > + ]]} > VEXcode button library + examples and template for the VEX V5 brain ]]}>