diff --git a/index.html b/index.html index 03b951a..b15289e 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,19 @@ -

nicholassurmava.com

-
- git.nicholassurmava.com - Résumé - Projects - Blog +
+
+ git.nicholassurmava.com + Résumé + Blog + Projects +
+

nicholassurmava.com

-

Stay_Tuned...

+
+
+ + + \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index fe2cc88..52aac80 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -6,6 +6,7 @@ -moz-osx-font-smoothing: grayscale; color-scheme: light dark; --white: #cfcfcf; + --gray: #979797; --black: #1a1a1a; } /* Fonts */ @@ -46,14 +47,91 @@ button { font-size: clamp(0.9rem, 1.1vw, 1rem); } body { height: 100vh; display: flex; - flex-direction: column; align-items: center; justify-content: center; color: var(--white); - background-color: black; } +.grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr);; + grid-template-rows: repeat(2, 1fr); + width: 90vw; + max-width: 900px; + aspect-ratio: 3 / 2; +} + +.section-top-left { grid-column: 1 / 4; grid-row: 1; } +.section-top-right { grid-column: 4 / 5; grid-row: 1; } +.section-bottom-left { grid-column: 1; grid-row: 2; } +.section-bottom-right { grid-column: 2 / 5; grid-row: 2; } +.section-right { + grid-column: 5; + grid-row: 1 / 3; + display: flex; + align-items: center; + justify-content: center; + writing-mode: vertical-rl; + transform: rotate(0deg); + margin: 0; +} + +.section { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + border: 1px solid var(--white); + overflow: hidden; + position: relative; +} + +.section::after { + content: ''; + position: absolute; + left: 0; + top: -100%; + width: 100%; + height: 30px; + background: rgba(255, 255, 255, 0.08); + pointer-events: none; +} + +.section:hover::after { + animation: scanline 1.2s linear infinite; +} + +@keyframes scanline { + 0% { top: -10%; } + 100% { top: 110%; } +} + +@media (max-width: 600px) { + body { + flex-direction: column; + justify-content: center; + } + .grid-container { + display: flex; + flex-direction: column; + width: 100vw; + height: 50vh; + } + .section { + border: 0; + flex: 1; + } + .section-right { + order: -1; + writing-mode: horizontal-tb; + transform: none; + } + +} + + a { color: crimson; text-decoration: none; @@ -100,7 +178,38 @@ h2.typewriter { padding: 0.5rem; } -a.disabled { +/* a.disabled { pointer-events: none; color: #666; +} */ +.disabled { + color: var(--gray); + position: relative; + cursor: default; + pointer-events: auto; +} + +.disabled::before { + content: 'Stay_Tuned...'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--white); + white-space: nowrap; + opacity: 0; + overflow: hidden; + width: 0; + border-right: 2px solid transparent; +} + +a.disabled:hover::before { + opacity: 1; + animation: + typing 2s steps(13, end) forwards, + blink 0.75s step-end infinite; +} + +a.disabled:hover { + color: transparent; } \ No newline at end of file