diff --git a/index.html b/index.html index db459c0..fc1c415 100755 --- a/index.html +++ b/index.html @@ -46,75 +46,16 @@ - -
- + + A picture of me in a suit smiling
@@ -125,10 +66,10 @@

University: Carleton

Major CGPA: 11.50/12 (A+)

Languages: C/C++, Python, TypeScript

-

Skills: Linux, Git, Agile

+

Skills: Linux, Git, Testing

Work Experience: 2 years

+

Applying for: Full-time job

Location: Toronto or Remote

-

Applying for: Full-time starting Feb 2025


@@ -142,30 +83,93 @@

- + - + - - - - + + + + + + + - + + +
diff --git a/style.css b/style.css index 9aec5f6..8cbf7ea 100755 --- a/style.css +++ b/style.css @@ -1,4 +1,6 @@ -body { +:root { + font-size: 1.5rem; + /* Material Light (https://github.com/dexpota/kitty-themes/blob/master/themes/Material.conf) */ --light-color0: #212121; --light-color8: #424242; @@ -82,31 +84,10 @@ body { --alt-foreground: var(--dark-foreground); --alt-background: var(--dark-background); --alt-toggle-transform: var(--dark-toggle-transform); - - /* Actual useful styles */ - --highlight: var(--color6); - color: var(--foreground); - background: var(--background); - - --content-gap: 10rem; - - display: flex; - flex-direction: column; - align-items: center; - margin: 0; - font-family: sans-serif; - - --anim-duration: 0.25s; - - @media (prefers-reduced-motion: no-preference) { - transition: color var(--anim-duration) ease, background-color var(--anim-duration) ease; - } - - backdrop-filter: blur(0.15rem); } @media (prefers-color-scheme: dark) { - body { + :root { --main-color0: var(--dark-color0); --main-color8: var(--dark-color8); --main-color1: var(--dark-color1); @@ -148,27 +129,7 @@ body { } } -#dark-mode-toggle-label { - position: absolute; - top: 1rem; - right: 1rem; - width: 2cm; - height: 2cm; - overflow: hidden; - border-radius: 50%; - cursor: grab; - transition-duration: var(--anim-duration); -} - -#dark-mode-toggle-label:hover { - filter: brightness(85%); -} - -#dark-mode-toggle { - display: none; -} - -body:has(#dark-mode-toggle:not(:checked)) { +:root:has(#dark-mode-toggle:not(:checked)) { /* Default to light */ --color0: var(--main-color0) !important; --color8: var(--main-color8) !important; @@ -197,7 +158,7 @@ body:has(#dark-mode-toggle:not(:checked)) { } } -body:has(#dark-mode-toggle:checked) { +:root:has(#dark-mode-toggle:checked) { --color0: var(--alt-color0) !important; --color8: var(--alt-color8) !important; --color1: var(--alt-color1) !important; @@ -225,18 +186,47 @@ body:has(#dark-mode-toggle:checked) { } } +body { + /* Actual useful styles */ + --highlight: var(--color6); + color: var(--foreground); + background: var(--background); + + --content-gap: 10rem; + + height: 100dvh; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + margin: 0; + font-family: sans-serif; + + --anim-duration: 0.25s; + + @media (prefers-reduced-motion: no-preference) { + transition: color var(--anim-duration) ease, background-color var(--anim-duration) ease; + } +} + #fetch-container { display: flex; flex-direction: column; justify-content: center; - min-height: 80svh; } #fetch { display: flex; flex-direction: row; + flex-wrap: wrap; + justify-content: center; column-gap: 1rem; + row-gap: 1rem; font-family: "JetBrains Mono", "ui-monospace", "SF Mono", "Courier New", monospace; + margin: 0 1rem; + white-space: nowrap; + font-size: clamp(0.5rem, 2.5dvw, 1rem); } p { @@ -249,7 +239,9 @@ p { } #michael-photo-container { - height: 100%; + flex: 1 1 9lh; + max-width: 11lh; + aspect-ratio: 1; padding-top: 1lh; :active { @@ -258,12 +250,13 @@ p { } #michael-photo { - width: 11lh; - height: 11lh; + width: 100%; + aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 0 10%; border: 0.2rem solid var(--highlight); + @media (prefers-reduced-motion: no-preference) { transition: border ease var(--anim-duration); } @@ -315,11 +308,20 @@ span { } .links { - min-height: 20svh; display: flex; flex-direction: row; - column-gap: 5rem; + flex-wrap: wrap; + justify-content: space-between; + column-gap: 1rem; + row-gap: 1rem; + width: min(40rem, 75%); + a { + flex: 1 1 1rem; + max-width: 5rem; + display: flex; + justify-content: center; + aspect-ratio: 1; svg { transition: fill var(--anim-duration) ease; fill: var(--foreground); @@ -329,4 +331,25 @@ span { fill: var(--color8); } } + + #dark-mode-toggle-label { + flex: 1 1 1rem; + max-width: 5rem; + display: flex; + justify-content: center; + aspect-ratio: 1; + + overflow: hidden; + border-radius: 50%; + cursor: grab; + transition-duration: var(--anim-duration); + + svg:hover { + filter: brightness(85%); + } + } + + #dark-mode-toggle { + display: none; + } }