Flesh out other pages

still need to fix background preload, convert other projects to the new project styling
maxmin-es · Mar 20, 2020 · d0ffbaf · d0ffbaf
1 parent e0880e6
commit d0ffbaf
Show file tree

Hide file tree

Showing 19 changed files with 405 additions and 166 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/maxmines.css b/css/maxmines.css
@@ -1,5 +1,14 @@
+/* Styling for Max Mines website */
 
+html {
+	overflow: hidden;
+	width: 100vw;
+	height: 100vh;
+	min-height: 100vh;
+	background-color: black;
+}
 
+/* Grid container that holds everything on the page  */
 .container {
 	display: grid;
 	grid-template-columns: .2vw .2fr 1fr 1fr 1fr .2fr .2vw;
@@ -8,11 +17,12 @@
 	width: 100vw;
 	height: 100vh;
 	background-repeat: no-repeat;
-	background: url(../img/woodsphoto2.jpg) no-repeat center center fixed; 
+	background: url(../img/aw_bg2.jpg) no-repeat center center fixed; 
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
+	opacity: 100%;
 
 	-webkit-transition: background .2s linear;
 	-moz-transition: background .2s linear;
@@ -21,7 +31,7 @@
 	transition: background .2s linear;
   }
 
-
+/* Bottom nav bar with resume projects and music */
 .navbar {
 	grid-column: 1/7;
 	grid-row: 3;
@@ -33,6 +43,7 @@
 	font-family: 'Amiri', serif;
 }
 
+/* individual bottom nav bar divs for navigating to other pages */
 .nav_r {
 	display: flex;
 	grid-column: 4;
@@ -43,6 +54,7 @@
 	align-items: flex-start;
 }
 
+/* individual bottom nav bar divs for navigating to other pages */
 .nav_l {
 	display: flex;
 	grid-column: 2;
@@ -52,6 +64,7 @@
 	align-items: flex-start;
 }
 
+/* individual bottom nav bar divs for navigating to other pages */
 .nav_c {
 	display: flex;
 	grid-column: 3;
@@ -63,30 +76,21 @@
 	text-align: right;
 }
 
-
-html {
-	overflow: hidden;
-	width: 100vw;
-	height: 100vh;
-	min-height: 100vh;
-}
-
-.project {
-	display: flex;
-	grid-row-start: 2;
-	grid-row-end: 2;
-}
-
+/* first item on the 3 grid pages such as Max Mines on home page */
 .item-a {
 	display: flex;
 	margin-block-start: 30px;
-	/* align-items: center; */
 	justify-content: flex-end;
 	overflow-wrap: break-word;
 	grid-column-start: 3;
 	grid-column-end: 3;
 	grid-row-start: 2;
 	grid-row-end: 2;
+
+}
+
+/* styling for max mines on home page */
+.maxmines {
 	font-family: 'Josefin Sans', sans-serif;
 	font-size: 7vw;
 	color: white;
@@ -95,18 +99,14 @@ html {
 	min-width: 4vw;
 }
 
+/* second item on the 3 grid pages such as Max Mines on home page */
 .item-b {
 	display: block;
-	align-items: center;
-	text-align: center;
 	grid-column-start: 4;
 	grid-column-end: 4;
 	grid-row-start: 2;
 	grid-row-end: 2;
-	min-width: 180px;
-	margin-left: auto;
-	margin-right: auto;
-	opacity: 80%;
+
 
 	-webkit-transition: opacity .1s linear;
 	-moz-transition: opacity .1s linear;
@@ -115,58 +115,51 @@ html {
 	transition: opacity .1s linear;
 }
 
+/* styling for cartoon portrait on home page */
+.logodiv {
+	min-width: 180px;
+	margin-left: auto;
+	margin-right: auto;
+	opacity: 80%;
+	align-items: center;
+	text-align: center;
+}
+
+.head-image {
+	width: 70%;
+	height: auto;
+	max-width: 20em;
+	filter: brightness(10000%);
+}
+
+/* third item on the 3 grid pages such as Max Mines on home page */
 .item-c {
-	margin-block-start: 10px;
 	display: flex;
-	/* align-items: center; */
-	/* justify-content: center;  */
-	padding-inline-end: 10%;
+
 	grid-column-start: 5;
 	grid-column-end: 5;
 	grid-row-start: 2;
 	grid-row-end: 2;
-	font-family: 'Amiri', serif;
-	font-size: 14px;
-	color: white;
-	max-width: 500px;
-	max-height: 28vh;
-	overflow-y: scroll;
-	line-height: 14px;
 
-	opacity: 100%;
 
+	opacity: 100%;
 	-webkit-transition: opacity .1s linear;
 	-moz-transition: opacity .1s linear;
 	-o-transition: opacity .1s linear;
 	-ms-transition: opacity .1s linear;
 	transition: opacity .1s linear;
 }
 
-.project-img {
-	height: 100%;
-	width: 100%;
-	object-fit: contain;
-	filter: grayscale(20%);
-	border-radius: 20px;
-}
-
-.head-image {
-	width: 70%;
-	height: auto;
-	max-width: 20em;
-	filter: brightness(10000%);
-}
-
-
-
-.homelogo {
-	display: flex;
-	grid-column-start: 4;
-	grid-column-end: 4;
-	grid-row-start: 4;
-	grid-row-end: 4;
-	align-items: center;
-	justify-content: center; 
+/* styling for regular writing and paragraph text */
+.classic-text {
+	line-height: 14px;
+	font-family: 'Amiri', serif;
+	font-size: 14px;
+	color: white;
+	padding-inline-end: 10%;
+	max-width: 500px;
+	max-height: 28vh;
+	margin-block-start: 30px;
 }
 
 p {
@@ -186,6 +179,59 @@ a {
 	color: wheat;
 }
 
+
+/* styling for the max mines at top left */
+.topbar {
+	display: block;
+	justify-content: flex-start;
+	padding-block-start: 60px;
+	overflow-wrap: break-word;
+	grid-column: 3/3;
+	grid-row:1;
+	font-family: 'Josefin Sans', sans-serif;
+	font-size: 1.7vw;
+	color: white;
+	opacity: 60%;
+	line-height: 80%;
+	min-width: 3vw;
+}
+
+.topbar a {
+	text-decoration: none;
+}
+
+/* styling for linkedin and github icons */
+.icons {
+	display: block;
+	padding-block-start: 60px;
+	grid-row:1;
+	font-size: 1.5vw;
+	color: white;
+	opacity: 100%;
+	justify-content: flex-end; 
+	grid-column: 5/5; 
+	text-align: end; 
+	padding-inline-end: 5%;
+}
+
+.icons a {
+	color: white;
+	opacity: 60%;
+}
+
+.icons-home {
+	grid-row:4;
+	grid-column: 4;
+	justify-content: flex-start; 
+	text-align: center; 
+	opacity: 100%;
+
+}
+
+.icons-home a {
+	color: #040505;
+}
+
 .fade-in {
 	animation: fadeIn ease 2s;
 	-webkit-animation: fadeIn ease 2s;

diff --git a/css/projectpage.css b/css/projectpage.css
@@ -0,0 +1,91 @@
+/* Styling for the individual pages for specific projects */
+
+
+.project-container {
+	display: grid;
+	grid-template-columns: .2vw .2fr .4fr 1fr 1fr 1fr .2fr .2vw;
+	grid-template-rows: .2fr .6fr 1fr .4fr .4fr;
+	grid-column-gap: 10px;
+	width: 100vw;
+	height: 100vh;
+	background-repeat: no-repeat;
+	background: url(../img/aw_bg2.jpg) no-repeat center center fixed; 
+	-webkit-background-size: cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+	opacity: 100%;
+
+	-webkit-transition: background .2s linear;
+	-moz-transition: background .2s linear;
+	-o-transition: background .2s linear;
+	-ms-transition: background .2s linear;
+	transition: background .2s linear;
+  }
+
+
+.projectbody {
+	display: flex;
+	grid-column: 5;
+	grid-row: 3;
+	text-overflow: ellipsis;
+	width: 100%;
+}
+
+.nav-text {
+	line-height: 60px;
+	font-family: 'Amiri', serif;
+	font-size: 20px;
+	color: white;
+}
+
+.vnav {
+	grid-column: 3; 
+	grid-row: 2/4;
+	padding-block-start: 0;
+}
+
+.project-title {
+	padding-block-start: 60px;
+	padding-inline-end: 20%;
+	align-items: flex-start;
+	display: flex;
+	grid-row: 1;
+	grid-column: 4/6;
+	text-align: left;
+
+	font-family: 'Josefin Sans', sans-serif;
+	font-size: 3vw;
+	color: white;
+	opacity: 90%;
+	line-height: 100%;
+	min-width: 4vw;
+}
+
+.project-body {
+	overflow: hidden;
+	padding-inline-end: 10%;
+	margin-block-start: 24px;
+    grid-row: 2/6;
+	grid-column: 4/7;
+	overflow-y: scroll;
+
+	line-height: 24px;
+	font-family: 'Amiri', serif;
+	font-size: 16px;
+	color: white;
+	width: 100%;
+	max-width: 800px;
+}
+
+.subtitle {
+	line-height: 60px;
+	font-size: 24px;
+	text-emphasis: bold;
+	font-family: 'Josefin Sans', sans-serif;
+}
+
+.project-body > \* {  
+	grid-row: 2/5;
+	grid-column: 3/5;
+}