Add color palettes and icons for the home page

2024-05-07 23:33:10 -05:00 · 2024-05-07 23:33:10 -05:00 · 2a1f15896d
parent f75f8a5bf0
commit 2a1f15896d
15 changed files with 192 additions and 93 deletions
--- 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"
--- 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",
--- 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);
--- 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 */
--- a/src/color-palettes/beach.scss
+++ 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);
--- a/src/color-palettes/blue.scss
+++ 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);
--- a/src/color-palettes/pink.scss
+++ 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);
--- a/src/global.d.ts
+++ 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;
+}
--- a/src/lib/Button.svelte
+++ b/src/lib/Button.svelte
@ -11,17 +11,19 @@
 	<a class={className} {href}><slot /></a>
 {/if}

-<style>
+<style lang="scss">
+	@import '../vars';
+
 	a,
 	button {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		color: hsl(var(--color-text-h), var(--color-text-s), calc(100% - var(--color-text-l)));
+		color: $color-primary-text;
 		font-weight: 600;
 		text-decoration: none;
 		opacity: 0.8;
-		background-color: var(--color-primary);
+		background-color: $color-primary;
 		padding: 0.5rem 1rem;
 		clip-path: var(--clip-path-button);
 		transition: all var(--animation-speed) var(--animation-type);
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
 	import '../app.scss';
-	import '../typography.css';
+	import '../typography.scss';
 	import '../prism/gruvbox/light.css';

 	import Spacer from '$lib/Spacer.svelte';
@ -20,7 +20,7 @@

 	main {
 		margin: 0 0 6rem 0;
-		max-width: min($size-container, 100vw);
+		max-width: min($size-container, $size-full-w);
 		display: flex;
 		flex-direction: column;
 		padding: 0 2rem;
--- a/src/routes/+page.md
+++ b/src/routes/+page.md
@ -1,52 +0,0 @@
-<script>
-  import Avif from "./profile.avif";
-  import Jpeg from "./profile.avif?format=jpeg";
-  import WebP from "./profile.avif?format=webp";
-</script>
-
-<picture>
-  <source srcset={Avif} type="image/avif">
-  <source srcset={WebP} type="image/webp">
-  <img src={Jpeg} class="circle" alt="Kaan, wearing a beanie, in front of some shrubbery." style="max-width:20rem">
-</picture>
-
-<h1>Kaan Barmore-Genç</h1>
-
-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](https://tailwindapp.com) 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](https://github.com/SeriousBug)! For a closer look at my work,
-visit my [portfolio](/portfolio/) where I
-highlight my favorite projects. I sometimes write about the tools
-I use or challenges I've solved on my [blog](/posts/). I'm always open to feedback, reach out to me through my socials linked below.
-
-<div class="socials">
-  <a target="_blank" rel="noopener" href="mailto:kaan@bgenc.net">Email</a>
-  <a target="_blank" rel="noopener me" href="https://github.com/SeriousBug">Github</a>
-  <a target="_blank" rel="noopener me" href="https://fosstodon.org/@kaan">Mastodon</a>
-  <a target="_blank" rel="noopener me" href="https://www.linkedin.com/in/kaan-barmore-genc">LinkedIn</a>
-  <a target="_blank" rel="noopener me" href="/static/cv.pdf">CV</a>
-</div>
-
-<style>
-  picture {
-    
-    max-width: 320px;
-    max-height: 320px;
-    margin: 0 auto;
-    clip-path: var(--clip-path);
-  }
-
-  h1 {
-    width: 100%;
-    text-align: center;
-  }
-</style>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -0,0 +1,131 @@
+<script>
+	import Avif from './profile.avif';
+	import Jpeg from './profile.avif?format=jpeg';
+	import WebP from './profile.avif?format=webp';
+
+	import {
+		EnvelopeSimple,
+		FilePlus,
+		GithubLogo,
+		LinkedinLogo,
+		MastodonLogo,
+	} from 'phosphor-svelte';
+</script>
+
+<picture>
+	<source srcset={Avif} type="image/avif" />
+	<source srcset={WebP} type="image/webp" />
+	<img
+		src={Jpeg}
+		class="circle"
+		alt="Kaan, wearing a beanie, in front of some shrubbery."
+		style="max-width:20rem"
+	/>
+</picture>
+
+<h1>Kaan Barmore-Genç</h1>
+
+<p>
+	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 <a
+		target="blank"
+		rel="noreferrer"
+		href="https://tailwindapp.com">Tailwind</a
+	> alongside a fantastic team.
+</p>
+
+<p>
+	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).
+</p>
+
+<p>
+	I'm an active contributor to the open-source world: check out my <a
+		href="https://github.com/SeriousBug"
+		target="_blank"
+		rel="noreferrer me">Github profile</a
+	>! For a closer look at my work, visit my <a href="/portfolio/">portfolio</a> where I highlight my
+	favorite projects. I sometimes write about the tools I use or challenges I've solved on my
+	<a href="/posts/">blog</a>. I'm always open to feedback, reach out to me through my socials linked
+	below.
+</p>
+
+<ul class="socials">
+	<li>
+		<a target="_blank" rel="noreferrer me" href="mailto:kaan@bgenc.net">
+			<EnvelopeSimple aria-hidden />
+			<span>Email</span>
+		</a>
+	</li>
+	<li>
+		<a target="_blank" rel="noreferrer me" href="https://github.com/SeriousBug">
+			<GithubLogo aria-hidden />
+			<span>Github</span>
+		</a>
+	</li>
+	<li>
+		<a target="_blank" rel="noreferrer me" href="https://fosstodon.org/@kaan">
+			<MastodonLogo aria-hidden />
+			<span>Mastodon</span>
+		</a>
+	</li>
+	<li>
+		<a target="_blank" rel="noreferrer me" href="https://www.linkedin.com/in/kaan-barmore-genc">
+			<LinkedinLogo aria-hidden />
+			<span>LinkedIn</span>
+		</a>
+	</li>
+	<li>
+		<a target="_blank" href="/static/cv.pdf">
+			<FilePlus />
+			<span>CV</span>
+		</a>
+	</li>
+</ul>
+
+<style lang="scss">
+	@import '../vars';
+
+	picture {
+		max-width: 320px;
+		max-height: 320px;
+		margin: 0 auto;
+		clip-path: var(--clip-path);
+	}
+
+	.socials {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.socials li {
+		list-style-type: none;
+	}
+
+	.socials a {
+		display: flex;
+		gap: 0.5rem;
+		background-color: $color-secondary;
+		color: $color-secondary-text;
+		padding: 0.5rem 1rem;
+		min-width: 8rem;
+		clip-path: var(--clip-path-button);
+		opacity: 0.8;
+		transition: all var(--animation-speed) var(--animation-type);
+		user-select: none;
+		text-decoration: none;
+	}
+	.socials a:hover {
+		opacity: 1;
+	}
+
+	h1 {
+		width: 100%;
+		text-align: center;
+	}
+</style>
--- 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;
--- 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;
+	}
 </style>
--- a/src/typography.scss
+++ 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;