105 lines
4.9 KiB
Plaintext
105 lines
4.9 KiB
Plaintext
|
extends ../_TemplatePublic
|
||
|
|
block pageHeader
|
||
|
|
link(rel='stylesheet' href='file://styles/public-projects.css')
|
||
|
|
meta(property='og:title' content='suzzy games - projects')
|
||
|
|
meta(property='og:description' content='Projects from over the years.')
|
||
|
|
meta(name='description' content='Projects from over the years.')
|
||
|
|
meta(property='og:image' content='https://suzzygames.com/assets/images/og-logo.png')
|
||
|
|
title suzzy games - projects
|
||
|
|
block pageEscaped
|
||
|
|
-
|
||
|
|
const PROJECT_MANIFEST = [
|
||
|
|
{
|
||
|
|
accent: '#ff9d2f',
|
||
|
|
brightness: 0.75,
|
||
|
|
background: 'file://projects/monke/background.jpeg',
|
||
|
|
name: 'Project Monke',
|
||
|
|
state: 'In Development',
|
||
|
|
platforms: ['desktop', 'mobile'],
|
||
|
|
images: [
|
||
|
|
{ label: 'Promo Banner', url: 'file://projects/monke/image-1.jpeg' },
|
||
|
|
],
|
||
|
|
description: [
|
||
|
|
'Can only be explained as Super Monkey Ball and Super Mario Maker in one.',
|
||
|
|
'Check the blog for news!',
|
||
|
|
],
|
||
|
|
actions: [
|
||
|
|
{ label: 'View Blog Posts', url: '/blog/project-monke', target: '' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
accent: '#91defd',
|
||
|
|
brightness: 0.75,
|
||
|
|
name: 'Cart Ride Around a Fumo',
|
||
|
|
background: 'file://projects/craf/background.jpeg',
|
||
|
|
platforms: ['desktop', 'mobile'],
|
||
|
|
state: '2021',
|
||
|
|
images: [
|
||
|
|
{ label: 'Promo Artwork #1', url: 'file://projects/craf/image-1.jpeg' },
|
||
|
|
{ label: 'Promo Artwork #2', url: 'file://projects/craf/image-2.jpeg' },
|
||
|
|
],
|
||
|
|
description: [
|
||
|
|
'My own spin on the classic ROBLOX cart ride genre.',
|
||
|
|
'Centered around fumos for no specific reason.',
|
||
|
|
'Warning: Contains explosions',
|
||
|
|
],
|
||
|
|
actions: [
|
||
|
|
{ label: 'Play on ROBLOX', url: 'https://www.roblox.com/games/9987852646/Cart-Ride-Around-a-Fumo', target: '_blank' },
|
||
|
|
],
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
//- Layout: Header
|
||
|
|
div(class='wrapper-widget-hero')
|
||
|
|
div(class='widget-hero')
|
||
|
|
p(class='text-hero') > Projects <
|
||
|
|
p All of my projects in reverse chronological order (a.k.a. new to old)
|
||
|
|
|
||
|
|
//- Layout: Projects
|
||
|
|
each p in PROJECT_MANIFEST
|
||
|
|
div(class='widget widget-project' style=`--accent: ${p.accent}; --brightness: ${p.brightness}; --background: url('${p.background}');`)
|
||
|
|
|
||
|
|
//- Stack div elements with background underneath the foreground
|
||
|
|
//- Image will be darkened using 'brightness' css variable
|
||
|
|
div(class='project-background')
|
||
|
|
div(class='project-foreground')
|
||
|
|
|
||
|
|
//- Project: Metadata
|
||
|
|
div(class='project-content')
|
||
|
|
|
||
|
|
//- Name, Platforms, Descriptions
|
||
|
|
div(class='project-info')
|
||
|
|
div(class='project-header')
|
||
|
|
p(class='text-header') #{p.name}
|
||
|
|
div(class='project-platforms')
|
||
|
|
if p.platforms.find(p => p === 'desktop')
|
||
|
|
img(class='platform-icon' alt='Icon for Desktop Devices' src='file://icons/icon-computer.svg')
|
||
|
|
if p.platforms.find(p => p === 'mobile')
|
||
|
|
img(class='platform-icon' alt='Icon for Mobile Devices' src='file://icons/icon-mobile.svg')
|
||
|
|
p • #{p.state}
|
||
|
|
|
||
|
|
div(class='divider-line' style='background-color: var(--accent);')
|
||
|
|
div(class='project-description')
|
||
|
|
each s in p.description
|
||
|
|
p #{s}
|
||
|
|
|
||
|
|
//- Screenshots
|
||
|
|
div(class='project-gallery')
|
||
|
|
div(class='project-gallery-upper')
|
||
|
|
button(class='project-gallery-button' id='last') <
|
||
|
|
div(class='project-gallery-scroll')
|
||
|
|
each i in p.images
|
||
|
|
img(class='gallery-image' alt=`${p.name} - ${i.label}` src=i.url)
|
||
|
|
button(class='project-gallery-button' id='next') >
|
||
|
|
|
||
|
|
div(class='project-content project-lower')
|
||
|
|
div(class='project-actions')
|
||
|
|
each a in p.actions
|
||
|
|
a(class='default wide' target=a.target href=a.url) #{a.label}
|
||
|
|
|
||
|
|
//- Screenshot Gallery Controls
|
||
|
|
div(class='project-gallery-actions')
|
||
|
|
each _, i in p.images
|
||
|
|
div(class=`gallery-dot${i===0 ? ' gallery-dot-active' : ''}`)
|
||
|
|
|
||
|
|
script(src='file://scripts/public-projects.ts')
|