This commit is contained in:
parent
e978d5fa53
commit
c8d209facd
GPG key ID:
B67D7410F33A0F61
12 changed files with 270 additions and 144 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"plugins": {
|
||||
"posthtml-component": {
|
||||
"root": "./src"
|
||||
"root": "./src/components"
|
||||
},
|
||||
"posthtml-include": {},
|
||||
"posthtml-markdownit": {}
|
||||
|
|
|
|||
73
assets/spinner.svg
Normal file
73
assets/spinner.svg
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
width="64"
|
||||
height="64"
|
||||
viewBox="0 0 48 48"
|
||||
sodipodi:docname="spinner.svg"
|
||||
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||
inkscape:export-filename="icon.png"
|
||||
inkscape:export-xdpi="6"
|
||||
inkscape:export-ydpi="6"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1">
|
||||
<linearGradient
|
||||
id="linearGradient5"
|
||||
inkscape:collect="always">
|
||||
<stop
|
||||
style="stop-color:#957b09;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop5" />
|
||||
<stop
|
||||
style="stop-color:#f8d170;stop-opacity:1;"
|
||||
offset="0.64978778"
|
||||
id="stop6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient5"
|
||||
id="linearGradient6"
|
||||
x1="238.13318"
|
||||
y1="785.09656"
|
||||
x2="784.8255"
|
||||
y2="237.32028"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(0.08683148,0,0,0.08683148,-20.412508,-20.388979)" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="4.0936768"
|
||||
inkscape:cx="5.0077231"
|
||||
inkscape:cy="-23.939359"
|
||||
inkscape:window-width="1675"
|
||||
inkscape:window-height="1035"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="g1"
|
||||
showguides="true" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
inkscape:label="Image"
|
||||
id="g1">
|
||||
<path
|
||||
id="path5"
|
||||
style="opacity:1;fill:none;fill-opacity:1;stroke:url(#linearGradient6);stroke-width:4.77576;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 9.723553,9.6764989 40.13035,40.083292 M 24.045209,2.6744899 V 45.462981 M 45.612111,24 A 21.612118,21.612118 0 0 1 23.999996,45.61212 21.612118,21.612118 0 0 1 2.3878822,24 21.612118,21.612118 0 0 1 23.999996,2.3878822 21.612118,21.612118 0 0 1 45.612111,24 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -2,7 +2,7 @@
|
|||
"name": "thesandwich",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"source": "src/index.html",
|
||||
"source": "src/*.html",
|
||||
"scripts": {
|
||||
"start": "parcel",
|
||||
"build": "parcel build"
|
||||
|
|
|
|||
16
src/components/tab-content.html
Normal file
16
src/components/tab-content.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script props>
|
||||
module.exports = {
|
||||
selected: Number(props.selected || '0')
|
||||
}
|
||||
</script>
|
||||
<nav class="tab-list" role="tablist" hx-indicator="#indicator">
|
||||
<button hx-get="/projects.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
|
||||
aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Our
|
||||
Projects</button>
|
||||
<button hx-get="/who_we_are.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
|
||||
aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Who we are</button>
|
||||
</nav>
|
||||
<hr style="margin: 0">
|
||||
<div id="tab-content" role="tabpanel" class="tab-content">
|
||||
<yield></yield>
|
||||
</div>
|
||||
161
src/index.html
161
src/index.html
|
|
@ -63,6 +63,20 @@
|
|||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
#indicator {
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -93,8 +107,8 @@
|
|||
<div id="audioContainer" style="position: absolute;"></div>
|
||||
</div>
|
||||
<div style="height: min(30vw, 150px);"></div>
|
||||
<audio id="player" src="/assets/westside.opus" loop></audio>
|
||||
<audio id="player-spaghetti" src="/assets/mario.opus"></audio>
|
||||
<audio preload="none" id="player" src="/assets/westside.opus" loop></audio>
|
||||
<audio preload="none" id="player-spaghetti" src="/assets/mario.opus"></audio>
|
||||
<div id="page-content-content">
|
||||
<center style="margin: 16px;">
|
||||
<h1 class="title">Very professional people making<br>very professional things</h1>
|
||||
|
|
@ -114,145 +128,10 @@
|
|||
</ul>
|
||||
</div>
|
||||
</center>
|
||||
<x-section-head header="Our projects">
|
||||
<x-blockquote cite="You, just now">
|
||||
Wow, such professionalism! What are these guys working on now?
|
||||
</x-blockquote>
|
||||
</x-section-head>
|
||||
<x-project img="/assets/tysoncloud.svg" href="https://github.com/timmyjinks/TYSONCLOUD">
|
||||
<fill:title># TYSONCLOUD</fill:title>
|
||||
<fill:subtitle>## When she compute your serve 'till you edge</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
Have you ever just gone to a cloud service interface like Google Cloud Console, Microsoft Azure Portal, or
|
||||
AWS Console, and just gone "...what? What am I even looking at? *Huh*?"
|
||||
|
||||
No more will you have to scrunkle your brain in these confusing interfaces to get access to fast, reliable
|
||||
cloud, with **TYSONCLOUD**. Just input a docker container, and hit go!
|
||||
</markdown>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-project img="/assets/simulo.svg" href="https://github.com/richgrov/simulo" onclick="spaghetti()"
|
||||
class="project-alt" titlestyle="font-family: 'Apex Mk2'" headerstyle="font-family: 'Apex Mk2'">
|
||||
<fill:title># Simulo</fill:title>
|
||||
<fill:subtitle>
|
||||
## Roblox for the real world!
|
||||
#### (what could go wrong?)
|
||||
</fill:subtitle>
|
||||
<fill:description>
|
||||
<div style="font-family: monospace;">
|
||||
<markdown>
|
||||
Are you a hot sweaty gamer looking to get hot and sweaty but in a good way? Bring your IRL game ideas to
|
||||
life
|
||||
with **Simulo**! It's like using the *Earth* as your game engine! You
|
||||
don't even need to learn Lua to get started, instead, just describe your game to the engine and watch it
|
||||
come to life!
|
||||
|
||||
Simulo is the most accessible game engine by a longshot, you just need a $600 laser projector and a
|
||||
MacBook or Linux machine! Anyone can use Simulo.
|
||||
</markdown>
|
||||
</div>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-project svg="assets/c0re.svg" href="https://c0re.com">
|
||||
<fill:title>
|
||||
# c0re
|
||||
#### So shiny!
|
||||
</fill:title>
|
||||
<fill:subtitle>## Git gud scrub!</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
Crush your friends in the game of life and get receipts using **c0re**! Gamify the effort of surpassing your
|
||||
peers in every possible area and become objectively and quantifiably the _best_ person.
|
||||
</markdown>
|
||||
<p>Join the fray, and become your best self <span id="c0re-countup"></span> ago!</p>
|
||||
<script>
|
||||
// Code from https://www.w3schools.com/howto/howto_js_countdown.asp
|
||||
// Set the date we're counting down to
|
||||
var countDownDate = new Date("March 7, 2025").getTime();
|
||||
|
||||
function countup() {
|
||||
// Get today's date and time
|
||||
var now = new Date().getTime();
|
||||
|
||||
// Find the distance between now and the count down date
|
||||
var distance = now - countDownDate;
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
document.getElementById("c0re-countup").innerHTML = days + "d " + hours + "h "
|
||||
+ minutes + "m " + seconds + "s ";
|
||||
|
||||
|
||||
}
|
||||
countup();
|
||||
// Update the count down every 1 second
|
||||
var x = setInterval(countup, 1000);
|
||||
</script>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-blockquote cite="The Washington Post">
|
||||
Please stop sending your projects to the review department
|
||||
</x-blockquote>
|
||||
<x-project svg="assets/braindance.svg" href="https://braindance.live" class="project-alt"
|
||||
titlestyle="background-image: linear-gradient(to right, oklch(0.714 0.203 305.504) 0px, oklch(0.718 0.202 349.761) 100%); background-clip: text; color: transparent">
|
||||
<fill:title># Braindance</fill:title>
|
||||
<fill:subtitle>## Bringing the Coachella to you!</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
Ever wanted to vibe to some skibidicore with the boys, but without actually being *with* the boys? Now
|
||||
you can with Braindance! No better way exists to transmit concert vibes directly into your home
|
||||
|
||||
(Braindance
|
||||
is not responsible for destruction of property due to moshpits materializing in your home).
|
||||
</markdown>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-project text="e" href="https://github.com/StratusFearMe21/grezi-next">
|
||||
<fill:title># Grezi</fill:title>
|
||||
<fill:subtitle>## When the power is point</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
Imagine a slideshow, but with extra lizard brain! That's what Grezi is. On top of making your
|
||||
presentation extra skibidi bop bop yes yes, it also allows you to write your presentation with a bespoke
|
||||
markup
|
||||
language!
|
||||
|
||||
Instead of dragging elements around on your slides, you can open your notepad and make silly
|
||||
text move
|
||||
on the screen with plain text. What an incredible innovation!
|
||||
</markdown>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-project text="?" class="project-alt">
|
||||
<fill:title># Mystery</fill:title>
|
||||
<fill:subtitle>## _Oooooooo_</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>Nobody knows what this project is gonna be. The creator, Josh, won't tell anyone.</markdown>
|
||||
<form hx-post="/api/speculate" hx-target="#speculation-result">
|
||||
<label for="speculation">
|
||||
Speculate about the <i>secret</i> project below:
|
||||
</label><br>
|
||||
<textarea name="speculation" id="speculation"></textarea>
|
||||
<input type="submit" value="Speculate!">
|
||||
</form>
|
||||
<div id="speculation-result"></div>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-section-head header="Who are these guys?">
|
||||
<x-blockquote cite="Your mom, last night">
|
||||
OMG these projects are so skibidi! I must know the rizzlers behind them!
|
||||
</x-blockquote>
|
||||
</x-section-head>
|
||||
<x-project text="?">
|
||||
<fill:title># Coming soon to theaters</fill:title>
|
||||
<fill:subtitle>## This website is under construction</fill:subtitle>
|
||||
<fill:description>We'll get to it, trust</fill:description>
|
||||
</x-project>
|
||||
<center>
|
||||
<img id="indicator" class="htmx-indicator" width="64" height="64" src="/assets/spinner.svg">
|
||||
</center>
|
||||
<div id="tabs" hx-get="/projects.html" hx-trigger="load delay:100ms" hx-target="#tabs" hx-swap="innerHTML"></div>
|
||||
</div>
|
||||
<div style="background-color: #484848;">
|
||||
<p style="font-size: 8pt;">Copyright, The SANDWICH™ 2025 ©®☺ⓖⓨⓐⓣⓣ</p>
|
||||
|
|
|
|||
131
src/projects.html
Normal file
131
src/projects.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<x-tab-content selected="0">
|
||||
<x-section-head header="Our projects">
|
||||
<x-blockquote cite="You, just now">
|
||||
Wow, such professionalism! What are these guys working on now?
|
||||
</x-blockquote>
|
||||
</x-section-head>
|
||||
<x-project img="/assets/tysoncloud.svg" href="https://github.com/timmyjinks/TYSONCLOUD">
|
||||
<fill:title># TYSONCLOUD</fill:title>
|
||||
<fill:subtitle>## When she compute your serve 'till you edge</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
Have you ever just gone to a cloud service interface like Google Cloud Console, Microsoft Azure Portal, or
|
||||
AWS Console, and just gone "...what? What am I even looking at? *Huh*?"
|
||||
|
||||
No more will you have to scrunkle your brain in these confusing interfaces to get access to fast, reliable
|
||||
cloud, with **TYSONCLOUD**. Just input a docker container, and hit go!
|
||||
</markdown>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-project img="/assets/simulo.svg" href="https://github.com/richgrov/simulo" onclick="spaghetti()"
|
||||
class="project-alt" titlestyle="font-family: 'Apex Mk2'" headerstyle="font-family: 'Apex Mk2'">
|
||||
<fill:title># Simulo</fill:title>
|
||||
<fill:subtitle>
|
||||
## Roblox for the real world!
|
||||
#### (what could go wrong?)
|
||||
</fill:subtitle>
|
||||
<fill:description>
|
||||
<div style="font-family: monospace;">
|
||||
<markdown>
|
||||
Are you a hot sweaty gamer looking to get hot and sweaty but in a good way? Bring your IRL game ideas to
|
||||
life
|
||||
with **Simulo**! It's like using the *Earth* as your game engine! You
|
||||
don't even need to learn Lua to get started, instead, just describe your game to the engine and watch it
|
||||
come to life!
|
||||
|
||||
Simulo is the most accessible game engine by a longshot, you just need a $600 laser projector and a
|
||||
MacBook or Linux machine! Anyone can use Simulo.
|
||||
</markdown>
|
||||
</div>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-project svg="assets/c0re.svg" href="https://c0re.com">
|
||||
<fill:title>
|
||||
# c0re
|
||||
#### So shiny!
|
||||
</fill:title>
|
||||
<fill:subtitle>## Git gud scrub!</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
Crush your friends in the game of life and get receipts using **c0re**! Gamify the effort of surpassing your
|
||||
peers in every possible area and become objectively and quantifiably the _best_ person.
|
||||
</markdown>
|
||||
<p>Join the fray, and become your best self <span id="c0re-countup"></span> ago!</p>
|
||||
<script>
|
||||
// Code from https://www.w3schools.com/howto/howto_js_countdown.asp
|
||||
// Set the date we're counting down to
|
||||
var countDownDate = new Date("March 7, 2025").getTime();
|
||||
|
||||
function countup() {
|
||||
// Get today's date and time
|
||||
var now = new Date().getTime();
|
||||
|
||||
// Find the distance between now and the count down date
|
||||
var distance = now - countDownDate;
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
document.getElementById("c0re-countup").innerHTML = days + "d " + hours + "h "
|
||||
+ minutes + "m " + seconds + "s ";
|
||||
|
||||
|
||||
}
|
||||
countup();
|
||||
// Update the count down every 1 second
|
||||
var x = setInterval(countup, 1000);
|
||||
</script>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-blockquote cite="The Washington Post">
|
||||
Please stop sending your projects to the review department
|
||||
</x-blockquote>
|
||||
<x-project svg="assets/braindance.svg" href="https://braindance.live" class="project-alt"
|
||||
titlestyle="background-image: linear-gradient(to right, oklch(0.714 0.203 305.504) 0px, oklch(0.718 0.202 349.761) 100%); background-clip: text; color: transparent">
|
||||
<fill:title># Braindance</fill:title>
|
||||
<fill:subtitle>## Bringing the Coachella to you!</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
Ever wanted to vibe to some skibidicore with the boys, but without actually being *with* the boys? Now
|
||||
you can with Braindance! No better way exists to transmit concert vibes directly into your home
|
||||
|
||||
(Braindance
|
||||
is not responsible for destruction of property due to moshpits materializing in your home).
|
||||
</markdown>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-project text="e" href="https://github.com/StratusFearMe21/grezi-next">
|
||||
<fill:title># Grezi</fill:title>
|
||||
<fill:subtitle>## When the power is point</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
Imagine a slideshow, but with extra lizard brain! That's what Grezi is. On top of making your
|
||||
presentation extra skibidi bop bop yes yes, it also allows you to write your presentation with a bespoke
|
||||
markup
|
||||
language!
|
||||
|
||||
Instead of dragging elements around on your slides, you can open your notepad and make silly
|
||||
text move
|
||||
on the screen with plain text. What an incredible innovation!
|
||||
</markdown>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-project text="?" class="project-alt">
|
||||
<fill:title># Mystery</fill:title>
|
||||
<fill:subtitle>## _Oooooooo_</fill:subtitle>
|
||||
<fill:description>
|
||||
<markdown>Nobody knows what this project is gonna be. The creator, Josh, won't tell anyone.</markdown>
|
||||
<form hx-post="/api/speculate" hx-target="#speculation-result">
|
||||
<label for="speculation">
|
||||
Speculate about the <i>secret</i> project below:
|
||||
</label><br>
|
||||
<textarea name="speculation" id="speculation"></textarea>
|
||||
<input type="submit" value="Speculate!">
|
||||
</form>
|
||||
<div id="speculation-result"></div>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
</x-tab-content>
|
||||
|
|
@ -82,7 +82,6 @@ html {
|
|||
background-color: #484848;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-content: space-around;
|
||||
align-items: center;
|
||||
margin: 32px;
|
||||
}
|
||||
|
|
@ -92,6 +91,22 @@ html {
|
|||
padding: 16px;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.tab-list button {
|
||||
background-color: transparent;
|
||||
border: solid 3px transparent;
|
||||
border-bottom: solid 3px #eee;
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
.tab-list button.selected {
|
||||
font-weight: bold;
|
||||
border-bottom: solid 6px #eee;
|
||||
}
|
||||
|
||||
img.figure,
|
||||
.figure>svg {
|
||||
|
|
|
|||
12
src/who_we_are.html
Normal file
12
src/who_we_are.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<x-tab-content selected="1">
|
||||
<x-section-head header="Who are these guys?">
|
||||
<x-blockquote cite="Your mom, last night">
|
||||
OMG these projects are so skibidi! I must know the rizzlers behind them!
|
||||
</x-blockquote>
|
||||
</x-section-head>
|
||||
<x-project text="?">
|
||||
<fill:title># Coming soon to theaters</fill:title>
|
||||
<fill:subtitle>## This website is under construction</fill:subtitle>
|
||||
<fill:description>We'll get to it, trust</fill:description>
|
||||
</x-project>
|
||||
</x-tab-content>
|
||||
Loading…
Add table
Add a link
Reference in a new issue