Added slanty description thing, trying out clip paths instead

about.html

@@ -15,6 +15,7 @@
         <a class="active" href="index.html">Home</a>
         <a href="contact.html">Contact</a>
         <a href="about.html">About</a>
+        <a href="resume.html">Resume</a>
         <a href="https://github.com/JakeCover">GitHub</a>
     </div>
 </header>

contact.html

@@ -15,6 +15,7 @@
         <a class="active" href="index.html">Home</a>
         <a href="contact.html">Contact</a>
         <a href="about.html">About</a>
+        <a href="resume.html">Resume</a>
         <a href="https://github.com/JakeCover">GitHub</a>
     </div>
 </header>

css/main.css

@@ -25,7 +25,7 @@
   color: black; }
 
 .header a:active {
-  background-color: dodgerblue;
+  background-color: #FF1E90;
   color: white; }
 
 .header-right {
@@ -40,7 +40,7 @@
   .header-right {
     float: none; } }
 .page {
-  background-color: rgba(240, 240, 240, 0.94);
+  background-color: #f1f1f1;
   height: fit-content;
   padding: 10px;
   margin-top: 10px;

css/masonry.css

@@ -6,7 +6,57 @@
   padding: 5px;
   box-sizing: border-box;
   height: 200px;
-  animation: FadeIn 0.22s; }
+  transition: 0.18s ease-in-out;
+  overflow: hidden;
+  position: relative; }
+
+.service-wrapper-inner {
+  height: 100%;
+  width: 90%;
+  position: absolute;
+  z-index: 1;
+  top: 68%;
+  padding: 15px 20px;
+  transition: 0.2s ease; }
+  .service-wrapper-inner p {
+    color: #e7e7e7; }
+  .service-wrapper-inner.notitle {
+    width: 60%;
+    top: 70%; }
+
+.service-overlay {
+  background-color: rgba(32, 32, 32, 0.4);
+  width: 120%;
+  height: 120%;
+  position: absolute;
+  top: 80%;
+  left: -28px;
+  z-index: 0;
+  transition: 0.2s ease; }
+  .service-overlay.notitle {
+    -webkit-transform: rotate(35deg);
+    -moz-transform: rotate(35deg);
+    -ms-transform: rotate(35deg);
+    -o-transform: rotate(35deg);
+    left: -65%;
+    height: 300%; }
+  .service-overlay.title {
+    -webkit-transform: rotate(10deg);
+    -moz-transform: rotate(10deg);
+    -ms-transform: rotate(10deg);
+    -o-transform: rotate(10deg); }
+
+.grid-item:hover .service-wrapper-inner {
+  top: -10%;
+  padding: 20px 20px; }
+  .grid-item:hover .service-wrapper-inner.notitle {
+    padding: 15px 20px; }
+.grid-item:hover .service-overlay {
+  top: -10%;
+  background-color: rgba(32, 32, 32, 0.8); }
+  .grid-item:hover .service-overlay.notitle {
+    top: -20%;
+    left: -20%; }
 
 .grid {
   margin: 0 auto;
@@ -30,7 +80,7 @@
   .grid-item--width2 {
     width: 100%; } }
 .blur-me {
-  filter: grayscale(10%) blur(0.5px) brightness(100%);
+  filter: grayscale(15%) blur(0.5px) brightness(100%);
   opacity: 0.8;
   box-shadow: none; }
 

images/codeday-notext-color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.a{fill:#ff686b;}</style></defs><title>codeday-notext-color</title><path class="a" d="M229.59,536.94l-61.88,58.19a20,20,0,0,0,0,28.93c33.47,32.24,84,76.61,84,76.61S396.18,827.2,458.58,916.82L494.2,968a20,20,0,0,0,33-.36l34.44-52C621.87,824.78,769.37,694,769.37,694s44.6-39.58,75.51-69a19.81,19.81,0,0,0,4.62-6.71,20,20,0,0,0-5-22.53L781.6,538.62a19.91,19.91,0,0,0-27.31.48L522.53,764.27a19.94,19.94,0,0,1-27.67,0L257.08,537a20,20,0,0,0-27.49-.09Z"/><path class="a" d="M266.58,26.41a281.17,281.17,0,0,0-249.39,269c-3.43,99.3,25.28,174.46,70.58,238.67a9.58,9.58,0,0,0,14.47,1.49l77.88-73.35a9.46,9.46,0,0,0,1.59-12,250.25,250.25,0,0,1-40.15-138.84A163.4,163.4,0,0,1,304.8,148.23a178.05,178.05,0,0,1,95.92,31.66c11.78,8.8,33.55,26.78,48.37,39.23a9.58,9.58,0,0,0,14.26-2.23,9.51,9.51,0,0,0,1.49-5.16V76.45A9.58,9.58,0,0,0,462.37,70C451.12,57.59,399.53,11.32,266.58,26.41Z"/><path class="a" d="M733.41,26.41a281.2,281.2,0,0,1,249.4,269c3.47,99.3-25.25,174.46-70.37,238.67a9.66,9.66,0,0,1-6.89,4.07,9.59,9.59,0,0,1-7.58-2.58l-78.1-73.35a9.58,9.58,0,0,1-1.58-12,250,250,0,0,0,40.15-138.84,163.37,163.37,0,0,0-163.2-163.15,178.05,178.05,0,0,0-95.92,31.66c-11.79,8.8-33.55,26.78-48.38,39.23a9.56,9.56,0,0,1-10.22,1.33,9.62,9.62,0,0,1-5.52-8.72V76.45A9.44,9.44,0,0,1,537.71,70C548.92,57.59,600.64,11.32,733.41,26.41Z"/><path class="a" d="M854.24,894.26a57.17,57.17,0,1,1-56.82-55.5,55.77,55.77,0,0,1,56.82,55.5Zm-99.79,0a43,43,0,0,0,43.28,44.33,42.49,42.49,0,0,0,42.31-44c0-24.71-17.95-44.68-42.62-44.68a43.1,43.1,0,0,0-43,44.33Zm35.81,28.94H777.07V867.7A117.23,117.23,0,0,1,798.81,866a35.67,35.67,0,0,1,19.63,4.09,15.59,15.59,0,0,1,4.2,5.47,15.12,15.12,0,0,1,1.35,6.72,14.07,14.07,0,0,1-3.65,8.37,14.53,14.53,0,0,1-8.09,4.47v1.09a16.8,16.8,0,0,1,7.06,5.29,16,16,0,0,1,3.27,8,40.77,40.77,0,0,0,4.11,13.68H812.61a44.9,44.9,0,0,1-4.47-13.33c-1-6-4.47-8.66-11.71-8.66h-6.17Zm0-30.78h6.12c7.08,0,12.84-2.38,12.84-8.14,0-5.06-3.74-8.44-11.83-8.44a32.81,32.81,0,0,0-7.13.66Z"/></svg>

index.html

@@ -17,6 +17,7 @@
         <a class="active" href="index.html">Home</a>
         <a href="contact.html">Contact</a>
         <a href="about.html">About</a>
+        <a href="resume.html">Resume</a>
         <a href="https://github.com/JakeCover">GitHub</a>
     </div>
 </header>
@@ -30,10 +31,28 @@
         <!--CodeDay-->
         <div class="grid-item grid-item--image">
             <img class="grid-img" src="images/codedaysd.png" alt="CodeDay SD Logo" width="230" height="230">
+            <div class="service-wrapper-inner title">
+                <h2>CodeDay</h2>
+                <div class="description">
+                    <p>
+                        CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges attendees to create a game or an app.<br>
+                        I served as the Regional Manager for CodeDay San Diego for one year.
+                    </p>
+                </div>
+            </div>
+            <div class="service-overlay title"></div>
+
         </div>
         <!--SRND-->
-        <div class="grid-item">
+        <div class="grid-item grid-item--image">
-            SRND
+            <img src="images/codeday-notext-color.svg" alt="Redish Heart, SRND Logo" width="230" height="230">
+            <div class="service-wrapper-inner title">
+                <h2>SRND</h2>
+                <div class="description">
+                    <p>SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.</p>
+                </div>
+            </div>
+            <div class="service-overlay title"></div>
         </div>
         <!--ScoreSaver Installer-->
         <div class="grid-item">
@@ -42,6 +61,12 @@
         <!--Foresight-->
         <div class="grid-item grid-item--image">
             <img src="images/foresightsports.png" alt="ForeSight Sports Logo0" width="480">
+            <div class="service-wrapper-inner notitle">
+                <div class="description">
+                    <p>SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.</p>
+                </div>
+            </div>
+            <div class="service-overlay notitle"></div>
         </div>
         <!--ReplyBot-->
         <div class="grid-item grid-item--tall3">ReplyBot</div>

resume.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <title>Resume</title>
+    <link rel="stylesheet" href="css/main.css">
+
+</head>
+<body>
+<header class="header">
+    <a href="index.html" class="name">Jake Cover</a>
+
+    <div class="header-right">
+        <a class="active" href="index.html">Home</a>
+        <a href="contact.html">Contact</a>
+        <a href="about.html">About</a>
+        <a href="resume.html">Resume</a>
+        <a href="https://github.com/JakeCover">GitHub</a>
+    </div>
+</header>
+</body>
+</html>

sass/colors.sass

@@ -0,0 +1,12 @@
+$colorblind-bg: #fff
+$colorblind-fg: #f1f1f1
+$colorblind-item: #eaeaea
+$colorblind-button-hover: #dddddd
+$colorblind-button-active: #FF1E90
+
+$light-bg: #fff
+$light-fg: rgb(195, 232, 215)
+$light-header: #bebebe
+$light-item: #a9a9a9
+$light-button-hover: #dddddd
+$light-button-active: #FF1E90

sass/main.sass

@@ -1,9 +1,10 @@
 @import "breakpoint-helpers"
+@import "colors"
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap')
 
 .header
   overflow: hidden
-  background-color: #f1f1f1
+  background-color: $colorblind-fg
   padding: 15px 10px
   font-family: "Fira Code", monospace
   border-radius: 3px
@@ -23,11 +24,11 @@
   font-weight: 600
 
 .header a:hover
-  background-color: #dddddd
+  background-color: $colorblind-button-hover
   color: black
 
 .header a:active
-  background-color: dodgerblue
+  background-color: $colorblind-button-active
   color: white
 
 .header-right
@@ -44,7 +45,7 @@
 
 
 .page
-  background-color: rgba(240, 240, 240, 0.94)
+  background-color: $colorblind-fg
   height: fit-content
   padding: 10px
   margin-top: 10px

sass/masonry.sass

@@ -1,7 +1,8 @@
 @import "breakpoint-helpers"
+@import "colors"
 
 .grid-item
-  background-color: #eaeaea
+  background-color: $colorblind-item
   border-radius: 3px
   width: 240px
   margin-bottom: 10px
@@ -9,8 +10,68 @@
   box-sizing: border-box
   height: 200px
   //box-shadow: 0 2px 3px 0px rgba(0,0,0,0.25)
-  //transition: 0.22s ease-in-out
+  transition: 0.18s ease-in-out
-  animation: FadeIn 0.22s
+  //animation: FadeIn 0.22s
+  overflow: hidden
+  position: relative
+
+
+.service-wrapper-inner
+  height: 100%
+  width: 90%
+  position: absolute
+  z-index: 1
+  top: 68%
+  padding: 15px 20px
+  transition: 0.2s ease
+  p
+    color: #e7e7e7
+
+  &.notitle
+    width: 60%
+    top: 70%
+
+.service-overlay
+  background-color: rgba(32,32,32,0.4)
+  width: 120%
+  height: 120%
+  position: absolute
+  top: 80%
+  left: -28px
+  z-index: 0
+  transition: 0.2s ease
+
+  &.notitle
+    -webkit-transform: rotate(35deg)
+    -moz-transform: rotate(35deg)
+    -ms-transform: rotate(35deg)
+    -o-transform: rotate(35deg)
+    left: -65%
+    height: 300%
+
+  &.title
+    -webkit-transform: rotate(10deg)
+    -moz-transform: rotate(10deg)
+    -ms-transform: rotate(10deg)
+    -o-transform: rotate(10deg)
+
+
+
+.grid-item:hover
+  .service-wrapper-inner
+    top: -10%
+    padding: 20px 20px
+
+    &.notitle
+      padding: 15px 20px
+
+  .service-overlay
+    top: -10%
+    background-color: rgba(32,32,32,0.8)
+
+    &.notitle
+      top: -20%
+      left: -20%
 
 
 .grid
@@ -38,7 +99,7 @@
 
 
 .blur-me
-  filter: grayscale(10%) blur(0.5px) brightness(100%)
+  filter: grayscale(15%) blur(0.5px) brightness(100%)
   opacity: .8
   //transform: scale(.995)
   box-shadow: none