vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2025-09-13 21:13:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Victor Westerlund 2024-11-24 10:37:13 +01:00
parent a595b0199b
commit 8bcf240843
6 changed files with 111 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
public/assets/css/pages/work.css
View file

@ -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 {
width: 50%;
section.hero .item .title {
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 {
width: 2em;
section.featured featured-item .title {
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);
}
}

1
public/assets/media/icons/reflect.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 984 B

2
public/assets/media/icons/repo.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 8 KiB

1
public/assets/media/icons/vegvisir.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
public/assets/media/icons/vw.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 5.2 KiB

90
public/work.php
View file

@ -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>
<p>A PHP and JavaScript navigation framework for the seamless [open] web seas.</p>
<a href=""><button class="inline">Read more</button></a>
<div class="title">
<?= VV::embed("public/assets/media/icons/vegvisir.svg") ?>
<h1>vegvisir</h1>
</div>
<p>Web navigation framework for PHP websites that does on the fly MPA-to-SPA routing between pages on the [open] web seas.</p>
<div class="actions">
<a href="https://vegvisir.vlw.se"><button class="inline">Read more</button></a>
</div>
<div class="bg">
<video muted autoplay loop src="/assets/media/vegvisir.webm"></video>
</div>
</div>
<div class="item reflect">
<div class="wrapper">
<h1>Reflect</h1>
<p>A strange framework for building REST APIs in PHP.</p>
<a href=""><button class="inline">Read more</button></a>
<div class="title">
<?= VV::embed("public/assets/media/icons/reflect.svg") ?>
<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") ?>
<h3>lorem</h3>
<p>ipsuum</p>
<div class="langs">
<a href=""><button><p>PHP</p></button></a>
<div class="title">
<?= VV::embed("public/assets/media/icons/vw.svg") ?>
<button>website</button>
</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>
<div class="title">
<?= VV::embed("public/assets/media/icons/star.svg") ?>
<h3>lorem</h3>
<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>