From f46fb9fe0233cb3f88dee637505a894a4912f798 Mon Sep 17 00:00:00 2001 From: Cobular <22972550+Cobular@users.noreply.github.com> Date: Mon, 15 Jun 2020 21:38:18 -0700 Subject: [PATCH] Added slanty description thing, trying out clip paths instead --- about.html | 1 + contact.html | 1 + css/main.css | 4 +- css/masonry.css | 54 +++++++++++++++++++++++++- images/codeday-notext-color.svg | 1 + index.html | 29 +++++++++++++- resume.html | 23 +++++++++++ sass/colors.sass | 12 ++++++ sass/main.sass | 9 +++-- sass/masonry.sass | 69 +++++++++++++++++++++++++++++++-- 10 files changed, 189 insertions(+), 14 deletions(-) create mode 100644 images/codeday-notext-color.svg create mode 100644 resume.html create mode 100644 sass/colors.sass diff --git a/about.html b/about.html index 56a4575..6ae4dc1 100644 --- a/about.html +++ b/about.html @@ -15,6 +15,7 @@ Home Contact About + Resume GitHub diff --git a/contact.html b/contact.html index 060414a..fe98ed6 100644 --- a/contact.html +++ b/contact.html @@ -15,6 +15,7 @@ Home Contact About + Resume GitHub diff --git a/css/main.css b/css/main.css index cbf6b9f..1179829 100644 --- a/css/main.css +++ b/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; diff --git a/css/masonry.css b/css/masonry.css index 1c71715..999d511 100644 --- a/css/masonry.css +++ b/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; } diff --git a/images/codeday-notext-color.svg b/images/codeday-notext-color.svg new file mode 100644 index 0000000..5ebe89e --- /dev/null +++ b/images/codeday-notext-color.svg @@ -0,0 +1 @@ +codeday-notext-color \ No newline at end of file diff --git a/index.html b/index.html index e5e6668..16dbc30 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@ Home Contact About + Resume GitHub @@ -30,10 +31,28 @@
CodeDay SD Logo +
+

CodeDay

+
+

+ CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges attendees to create a game or an app.
+ I served as the Regional Manager for CodeDay San Diego for one year. +

+
+
+
+
-
- SRND +
+ Redish Heart, SRND Logo +
+

SRND

+
+

SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.

+
+
+
@@ -42,6 +61,12 @@
ForeSight Sports Logo0 +
+
+

SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.

+
+
+
ReplyBot
diff --git a/resume.html b/resume.html new file mode 100644 index 0000000..3b0566f --- /dev/null +++ b/resume.html @@ -0,0 +1,23 @@ + + + + + + Resume + + + + +
+ Jake Cover + +
+ Home + Contact + About + Resume + GitHub +
+
+ + \ No newline at end of file diff --git a/sass/colors.sass b/sass/colors.sass new file mode 100644 index 0000000..d56a08c --- /dev/null +++ b/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 \ No newline at end of file diff --git a/sass/main.sass b/sass/main.sass index eeabcc0..c8aaba7 100644 --- a/sass/main.sass +++ b/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 diff --git a/sass/masonry.sass b/sass/masonry.sass index 1da0b9e..4606eba 100644 --- a/sass/masonry.sass +++ b/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 - animation: FadeIn 0.22s + transition: 0.18s ease-in-out + //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