diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
deleted file mode 100755
index 9939bb3..0000000
Binary files a/android-chrome-192x192.png and /dev/null differ
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
deleted file mode 100755
index 6d0d8bc..0000000
Binary files a/android-chrome-512x512.png and /dev/null differ
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
deleted file mode 100755
index a919eca..0000000
Binary files a/apple-touch-icon.png and /dev/null differ
diff --git a/favicon-16x16.png b/favicon-16x16.png
deleted file mode 100755
index 5d7f185..0000000
Binary files a/favicon-16x16.png and /dev/null differ
diff --git a/favicon-32x32.png b/favicon-32x32.png
deleted file mode 100755
index 6bfeb91..0000000
Binary files a/favicon-32x32.png and /dev/null differ
diff --git a/favicon.ico b/favicon.ico
deleted file mode 100755
index 3869609..0000000
Binary files a/favicon.ico and /dev/null differ
diff --git a/fonts/EgyptianEF-BoldExtended.woff b/fonts/EgyptianEF-BoldExtended.woff
new file mode 100644
index 0000000..0dfcb6c
Binary files /dev/null and b/fonts/EgyptianEF-BoldExtended.woff differ
diff --git a/fonts/EgyptianEF-BoldExtended.woff2 b/fonts/EgyptianEF-BoldExtended.woff2
new file mode 100644
index 0000000..6728f30
Binary files /dev/null and b/fonts/EgyptianEF-BoldExtended.woff2 differ
diff --git a/fonts/HelveticaNeue-Medium.woff b/fonts/HelveticaNeue-Medium.woff
new file mode 100644
index 0000000..710dd14
Binary files /dev/null and b/fonts/HelveticaNeue-Medium.woff differ
diff --git a/fonts/HelveticaNeue-Medium.woff2 b/fonts/HelveticaNeue-Medium.woff2
new file mode 100644
index 0000000..cc9cc05
Binary files /dev/null and b/fonts/HelveticaNeue-Medium.woff2 differ
diff --git a/fonts/SpecialElite-Regular.woff b/fonts/SpecialElite-Regular.woff
new file mode 100644
index 0000000..42d6881
Binary files /dev/null and b/fonts/SpecialElite-Regular.woff differ
diff --git a/fonts/SpecialElite-Regular.woff2 b/fonts/SpecialElite-Regular.woff2
new file mode 100644
index 0000000..13418f7
Binary files /dev/null and b/fonts/SpecialElite-Regular.woff2 differ
diff --git a/icon-192x192.png b/icon-192x192.png
deleted file mode 100644
index f976752..0000000
Binary files a/icon-192x192.png and /dev/null differ
diff --git a/icon-256x256.png b/icon-256x256.png
deleted file mode 100644
index 73419fd..0000000
Binary files a/icon-256x256.png and /dev/null differ
diff --git a/icon-384x384.png b/icon-384x384.png
deleted file mode 100644
index 60673e2..0000000
Binary files a/icon-384x384.png and /dev/null differ
diff --git a/icon-512x512.png b/icon-512x512.png
deleted file mode 100644
index e95926c..0000000
Binary files a/icon-512x512.png and /dev/null differ
diff --git a/images/border.webp b/images/border.webp
new file mode 100644
index 0000000..32c3246
Binary files /dev/null and b/images/border.webp differ
diff --git a/images/ecobux_1042.webp b/images/ecobux_1042.webp
new file mode 100644
index 0000000..b36fac0
Binary files /dev/null and b/images/ecobux_1042.webp differ
diff --git a/images/ecobux_1100.webp b/images/ecobux_1100.webp
new file mode 100644
index 0000000..738be10
Binary files /dev/null and b/images/ecobux_1100.webp differ
diff --git a/images/ecobux_1151.webp b/images/ecobux_1151.webp
new file mode 100644
index 0000000..505c5e5
Binary files /dev/null and b/images/ecobux_1151.webp differ
diff --git a/images/ecobux_1201.webp b/images/ecobux_1201.webp
new file mode 100644
index 0000000..b38e9f1
Binary files /dev/null and b/images/ecobux_1201.webp differ
diff --git a/images/ecobux_1249.webp b/images/ecobux_1249.webp
new file mode 100644
index 0000000..e0e281c
Binary files /dev/null and b/images/ecobux_1249.webp differ
diff --git a/images/ecobux_1298.webp b/images/ecobux_1298.webp
new file mode 100644
index 0000000..2188ef5
Binary files /dev/null and b/images/ecobux_1298.webp differ
diff --git a/images/ecobux_1349.webp b/images/ecobux_1349.webp
new file mode 100644
index 0000000..a15a8b2
Binary files /dev/null and b/images/ecobux_1349.webp differ
diff --git a/images/ecobux_1382.webp b/images/ecobux_1382.webp
new file mode 100644
index 0000000..2808ff6
Binary files /dev/null and b/images/ecobux_1382.webp differ
diff --git a/images/ecobux_1400.webp b/images/ecobux_1400.webp
new file mode 100644
index 0000000..bc43557
Binary files /dev/null and b/images/ecobux_1400.webp differ
diff --git a/images/ecobux_200.webp b/images/ecobux_200.webp
new file mode 100644
index 0000000..551617c
Binary files /dev/null and b/images/ecobux_200.webp differ
diff --git a/images/ecobux_341.webp b/images/ecobux_341.webp
new file mode 100644
index 0000000..4f4277e
Binary files /dev/null and b/images/ecobux_341.webp differ
diff --git a/images/ecobux_448.webp b/images/ecobux_448.webp
new file mode 100644
index 0000000..d2c3cb8
Binary files /dev/null and b/images/ecobux_448.webp differ
diff --git a/images/ecobux_537.webp b/images/ecobux_537.webp
new file mode 100644
index 0000000..f17b97c
Binary files /dev/null and b/images/ecobux_537.webp differ
diff --git a/images/ecobux_616.webp b/images/ecobux_616.webp
new file mode 100644
index 0000000..1d08722
Binary files /dev/null and b/images/ecobux_616.webp differ
diff --git a/images/ecobux_689.webp b/images/ecobux_689.webp
new file mode 100644
index 0000000..ff27ccd
Binary files /dev/null and b/images/ecobux_689.webp differ
diff --git a/images/ecobux_761.webp b/images/ecobux_761.webp
new file mode 100644
index 0000000..830075b
Binary files /dev/null and b/images/ecobux_761.webp differ
diff --git a/images/ecobux_822.webp b/images/ecobux_822.webp
new file mode 100644
index 0000000..4e47827
Binary files /dev/null and b/images/ecobux_822.webp differ
diff --git a/images/ecobux_889.webp b/images/ecobux_889.webp
new file mode 100644
index 0000000..fd0d24f
Binary files /dev/null and b/images/ecobux_889.webp differ
diff --git a/images/ecobux_943.webp b/images/ecobux_943.webp
new file mode 100644
index 0000000..dfabad9
Binary files /dev/null and b/images/ecobux_943.webp differ
diff --git a/images/ecobux_997.webp b/images/ecobux_997.webp
new file mode 100644
index 0000000..46c5153
Binary files /dev/null and b/images/ecobux_997.webp differ
diff --git a/images/ecobux_gf09pg_c_scale,w_1042.png b/images/ecobux_gf09pg_c_scale,w_1042.png
deleted file mode 100644
index e99ad40..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_1042.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_1100.png b/images/ecobux_gf09pg_c_scale,w_1100.png
deleted file mode 100644
index e4da3d4..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_1100.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_1151.png b/images/ecobux_gf09pg_c_scale,w_1151.png
deleted file mode 100644
index f1d5628..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_1151.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_1201.png b/images/ecobux_gf09pg_c_scale,w_1201.png
deleted file mode 100644
index 95ecacd..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_1201.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_1249.png b/images/ecobux_gf09pg_c_scale,w_1249.png
deleted file mode 100644
index 4de9e40..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_1249.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_1298.png b/images/ecobux_gf09pg_c_scale,w_1298.png
deleted file mode 100644
index 79d8ca8..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_1298.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_1349.png b/images/ecobux_gf09pg_c_scale,w_1349.png
deleted file mode 100644
index 8e39853..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_1349.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_1382.png b/images/ecobux_gf09pg_c_scale,w_1382.png
deleted file mode 100644
index 4b99feb..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_1382.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_1400.png b/images/ecobux_gf09pg_c_scale,w_1400.png
deleted file mode 100644
index 157851a..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_1400.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_200.png b/images/ecobux_gf09pg_c_scale,w_200.png
deleted file mode 100644
index e9b62fc..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_200.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_341.png b/images/ecobux_gf09pg_c_scale,w_341.png
deleted file mode 100644
index e54083c..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_341.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_448.png b/images/ecobux_gf09pg_c_scale,w_448.png
deleted file mode 100644
index 32e5bc4..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_448.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_537.png b/images/ecobux_gf09pg_c_scale,w_537.png
deleted file mode 100644
index 8d36015..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_537.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_616.png b/images/ecobux_gf09pg_c_scale,w_616.png
deleted file mode 100644
index ca651d1..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_616.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_689.png b/images/ecobux_gf09pg_c_scale,w_689.png
deleted file mode 100644
index c5ef610..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_689.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_761.png b/images/ecobux_gf09pg_c_scale,w_761.png
deleted file mode 100644
index 848e6a5..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_761.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_822.png b/images/ecobux_gf09pg_c_scale,w_822.png
deleted file mode 100644
index d387e10..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_822.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_889.png b/images/ecobux_gf09pg_c_scale,w_889.png
deleted file mode 100644
index 71af789..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_889.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_943.png b/images/ecobux_gf09pg_c_scale,w_943.png
deleted file mode 100644
index a7a9d17..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_943.png and /dev/null differ
diff --git a/images/ecobux_gf09pg_c_scale,w_997.png b/images/ecobux_gf09pg_c_scale,w_997.png
deleted file mode 100644
index 15d3456..0000000
Binary files a/images/ecobux_gf09pg_c_scale,w_997.png and /dev/null differ
diff --git a/images/film-border.webp b/images/film-border.webp
new file mode 100644
index 0000000..da5b7f8
Binary files /dev/null and b/images/film-border.webp differ
diff --git a/images/film_melt.webm b/images/film_melt.webm
new file mode 100644
index 0000000..df9025e
Binary files /dev/null and b/images/film_melt.webm differ
diff --git a/images/newspaper.webp b/images/newspaper.webp
new file mode 100644
index 0000000..f5bd906
Binary files /dev/null and b/images/newspaper.webp differ
diff --git a/images/profile_1275.webp b/images/profile_1275.webp
new file mode 100644
index 0000000..3aa6855
Binary files /dev/null and b/images/profile_1275.webp differ
diff --git a/images/profile_1400.webp b/images/profile_1400.webp
new file mode 100644
index 0000000..df2a035
Binary files /dev/null and b/images/profile_1400.webp differ
diff --git a/images/profile_200.webp b/images/profile_200.webp
new file mode 100644
index 0000000..6cee739
Binary files /dev/null and b/images/profile_200.webp differ
diff --git a/images/profile_849.webp b/images/profile_849.webp
new file mode 100644
index 0000000..5f1bbfc
Binary files /dev/null and b/images/profile_849.webp differ
diff --git a/images/redact.webp b/images/redact.webp
new file mode 100644
index 0000000..8d45481
Binary files /dev/null and b/images/redact.webp differ
diff --git a/images/trivio_1077.webp b/images/trivio_1077.webp
new file mode 100644
index 0000000..72fcf36
Binary files /dev/null and b/images/trivio_1077.webp differ
diff --git a/images/trivio_1170.webp b/images/trivio_1170.webp
new file mode 100644
index 0000000..3d6a33d
Binary files /dev/null and b/images/trivio_1170.webp differ
diff --git a/images/trivio_1290.webp b/images/trivio_1290.webp
new file mode 100644
index 0000000..7273e2a
Binary files /dev/null and b/images/trivio_1290.webp differ
diff --git a/images/trivio_1400.webp b/images/trivio_1400.webp
new file mode 100644
index 0000000..5081e4a
Binary files /dev/null and b/images/trivio_1400.webp differ
diff --git a/images/trivio_200.webp b/images/trivio_200.webp
new file mode 100644
index 0000000..2b8ee3a
Binary files /dev/null and b/images/trivio_200.webp differ
diff --git a/images/trivio_472.webp b/images/trivio_472.webp
new file mode 100644
index 0000000..5294431
Binary files /dev/null and b/images/trivio_472.webp differ
diff --git a/images/trivio_668.webp b/images/trivio_668.webp
new file mode 100644
index 0000000..b8ee5cf
Binary files /dev/null and b/images/trivio_668.webp differ
diff --git a/images/trivio_821.webp b/images/trivio_821.webp
new file mode 100644
index 0000000..36313a2
Binary files /dev/null and b/images/trivio_821.webp differ
diff --git a/images/trivio_958.webp b/images/trivio_958.webp
new file mode 100644
index 0000000..88dcb68
Binary files /dev/null and b/images/trivio_958.webp differ
diff --git a/images/trivio_kipvfo_c_scale,w_1077.png b/images/trivio_kipvfo_c_scale,w_1077.png
deleted file mode 100644
index aa7e459..0000000
Binary files a/images/trivio_kipvfo_c_scale,w_1077.png and /dev/null differ
diff --git a/images/trivio_kipvfo_c_scale,w_1170.png b/images/trivio_kipvfo_c_scale,w_1170.png
deleted file mode 100644
index d892605..0000000
Binary files a/images/trivio_kipvfo_c_scale,w_1170.png and /dev/null differ
diff --git a/images/trivio_kipvfo_c_scale,w_1290.png b/images/trivio_kipvfo_c_scale,w_1290.png
deleted file mode 100644
index 8712c8b..0000000
Binary files a/images/trivio_kipvfo_c_scale,w_1290.png and /dev/null differ
diff --git a/images/trivio_kipvfo_c_scale,w_1400.png b/images/trivio_kipvfo_c_scale,w_1400.png
deleted file mode 100644
index cc30741..0000000
Binary files a/images/trivio_kipvfo_c_scale,w_1400.png and /dev/null differ
diff --git a/images/trivio_kipvfo_c_scale,w_200.png b/images/trivio_kipvfo_c_scale,w_200.png
deleted file mode 100644
index d965230..0000000
Binary files a/images/trivio_kipvfo_c_scale,w_200.png and /dev/null differ
diff --git a/images/trivio_kipvfo_c_scale,w_472.png b/images/trivio_kipvfo_c_scale,w_472.png
deleted file mode 100644
index 199e143..0000000
Binary files a/images/trivio_kipvfo_c_scale,w_472.png and /dev/null differ
diff --git a/images/trivio_kipvfo_c_scale,w_668.png b/images/trivio_kipvfo_c_scale,w_668.png
deleted file mode 100644
index f618cc2..0000000
Binary files a/images/trivio_kipvfo_c_scale,w_668.png and /dev/null differ
diff --git a/images/trivio_kipvfo_c_scale,w_821.png b/images/trivio_kipvfo_c_scale,w_821.png
deleted file mode 100644
index a416c17..0000000
Binary files a/images/trivio_kipvfo_c_scale,w_821.png and /dev/null differ
diff --git a/images/trivio_kipvfo_c_scale,w_958.png b/images/trivio_kipvfo_c_scale,w_958.png
deleted file mode 100644
index 66f91a4..0000000
Binary files a/images/trivio_kipvfo_c_scale,w_958.png and /dev/null differ
diff --git a/index.css b/index.css
index 4cc3e00..3562bc3 100644
--- a/index.css
+++ b/index.css
@@ -1,455 +1,603 @@
-::selection {
- color: var(--s);
- background: var(--p);
-}
-.pop {
- color: var(--t);
- font-size: 1.2em;
- font-weight: 700;
-}
-#name {
- opacity: 1 !important;
- padding: 0 !important;
- width: fit-content;
- margin: 0 auto;
+@font-face {
+ font-family: EgyptianEF;
+ src:
+ url("fonts/EgyptianEF-BoldExtended.woff2") format("woff2"),
+ url("fonts/EgyptianEF-BoldExtended.woff") format("woff");
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
}
-.carousel-text,
-ul.social {
- display: block !important;
+
+@font-face {
+ font-family: "Special Elite";
+ src:
+ url("fonts/SpecialElite-Regular.woff2") format("woff2"),
+ url("fonts/SpecialElite-Regular.woff") format("woff");
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
}
-@media only screen and (min-width: 448px) {
- li.social {
- padding-left: 1vw !important;
- padding-right: 1vw !important;
+
+@keyframes draw {
+ from {
+ stroke-dashoffset: var(--path-length);
}
-}
-a {
- position: relative;
- color: var(--p);
- text-decoration: none;
+ to {
+ stroke-dashoffset: 0;
+ }
}
-a:hover {
- color: var(--p);
-}
+@keyframes slide-down {
+ 0% {
+ transform: translateY(0);
+ }
-a::before {
- content: "";
- position: absolute;
- width: 100%;
- height: 2px;
- bottom: 0;
- left: 0;
- background-color: var(--t);
- visibility: hidden;
- transform: scaleX(0);
- transition: all 0.3s ease-in-out 0s;
+ 100% {
+ transform: translateY(300vh);
+ }
}
-a.no-underline::before {
- height: 0px;
- transform: initial;
+
+@keyframes slide-up {
+ 0% {
+ transform: translateY(0);
+ }
+
+ 100% {
+ transform: translateY(-300vh);
+ }
}
-a:hover::before {
- visibility: visible;
- transform: scaleX(1);
+@keyframes slide-left {
+ 0% {
+ transform: translateX(0);
+ }
+
+ 100% {
+ transform: translateX(-100vw);
+ }
}
-a.no-underline:hover::before {
- visibility: hidden;
- transform: initial;
+
+@keyframes undo-slide-left {
+ 0% {
+ transform: translateX(-100vw);
+ }
+
+ 100% {
+ transform: translateX(0);
+ }
}
-.carousel-text > a {
- color: #696969;
+/* Handle resize */
+@keyframes slide-right {
+ 0% {
+ transform: translateX(0);
+ }
+
+ 100% {
+ transform: translateX(100vw);
+ }
}
-.carousel-text > a:hover {
- color: var(--p);
+
+@keyframes undo-slide-right {
+ 0% {
+ transform: translateX(100vw);
+ }
+
+ 100% {
+ transform: translateX(0);
+ }
}
-/* Typewriter effect */
-h1 {
- font-family: "Cutive Mono", monospace;
- overflow: hidden;
- margin: 0;
- letter-spacing: 0.1rem;
- white-space: nowrap;
- margin-right: 0.15rem;
- height: 2rem;
- transition: transform 0.5s;
+.vignette {
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ background: radial-gradient(ellipse at center, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 30%) 100%);
+ z-index: 100;
}
-.type h1 {
- margin: 0;
- border-right: 0.15rem solid var(--p);
- animation:
- typing 2s steps(17, jump-none),
- blink-cursor.95s step-end 10;
+path {
+ stroke-dasharray: var(--path-length);
}
-.sticky {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- align-items: center;
- z-index: 1;
- padding-bottom: 0.5rem;
- background-color: var(--s);
+
+#landing-text {
+ font-size: 2rem;
+ text-anchor: middle;
+ alignment-baseline: middle;
}
-.sticky h1 {
- transform: scale(0.4);
+.about {
+ position: relative;
+ width: 70vw;
+ height: 100vh;
+ margin: 0 auto;
+ overflow: hidden;
+ background-color: var(--r);
}
-.sticky ~ * {
- padding-top: 1.8rem;
+.about h1 {
+ font-family: EgyptianEF, serif;
+ font-size: 5.1rem;
+ font-weight: bold;
+ font-kerning: 0.1rem;
+ line-height: 1;
+ text-align: center;
}
-.carousel {
- font-size: 1rem;
- align-items: center;
+.about-split {
+ display: flex;
+ justify-content: center;
+ align-items: start;
+ height: 30vh;
+ max-width: 64rem;
width: 100%;
+ margin: 0 auto;
+ flex-wrap: wrap;
}
-.carousel-text {
- opacity: 0;
- max-width: 93vw;
- margin: 1vh auto;
- background-color: var(--s);
- animation-name: rotate-last;
- animation-duration: 2s;
- animation-delay: 2.1s;
- animation-fill-mode: forwards;
- will-change: transform, opacity;
+.about-description {
+ font-family: "Special Elite", typewriter, monospace;
+ font-size: 2.5rem;
+ font-weight: 500;
+ line-height: 1.5;
+ text-align: right;
+ margin: 0;
+ padding: 0 0.5rem;
+ max-width: 50%;
+ width: fit-content;
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ height: 100%;
+ justify-content: space-between;
}
-/* Fade icons in */
-ul.social {
+.about-description p {
+ margin: 0;
padding: 0;
- opacity: 0;
- animation: fadeIn ease 2s;
- animation-delay: 2.5s;
- animation-fill-mode: forwards;
+ max-width: 18ch;
}
-li.social {
- height: 80.36px;
- width: 64px;
+
+.about-image {
position: relative;
- display: inline-block;
+ width: 50%;
+ height: 30vh;
+ margin: 0;
padding: 0;
- padding-left: 5vw;
- padding-right: 5vw;
- font-size: 64px;
-}
-svg {
- fill: none;
- stroke: var(--p);
- stroke-linecap: round;
- stroke-linejoin: round;
- stroke-width: 1.5;
- height: 32px;
- width: 32px;
-}
-.social svg {
- height: 64px;
- width: 64px;
-}
-footer svg {
- stroke: var(--s);
- height: 44px;
- width: 44px;
-}
-.aboutMe {
- display: flex;
- align-items: center;
- height: 70vh;
- width: 70vw;
- max-width: 1312px;
- margin: auto;
- font-family: "Quicksand";
- font-size: 1.1rem;
- line-height: 150%;
-}
-.aboutMe > h2 {
- font-family: "Raleway", serif;
-}
-.aboutMe a {
- font-family: "Raleway", serif;
-}
-img {
- -webkit-user-drag: none;
- -khtml-user-drag: none;
- -moz-user-drag: none;
- -o-user-drag: none;
- user-drag: none;
- border-radius: 0.3rem;
-}
-
-.works {
- font-family: "Raleway", serif;
- transition: transform 0.5s;
- transition-duration: 0.5s;
- transition: all 2s;
- backface-visibility: hidden;
- -webkit-font-smoothing: subpixel-antialiased;
- width: 93vw;
- max-width: 1312px;
- margin: -2vh auto;
-}
-.worksItem:nth-of-type(odd) {
- text-align: right;
}
-.worksContent > h4 {
- font-size: 2.5rem;
- margin: 0;
+
+.about img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ max-width: 100%;
+ max-height: 100%;
}
-.worksContent > p {
- font-size: 1rem;
+
+a,
+.redacted {
+ display: inline-block;
+ font-family: "Special Elite", typewriter, monospace;
+ background-image: url("images/redact.webp");
+ background-repeat: no-repeat;
+ text-decoration: none;
+ color: var(--p);
+ background-size: 100% 100%;
+ background-position: center;
+ transition: color 0.2s ease-in-out;
}
-.worksHeader {
- font-size: 2rem;
- margin-left: auto;
- margin-right: auto;
- width: 70%;
+
+a:hover,
+.redacted:hover {
+ color: var(--l);
}
-.worksContent {
- width: 100%;
+
+a::selection,
+.redacted::selection {
+ background-color: var(--p);
+ color: var(--l);
}
-.worksImage {
- width: 100%;
+
+#about-border-image {
+ z-index: 2;
}
-.worksImage img {
- width: 100%;
- height: 100%;
+
+.about-content {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: stretch;
}
-.worksLink {
- display: inline-block;
- font-size: 2rem;
- padding: 0;
- margin: 1vh 0;
+
+.about-image::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
width: 100%;
+ height: 100%;
+ background-color: var(--r);
+ opacity: 0.5;
+ transition: opacity 0.3s ease;
+ pointer-events: none;
+ z-index: 1;
}
-.worksLink > li {
- display: inline-block;
+
+.about-image:hover::before {
+ opacity: 0;
}
-.worksLink > li + li {
- padding-left: 1%;
+
+.about-form {
+ display: grid;
+ flex: 1;
+ justify-content: center;
+ align-items: stretch;
+ width: 64rem;
+ margin: 0 auto;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-auto-rows: 1fr;
+ grid-gap: 0;
+ max-width: 50rem;
+ margin-top: 2rem;
}
-.worksTech {
- list-style: none;
- padding: 0;
+
+.about-item {
+ font-family: "Special Elite", typewriter, monospace;
+ font-weight: 300;
+ line-height: 1.5;
+ text-align: left;
+ max-width: 64rem;
margin: 0;
- width: 100%;
- font-family: "Cutive Mono", monospace;
-}
-.worksTech > li {
- display: inline-block;
+ padding: 0 0.5rem;
+ border: 1px solid var(--p);
}
-.worksTech > li + li {
- padding-left: 2%;
-}
-.hidden {
- opacity: 0;
-}
-.worksInView {
- animation: rotate-last 3s;
+
+.about-item.span-two {
+ grid-column: span 2;
}
-.subWorks {
- max-width: 1312px;
- margin: auto;
+
+.about-label {
+ font-size: 0.75rem;
+ font-weight: bold;
+ display: block;
+ margin: 0 0 0.5rem;
+ padding: 0;
}
-.subWorksHeader {
- font-family: "Raleway", serif;
- font-size: 2rem;
- margin-left: auto;
- margin-right: auto;
- width: 70%;
- transition: transform 0.5s;
- transition-duration: 0.5s;
- backface-visibility: hidden;
- -webkit-font-smoothing: subpixel-antialiased;
-}
-.subWorksList {
- list-style: none;
+
+.about-value {
+ font-size: 1rem;
+ font-weight: light;
+ display: block;
+ margin: 0 0 1rem;
padding: 0;
- text-align: center;
}
-.subWorksItem {
- display: inline-block;
- padding: 2rem 1.75rem;
- margin: 1rem;
- border-radius: 0.5rem;
- font-family: "Quicksand", sans-serif;
+
+.projects {
+ overflow: hidden;
+}
+
+.projects-container {
+ position: relative;
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
}
-.subWorksItem > h4 {
- font-size: 3rem;
- margin: 1rem 0;
+
+.projects-ribbon {
+ margin: 0;
+ height: 70vh;
+ background-image: url("images/newspaper.webp");
+ background-color: var(--r);
+ top: 50%;
+ transform: translateY(20%);
}
-.subWorksItemHeader {
- text-align: left;
+
+.projects-ribbon h1 {
+ font-family: EgyptianEF, serif;
font-size: 5rem;
-}
-.subWorksFooter {
- font-size: 4rem;
- font-family: "Quicksand", sans-serif;
+ font-weight: bold;
+ line-height: 1;
text-align: center;
}
-footer {
- padding-top: 7vh;
- font-family: "Quicksand", sans-serif;
- font-size: 0.9em;
- display: block;
- background-color: var(--p);
- color: var(--s);
+
+.projects-ribbon-border {
+ position: absolute;
+ width: 100%;
+ height: 50vh;
+ pointer-events: none;
}
-footer ::selection {
- color: var(--p);
- background: var(--s);
+
+.projects-ribbon-border img {
+ width: 100%;
+ height: 80%;
}
-.footerContent {
- max-width: 1312px;
- margin: auto;
+
+.projects-list {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 55vh;
+ width: 64rem;
+ margin: 0 auto;
+ flex-wrap: wrap;
}
-.logo {
+
+.projects-item {
+ font-family: "Special Elite", typewriter, monospace;
text-align: center;
- font-size: xxx-large;
margin: 0;
- color: var(--s);
- padding-bottom: 4vh;
+ padding: 0 0.5rem;
+ max-width: 50%;
}
-.footerLink {
- padding-left: 15%;
- padding-right: 15%;
- padding-bottom: 3%;
-}
-footer a {
- color: var(--s);
-}
-footer a:hover {
- color: var(--s);
+
+.projects-item a {
+ background-image: none;
}
-footer a::before {
- background-color: var(--s);
+
+.projects-item img {
+ max-width: 100%;
+ max-height: 35vh;
}
-.footerLink > ul {
+
+.projects-item ul {
+ list-style: none;
padding: 0;
+ margin: 0;
+ width: 100%;
}
-li.footerSocial {
- position: relative;
+
+.projects-item ul li {
display: inline-block;
+ margin: 0;
padding: 0;
+ text-align: left;
+}
+
+.projects-item ul > li + li {
padding-left: 2%;
- padding-right: 2%;
- font-size: x-large;
}
-.footerSocial > a {
- color: var(--s);
+
+section.contact {
+ position: relative;
+ background-color: var(--s);
+ color: var(--p);
+ height: 100vh;
}
-.footerSocial > a:hover {
- color: var(--s);
+
+.video-curtain {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 10; /* Adjust as needed */
+ pointer-events: none;
}
-.footerSocial > a::before {
- background-color: var(--s);
+
+.video-curtain video {
+ display: none;
}
-.footerLegal {
- font-family: "Cutive Mono", monospace;
+
+.contact-container {
+ left: 50%;
+ max-width: 75vw;
+ position: absolute;
text-align: center;
- padding-bottom: 3vh;
- font-size: x-small;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ z-index: 5;
+}
+
+.contact-link {
+ font-family: "Special Elite", typewriter, monospace;
+ font-size: 2rem;
+ font-weight: 500;
+ background-image: none;
+ text-decoration: underline;
}
-.separator {
- z-index: -1;
- height: 15vh;
- margin: auto;
+.contact-container h1 {
+ font-family: EgyptianEF, serif;
+ font-size: 5rem;
+ font-weight: bold;
+ font-kerning: 0.1rem;
+ line-height: 1;
text-align: center;
}
-@keyframes typing {
- 0% {
- width: 0%;
+footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ align-items: baseline;
+}
+
+footer .footer-social {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+footer a {
+ background-image: none;
+ color: var(--p);
+ font-family: "Special Elite", typewriter, monospace;
+ text-decoration: underline;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .landing.in-view path {
+ animation: draw 2.75s forwards;
+ stroke-dashoffset: var(--path-length);
}
- 30% {
- width: 35%;
+
+ .transition.in-view path {
+ animation: draw 0.4s forwards;
+ stroke-dashoffset: var(--path-length);
}
- 50% {
- width: 35%;
+
+ .about-curtain {
+ position: absolute;
+ z-index: 3;
+ height: 100%;
+ top: 0;
+ background-color: var(--p);
}
- 100% {
+
+ .about-curtain-top {
+ left: calc(50% - var(--path-width) / 2);
+ width: var(--path-width);
+ }
+
+ .about-curtain-left,
+ .about-curtain-right {
+ width: calc(50% - var(--path-width) / 2);
+ }
+
+ .about-curtain-left {
+ left: 0;
+ }
+
+ .about-curtain-right {
+ right: 0;
+ }
+
+ .about.in-view .about-curtain-top {
+ animation: slide-down 0.5s forwards;
+ animation-delay: 0.2s;
+ }
+
+ .about.in-view .about-curtain-left {
+ animation: slide-left 1.5s forwards;
+ animation-delay: 0.7s;
+ }
+
+ .about.in-view .about-curtain-right {
+ animation: slide-right 1.5s forwards;
+ animation-delay: 0.7s;
+ }
+
+ .about.in-view.projects-in-view .about-curtain-right {
+ animation: undo-slide-right 0.5s;
+ }
+
+ .about.in-view.projects-in-view .about-curtain-left {
+ animation: undo-slide-left 0.5s;
+ }
+
+ .projects {
+ position: relative;
+ }
+
+ .projects-curtain {
+ position: absolute;
+ z-index: 3;
+ height: 100%;
+ top: 0;
+ background-color: var(--p);
+ }
+
+ .projects-curtain-middle {
+ top: calc(50% - var(--path-width) / 2);
+ height: var(--path-width);
width: 100%;
}
-}
-@keyframes blink-cursor {
- from,
- to {
- border-color: transparent;
+ .projects-curtain-top,
+ .projects-curtain-bottom {
+ width: 100%;
+ height: calc(50% - var(--path-width) / 2);
}
- 50% {
- border-color: var(--p);
+
+ .projects-curtain-top {
+ top: 0;
}
-}
-@keyframes rotate-last {
- 0% {
- opacity: 0;
- transform: translate3d(0, 50px, 0);
+ .projects-curtain-bottom {
+ top: 50%;
}
- 50%,
- 100% {
- opacity: 1;
- transform: translate3d(0, 0, 0);
+ .projects.in-view .projects-curtain-top {
+ animation: slide-up 1.5s forwards;
+ animation-delay: 0.7s;
}
-}
-@keyframes fadeIn {
- 0% {
- opacity: 0;
+ .projects.in-view .projects-curtain-middle {
+ animation: slide-right 0.7s forwards;
+ animation-delay: 0s;
}
- 100% {
- opacity: 1;
+
+ .projects.in-view .projects-curtain-bottom {
+ animation: slide-down 1.5s forwards;
+ animation-delay: 0.7s;
+ }
+
+ .video-curtain video {
+ display: block;
+ width: 100vw;
+ height: 100vh;
+ object-fit: fill;
+ background: transparent;
}
}
-@media only screen and (min-width: 720px) {
- .subWorksItem {
- width: 33vw;
- max-width: 565px;
- height: 470px;
- display: inline-flex;
- flex-direction: column;
+
+@media (width <= 600px) {
+ a,
+ .redacted {
+ background-image: none;
}
- .subWorksItem p {
- flex: 1 1 auto;
+
+ #landing-text {
+ font-size: 1rem;
}
-}
-@media only screen and (min-width: 1000px) {
- .worksItem {
- display: inline-flex;
- padding-bottom: 3vh;
+
+ .about {
+ height: fit-content;
+ width: 98vw;
}
- .worksItem:nth-of-type(odd) {
- text-align: left;
+
+ .about h1 {
+ font-size: 2rem;
}
- .worksContent {
- align-items: center;
- display: flex;
- padding: 1em;
+
+ .about-split {
+ width: 100%;
+ height: fit-content;
}
-}
-@media only screen and (min-width: 767px) {
- .container {
- font-size: 3rem;
- width: 725.5px;
+ .about-description {
+ font-size: 1rem;
+ max-width: 100%;
}
- .carousel-content {
+
+ .about-form {
+ width: 100%;
+ max-width: 100%;
+ grid-template-columns: 1fr;
+ }
+
+ .projects {
+ height: fit-content;
+ }
+
+ .projects-ribbon h1 {
font-size: 2rem;
}
- h1 {
- height: 5.3rem;
+
+ .projects-list {
+ width: 100%;
+ height: fit-content;
+ }
+
+ .contact-container {
+ max-width: 100vw;
}
- .sticky ~ * {
- padding-top: 80px;
+
+ .contact-container h1 {
+ font-size: 2rem;
}
}
diff --git a/index.html b/index.html
index 1f2cbf6..3f3f477 100644
--- a/index.html
+++ b/index.html
@@ -1,36 +1,53 @@
-
+
-
-
- Lucas Oberwager
-
-
-
-
-
-
-
+
+ Lucas Oberwager | Back-End Developer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
Back-End Developer.
+
+
+
+
+
Lucas Oberwager
+
This site works best with JavaScript enabled.
+
+
+
+
+
+
+
+
+
+
+
+ Lucas Oberwager
+
+
+
+
+
+
+
+
+
+
About Me
+
+
+
Back-End Developer,
+
Co-Founder of Ecobux.org ,
+
Computer Science student at Northeastern
-
-
-
-