diff --git a/css/grid.css b/css/grid.css new file mode 100644 index 0000000..8c2e71b --- /dev/null +++ b/css/grid.css @@ -0,0 +1,48 @@ +.top_buffer { + margin-bottom: 10px; } + +.wide { + width: auto; + border-radius: 5px; + background-color: #eaeaea; + position: relative; + background-clip: content-box; } + .wide .image { + border-color: #FF1E90; } + +.tall { + width: auto; + border-radius: 5px; + background-color: #eaeaea; + background-clip: content-box; } + .tall .image { + border-color: #FF1E90; } + .tall .description { + text-align: center; } + +@media (min-width: 992px) { + .wide .image { + width: 75%; + float: left; + border-style: none solid none none; } + .wide .description { + margin-left: 76%; + text-align: left; } + + .tall .image { + border-style: none none solid; } + .tall .description { + text-align: center; } } +@media (max-width: 991px) { + .wide .image { + border-style: none none solid; } + .wide .image img { + width: 100%; + height: auto; } + + .tall .image { + border-style: none none solid; } + .tall .description { + text-align: center; } } + +/*# sourceMappingURL=grid.css.map */ diff --git a/css/main.css b/css/main.css index 87dc346..617f985 100644 --- a/css/main.css +++ b/css/main.css @@ -1,44 +1,29 @@ @import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap"); -.header { +.navbar { overflow: hidden; background-color: #f1f1f1; padding: 15px 10px; font-family: "Fira Code", monospace; border-radius: 3px; } -.header a { +.navbar a { float: left; color: black; text-align: center; padding: 7px 12px; text-decoration: none; - font-size: 18px; + font-size: 22px; line-height: 25px; border-radius: 4px; } -.header a.name { +.navbar a.name { font-size: 25px; font-weight: 600; } -.header a:hover { +.navbar a:hover { background-color: #dddddd; color: black; } -.header a:active { - background-color: #FF1E90; - color: white; } - -.header-right { - float: right; } - -@media (max-width: 575px) { - .header a { - float: none; - display: block; - text-align: left; } - - .header-right { - float: none; } } .page { background-color: #f1f1f1; height: fit-content; diff --git a/css/masonry.css b/css/masonry.css deleted file mode 100644 index 02f75b8..0000000 --- a/css/masonry.css +++ /dev/null @@ -1,106 +0,0 @@ -/* Rules for the grid icons and stuff */ -.grid { - transition: 0.2s all; - position: relative; } - -.grid-item-padding { - padding: 5px; - box-sizing: border-box; - height: fit-content; } - -.grid-item { - background-color: #eaeaea; - border-radius: 3px; - padding: 5px; - width: 100%; - box-sizing: border-box; - transition: 0.25s ease-in-out; - overflow: hidden; - position: relative; } - .grid-item img { - width: inherit; } - .grid-item img::after { - content: ""; - display: block; - padding-bottom: 100%; } - -@media (min-width: 992px) { - .grid-sizer, .grid-item--std { - width: 25%; } - - .grid-item--wide { - width: 50%; } } -@media (min-width: 768px) and (max-width: 991px) { - .grid-item--std, .grid-sizer { - width: 50%; } - - .grid-item--wide { - width: 100%; } } -@media (max-width: 767px) { - .grid-item--std, .grid-sizer { - width: 100%; } - - .grid-item--wide { - width: 100%; } } -/* Rules for the overlay */ -.service-wrapper-inner { - height: 100%; - width: 90%; - position: absolute; - z-index: 1; - top: 71%; - padding: 10px 15px; - transition: 0.2s ease; } - .service-wrapper-inner p { - color: #e7e7e7; } - .service-wrapper-inner.notitle { - width: 60%; - top: 76%; } - -.service-overlay { - background-color: rgba(32, 32, 32, 0.4); - width: 120%; - height: 120%; - position: absolute; - top: 68%; - left: -28px; - z-index: 0; - transition: 0.2s ease; } - .service-overlay.notitle { - clip-path: polygon(0 0, 100% 90%, 100% 100%, 0 100%); - height: 200%; } - .service-overlay.title { - clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); } - -.grid-item:hover .service-wrapper-inner { - top: -10%; - padding: 15px 15px; } - .grid-item:hover .service-wrapper-inner.notitle { - padding: 10px 15px; } -.grid-item:hover .service-overlay { - background-color: rgba(32, 32, 32, 0.8); } - .grid-item:hover .service-overlay.title { - top: -10%; - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } - .grid-item:hover .service-overlay.notitle { - top: -20%; - clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%); - left: -20%; } - -img { - transition: 0.25s; } - -.blur-me img { - filter: grayscale(0%) blur(0px) brightness(100%); - opacity: 1; - box-shadow: none; } - -.unblur-me img { - filter: grayscale(0%) blur(0px) brightness(100%); - opacity: 1; - box-shadow: none; } - -.grid:hover .grid-item:hover { - opacity: 1; } - -/*# sourceMappingURL=masonry.css.map */ diff --git a/images/distest.svg b/images/distest.svg index 8d9e9a3..8d31a93 100644 --- a/images/distest.svg +++ b/images/distest.svg @@ -1 +1,64 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/foresightsports.png b/images/foresightsports.png index 85914af..20b6696 100644 Binary files a/images/foresightsports.png and b/images/foresightsports.png differ diff --git a/images/personal_site_plan.png b/images/personal_site_plan.png new file mode 100644 index 0000000..3d5ae8d Binary files /dev/null and b/images/personal_site_plan.png differ diff --git a/index.html b/index.html index 0d758ec..bf79453 100644 --- a/index.html +++ b/index.html @@ -6,103 +6,93 @@ Jake Cover + - + + -
- Jake Cover +
+ Jake Cover + -
- Home - Contact - About - Resume - GitHub + + +
+
-
-
- -
-
- 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. -

-
+
+
+
+
+ CodeDay SD Logo +
+
+

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.

-
-
-
- -
-
- 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.

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

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

-
-
- -
-
- CodeDay SD Logo -
-

Distest

-
-

- One of my favorite Python projects, a tool to write automated integration tests for discord - bots. -

-
+
+
+ Distest Logo +
+
+

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

-
-
- -
-
- Red to Blue Gradient w/ White Download Icon -
-

ScoreSaver

-
-

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

-
+
+
+ Red to Blue Gradient w/ White Download Icon +
+
+

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

-
-
- -
-
- 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.

-
+
+
+ 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
+
+ One of three columns +
@@ -113,9 +103,10 @@
Jake Cover

- Made by Jake Cover, a CS student who really needs to find something witty and interesting to put here soon. + Made by Jake Cover, a CS student who really needs to find something witty and interesting to put here + soon.
- Checklist by Arthur Shlain from the Noun Project + Checklist Icon by Arthur Shlain from the Noun Project

@@ -136,7 +127,14 @@ + + + + \ No newline at end of file diff --git a/sass/grid.sass b/sass/grid.sass new file mode 100644 index 0000000..31b76c6 --- /dev/null +++ b/sass/grid.sass @@ -0,0 +1,77 @@ +@import "colors" +@import "breakpoint-helpers" + + +.row + +.top_buffer + margin-bottom: 10px + + +.wide + width: auto + border-radius: 5px + background-color: $colorblind-item + position: relative + background-clip: content-box + + .image + border-color: $colorblind-button-active + + +.tall + width: auto + border-radius: 5px + background-color: $colorblind-item + background-clip: content-box + + + .image + border-color: $colorblind-button-active + + .description + text-align: center + + + +@include respond-above(md) + .wide + + .image + width: 75% + float: left + border-style: none solid none none + + + .description + margin-left: 76% + text-align: left + + .tall + + .image + border-style: none none solid + + .description + text-align: center + + +@include respond-below(md) + .wide + + .image + border-style: none none solid + + img + width: 100% + height: auto + + .tall + + .image + border-style: none none solid + + .description + text-align: center + + diff --git a/sass/main.sass b/sass/main.sass index 1865f2e..7da2679 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -2,48 +2,31 @@ @import "colors" @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap') -.header +.navbar overflow: hidden background-color: $colorblind-fg padding: 15px 10px font-family: "Fira Code", monospace border-radius: 3px -.header a +.navbar a float: left color: black text-align: center padding: 7px 12px text-decoration: none - font-size: 18px + font-size: 22px line-height: 25px border-radius: 4px -.header a.name +.navbar a.name font-size: 25px font-weight: 600 -.header a:hover +.navbar a:hover background-color: $colorblind-button-hover color: black -.header a:active - background-color: $colorblind-button-active - color: white - -.header-right - float: right - -@include respond-below(xs) - .header a - float: none - display: block - text-align: left - - .header-right - float: none - - .page background-color: $colorblind-fg height: fit-content diff --git a/sass/masonry.sass b/sass/masonry.sass deleted file mode 100644 index 9111f9f..0000000 --- a/sass/masonry.sass +++ /dev/null @@ -1,150 +0,0 @@ -@import "breakpoint-helpers" -@import "colors" - -/* Rules for the grid icons and stuff -.grid - transition: .2s all - position: relative - -.grid-item-padding - padding: 5px - box-sizing: border-box - height: fit-content - -.grid-item - background-color: $colorblind-item - border-radius: 3px - padding: 5px - width: 100% - box-sizing: border-box - transition: 0.25s ease-in-out - overflow: hidden - position: relative - - img - width: inherit - - img::after - content: "" - display: block - padding-bottom: 100% - - -@include respond-above(md) - .grid-sizer, .grid-item--std - width: 25% - .grid-item--wide - width: 50% -@include respond-between(sm, md) - .grid-item--std, .grid-sizer - width: 50% - .grid-item--wide - width: 100% -@include respond-below(sm) - .grid-item--std, .grid-sizer - width: 100% - .grid-item--wide - width: 100% - - -/* Rules for the overlay -.service-wrapper-inner - height: 100% - width: 90% - position: absolute - z-index: 1 - top: 71% - padding: 10px 15px - transition: 0.2s ease - - p - color: #e7e7e7 - - &.notitle - width: 60% - top: 76% - -.service-overlay - background-color: rgba(32, 32, 32, 0.4) - width: 120% - height: 120% - position: absolute - top: 68% - left: -28px - z-index: 0 - transition: 0.2s ease - - &.notitle - clip-path: polygon(0 0, 100% 90%, 100% 100%, 0 100%) - height: 200% - - &.title - clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%) - - -.grid-item:hover - .service-wrapper-inner - top: -10% - padding: 15px 15px - - &.notitle - padding: 10px 15px - - .service-overlay - background-color: rgba(32, 32, 32, 0.8) - - &.title - top: -10% - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) - - &.notitle - top: -20% - clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%) - left: -20% - -img - transition: 0.25s - -.blur-me - img - filter: grayscale(0%) blur(0px) brightness(100%) - opacity: 1 - //transform: scale(.995) - box-shadow: none - - -.unblur-me - img - filter: grayscale(0%) blur(0px) brightness(100%) - opacity: 1 - //transform: scale(.995) - box-shadow: none - -.grid:hover .grid-item:hover - //transform: scale(1.005) - opacity: 1 -//box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125) -//filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3)) - - -//.grid-img -// display: inline-block -// position: relative -// width: 230px -// height: 230px -// -//.grid-img:after -// content: "" -// position: absolute -// z-index: -1 -// top: 0 -// left: 0 -// width: 100% -// height: 100% -// opacity: 0 -// filter: drop-shadow(0px 3px 4px rgba(0,0,0,0.125)) -// transition: opacity 0.3s ease-in-out -// -///* Transition to showing the bigger shadow on hover */ -//.grid-img:hover:after -// opacity: 1