Relaunch with React and Github Pages

#react #github #html #css

My Portfolio Site - Pt 5

This week I relaunched my portfolio site as a React app on Github Pages. I won't get into the details of the process because the documentation from the React team was far better than any blogging I found on the subject. Truly nothing beats the actual documentation from any framework or library IMO.

As much as I wanted to keep it framework free, relaunching with React will surely help me in the future. I was able to keep this CSS library free- just for fun and developing my skills. For this version I've only left my tech stack and portfolio projects in terms of content but made it a little moodier with some recently acquired CSS skills.

Take a look at some code!

One of the biggest updates to this version is some media responsiveness. The images are still my own and manipulated with Gimp and Compress PNG

	/*////////////////////////////////////////////////////////////////////
	////////// Royal Ontario Museum image layers /////////////////////////
	////////////////////////////////////////////////////////////////////*/
	.background-rom-and-moon {
	background-image: url(../../Assets/Images/rom-and-moon.png);
	position: fixed; z-index: -1000;}
	.background-rom-cutout {
	background-image: url(../../Assets/Images/rom-cutout-downside.png);
	position: fixed; z-index: -100;}
	.background-upsidedown-rom-cutout {
	background-image: url(../../Assets/Images/rom-cutout-upside.png);
	opacity:.75; position: absolute; z-index: -500;}
	.background-rom-and-moon,
	.background-rom-cutout,
	.background-upsidedown-rom-cutout {
	height: 100%; width: 100%; top: 0px; left: 0px;
	background-attachment: absolute;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;}
	@media only screen and (orientation: portrait) {
	// I used orentation to reposition the height of
	// the museum layers based on the screen size and
	// allow space for information behind the museum
	// to be seen without too much obstruction.
	.background-rom-and-moon {background-position: center;};
	.background-rom-cutout {background-position: center;};}
	@media only screen and (orientation: landscape) {
	.background-rom-and-moon {background-position-y: 33%};
	.background-rom-cutout {background-position-y: 33%};
	.background-upsidedown-rom-cutout {height: 170%; top: -10%};}
	/*////////////////////////////////////////////////////////////////////
	////////// gradient layers ///////////////////////////////////////////
	////////////////////////////////////////////////////////////////////*/
	.top-gradiated-background-layer {
	background-image: linear-gradient(
	to top, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,.25));
	position: fixed; z-index: -600;
	height: 100%; width: 100%;}
	.middle-gradiated-background-layer {
	background-image: linear-gradient(
	to bottom, rgba(0,0,0,0), rgba(0,0,0,.9), rgba(0,0,0,0));
	position: fixed; z-index: -200;
	height: 100%; width: 100%;}
	.bottom-gradiated-background-layer {
	background-image: linear-gradient(
	to bottom, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,.75));
	position: fixed; z-index: 100;
	height: 100%; width: 100%;}
	@media only screen and (orientation: portrait) {
	// I used orentation to align the gradient layers
	// along with the museum repositioning */
	.middle-gradiated-background-layer {background-position: center;};}
	@media only screen and (orientation: landscape) {
	.middle-gradiated-background-layer {
	background-image: linear-gradient(
	to bottom, rgba(0,0,0,0.5), 33%, rgba(0,0,0,.75), 66%, rgba(0,0,0,1));};}

view raw portfolio-website_src_Components_Background.scss hosted with ❤ by GitHub

One of my favorite tricks learned was the auto-grid class for the portfolio cards which I built myself. I used SVG icons as often as possible with a handful of Font Awesome as I anticipate using it in the future.


	.auto-grid {
	--auto-grid-min-size: 25rem;
	display: grid;
	grid-template-columns:
	repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
	grid-gap: 5vw;
	margin: auto;
	padding: 5vw;
	width: 90vw;
	}

	.card {
	background-image: linear-gradient(
	to bottom, rgba(0,0,0,.5),
	rgba(0,0,0,.75),
	rgba(0,0,0,.5));
	border-radius: 5px;
	min-width: 400px;
	position: relative; min-height: 200px;
	z-index: 100;
	h1{
	font-size: 7.5vh;
	line-height: 1vw;
	padding-left: 1vw;
	text-align: left; }
	h2{
	font-size: 2.5vh;
	line-height: 1rem;
	padding-right: 1vw;
	text-align: right; }
	h2:nth-child(2) {
	margin-top: -5%;}
	h3:nth-child(6) {
	text-align: center;}
	p {
	max-height: 15vh; overflow: scroll;
	text-align: left;
	padding-left: 1vw;
	padding-right: 1vw;
	font-size: 2vh;}
	.break {
	border-bottom: 2.5px solid white;
	margin: auto;
	opacity: .75;
	width: 95%;}
	.fontawesome {
	color: white;
	font-size: 2rem;
	margin-bottom: -.5rem;}
	.devicon {
	fill: white;
	filter: drop-shadow(-5px 15px 5px black);
	margin-bottom: -.5rem;
	margin-left: .25rem;
	margin-right: .25rem;
	max-width: 2rem;}
	}