feat: review design with a bit of neo brutalism (#88)

* feat: review design with a bit of neo brutalism * feat: new fonts * style: over sharp * feat: hover effect * feat: review text * feat: review colors * style: footer * feat: review size and border * feat: review footer * feat: review * feat: spacing * feat: narrow menu
peterpeterparker · Jun 30, 2024 · 5945d4c · 5945d4c
1 parent a3275d5
commit 5945d4c
Show file tree

Hide file tree

Showing 63 changed files with 369 additions and 1,610 deletions.
diff --git a/src/lib/components/about.svelte b/src/lib/components/about.svelte
@@ -9,61 +9,91 @@
 			aria-hidden="true"
 			loading="lazy"
 			role="presentation"
-			src="/icons/icon-256x256.png"
+			src="/images/david.webp"
 		/>
 	</h2>
 
 	<p>Hi there! It's great to meet you! 👋</p>
+
 	<p>I'm a freelance web developer and contractor based in Zürich, Switzerland.</p>
 
 	<p>
-		My expertise lies in
-		<mark> <a href="https://svelte.dev/" rel="noopener noreferrer">Svelte</a></mark>,
-		<mark> <a href="https://angular.io" rel="noopener noreferrer">Angular</a></mark>,
-		<mark>
-			<a href="https://reactjs.org" rel="noopener noreferrer">React</a>
-		</mark>
+		I build performant, user-centric web applications. I develop both visually appealing apps and
+		kick-ass architecture layers. Clients often hire me to create prototypes, products, or even
+		entire ecosystems from scratch.
+	</p>
+
+	<p>
+		My frontend skills include <a
+			href="https://svelte.dev/"
+			rel="noopener noreferrer"
+			target="_blank">Svelte</a
+		>,
+		<a href="https://angular.io" rel="noopener noreferrer" target="_blank">Angular</a>,
+		<a href="https://reactjs.org" rel="noopener noreferrer" target="_blank">React</a>
 		and
-		<mark>
-			<a href="https://stenciljs.com" rel="noopener noreferrer">StencilJS</a>
-		</mark>, but I'm particularly passionate about developing agnostic JavaScript/TypeScript
-		solutions.
+		<a href="https://stenciljs.com" rel="noopener noreferrer" target="_blank">StencilJS</a>, but I'm
+		passionate about framework-agnostic agnostic solutions using TypeScript.
 	</p>
+
+	<p>
+		I prefer decentralized solutions over using big tech cloud providers, which is why I have a
+		keen interest in blockchain networks, particularly the <a
+			href="https://internetcomputer.org/"
+			rel="noopener noreferrer"
+			target="_blank">Internet Computer</a
+		>.
+	</p>
+
 	<p>
-		I believe in the principles of decentralization and data ownership, which is why I have a keen
-		interest in blockchain networks. As a proud supporter of the <mark>
-			<a href="https://internetcomputer.org/" rel="noopener noreferrer">Internet Computer</a>
-		</mark>, I see tremendous potential in its future.
+		While I don't handle any backend work for clients, I have developed a few
+		smart contracts using <a
+			href="https://www.rust-lang.org"
+			rel="noopener noreferrer"
+			target="_blank">Rust</a
+		> for my personal projects.
 	</p>
+
 	<p>
 		In addition to my technical skills, I have experience in project management, business
 		requirements analysis, and UX design from a developer's perspective. I hold degrees in Computer
-		Engineering and an Executive Master's in Business Administration. I'm also fluent in French,
-		German, and English.
+		Engineering and an Executive Master's in Business Administration. I'm fluent in French, German,
+		and English.
+	</p>
+
+	<p>
+		I've launched several open-source personal projects that failed, but I gained valuable
+		experience in how to launch a tech-focused project and build communities without spending money
+		on advertisement.
 	</p>
+
 	<p>
-		When I'm not busy coding, you can often find me running on mountain trails or along the river.
-		It's my way of finding peace and staying active. ⛰🏃
+		When I'm not busy coding, you can often find me running on mountain trails for a few hours on
+		the weekend. 🏔️🏃
 	</p>
+
 	<p>
-		If you have a web or mobile project in mind, feel free to
-		<a href="/#contact" rel="noopener noreferrer">reach out!</a> I would be more than happy to discuss
-		how I can contribute to the success of your project.
+		If you need help or have a project in mind, feel free to <a
+			href="/#contact"
+			rel="noopener noreferrer">get in touch!</a
+		>
 	</p>
 </Section>
 
 <style lang="scss">
 	img {
-		box-shadow: 3px 3px black;
-		border: 1px solid black;
+		border: 0.25rem solid black;
 		width: 5rem;
 		height: 5rem;
-		border-radius: 50%;
 		margin-left: 1.45rem;
 
 		@media screen and (max-width: 960px) {
 			width: 3rem;
 			height: 3rem;
 		}
 	}
+
+	a {
+		font-weight: bold;
+	}
 </style>
diff --git a/src/lib/components/blog.svelte b/src/lib/components/blog.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../../theme/_section.scss';
 	import '../../theme/_grid.scss';
 
 	import Link from '$lib/components/link.svelte';

diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte
@@ -37,12 +37,20 @@
 			transition: transform 0.5s ease-out;
 		}
 
