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

feat: add web highlights section to work page (#34)

Browse source 
This PR adds a "web highlights" section to the work page.

Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/34
This commit is contained in:
Victor Westerlund 2025-03-29 07:34:54 +00:00
parent f60a27855d
commit a6c74f5c4f
9 changed files with 89 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -128,19 +128,28 @@ section.featured featured-item .title svg {
fill: var(--color-accent);
}
/* ### Languages */
/* ### Actions */
section.featured featured-item img {
width: 100%;
border-radius: 4px;
}
section.featured featured-item .actions {
gap: 5px;
gap: var(--padding);
width: 100%;
display: flex;
flex-direction: column;
padding-top: var(--padding);
margin-top: auto;
}
/* # Size queries */
@media (min-width: 400px) {
section.featured featured-item .actions {
flex-direction: row;
}
}
@media (min-width: 600px) {
section.hero {
grid-template-columns: repeat(2, 1fr);
@ -151,4 +160,8 @@ section.featured featured-item .actions {
section.featured {
grid-template-columns: repeat(3, 1fr);
}
section.featured featured-item .actions button.collapse p {
display: none;
}
}

16
public/assets/css/pages/work/archive.css Normal file
View file

@ -0,0 +1,16 @@
/* # Overrides */
:root {
--primer-color-accent: 3, 255, 219;
--color-accent: rgb(var(--primer-color-accent));
--hue-accent: 90deg;
}
vv-shell {
display: flex;
flex-direction: column;
gap: var(--padding);
width: 100%;
max-width: 1200px;
overflow-x: initial;
}

4
public/assets/js/pages/work/archive.js Normal file
View file

@ -0,0 +1,4 @@
// Redirect to work page if no href is defined
if (!new URLSearchParams(window.location.search).has("href")) {
new vv.Navigation("/work").navigate();
}

BIN
public/assets/media/img/preview-deltaco.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/assets/media/img/preview-genemate.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/assets/media/img/preview-icellate.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.2 KiB

59
public/work.php
View file

@ -49,20 +49,8 @@
<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="https://codeberg.org/vlw/vlw.se"><button class="inline">
<p>read more</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</featured-item>
<featured-item>
<div class="title">
<?= VV::embed("public/assets/media/icons/vw.svg") ?>
</div>
<h3>Silly dabbles</h3>
<p>I create silly things for fun to challenge myself sometimes, and putting them all on the timeline is not right. So I made an appropriately-themed and named page to highlight most of my "what if I could" projects.</p>
<div class="actions">
<a href="/playground"><button class="inline">
<p>playground</p>
<?= VV::embed("public/assets/media/icons/codeberg.svg") ?>
<p>view source</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
@ -83,35 +71,60 @@
</featured-item>
<featured-item>
<div class="title">
<?= VV::embed("public/assets/media/icons/star.svg") ?>
<h3>🍰</h3>
</div>
<h3>Still Alive</h3>
<p>I recreated the end credits from the video game Portal using pure JavaScript and browser windows. It was created using my old [abandoned] animation library and some patience. It's not perfect, it notably has a few time-drifting issues.</p>
<div class="actions">
<a href="https://blob.vlw.se/0195b948-8cd3-7d7f-8b21-e992a621a4c1.webm" target="_blank"><button class="inline">
<?= VV::embed("public/assets/media/icons/star.svg") ?>
<p>demo video</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
<a href="https://codeberg.org/vlw/still-alive" target="_blank"><button class="inline collapse">
<p>view source</p>
<?= VV::embed("public/assets/media/icons/codeberg.svg") ?>
</button></a>
</div>
</featured-item>
</section>
<section class="heading">
<h1>web highligts</h1>
</section>
<section class="featured">
<featured-item>
<div class="title">
<a href="/work/archive?href=https://icellate.srv.vlw.se"><img src="/assets/media/img/preview-icellate.avif"></a>
</div>
<h3>Website for iCellate Medical</h3>
<p><?= (new Work("icellate/website"))->summary() ?></p>
<div class="actions">
<a href="/work/icellate/website"><button class="inline">
<p>read more</p>
<a href="/work/archive?href=https://icellate.srv.vlw.se"><button class="inline">
<?= VV::embed("public/assets/media/icons/star.svg") ?>
<p>preview</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</featured-item>
<featured-item>
<div class="title">
<?= VV::embed("public/assets/media/icons/star.svg") ?>
<a href="/work/archive?href=https://genemate.srv.vlw.se"><img src="/assets/media/img/preview-genemate.avif"></a>
</div>
<h3>Modernizing GeneMate by iCellate</h3>
<h3>Website for GeneMate by iCellate</h3>
<p><?= (new Work("icellate/genemate"))->summary() ?></p>
<div class="actions">
<a href="/work/icellate/genemate"><button class="inline">
<p>read more</p>
<a href="/work/archive?href=https://genemate.srv.vlw.se"><button class="inline">
<?= VV::embed("public/assets/media/icons/star.svg") ?>
<p>preview</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</featured-item>
<featured-item>
<div class="title">
<?= VV::embed("public/assets/media/icons/star.svg") ?>
<a href="/work/deltaco/asyncapp"><img src="/assets/media/img/preview-deltaco.avif"></a>
</div>
<h3>Custom pages for Deltaco AB</h3>
<h3>Campaign pages for Deltaco AB</h3>
<p><?= (new Work("deltaco/asyncapp"))->summary() ?></p>
<div class="actions">
<a href="/work/deltaco/asyncapp"><button class="inline">

12
public/work/archive.php Normal file
View file

@ -0,0 +1,12 @@
<style><?= VV::css("public/assets/css/pages/work/archive") ?></style>
<section>
<h1>This is an archived website!</h1>
<p>You're about to view an archived version of this website on my domain. Everything you see, and all features that are available on the archived website have been recreated to simulate the real behavior as closely as possible. Some features can unfortunately not be simulated properly and have been disabled completely. No actions you take on this website have any real effects.</p>
</section>
<section>
<a href="<?= $_GET["href"] ?? "" ?>" target="_blank"><button class="inline solid">
<p>Proceed to website</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</section>
<script><?= VV::js("public/assets/js/pages/work/archive") ?></script>

6
src/Database/Models/Work/Work.php
View file

@ -16,6 +16,8 @@
require_once VV::root("src/Database/Models/Work/Action.php");
class Work extends Model {
public const DATE_FORMAT = "Y-m-d";
public function __construct(public readonly string $id) {
parent::__construct(Endpoints::WORK, [
WorkTable::ID->value => $this->id
@ -34,8 +36,8 @@
return $this->get(WorkTable::SUMMARY->value);
}
public function created(): DateTimeImmutable {
return new DateTimeImmutable($this->get(WorkTable::CREATED->value));
public function created(): \DateTimeImmutable {
return new \DateTimeImmutable($this->get(WorkTable::CREATED->value));
}
public function tags(): array {