From 2a1f15896d5c08335c0a1f942149aab5a9cad9a6 Mon Sep 17 00:00:00 2001 From: Kaan Barmore-Genc Date: Tue, 7 May 2024 23:33:10 -0500 Subject: [PATCH] Add color palettes and icons for the home page --- package-lock.json | 8 +- package.json | 2 +- src/_vars.scss | 5 + src/app.scss | 33 +----- src/color-palettes/beach.scss | 7 ++ src/color-palettes/blue.scss | 7 ++ src/color-palettes/pink.scss | 7 ++ src/global.d.ts | 12 +++ src/lib/Button.svelte | 8 +- src/routes/+layout.svelte | 4 +- src/routes/+page.md | 52 ---------- src/routes/+page.svelte | 131 ++++++++++++++++++++++++ src/routes/Footer.svelte | 1 - src/routes/Header.svelte | 4 + src/{typography.css => typography.scss} | 4 +- 15 files changed, 192 insertions(+), 93 deletions(-) create mode 100644 src/color-palettes/beach.scss create mode 100644 src/color-palettes/blue.scss create mode 100644 src/color-palettes/pink.scss create mode 100644 src/global.d.ts delete mode 100644 src/routes/+page.md create mode 100644 src/routes/+page.svelte rename src/{typography.css => typography.scss} (94%) 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 @@ {/if} - diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..33012bd --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,131 @@ + + + + + + Kaan, wearing a beanie, in front of some shrubbery. + + +

Kaan Barmore-Genç

+ +

+ 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;