+		div {
+			transition: border 0.25s ease-out;
+		}
+
 		&:focus,
 		&:hover {
 			transform: translateY(-1.5rem);
 
 			img:not(.cover) {
-				transform: scale(1.2);
+				transform: scale(1.25);
+			}
+
+			div {
+				border: 0.75rem solid var(--color-highlight);
 			}
 		}
 	}
@@ -59,7 +67,7 @@
 	}
 
 	div {
-		border-radius: 1px;
+		position: relative;
 
 		display: flex;
 		flex-direction: column;
@@ -69,8 +77,7 @@
 		width: 100%;
 		height: 15rem;
 
-		box-shadow: 3px 3px black;
-		border: 1px solid black;
+		border: 0.75rem solid black;
 
 		margin-bottom: 1em;
 

diff --git a/src/lib/components/contact.svelte b/src/lib/components/contact.svelte
@@ -29,18 +29,22 @@
 
 	input,
 	textarea {
-		box-shadow: 3px 3px black;
-		border: 1px solid black;
+		border: 0.25rem solid black;
 
 		margin: 0.45rem 0;
 		padding: 0.25rem 0.45rem;
 
 		outline: none;
 
-		transition: box-shadow 0.15s ease-out;
+		transition: border 0.15s ease-out;
 
 		&:focus {
-			box-shadow: 3px 3px var(--color-highlight);
+			border: 0.25rem solid var(--color-highlight);
+		}
+
+		&::placeholder {
+			color: var(--color-highlight);
+			opacity: 1;
 		}
 	}
 

diff --git a/src/lib/components/footer.svelte b/src/lib/components/footer.svelte
@@ -32,21 +32,10 @@
 </footer>
 
 <style lang="scss">
-	footer {
-		background: black;
-		color: white;
-
-		margin-top: 5.25rem;
-		padding: 3rem;
-	}
-
 	footer > div {
-		max-width: 1240px;
-		margin: 0.45rem auto;
-
 		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
+		flex-direction: column;
+		gap: 2rem;
 
 		@media screen and (max-width: 960px) {
 			display: block;
@@ -55,7 +44,7 @@
 
 	.social {
 		display: flex;
-		gap: 0.45rem;
+		gap: 0.75rem;
 	}
 
 	a {
@@ -67,11 +56,11 @@
 	}
 
 	svg {
-		width: 2rem;
-		height: 2rem;
+		width: 2.5rem;
+		height: 2.5rem;
 	}
 
 	.twitter {
-		width: 1.6rem;
+		width: 2rem;
 	}
 </style>
diff --git a/src/lib/components/hamburger.svelte b/src/lib/components/hamburger.svelte
@@ -29,20 +29,16 @@
 		width: 3em;
 		height: 3em;
 
+		z-index: 3;
+
 		display: flex;
-		justify-content: flex-end;
-		align-content: flex-end;
 		flex-direction: column;
 
 		position: relative;
 
 		padding: 0.25rem 0;
 
 		transition: transform 0.2s ease 0s;
-
-		&:focus {
-			transform: scale(1.25) translateY(-0.25rem);
-		}
 	}
 
 	div {
@@ -69,10 +65,14 @@
 
 			border-radius: 1px;
 
-			background: var(--section-color, var(--menu-color));
+			background: black;
 			transition:
 				width 0.2s ease 0s,
 				background 0.2s ease 0s;
+
+			@media screen and (max-width: 576px) {
+				background: white;
+			}
 		}
 
 		&.open:before {

diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import Hamburger from '$lib/components/hamburger.svelte';
+	import Menu from '$lib/components/menu.svelte';
+
+	let open = false;
+	let hamburger: Hamburger;
+
+	const onStateChange = ({ detail }: CustomEvent<boolean>) => (open = detail);
+
+	const close = () => hamburger.close();
+</script>
+
+<header>
+	<div class="title">
+		<a href="/" aria-label="Go to daviddalbusco.com home page"><h3>David Dal Busco</h3></a>
+	</div>
+
+	<div class="menu"><Hamburger bind:this={hamburger} on:state={onStateChange} /></div>
+</header>
+
+<Menu on:close={close} {open} />
+
+<style lang="scss">
+	header {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-end;
+
+		padding: 0 1.45rem 0 0;
+
+		@media screen and (max-width: 576px) {
+			background: black;
+		}
+	}
+
+	.title {
+		height: 3rem;
+
+		display: flex;
+		align-items: center;
+
+		background: black;
+		color: white;
+
+		padding: 0 1.45rem 0 1.25rem;
+	}
+
+	.menu {
+		border-left: 0.25rem solid black;
+		padding: 0 0 0 1.45rem;
+	}
+
+	h3 {
+		margin: 0;
+
+		@media screen and (max-width: 960px) {
+			font-size: 1rem;
+		}
+	}
+
+	a {
+		text-decoration: none;
+	}
+</style>