diff --git a/full/favicon.svg b/full/favicon.svg deleted file mode 100644 index 6e6d2f9..0000000 --- a/full/favicon.svg +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/full/index.html b/full/index.html index e9a2b1a..eb54b23 100644 --- a/full/index.html +++ b/full/index.html @@ -7,23 +7,19 @@ Ella Dunbar -
- The icon and mascot for the website. It is a hand-drawn picture of a spherical body with large eyes, a smile, and slim wavy arms and legs elladunbar.com
diff --git a/full/style.css b/full/style.css index cc835eb..32297d4 100644 --- a/full/style.css +++ b/full/style.css @@ -72,118 +72,28 @@ h6 { box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.75rem 2.5rem 0 rgba(0, 0, 0, 0.19); } -/* oklch site: https://oklch.com/ */ -/* color filters: https://angel-rs.github.io/css-color-filter-generator/ */ /* Dead Orbit */ -html:has(option[value="do"]:checked) { - --color-background: light-dark(oklch(0.8 0 0), oklch(0.45 0 0)); - --color-header-footer: light-dark(oklch(0.55 0 0), oklch(0.25 0 0)); - --color-main: light-dark(oklch(0.93 0 0), oklch(0.175 0 0)); - --color-text: light-dark(oklch(0 0 0), oklch(0.9 0 0)); - - --svg-brightness-1: 0%; - --svg-saturate-1: 100%; - --svg-invert: 0%; - --svg-sepia: 0%; - --svg-saturate-2: 100%; - --svg-hue-rotate: 0deg; - --svg-brightness-2: 0%; - --svg-contrast: 100%; - - @media (prefers-color-scheme: dark) { - --svg-brightness-1: 0%; - --svg-saturate-1: 100%; - --svg-invert: 94%; - --svg-sepia: 0%; - --svg-saturate-2: 34%; - --svg-hue-rotate: 274deg; - --svg-brightness-2: 90%; - --svg-contrast: 107%; - } +html:has(option[value="drifting"]:checked) { + --color-background: light-dark(oklch(0.95 0 0), oklch(0.45 0 0)); + --color-header-footer: light-dark(oklch(0.68 0 0), oklch(0.25 0 0)); + --color-main: light-dark(oklch(0.98 0 0), oklch(0.175 0 0)); + --color-text: light-dark(oklch(0.2 0 0), oklch(0.9 0 0)); } /* Future War Cult */ -html:has(option[value="fwc"]:checked) { +html:has(option[value="ascendant"]:checked) { --color-background: light-dark(oklch(0.4088 0.1303 281.27), oklch(0.1847 0.0503 286.27)); --color-header-footer: light-dark(oklch(0.98 0 0), oklch(0.7314 0.0725 91.4)); --color-main: light-dark(oklch(0.895 0.0916 88.17), oklch(0.3589 0.1438 281.27)); --color-text: light-dark(oklch(0.4274 0.1456 21.51), oklch(0.98 0 0)); - - --svg-brightness-1: 0%; - --svg-saturate-1: 100%; - --svg-invert: 21%; - --svg-sepia: 37%; - --svg-saturate-2: 3939%; - --svg-hue-rotate: 333deg; - --svg-brightness-2: 75%; - --svg-contrast: 97%; - - @media (prefers-color-scheme: dark) { - --svg-brightness-1: 0%; - --svg-saturate-1: 100%; - --svg-invert: 94%; - --svg-sepia: 97%; - --svg-saturate-2: 3762%; - --svg-hue-rotate: 183deg; - --svg-brightness-2: 123%; - --svg-contrast: 94%; - } } /* New Monarchy */ -html:has(option[value="nm"]:checked) { +html:has(option[value="aristocratic"]:checked) { --color-background: light-dark(oklch(0.98 0 0), oklch(0.2665 0.0841 29.27)); --color-header-footer: light-dark(oklch(0.4531 0.1712 29.27), oklch(0.3 0 0)); --color-main: light-dark(oklch(0.9 0 0), oklch(0.2299 0.05 29.27)); --color-text: light-dark(oklch(0.3 0 0), oklch(0.9 0 0)); - - --svg-brightness-1: 0%; - --svg-saturate-1: 100%; - --svg-invert: 16%; - --svg-sepia: 0%; - --svg-saturate-2: 0%; - --svg-hue-rotate: 268deg; - --svg-brightness-2: 104%; - --svg-contrast: 95%; - - @media (prefers-color-scheme: dark) { - --svg-brightness-1: 0%; - --svg-saturate-1: 100%; - --svg-invert: 94%; - --svg-sepia: 0%; - --svg-saturate-2: 34%; - --svg-hue-rotate: 274deg; - --svg-brightness-2: 90%; - --svg-contrast: 107%; - } -} - -/* Vault of Glass */ -html:has(option[value="vog"]:checked) { - --color-background: light-dark(oklch(0.93 0 0), oklch(0.3224 0.0392 145.18)); - --color-header-footer: light-dark(oklch(0.8742 0.0828 224.95), oklch(0.4306 0.0922 55.84)); - --color-main: light-dark(oklch(1 0 0), oklch(0.2091 0.0107 232.65)); - --color-text: light-dark(oklch(0.45 0 0), oklch(0.9555 0.0219 224.95)); - - --svg-brightness-1: 0%; - --svg-saturate-1: 100%; - --svg-invert: 33%; - --svg-sepia: 6%; - --svg-saturate-2: 0%; - --svg-hue-rotate: 174deg; - --svg-brightness-2: 94%; - --svg-contrast: 88%; - - @media (prefers-color-scheme: dark) { - --svg-brightness-1: 0%; - --svg-saturate-1: 100%; - --svg-invert: 89%; - --svg-sepia: 9%; - --svg-saturate-2: 467%; - --svg-hue-rotate: 175deg; - --svg-brightness-2: 106%; - --svg-contrast: 98%; - } } @@ -233,14 +143,8 @@ header { flex: 0 0 100%; } - img { - margin: 0.5rem 0.5rem 0 0.5rem; - height: 4rem; - filter: brightness(var(--svg-brightness-1)) saturate(var(--svg-saturate-1)) invert(var(--svg-invert)) sepia(var(--svg-sepia)) saturate(var(--svg-saturate-2)) hue-rotate(var(--svg-hue-rotate)) brightness(var(--svg-brightness-2)) contrast(var(--svg-contrast)); - } - strong { - margin: 0 auto 0 0; + margin: 0 auto 0 0.5rem; font-size: 1.6rem; } diff --git a/www/favicon.svg b/www/favicon.svg deleted file mode 100644 index 6e6d2f9..0000000 --- a/www/favicon.svg +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/www/index.html b/www/index.html index 8cc6896..142efa8 100644 --- a/www/index.html +++ b/www/index.html @@ -1 +1 @@ -Ella Dunbar
The icon and mascot for the website. It is a hand-drawn picture of a spherical body with large eyes, a smile, and slim wavy arms and legselladunbar.com

Welcome

Hi, I’m Ella. Welcome to my really really awesome website!! You should probably enjoy it, or you won’t enjoy it very much.

About Me

I graduated with a Bachelor’s of Science in Electrical and Computer Engineering (what a mouthful...) from Rice University in 2024. I now do data science as a Neurobiology researcher at The University of Alabama at Birmingham.

In computer world, I enjoy programming mostly in Python/Hy and Rust. I’ve written a few tree-sitter grammars (tree-sitter-hy and tree-sitter-zanscript) to enable better syntax highlighting in my editor, and I’ve made a small project (to-braille) to print images using Unicode braille characters. I prefer Unix-like operating systems and usually work out of a terminal emulator.

At Rice, my senior capstone project was Sea++ where my team created an autonomous solar-powered sailboat from scratch. I especially enjoyed implementing a more robust communication protocol for our microcontrollers. The protocol was built on top of serial with checksumming and error state communication. In other classes, I designed and programmed a custom bicycle spedometer for Beer Bike athletes, and I spent a lot of time playing with images and deep learning models.

When I’m not working, I spend a lot of time reading Hacker News, listening to music, and playing Super Smash Bros. Melee. Out of doors, I love climbing and backpacking, and Red River Gorge, the Ouachita Mountains, and Big Bend National Park are some of my favorite spots.

Links

More Serious

Less Serious

\ No newline at end of file +Ella Dunbar
elladunbar.com

Welcome

Hi, I’m Ella. Welcome to my really really awesome website!! You should probably enjoy it, or you won’t enjoy it very much.

About Me

I graduated with a Bachelor’s of Science in Electrical and Computer Engineering (what a mouthful...) from Rice University in 2024. I now do data science as a Neurobiology researcher at The University of Alabama at Birmingham.

In computer world, I enjoy programming mostly in Python/Hy and Rust. I’ve written a few tree-sitter grammars (tree-sitter-hy and tree-sitter-zanscript) to enable better syntax highlighting in my editor, and I’ve made a small project (to-braille) to print images using Unicode braille characters. I prefer Unix-like operating systems and usually work out of a terminal emulator.

At Rice, my senior capstone project was Sea++ where my team created an autonomous solar-powered sailboat from scratch. I especially enjoyed implementing a more robust communication protocol for our microcontrollers. The protocol was built on top of serial with checksumming and error state communication. In other classes, I designed and programmed a custom bicycle spedometer for Beer Bike athletes, and I spent a lot of time playing with images and deep learning models.

When I’m not working, I spend a lot of time reading Hacker News, listening to music, and playing Super Smash Bros. Melee. Out of doors, I love climbing and backpacking, and Red River Gorge, the Ouachita Mountains, and Big Bend National Park are some of my favorite spots.

Links

More Serious

Less Serious

\ No newline at end of file diff --git a/www/style.css b/www/style.css index 802287b..9dae9be 100644 --- a/www/style.css +++ b/www/style.css @@ -1 +1 @@ -/* https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; } p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* our stuff */ :root { /* auto light/dark based on user choice */ color-scheme: light dark; } .drop-shadow { box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.75rem 2.5rem 0 rgba(0, 0, 0, 0.19); } /* oklch site: https://oklch.com/ */ /* color filters: https://angel-rs.github.io/css-color-filter-generator/ */ /* Dead Orbit */ html:has(option[value="do"]:checked) { --color-background: light-dark(oklch(0.8 0 0), oklch(0.45 0 0)); --color-header-footer: light-dark(oklch(0.55 0 0), oklch(0.25 0 0)); --color-main: light-dark(oklch(0.93 0 0), oklch(0.175 0 0)); --color-text: light-dark(oklch(0 0 0), oklch(0.9 0 0)); --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 0%; --svg-sepia: 0%; --svg-saturate-2: 100%; --svg-hue-rotate: 0deg; --svg-brightness-2: 0%; --svg-contrast: 100%; @media (prefers-color-scheme: dark) { --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 94%; --svg-sepia: 0%; --svg-saturate-2: 34%; --svg-hue-rotate: 274deg; --svg-brightness-2: 90%; --svg-contrast: 107%; } } /* Future War Cult */ html:has(option[value="fwc"]:checked) { --color-background: light-dark(oklch(0.4088 0.1303 281.27), oklch(0.1847 0.0503 286.27)); --color-header-footer: light-dark(oklch(0.98 0 0), oklch(0.7314 0.0725 91.4)); --color-main: light-dark(oklch(0.895 0.0916 88.17), oklch(0.3589 0.1438 281.27)); --color-text: light-dark(oklch(0.4274 0.1456 21.51), oklch(0.98 0 0)); --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 21%; --svg-sepia: 37%; --svg-saturate-2: 3939%; --svg-hue-rotate: 333deg; --svg-brightness-2: 75%; --svg-contrast: 97%; @media (prefers-color-scheme: dark) { --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 94%; --svg-sepia: 97%; --svg-saturate-2: 3762%; --svg-hue-rotate: 183deg; --svg-brightness-2: 123%; --svg-contrast: 94%; } } /* New Monarchy */ html:has(option[value="nm"]:checked) { --color-background: light-dark(oklch(0.98 0 0), oklch(0.2665 0.0841 29.27)); --color-header-footer: light-dark(oklch(0.4531 0.1712 29.27), oklch(0.3 0 0)); --color-main: light-dark(oklch(0.9 0 0), oklch(0.2299 0.05 29.27)); --color-text: light-dark(oklch(0.3 0 0), oklch(0.9 0 0)); --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 16%; --svg-sepia: 0%; --svg-saturate-2: 0%; --svg-hue-rotate: 268deg; --svg-brightness-2: 104%; --svg-contrast: 95%; @media (prefers-color-scheme: dark) { --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 94%; --svg-sepia: 0%; --svg-saturate-2: 34%; --svg-hue-rotate: 274deg; --svg-brightness-2: 90%; --svg-contrast: 107%; } } /* Vault of Glass */ html:has(option[value="vog"]:checked) { --color-background: light-dark(oklch(0.93 0 0), oklch(0.3224 0.0392 145.18)); --color-header-footer: light-dark(oklch(0.8742 0.0828 224.95), oklch(0.4306 0.0922 55.84)); --color-main: light-dark(oklch(1 0 0), oklch(0.2091 0.0107 232.65)); --color-text: light-dark(oklch(0.45 0 0), oklch(0.9555 0.0219 224.95)); --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 33%; --svg-sepia: 6%; --svg-saturate-2: 0%; --svg-hue-rotate: 174deg; --svg-brightness-2: 94%; --svg-contrast: 88%; @media (prefers-color-scheme: dark) { --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 89%; --svg-sepia: 9%; --svg-saturate-2: 467%; --svg-hue-rotate: 175deg; --svg-brightness-2: 106%; --svg-contrast: 98%; } } /* https://smolweb.org/subset.html */ /* structural */ body { background: var(--color-background); margin: 0 auto; max-width: max(768px, 80ch); .drop-shadow { display: flex; flex-direction: column; min-height: 100lvh; } } html { font-family: "SF Pro Display", -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* respect user font size */ font-size: 100%; font-weight: 400; color: var(--color-text); } /* semantic */ header { background: var(--color-header-footer); text-wrap: wrap; display: flex; flex-wrap: wrap; align-items: center; hr { flex: 0 0 100%; } img { margin: 0.5rem 0.5rem 0 0.5rem; height: 4rem; filter: brightness(var(--svg-brightness-1)) saturate(var(--svg-saturate-1)) invert(var(--svg-invert)) sepia(var(--svg-sepia)) saturate(var(--svg-saturate-2)) hue-rotate(var(--svg-hue-rotate)) brightness(var(--svg-brightness-2)) contrast(var(--svg-contrast)); } strong { margin: 0 auto 0 0; font-size: 1.6rem; } label { margin: 0.5rem 0.5rem 0; font-size: 0.8rem; } nav { margin: 0.5rem; } } footer { background: var(--color-header-footer); font-size: 0.8rem; text-wrap: wrap; p { margin: 0.5rem; } } main { background: var(--color-main); padding: 1rem; flex: 1; } /* textual */ h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; } p { margin: 1rem 0; } /* hypertextual */ /* listing */ /* forms */ /* basic table */ /* image */ /* presentation */ /* metainformation and linking */ \ No newline at end of file +/* https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; } p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* our stuff */ :root { /* auto light/dark based on user choice */ color-scheme: light dark; } .drop-shadow { box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.75rem 2.5rem 0 rgba(0, 0, 0, 0.19); } /* Dead Orbit */ html:has(option[value="drifting"]:checked) { --color-background: light-dark(oklch(0.95 0 0), oklch(0.45 0 0)); --color-header-footer: light-dark(oklch(0.68 0 0), oklch(0.25 0 0)); --color-main: light-dark(oklch(0.98 0 0), oklch(0.175 0 0)); --color-text: light-dark(oklch(0.2 0 0), oklch(0.9 0 0)); } /* Future War Cult */ html:has(option[value="ascendant"]:checked) { --color-background: light-dark(oklch(0.4088 0.1303 281.27), oklch(0.1847 0.0503 286.27)); --color-header-footer: light-dark(oklch(0.98 0 0), oklch(0.7314 0.0725 91.4)); --color-main: light-dark(oklch(0.895 0.0916 88.17), oklch(0.3589 0.1438 281.27)); --color-text: light-dark(oklch(0.4274 0.1456 21.51), oklch(0.98 0 0)); } /* New Monarchy */ html:has(option[value="aristocratic"]:checked) { --color-background: light-dark(oklch(0.98 0 0), oklch(0.2665 0.0841 29.27)); --color-header-footer: light-dark(oklch(0.4531 0.1712 29.27), oklch(0.3 0 0)); --color-main: light-dark(oklch(0.9 0 0), oklch(0.2299 0.05 29.27)); --color-text: light-dark(oklch(0.3 0 0), oklch(0.9 0 0)); } /* https://smolweb.org/subset.html */ /* structural */ body { background: var(--color-background); margin: 0 auto; max-width: max(768px, 80ch); .drop-shadow { display: flex; flex-direction: column; min-height: 100lvh; } } html { font-family: "SF Pro Display", -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* respect user font size */ font-size: 100%; font-weight: 400; color: var(--color-text); } /* semantic */ header { background: var(--color-header-footer); display: flex; flex-wrap: wrap; align-items: center; hr { flex: 0 0 100%; } strong { margin: 0 auto 0 0.5rem; font-size: 1.6rem; } label { margin: 0.5rem 0.5rem 0; font-size: 0.8rem; } nav { margin: 0.5rem; } } footer { background: var(--color-header-footer); font-size: 0.8rem; p { margin: 0.5rem; } } main { background: var(--color-main); padding: 1rem; flex: 1; } /* textual */ h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; } p { margin: 1rem 0; } /* hypertextual */ /* listing */ /* forms */ /* basic table */ /* image */ /* presentation */ /* metainformation and linking */ \ No newline at end of file