diff --git a/package-lock.json b/package-lock.json
index 82765fe..e61c120 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
"eslint-plugin-svelte": "^2.35.0",
"lodash": "^4.17.21",
"mdsvex": "^0.11.0",
- "phosphor-svelte": "^1.3.0",
+ "phosphor-svelte": "^2.0.1",
"prettier": "^3.1.0",
"prettier-plugin-svelte": "^3.1.0",
"sass": "^1.77.0",
@@ -2063,9 +2063,9 @@
}
},
"node_modules/phosphor-svelte": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/phosphor-svelte/-/phosphor-svelte-1.3.0.tgz",
- "integrity": "sha512-aW6/O2+j3TCA8oku8CwkMUvy00OHUa5CqpeqBr/Y9nT8wT/eTKZIBGt2G+JJddEHs0KkSBr7oIYdJUsUJY80fQ==",
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/phosphor-svelte/-/phosphor-svelte-2.0.1.tgz",
+ "integrity": "sha512-2Ryvaf1sfCNOF0zTQVghtxOs/6JKn9MV+e9uluNAT9wAosgNYnaBD210WcFGRrva1sF8cddv7EWSS//ITNN4mg==",
"dev": true,
"peerDependencies": {
"svelte": ">=3"
diff --git a/package.json b/package.json
index e8132c3..02e671f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
"eslint-plugin-svelte": "^2.35.0",
"lodash": "^4.17.21",
"mdsvex": "^0.11.0",
- "phosphor-svelte": "^1.3.0",
+ "phosphor-svelte": "^2.0.1",
"prettier": "^3.1.0",
"prettier-plugin-svelte": "^3.1.0",
"sass": "^1.77.0",
diff --git a/src/_vars.scss b/src/_vars.scss
index 35266b9..139bf37 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -1,2 +1,7 @@
+@import './color-palettes/pink.scss';
+
$size-container: 640px;
$size-modal: 480px;
+
+$min-w-supported: 370px;
+$size-full-w: max(100vw, $min-w-supported);
diff --git a/src/app.scss b/src/app.scss
index 0c2d298..02fa2c5 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,33 +1,6 @@
-html {
- --color-primary-h: 218;
- --color-primary-s: 81%;
- --color-primary-l: 24%;
- --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
- --color-secondary-h: 100;
- --color-secondary-s: 81%;
- --color-secondary-l: 24%;
- --color-secondary: hsl(
- var(--color-secondary-h),
- var(--color-secondary-s),
- var(--color-secondary-l)
- );
- --color-tertiary-h: 191;
- --color-tertiary-s: 55%;
- --color-tertiary-l: 53%;
- --color-tertiary: hsl(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l));
- --color-quaternary-h: 241;
- --color-quaternary-s: 48%;
- --color-quaternary-l: 41%;
- --color-quaternary: hsl(
- var(--color-quaternary-h),
- var(--color-quaternary-s),
- var(--color-quaternary-l)
- );
- --color-quinary-h: 237;
- --color-quinary-s: 97%;
- --color-quinary-l: 27%;
- --color-quinary: hsl(var(--color-quinary-h), var(--color-quinary-s), var(--color-quinary-l));
+@import './vars';
+html {
--color-text-h: 0;
--color-text-s: 0%;
--color-text-l: 0%;
@@ -61,6 +34,8 @@ html {
background-color: var(--color-bg);
color: var(--color-text);
+
+ min-width: $min-w-supported;
}
/* Reset */
diff --git a/src/color-palettes/beach.scss b/src/color-palettes/beach.scss
new file mode 100644
index 0000000..93e6211
--- /dev/null
+++ b/src/color-palettes/beach.scss
@@ -0,0 +1,7 @@
+$color-primary: hsla(218, 80%, 24%, 1);
+$color-primary-text: hsla(0, 0%, 100%, 1);
+$color-highlight: hsla(196, 45%, 54%, 1);
+$color-secondary-text: hsla(0, 0%, 0%, 1);
+$color-accent: hsla(199, 72%, 41%, 1);
+$color-secondary: hsla(30, 76%, 82%, 1);
+$color-background: hsla(18, 31%, 94%, 1);
diff --git a/src/color-palettes/blue.scss b/src/color-palettes/blue.scss
new file mode 100644
index 0000000..2f63fa2
--- /dev/null
+++ b/src/color-palettes/blue.scss
@@ -0,0 +1,7 @@
+$color-primary: hsla(218, 80%, 24%, 1);
+$color-primary-text: hsla(0, 0%, 100%, 1);
+$color-secondary: hsla(179, 49%, 83%, 1);
+$color-secondary-text: hsla(0, 0%, 0%, 1);
+$color-accent: hsla(192, 50%, 59%, 1);
+$color-background: hsla(205, 100%, 90%, 1);
+$color-highlight: hsla(202, 57%, 60%, 1);
diff --git a/src/color-palettes/pink.scss b/src/color-palettes/pink.scss
new file mode 100644
index 0000000..b3183ed
--- /dev/null
+++ b/src/color-palettes/pink.scss
@@ -0,0 +1,7 @@
+$color-primary: hsla(218, 80%, 24%, 1);
+$color-primary-text: hsla(0, 0%, 100%, 1);
+$color-highlight: hsla(273, 45%, 65%, 1);
+$color-secondary-text: hsla(0, 0%, 0%, 1);
+$color-background: hsla(336, 60%, 90%, 1);
+$color-secondary: hsla(353, 78%, 80%, 1);
+$color-accent: hsla(331, 32%, 50%, 1);
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..86c81b0
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,12 @@
+declare module '*format=jpeg' {
+ const out;
+ export default out;
+}
+declare module '*format=webp' {
+ const out;
+ export default out;
+}
+declare module '*format=avif' {
+ const out;
+ export default out;
+}
diff --git a/src/lib/Button.svelte b/src/lib/Button.svelte
index 2918f58..ff70121 100644
--- a/src/lib/Button.svelte
+++ b/src/lib/Button.svelte
@@ -11,17 +11,19 @@
+ Hi! I'm a software engineer with a diverse technical toolkit: Linux enthusiast, polyglot + programmer, home chef, and (when time allows) an amateur cyclist. Currently, I'm building + microservices and polished UIs at Tailwind alongside a fantastic team. +
+ ++ My focus is building seamless web applications, and I excel in both front-end and back-end + development. My experience includes TypeScript, React, SvelteKit, TailwindCSS, Rust, Docker, SQL, + and AWS technologies (DynamoDB, Lambda, EventBridge, and more). +
+ ++ I'm an active contributor to the open-source world: check out my Github profile! For a closer look at my work, visit my portfolio where I highlight my + favorite projects. I sometimes write about the tools I use or challenges I've solved on my + blog. I'm always open to feedback, reach out to me through my socials linked + below. +
+ + + + diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte index c0508d9..6525cb3 100644 --- a/src/routes/Footer.svelte +++ b/src/routes/Footer.svelte @@ -16,7 +16,6 @@ @import '../vars'; footer { - width: 100vw; padding: 2rem; display: flex; flex-direction: column; diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte index 5c03d57..6c82fd2 100644 --- a/src/routes/Header.svelte +++ b/src/routes/Header.svelte @@ -45,4 +45,8 @@ width: 12rem; align-self: flex-start; } + .logo picture { + min-width: 6rem; + min-height: 3rem; + } diff --git a/src/typography.css b/src/typography.scss similarity index 94% rename from src/typography.css rename to src/typography.scss index cd8adea..6a48620 100644 --- a/src/typography.css +++ b/src/typography.scss @@ -1,3 +1,5 @@ +@import './vars'; + h1 { font-size: 2.2rem; } @@ -17,7 +19,7 @@ h6 { font-size: 1.125rem; } a { - color: var(--color-primary); + color: $color-primary; font-weight: 600; text-decoration-color: transparent; opacity: 0.8;