diff --git a/about.html b/about.html index dd44924..56a4575 100644 --- a/about.html +++ b/about.html @@ -2,9 +2,21 @@ + About Me + + +
+ Jake Cover +
+ Home + Contact + About + GitHub +
+
\ No newline at end of file diff --git a/contact.html b/contact.html index 27bd9fb..060414a 100644 --- a/contact.html +++ b/contact.html @@ -2,9 +2,21 @@ + Contact Me + + +
+ Jake Cover +
+ Home + Contact + About + GitHub +
+
\ No newline at end of file diff --git a/css/breakpoint-helpers.css b/css/breakpoint-helpers.css new file mode 100644 index 0000000..8d35839 --- /dev/null +++ b/css/breakpoint-helpers.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=breakpoint-helpers.css.map */ diff --git a/css/index.css b/css/index.css deleted file mode 100644 index 445d0e6..0000000 --- a/css/index.css +++ /dev/null @@ -1,40 +0,0 @@ -.header { - overflow: hidden; - background-color: lightgrey; - padding: 20px 10px; } - -.header a { - float: left; - color: black; - text-align: center; - padding: 12px; - text-decoration: none; - font-size: 18px; - line-height: 25px; - border-radius: 4px; } - -.header a.name { - font-size: 25px; - font-weight: bold; } - -.header a:hover { - background-color: #dddddd; - color: black; } - -.header a:active { - background-color: dodgerblue; - color: white; } - -.header-right { - float: right; } - -@media screen and (max-width: 500px) { - .header a { - float: none; - display: block; - text-align: left; } - - .header-right { - float: none; } } - -/*# sourceMappingURL=index.css.map */ diff --git a/css/index.css.map b/css/index.css.map deleted file mode 100644 index 5424a77..0000000 --- a/css/index.css.map +++ /dev/null @@ -1,7 +0,0 @@ -{ -"version": 3, -"mappings": "AAEA,OAAO;EACL,QAAQ,EAAE,MAAM;EAChB,gBAAgB,EAAE,SAAS;EAC3B,OAAO,EAAE,SAAS;;AAEpB,SAAS;EACP,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,IAAI;EACrB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,aAAa,EAAE,GAAG;;AAEpB,cAAc;EACZ,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;;AAEnB,eAAe;EACb,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,KAAK;;AAEd,gBAAgB;EACd,gBAAgB,EAAE,UAAU;EAC5B,KAAK,EAAE,KAAK;;AAEd,aAAa;EACX,KAAK,EAAE,KAAK;;AAEd,oCAA4C;EAC1C,SAAS;IACP,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,IAAI;;EAElB,aAAa;IACX,KAAK,EAAE,IAAI", -"sources": ["../sass/index.sass"], -"names": [], -"file": "index.css" -} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..67f33b7 --- /dev/null +++ b/css/main.css @@ -0,0 +1,54 @@ +@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap"); +.header { + overflow: hidden; + background-color: #f1f1f1; + padding: 15px 10px; + font-family: "Fira Code", monospace; + border-radius: 3px; } + +.header a { + float: left; + color: black; + text-align: center; + padding: 7px 12px; + text-decoration: none; + font-size: 18px; + line-height: 25px; + border-radius: 4px; } + +.header a.name { + font-size: 25px; + font-weight: 600; } + +.header a:hover { + background-color: #dddddd; + color: black; } + +.header a:active { + background-color: dodgerblue; + 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: rgba(240, 240, 240, 0.94); + height: fit-content; + padding: 10px; + margin-top: 10px; + font-family: "Montserrat", sans-serif; } + +@media (min-width: 992px) { + .page { + width: 80%; + margin: 10px auto auto; } } + +/*# sourceMappingURL=main.css.map */ diff --git a/css/masonry.css b/css/masonry.css new file mode 100644 index 0000000..fd825a9 --- /dev/null +++ b/css/masonry.css @@ -0,0 +1,41 @@ +.grid-item { + width: 240px; + margin-bottom: 10px; + padding: 5px; + box-sizing: border-box; + height: 200px; + transition: 0.22s all; } + +.grid { + margin: 0 auto; + transition: 0.2s all; } + +.grid-item--tall3 { + height: 300px; } + +.grid-item--tall4 { + height: 400px; } + +.grid-item--width2 { + background-color: #81d4fa; + width: 490px; } + +.grid-item--image { + width: fit-content; + height: fit-content; } + +@media (max-width: 575px) { + .grid-item--width2 { + width: 100%; } } +.blur-me { + filter: grayscale(20%) blur(0.7px) brightness(94%); + opacity: 0.8; + box-shadow: none; } + +.grid:hover .grid-item:hover { + filter: blur(0px); + opacity: 1; } + .grid:hover .grid-item:hover > img { + filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25)); } + +/*# sourceMappingURL=masonry.css.map */ diff --git a/images/codedaysd.png b/images/codedaysd.png new file mode 100644 index 0000000..11daedf Binary files /dev/null and b/images/codedaysd.png differ diff --git a/images/foresightsports.png b/images/foresightsports.png new file mode 100644 index 0000000..85914af Binary files /dev/null and b/images/foresightsports.png differ diff --git a/index.html b/index.html index d910cd2..4e1beb3 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,11 @@ Jake Cover - + + -
+
Jake Cover
@@ -19,5 +20,45 @@ GitHub
+
+
+ +
+ Distest +
+ +
+ CodeDay SD Logo +
+ +
+ SRND +
+ +
+ ScoreSaber Installer +
+ +
+ ForeSight Sports Logo0 +
+ +
ReplyBot
+
+
+ + + + + \ No newline at end of file diff --git a/notes.txt b/notes.txt new file mode 100644 index 0000000..c5c7bdc --- /dev/null +++ b/notes.txt @@ -0,0 +1,18 @@ +http://www.alexafalcone.com/ +http://gudh.github.io/ihover/dist/index.html#circle10 +http://gudh.github.io/ihover/dist/index.html#circle13 +http://gudh.github.io/ihover/dist/index.html#circle17 +http://gudh.github.io/ihover/dist/index.html#square3 +http://gudh.github.io/ihover/dist/index.html#square6 +http://gudh.github.io/ihover/dist/index.html#square12 +https://codepen.io/honglio/pen/FKyxG +https://codepen.io/russpate/pen/qRaepv --- Requires the whole area to be blurred +https://codepen.io/Mamboleoo/pen/XgBvrJ --- +https://codepen.io/cassidoo/pen/RZOWQb +https://codepen.io/Sherpa23/pen/rKvJXg !! +https://codepen.io/markmead/pen/MqmOVB !! +https://codepen.io/ViktorKorolyuk/pen/GYGwpv +https://ianlunn.github.io/Hover/ (border section) +https://codepen.io/bhautikbharadava/full/OdPzdW (gives borders too) +https://tympanus.net/Development/ProximityFeedback/index5.html +https://tympanus.net/Development/ProximityFeedback/index7.html (scroll icon) \ No newline at end of file diff --git a/sass/breakpoint-helpers.scss b/sass/breakpoint-helpers.scss new file mode 100644 index 0000000..c8a7c47 --- /dev/null +++ b/sass/breakpoint-helpers.scss @@ -0,0 +1,83 @@ +// A map of breakpoints. +$breakpoints: ( + xs: 576px, + sm: 768px, + md: 992px, + lg: 1200px +); + + // Respond above. +@mixin respond-above($breakpoint) { + +// If the breakpoint exists in the map. + @if map-has-key($breakpoints, $breakpoint) { + + // Get the breakpoint value. + $breakpoint-value: map-get($breakpoints, $breakpoint); + + // Write the media query. + @media (min-width: $breakpoint-value) { + @content; + } + + // If the breakpoint doesn't exist in the map. + } @else { + + // Log a warning. + @warn 'Invalid breakpoint: #{$breakpoint}.'; + } +} + +@mixin respond-below($breakpoint) { + + // If the breakpoint exists in the map. + @if map-has-key($breakpoints, $breakpoint) { + + // Get the breakpoint value. + $breakpoint-value: map-get($breakpoints, $breakpoint); + + // Write the media query. + @media (max-width: ($breakpoint-value - 1)) { + @content; + } + + // If the breakpoint doesn't exist in the map. + } @else { + + // Log a warning. + @warn 'Invalid breakpoint: #{$breakpoint}.'; + } +} + +@mixin respond-between($lower, $upper) { + + // If both the lower and upper breakpoints exist in the map. + @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) { + + // Get the lower and upper breakpoints. + $lower-breakpoint: map-get($breakpoints, $lower); + $upper-breakpoint: map-get($breakpoints, $upper); + + // Write the media query. + @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) { + @content; + } + + // If one or both of the breakpoints don't exist. + } @else { + + // If lower breakpoint is invalid. + @if (map-has-key($breakpoints, $lower) == false) { + + // Log a warning. + @warn 'Your lower breakpoint was invalid: #{$lower}.'; + } + + // If upper breakpoint is invalid. + @if (map-has-key($breakpoints, $upper) == false) { + + // Log a warning. + @warn 'Your upper breakpoint was invalid: #{$upper}.'; + } + } +} \ No newline at end of file diff --git a/sass/index.sass b/sass/index.sass deleted file mode 100644 index 95abfd3..0000000 --- a/sass/index.sass +++ /dev/null @@ -1,40 +0,0 @@ -$mobile-break: 500px - -.header - overflow: hidden - background-color: lightgrey - padding: 20px 10px - -.header a - float: left - color: black - text-align: center - padding: 12px - text-decoration: none - font-size: 18px - line-height: 25px - border-radius: 4px - -.header a.name - font-size: 25px - font-weight: bold - -.header a:hover - background-color: #dddddd - color: black - -.header a:active - background-color: dodgerblue - color: white - -.header-right - float: right - -@media screen and (max-width: $mobile-break) - .header a - float: none - display: block - text-align: left - - .header-right - float: none diff --git a/sass/main.sass b/sass/main.sass new file mode 100644 index 0000000..43c9667 --- /dev/null +++ b/sass/main.sass @@ -0,0 +1,57 @@ +@import "breakpoint-helpers" +@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap') + +.header + overflow: hidden + background-color: #f1f1f1 + padding: 15px 10px + font-family: "Fira Code", monospace + border-radius: 3px + +.header a + float: left + color: black + text-align: center + padding: 7px 12px + text-decoration: none + font-size: 18px + line-height: 25px + border-radius: 4px + +.header a.name + font-size: 25px + font-weight: 600 + +.header a:hover + background-color: #dddddd + color: black + +.header a:active + background-color: dodgerblue + 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: rgba(240, 240, 240, 0.94) + height: fit-content + padding: 10px + margin-top: 10px + font-family: 'Montserrat', sans-serif + +@include respond-above(md) + .page + width: 80% + margin: 10px auto auto + diff --git a/sass/masonry.sass b/sass/masonry.sass new file mode 100644 index 0000000..34cf0bc --- /dev/null +++ b/sass/masonry.sass @@ -0,0 +1,50 @@ +@import "breakpoint-helpers" + +.grid-item + //background-color: coral + width: 240px + margin-bottom: 10px + padding: 5px + box-sizing: border-box + height: 200px + //box-shadow: 0 2px 3px 0px rgba(0,0,0,0.25) + transition: 0.22s all + + +.grid + margin: 0 auto + transition: .2s all + +.grid-item--tall3 + height: 300px + +.grid-item--tall4 + height: 400px + + +.grid-item--width2 + background-color: #81d4fa + width: 490px + +.grid-item--image + width: fit-content + height: fit-content + +@include respond-below(xs) + .grid-item--width2 + width: 100% + +.blur-me + filter: grayscale(20%) blur(0.7px) brightness(94%) + opacity: .8 + //transform: scale(.995) + box-shadow: none + +.grid:hover .grid-item:hover + //transform: scale(1.005) + filter: blur(0px) + opacity: 1 + //box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125) + + > img + filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.25)) diff --git a/scripts/hover_bounce.js b/scripts/hover_bounce.js new file mode 100644 index 0000000..54e3adf --- /dev/null +++ b/scripts/hover_bounce.js @@ -0,0 +1,78 @@ +class HoverButton { + constructor(el) { + this.el = el; + this.hover = false; + this.calculatePosition(); + this.attachEventsListener(); + } + + attachEventsListener() { + window.addEventListener('mousemove', e => this.onMouseMove(e)); + window.addEventListener('resize', e => this.calculatePosition(e)); + } + + calculatePosition() { + TweenMax.set(this.el, { + x: 0, + y: 0, + scale: 1 + }); + const box = this.el.getBoundingClientRect(); + this.x = box.left + (box.width * 0.5); + this.y = box.top + (box.height * 0.5); + this.width = box.width; + this.height = box.height; + } + + onMouseMove(e) { + let hover = false; + let hoverArea = (this.hover ? 0.5 : 0.5); // (detach, attach) + let x = e.clientX - this.x; + let y = e.clientY - this.y; + let distance = Math.sqrt( x*x + y*y ); + if (distance < (this.width * hoverArea)) { + hover = true; + if (!this.hover) { + this.hover = true; + } + this.onHover(e.clientX, e.clientY); + } + + if(!hover && this.hover) { + this.onLeave(); + this.hover = false; + } + } + + onHover(x, y) { + TweenMax.to(this.el, 0.05, { + x: (x - this.x) * 0.05, + y: (y - this.y) * 0.05, + scale: 1.00, + ease: Power2.easeOut + }); + this.el.style.zIndex = 10; + } + onLeave() { + TweenMax.to(this.el, 0.7, { + x: 0, + y: 0, + scale: 1, + ease: Elastic.easeOut.config(1.2, 0.4) + }); + this.el.style.zIndex = 1; + } +} + +const btn1 = document.querySelector('.grid-item:nth-child(1)'); +new HoverButton(btn1); +const btn2 = document.querySelector('.grid-item:nth-child(2)'); +new HoverButton(btn2); +const btn3 = document.querySelector('.grid-item:nth-child(3)'); +new HoverButton(btn3); +const btn4 = document.querySelector('.grid-item:nth-child(4)'); +new HoverButton(btn4); +const btn5 = document.querySelector('.grid-item:nth-child(5)'); +new HoverButton(btn5); +const btn6 = document.querySelector('.grid-item:nth-child(6)'); +new HoverButton(btn6); diff --git a/scripts/masonry_conf.js b/scripts/masonry_conf.js new file mode 100644 index 0000000..eb4e5f3 --- /dev/null +++ b/scripts/masonry_conf.js @@ -0,0 +1,8 @@ +var elem = document.querySelector('.grid'); +var msnry = new Masonry( elem, { + // options + itemSelector: '.grid-item', + columnWidth: 240, + gutter: 10, + fitWidth: true +}); \ No newline at end of file