wip: 2024-11-24T10:07:17+0100 (1732439237)

public/assets/css/pages/work.css

@@ -48,17 +48,17 @@ section.hero {
 
 	display: grid;
 	gap: var(--padding);
-	grid-template-columns: repeat(2, 1fr);
+	grid-template-columns: repeat(1, 1fr);
 }
 
 section.hero .item {
 	width: 100%;
-	height: 300px;
 	position: relative;
 	border-radius: 6px;
 }
 
 section.hero .wrapper {
+	gap: var(--padding);
 	z-index: 1;
 	height: 100%;
 	display: flex;
@@ -68,11 +68,19 @@ section.hero .wrapper {
 	padding: calc(var(--padding) * 1.5);
 }
 
-section.hero p {
+section.hero .item .title {
-	width: 50%;
+	display: grid;
+	align-items: center;
+	gap: var(--padding);
+	grid-template-columns: 40px 1fr;
 }
 
-section.hero button {
+section.hero .item .title svg {
+	height: 3em;
+	border-radius: 4px;
+}
+
+section.hero .actions {
 	margin-top: auto;
 }
 
@@ -85,10 +93,6 @@ section.hero .item.vegvisir {
 	background-color: rgba(var(--color-vegvisir), .1);
 }
 
-section.hero .item.vegvisir .bg {
-	opacity: .2;
-}
-
 /* ### Reflect */
 
 section.hero .item.reflect {
@@ -98,25 +102,6 @@ section.hero .item.reflect {
 	background-color: rgba(var(--color-reflect), .2);
 }
 
-/* ### Background */
-
-section.hero .item .bg {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	pointer-events: none;
-	border-radius: 6px;
-}
-
-section.hero .item video {
-	position: absolute;
-	width: 100%;
-	bottom: 0;
-}
-
 /* ## Heading */
 
 section.heading {
@@ -136,7 +121,7 @@ section.heading svg {
 section.featured {
 	display: grid;
 	gap: var(--padding);
-	grid-template-columns: repeat(3, 1fr);
+	grid-template-columns: repeat(1, 1fr);
 }
 
 section.featured featured-item {
@@ -144,32 +129,27 @@ section.featured featured-item {
 	fill: white;
 	color: white;
 	border-radius: 8px;
+	align-items: baseline;
 	flex-direction: column;
 	padding: var(--padding);
 	background-color: rgba(255, 255, 255, .1);
 }
 
-section.featured featured-item > svg {
+section.featured featured-item .title {
-	width: 2em;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: calc(var(--padding) / 2);
+}
+
+section.featured featured-item .title svg {
+	height: 2em;
+	fill: var(--color-accent);
 }
 
 /* ### Languages */
 
-section.featured featured-item .langs {
-	gap: 5px;
-	display: flex;
-	margin: 5px 0;
-}
-
-section.featured featured-item .langs button {
-	border-radius: 4px;
-	background-color: rgba(255, 255, 255, .1);
-}
-
-section.featured featured-item .langs button p::before {
-	content: "● ";
-}
-
 /* ### Actions */
 
 section.featured featured-item .actions {
@@ -187,6 +167,12 @@ section.featured featured-item .actions {
 	}
 }
 
+@media (min-width: 600px) {
+	section.hero {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
 @media (min-width: 900px) {
 	section.git {
 		display: grid;
@@ -202,4 +188,8 @@ section.featured featured-item .actions {
 	section.git .buttons {
 		justify-content: end;
 	}
+
+	section.featured {
+		grid-template-columns: repeat(3, 1fr);
+	}
 }

public/assets/media/icons/reflect.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 60.965 60.965" xmlns="http://www.w3.org/2000/svg"><path style="fill:#dc1a00;fill-opacity:1;stroke-width:.529167" d="M0 0h135.467v135.467H0z" transform="matrix(.45004 0 0 .45004 0 0)"/><g style="fill:#fff;fill-opacity:1"><g fill="none" style="fill:#fff;fill-opacity:1"><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#fff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 19.04 10.01)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#fff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 19.04 10.01)"/></g><g opacity=".5" style="fill:#fff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#fff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 53.368 51.968)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#fff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 53.368 51.968)"/></g></g></svg>

public/assets/media/icons/vegvisir.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 60.965 60.965" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path style="fill:#0080ff;fill-opacity:1;stroke-width:.529167" d="M0 0h135.467v135.467H0z" transform="matrix(.45004 0 0 .45004 0 0)"/><g style="fill:#87ffff;fill-opacity:1"><g fill="none" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 41.925 30.482)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 41.925 30.482)"/></g><g fill="none" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 19.04 30.482)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 19.04 30.482)"/></g><g opacity=".5" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 .95357 -.95357 0 29.529 7.597)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 .95357 -.95357 0 29.529 7.597)"/></g><g opacity=".5" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 -.95357 .95357 0 30.482 53.368)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 -.95357 .95357 0 30.482 53.368)"/></g></g></svg>

public/work.php

@@ -13,47 +13,95 @@
 		<a href="https://git.vlw.se"><button class="inline">Forgejo</button></a>
 	</div>
 </section>
-<section class="heading">
-	<?= VV::embed("public/assets/media/icons/star.svg") ?>
-	<h1>featured projects</h1>
-	<?= VV::embed("public/assets/media/icons/star.svg") ?>
-</section>
 <section class="hero">
 	<div class="item vegvisir">
 		<div class="wrapper">
-			<h1>Vegvisir</h1>
+			<div class="title">
-			<p>A PHP and JavaScript navigation framework for the seamless [open] web seas.</p>
+				<?= VV::embed("public/assets/media/icons/vegvisir.svg") ?>
-			<a href=""><button class="inline">Read more</button></a>
+				<h1>vegvisir</h1>
-		</div>
+			</div>
-		<div class="bg">
+			<p>Web navigation framework for PHP websites that does on the fly MPA-to-SPA routing between pages on the [open] web seas.</p>
-			<video muted autoplay loop src="/assets/media/vegvisir.webm"></video>	
+			<div class="actions">
+				<a href="https://vegvisir.vlw.se"><button class="inline">Read more</button></a>
+			</div>
 		</div>
 	</div>
 	<div class="item reflect">
 		<div class="wrapper">
-			<h1>Reflect</h1>
+			<div class="title">
-			<p>A strange framework for building REST APIs in PHP.</p>
+				<?= VV::embed("public/assets/media/icons/reflect.svg") ?>
-			<a href=""><button class="inline">Read more</button></a>
+				<h1>reflect</h1>
+			</div>
+			<p>A weird framework for building REST APIs in PHP with focus on native internal request routing and proxying.</p>
+			<div class="actions">
+				<a href="https://reflect.vlw.se"><button class="inline">Read more</button></a>
+			</div>
 		</div>
-		<div class="bg"></div>
 	</div>
 </section>
 <section class="featured">
 	<featured-item>
-		<?= VV::embed("public/assets/media/icons/repo.svg") ?>
+		<div class="title">
-		<h3>lorem</h3>
+			<?= VV::embed("public/assets/media/icons/vw.svg") ?>
-		<p>ipsuum</p>
+			<button>website</button>
-		<div class="langs">
-			<a href=""><button><p>PHP</p></button></a>
 		</div>
+		<h3>vlw.se</h3>
+		<p>Can I put my own website here, is that cheating? Maybe, but I think this site counts as the most important thing I've personally created. I've only used my own libraries and frameworks to create this website, so it kind of works as a live demonstration of many of my web projects bundled together.</p>
+		<div class="actions">
+			<a href="/work/vlw/vlw.se"><button class="inline">read more</button></a>
+		</div>
+	</featured-item>
+	<featured-item>
+		<div class="title">
+			<?= VV::embed("public/assets/media/icons/vw.svg") ?>
+		</div>
+		<h3>My dabbles</h3>
+		<p>I play around with a lot of technologies and sometimes create smaller programs that might not merit to a lot on their own. This page is all those things collected together, hopefully that will attest to something.</p>
+		<div class="actions">
+			<a href="/work/playground"><button class="inline">playground</button></a>
+		</div>
+	</featured-item>
+	<featured-item>
+		<div class="title">
+			<?= VV::embed("public/assets/media/icons/repo.svg") ?>
+			<div>
+				<button class="lang">PHP</button>
+			</div>
+		</div>
+		<h3>vlw/php-mysql</h3>
+		<p>Yet another abstraction library for the php-mysql extension. For this library, I was willing to sacrifice most of MySQL's flexibility that comes with string interpolation in favor of method chaining that adheres to an SQL-like syntax. For simple DML operations I think it's pretty intuitive.</p>
 		<div class="actions">
 			<a href="PHP"><button class="inline">read more</button></a>
 		</div>
 	</featured-item>
 	<featured-item>
-		<?= VV::embed("public/assets/media/icons/star.svg") ?>
+		<div class="title">
-		<h3>lorem</h3>
+			<?= VV::embed("public/assets/media/icons/star.svg") ?>
-		<p>ipsuum</p>
+			<button>website</button>
+		</div>
+		<h3>Website for iCellate Medical</h3>
+		<p>Together with the iCellate team, I created a new front-end for the biopharma startup using my Vegvisir framework as the foundation.</p>
+		<div class="actions">
+			<a href=""><button class="inline">read more</button></a>
+		</div>
+	</featured-item>
+	<featured-item>
+		<div class="title">
+			<?= VV::embed("public/assets/media/icons/star.svg") ?>
+			<button>website</button>
+		</div>
+		<h3>Modernizing GeneMate by iCellate</h3>
+		<p>Together with copy written by the amazing team at iCellate, and a new brand new appearance for the company, I helped design a new website and underlying systems for their GeneMate product.</p>
+		<div class="actions">
+			<a href=""><button class="inline">read more</button></a>
+		</div>
+	</featured-item>
+	<featured-item>
+		<div class="title">
+			<?= VV::embed("public/assets/media/icons/star.svg") ?>
+		</div>
+		<h3>Custom pages for Deltaco AB</h3>
+		<p>From design mock-ups created by the SweDeltaco marketing team, I built various web pages for campagins and special events for the nordic IT-distributor's website using a custom content injection framework for SharePoint that would later inspire my other project, Vegvisir.</p>
 		<div class="actions">
 			<a href=""><button class="inline">read more</button></a>
 		</div>