Making stuff work better, adding a floppy
This commit is contained in:
Dan
parent
1d9bc87f1b
commit
7917326214
11 changed files with 261 additions and 32 deletions
|
|
@ -92,8 +92,10 @@
|
|||
}
|
||||
|
||||
function init() {
|
||||
updateBlobCount();
|
||||
updateLampBackground();
|
||||
if (document.getElementById("lavaLamp")) {
|
||||
updateBlobCount();
|
||||
updateLampBackground();
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
|
|
|
|||
25
assets/js/pages/audio.js
Normal file
25
assets/js/pages/audio.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
if (document.getElementById("starfield")) {
|
||||
let starfield = document.getElementById("starfield");
|
||||
let numStars = 200;
|
||||
|
||||
// Create static twinkling stars
|
||||
for (let i = 0; i < numStars; i++) {
|
||||
const star = document.createElement("div");
|
||||
star.className = "star";
|
||||
|
||||
// Random size
|
||||
const sizeClass =
|
||||
Math.random() < 0.7 ? "small" : Math.random() < 0.9 ? "medium" : "large";
|
||||
star.classList.add(sizeClass);
|
||||
|
||||
// Random position
|
||||
star.style.left = Math.random() * 100 + "%";
|
||||
star.style.top = Math.random() * 100 + "%";
|
||||
|
||||
// Random animation duration (2-6 seconds) and delay
|
||||
star.style.animationDuration = 2 + Math.random() * 4 + "s";
|
||||
star.style.animationDelay = Math.random() * 5 + "s";
|
||||
|
||||
starfield.appendChild(star);
|
||||
}
|
||||
}
|
||||
|
|
@ -17,11 +17,30 @@
|
|||
> .about-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> .manifesto-container {
|
||||
position: relative;
|
||||
> .manifesto-floppy {
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
top: -20px;
|
||||
width: 150px;
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.about-page > .about-content {
|
||||
width: 100%;
|
||||
|
||||
> .manifesto-container {
|
||||
> .manifesto-floppy {
|
||||
width: 75px;
|
||||
top: -10px;
|
||||
right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
42
assets/sass/pages/audio.scss
Normal file
42
assets/sass/pages/audio.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
.audio-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: twinkle linear infinite;
|
||||
}
|
||||
|
||||
.star.small {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.star.medium {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.star.large {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
104
assets/sass/partials/_floppy.scss
Normal file
104
assets/sass/partials/_floppy.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
.floppy-disk {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 2%;
|
||||
position: relative;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
container-type: inline-size;
|
||||
pointer-events: none;
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
/* Top left */ 95% 0,
|
||||
/* Top edge before diagonal */ 100% 5%,
|
||||
/* Top right diagonal corner */ 100% 100%,
|
||||
/* Bottom right */ 0 100% /* Bottom left */
|
||||
);
|
||||
}
|
||||
|
||||
.metal-shutter {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
transform: translateX(-40%);
|
||||
width: 50%;
|
||||
height: 30%;
|
||||
background: linear-gradient(180deg, #c0c0c0 0%, #808080 50%, #606060 100%);
|
||||
border-radius: 5%;
|
||||
border-top-left-radius: 0px;
|
||||
box-shadow:
|
||||
0 1cqw 2cqw rgba(0, 0, 0, 0.4),
|
||||
inset 0 0.25cqw 0.5cqw rgba(255, 255, 255, 0.3);
|
||||
z-index: 5;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
left: -35%;
|
||||
position: absolute;
|
||||
border-bottom-left-radius: 5%;
|
||||
box-shadow:
|
||||
inset 0.5cqw 0 0.5cqw rgba(0, 0, 0, 0.5),
|
||||
inset 0 -0.25cqw 0.5cqw rgba(255, 255, 255, 0.4);
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.shutter-opening {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
right: 10%;
|
||||
transform: translateX(-50%);
|
||||
width: 20%;
|
||||
height: 70%;
|
||||
background: #000;
|
||||
border-radius: 5%;
|
||||
box-shadow: inset 0 0.5cqw 1cqw rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
height: 55%;
|
||||
background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
|
||||
border-radius: 2%;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
font-family: "Caveat", cursive;
|
||||
color: black;
|
||||
font-size: clamp(0.7rem, 5cqw, 2rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Yellow header on label */
|
||||
.label-header {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
background: linear-gradient(180deg, #f4d03f 0%, #e1b700 100%);
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
|
||||
padding: 2%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label-lines {
|
||||
padding: 5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 80%;
|
||||
box-sizing: border-box;
|
||||
font-size: clamp(0.6rem, 4cqw, 1.5rem);
|
||||
}
|
||||
|
||||
.label-line {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 1.5px;
|
||||
border-bottom: 2px solid black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
|
@ -6,10 +6,12 @@
|
|||
@import "partials/terminal";
|
||||
@import "partials/now-playing";
|
||||
@import "partials/lavalamp";
|
||||
@import "partials/floppy";
|
||||
|
||||
@import "partials/content-screens";
|
||||
|
||||
@import "pages/about";
|
||||
@import "pages/audio";
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap");
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
---
|
||||
title: Music & Audio
|
||||
author: Dan
|
||||
type: audio
|
||||
date: 2025-12-08T11:46:01+00:00
|
||||
comments: false
|
||||
---
|
||||
|
||||
This page is coming soon...
|
||||
This page is coming soon. 11
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wide-item">
|
||||
<div class="wide-item manifesto-container">
|
||||
<div class="content-screen">
|
||||
<div class="screen-display crt">
|
||||
> cat manifesto
|
||||
|
|
@ -48,25 +48,25 @@
|
|||
what it could become. There was so much hope.
|
||||
</p>
|
||||
<p>
|
||||
Unfortunately what it became was an algorithmic slopshop. I fucking
|
||||
hate it.
|
||||
Unfortunately what it has become is an algorithmic slopshop. I
|
||||
fucking hate it.
|
||||
</p>
|
||||
<p>
|
||||
During my formative years I chatted to people from all over the
|
||||
world, I found them through mutual interests, friends of friends,
|
||||
and just spending time exploring. IRC, forums, and MSN messenger
|
||||
were our tools; building connections was our mission.
|
||||
world, I found them through mutual interests, friends of friends of
|
||||
friends, and just spending time exploring. IRC, forums, and MSN
|
||||
messenger were our tools; building connections was our mission.
|
||||
</p>
|
||||
<p>
|
||||
The internet was so inspiring to me I studied it at college and
|
||||
university and it eventually become a prosperous career. I still
|
||||
university and it eventually became a prosperous career. I still
|
||||
work with the internet daily.
|
||||
</p>
|
||||
<p>
|
||||
Unfortunately, socially the internet become a cesspit. Particularly
|
||||
in recent years. It's the cyberpunk dystopia of corporations telling
|
||||
us what to think, billionaires telling us what to feel, and
|
||||
politicians disregarding everyone.
|
||||
Unfortunately, socially the internet has become a cesspit.
|
||||
Particularly in recent years. It's the cyberpunk dystopia of
|
||||
corporations telling us what to think, billionaires telling us what
|
||||
to feel, and politicians disregarding everyone.
|
||||
</p>
|
||||
<p>
|
||||
This website is meant to be a giant fuck you to web 2.0, social
|
||||
|
|
@ -84,6 +84,11 @@
|
|||
<span class="cursor-blink">_</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="manifesto-floppy">
|
||||
{{ partial "elements/floppy.html" (dict "title" "They're spying on you"
|
||||
"lines" (slice "" "" "run truth.exe" "" "") "bgColor" "#1a4d8f"
|
||||
"bgColorDark" "#0d2747") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-screen">
|
||||
|
|
|
|||
6
layouts/audio/single.html
Normal file
6
layouts/audio/single.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define
|
||||
"main" }}
|
||||
<article class="audio-page starfield" id="starfield">
|
||||
<div class="audio-content">123 123</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
23
layouts/partials/elements/floppy.html
Normal file
23
layouts/partials/elements/floppy.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{{ $title := .title | default "" }} {{ $lines := .lines | default (slice "" ""
|
||||
"" "" "") }} {{ $bgColor := .bgColor | default "#1a1a1a" }} {{ $bgColorDark :=
|
||||
.bgColorDark | default "#000000" }}
|
||||
|
||||
<div
|
||||
class="floppy-disk"
|
||||
style="background: linear-gradient(135deg, {{ $bgColor }} 0%, {{ $bgColorDark }} 100%);"
|
||||
>
|
||||
<div class="metal-shutter">
|
||||
<div
|
||||
class="shutter-opening"
|
||||
style="background: linear-gradient(135deg, {{ $bgColor }} 0%, {{ $bgColorDark }} 100%);"
|
||||
></div>
|
||||
</div>
|
||||
<div class="label">
|
||||
<div class="label-header">{{ $title }}</div>
|
||||
<div class="label-lines">
|
||||
{{ range $lines }}
|
||||
<div class="label-line">{{ . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,18 +1,20 @@
|
|||
{{ $script := .Site.Data.webpack_assets.app }}
|
||||
{{ with $script.js }}
|
||||
<script src="{{ relURL (printf "%s%s" "dist/" .) }}"></script>
|
||||
{{ end }}
|
||||
|
||||
{{/* Terminal Scripts Partial */}}
|
||||
{{/* This compiles all terminal JS files into a single minified bundle */}}
|
||||
{{ $terminal := resources.Get "js/terminal.js" }}
|
||||
{{ $lavalamp := resources.Get "js/lavalamp.js" }}
|
||||
<!-- prettier-ignore -->
|
||||
{{ $terminalShell := resources.Get "js/terminal.js" }}
|
||||
{{ $init := resources.Get "js/init.js" }}
|
||||
{{ $coreCommands := resources.Get "js/commands/core.js" }}
|
||||
{{ $utilityCommands := resources.Get "js/commands/utility.js" }}
|
||||
{{ $navigationCommands := resources.Get "js/commands/navigation.js" }}
|
||||
{{ $customCommands := resources.Get "js/commands/custom.js" }}
|
||||
|
||||
{{ $terminalBundle := slice $terminal $lavalamp $init $coreCommands $utilityCommands $navigationCommands $customCommands | resources.Concat "js/terminal-bundle.js" | resources.Minify | resources.Fingerprint }}
|
||||
|
||||
<script src="{{ $terminalBundle.RelPermalink }}" integrity="{{ $terminalBundle.Data.Integrity }}"></script>
|
||||
{{ $commandFiles := resources.Match "js/commands/*.js" }}
|
||||
{{ $subfolderFiles := resources.Match "js/*/*.js" }}
|
||||
{{ $remaining := resources.Match "js/*.js" }}
|
||||
{{ $filtered := slice }}
|
||||
{{ range $remaining }}
|
||||
{{ $path := .RelPermalink }}
|
||||
{{ if and (not (strings.Contains $path "/terminal.js")) (not (strings.Contains $path "/init.js")) }}
|
||||
{{ $filtered = $filtered | append . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ $allFiles := slice $terminalShell | append $filtered | append $init | append $commandFiles | append $subfolderFiles }}
|
||||
{{ $terminalBundle := $allFiles | resources.Concat "js/terminal-bundle.js" | resources.Minify | resources.Fingerprint }}
|
||||
<!-- prettier-ignore-end -->
|
||||
<script
|
||||
src="{{ $terminalBundle.RelPermalink }}"
|
||||
integrity="{{ $terminalBundle.Data.Integrity }}"
|
||||
></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue