Adding about page
This commit is contained in:
Dan
parent
1e6f9a845e
commit
6f4e21572a
16 changed files with 479 additions and 225 deletions
|
|
@ -1,4 +1,5 @@
|
|||
(function () {
|
||||
const blobsContainer = document.querySelector(".blobs-container"); // Changed from lavaLamp
|
||||
const lavaLamp = document.getElementById("lavaLamp");
|
||||
let blobs = [];
|
||||
let baseSpeed = 0.8;
|
||||
|
|
@ -6,41 +7,71 @@
|
|||
function createBlob() {
|
||||
const blob = document.createElement("div");
|
||||
blob.className = "blob";
|
||||
const size = Math.random() * 30 + 20; // Smaller blobs (20-50px)
|
||||
const startY = Math.random() * 100; // Within ~150px height
|
||||
|
||||
// Get container dimensions from lavaLamp
|
||||
const containerWidth = lavaLamp.offsetWidth;
|
||||
const containerHeight = lavaLamp.offsetHeight;
|
||||
|
||||
// Size relative to container width (25-50% of width)
|
||||
const size = (Math.random() * 0.15 + 0.25) * containerWidth;
|
||||
|
||||
const duration = (Math.random() * 8 + 12) / baseSpeed;
|
||||
const maxX = 60 - size; // Adjusted for narrower tube (80px wide)
|
||||
|
||||
// Max X position accounting for blob size
|
||||
const maxX = containerWidth - size;
|
||||
const startX = Math.random() * maxX;
|
||||
|
||||
blob.style.width = `${size}px`;
|
||||
blob.style.height = `${size}px`;
|
||||
blob.style.left = `${startX}px`;
|
||||
blob.style.bottom = "10px";
|
||||
blob.style.position = "absolute";
|
||||
|
||||
blob.style.setProperty("--duration", `${duration}s`);
|
||||
|
||||
// Start position (bottom of lamp)
|
||||
blob.style.setProperty("--start-x", "0px");
|
||||
blob.style.setProperty("--start-y", `${startY}px`);
|
||||
blob.style.setProperty("--mid1-x", `${Math.random() * 15 - 15}px`);
|
||||
blob.style.setProperty("--mid1-y", `${Math.random() * -40 - 40}px`);
|
||||
blob.style.setProperty("--mid2-x", `${Math.random() * 20 - 20}px`);
|
||||
blob.style.setProperty("--mid2-y", `${Math.random() * -80 - 40}px`);
|
||||
blob.style.setProperty("--mid3-x", `${Math.random() * 15 - 15}px`);
|
||||
blob.style.setProperty("--mid3-y", `${Math.random() * -60 - 10}px`);
|
||||
blob.style.setProperty("--start-y", "0px");
|
||||
|
||||
// Movement waypoints (moving upward - negative Y values)
|
||||
blob.style.setProperty(
|
||||
"--mid1-x",
|
||||
`${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid1-y",
|
||||
`${-(Math.random() * 0.15 + 0.25) * containerHeight}px`,
|
||||
);
|
||||
|
||||
blob.style.setProperty(
|
||||
"--mid2-x",
|
||||
`${(Math.random() * 0.4 - 0.2) * containerWidth}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid2-y",
|
||||
`${-(Math.random() * 0.2 + 0.5) * containerHeight}px`,
|
||||
);
|
||||
|
||||
blob.style.setProperty(
|
||||
"--mid3-x",
|
||||
`${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid3-y",
|
||||
`${-(Math.random() * 0.15 + 0.8) * containerHeight}px`,
|
||||
);
|
||||
|
||||
// Scale variations
|
||||
blob.style.setProperty("--scale1", (Math.random() * 0.3 + 1.0).toFixed(2));
|
||||
blob.style.setProperty("--scale2", (Math.random() * 0.3 + 0.85).toFixed(2));
|
||||
blob.style.setProperty("--scale3", (Math.random() * 0.3 + 0.95).toFixed(2));
|
||||
|
||||
// Random delay to stagger animations
|
||||
blob.style.animationDelay = `${Math.random() * -20}s`;
|
||||
|
||||
return blob;
|
||||
}
|
||||
|
||||
function updateBlobColors() {
|
||||
const color1 = "#FF7800";
|
||||
const color2 = "#E01B24";
|
||||
const gradient = `radial-gradient(circle at 30% 30%, ${color1}, ${color2})`;
|
||||
blobs.forEach((blob) => {
|
||||
blob.style.background = gradient;
|
||||
});
|
||||
}
|
||||
|
||||
function updateLampBackground() {
|
||||
const bg1 = "#F8E45C";
|
||||
const bg2 = "#FF7800";
|
||||
|
|
@ -51,13 +82,12 @@
|
|||
const count = parseInt(6);
|
||||
while (blobs.length > count) {
|
||||
const blob = blobs.pop();
|
||||
lavaLamp.removeChild(blob);
|
||||
blobsContainer.removeChild(blob); // Changed
|
||||
}
|
||||
while (blobs.length < count) {
|
||||
const blob = createBlob();
|
||||
blobs.push(blob);
|
||||
lavaLamp.appendChild(blob);
|
||||
updateBlobColors();
|
||||
blobsContainer.appendChild(blob); // Changed
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ class TerminalShell {
|
|||
let latestPostTitle = document.getElementById("latest-post-title");
|
||||
let latestPostDate = document.getElementById("latest-post-date");
|
||||
this.printHTML(
|
||||
"<span class='info'>Latest Post: </span>" +
|
||||
"<span class='info'>Latest Update: </span>" +
|
||||
latestPostTitle.innerText +
|
||||
" (" +
|
||||
latestPostDate.innerText +
|
||||
|
|
|
|||
27
assets/sass/pages/about.scss
Normal file
27
assets/sass/pages/about.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.about-page {
|
||||
color: white;
|
||||
margin: auto;
|
||||
|
||||
> .about-content {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
|
||||
> .wide-item {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
> .about-header {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.about-page > .about-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
111
assets/sass/partials/_content-screens.scss
Normal file
111
assets/sass/partials/_content-screens.scss
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
.content-screen {
|
||||
margin: auto;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
aspect-ratio: 300 / 245;
|
||||
background: linear-gradient(145deg, #b8b8b0, #989888);
|
||||
box-shadow:
|
||||
0 8px 20px rgba(0, 0, 0, 0.7),
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.3),
|
||||
inset 0 -2px 4px rgba(0, 0, 0, 0.3);
|
||||
padding: 6px 8px 18px 8px;
|
||||
|
||||
> .crt {
|
||||
animation: textShadow 1.6s infinite;
|
||||
background: black;
|
||||
color: greenyellow;
|
||||
font-family: monospace;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 6px;
|
||||
left: 8px;
|
||||
bottom: 18px;
|
||||
right: 8px;
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 0, 0, 0.06),
|
||||
rgba(0, 255, 0, 0.02),
|
||||
rgba(0, 0, 255, 0.06)
|
||||
);
|
||||
z-index: 2;
|
||||
background-size:
|
||||
100% 2px,
|
||||
3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 6px;
|
||||
left: 8px;
|
||||
bottom: 18px;
|
||||
right: 8px;
|
||||
background: rgba(18, 16, 16, 0.1);
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
animation: flicker 0.15s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
> .screen-display {
|
||||
position: relative;
|
||||
font-size: clamp(0.875rem, 2vw, 1rem);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-color: #0f0 #000;
|
||||
|
||||
&.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
> p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
right: 8px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #0f0;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 6px #0f0;
|
||||
animation: pulse 1.8s ease-in-out infinite;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.content-screen:nth-child(1) {
|
||||
transform: rotate(-0.5deg);
|
||||
}
|
||||
.content-screen:nth-child(2) {
|
||||
transform: rotate(0.4deg);
|
||||
}
|
||||
.content-screen:nth-child(3) {
|
||||
transform: rotate(-0.5deg);
|
||||
}
|
||||
.content-screen:nth-child(4) {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
.content-screen:nth-child(5) {
|
||||
transform: rotate(-1.2deg);
|
||||
}
|
||||
.content-screen:nth-child(6) {
|
||||
transform: rotate(0.3deg);
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
footer[role="contentinfo"] {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
background: #000; // or whatever color you want
|
||||
color: #0f0; // match your terminal green theme
|
||||
background: #000;
|
||||
color: #0f0;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,26 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
|
||||
margin: 0 auto;
|
||||
//width: fit-content; /* or specify a fixed width */
|
||||
|
||||
.about-content & {
|
||||
position: relative;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 160px;
|
||||
height: 300px;
|
||||
|
||||
transform: rotate(-5deg);
|
||||
|
||||
.lamp-text {
|
||||
font-size: 60px;
|
||||
color: rgba(224, 27, 36, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lamp-cap {
|
||||
|
|
@ -21,11 +41,10 @@
|
|||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lava-lamp {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 102%; /*Being above 100% fixes the occasional gap when resizing the page, theoretically */
|
||||
height: 110%;
|
||||
background: var(--lamp-bg, linear-gradient(180deg, #2a1a4a 0%, #1a0a3a 100%));
|
||||
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
|
||||
overflow: hidden;
|
||||
|
|
@ -53,6 +72,27 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.blobs-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
filter: url(#goo);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: #f74b1e;
|
||||
animation: float var(--duration) ease-in-out infinite;
|
||||
opacity: 0.95;
|
||||
mix-blend-mode: normal;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.lamp-base {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
|
|
@ -68,20 +108,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: var(
|
||||
--blob-color,
|
||||
radial-gradient(circle at 30% 30%, #ff6b9d, #c44569)
|
||||
);
|
||||
filter: url(#goo);
|
||||
animation: float var(--duration) ease-in-out infinite;
|
||||
opacity: 0.95;
|
||||
mix-blend-mode: normal;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
|
|
@ -119,4 +145,8 @@
|
|||
|
||||
.lava-lamp:hover {
|
||||
cursor: pointer;
|
||||
|
||||
> .lamp-text {
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
96
assets/sass/partials/_neon-sign.scss
Normal file
96
assets/sass/partials/_neon-sign.scss
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
/* Neon sign styling */
|
||||
.neon-sign {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 60%;
|
||||
transform: translateX(-50%) rotate(-10deg);
|
||||
z-index: 1;
|
||||
|
||||
> .neon-text {
|
||||
font-family: "Neonderthaw", cursive;
|
||||
font-size: 7rem;
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
/* White core */
|
||||
0 0 5px #fff,
|
||||
0 0 5px #fff,
|
||||
/* Bright green inner glow */ 0 0 21px #0f0,
|
||||
0 0 42px #0f0,
|
||||
0 0 82px #0f0,
|
||||
/* Outer green glow */ 0 0 92px #0f0,
|
||||
0 0 142px #0f0,
|
||||
0 0 181px #0f0;
|
||||
animation:
|
||||
neon-flicker 10s infinite alternate,
|
||||
neon-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
[role="navigation"] & {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 10px;
|
||||
transform: translateX(0) rotate(-10deg);
|
||||
z-index: 9999;
|
||||
> .neon-text {
|
||||
font-size: 2rem;
|
||||
text-shadow:
|
||||
/* White core */
|
||||
0 0 5px #fff,
|
||||
0 0 5px #fff,
|
||||
/* Bright green inner glow */ 0 0 11px #0f0,
|
||||
0 0 22px #0f0,
|
||||
0 0 42px #0f0,
|
||||
/* Outer green glow */ 0 0 22px #0f0,
|
||||
0 0 42px #0f0,
|
||||
0 0 81px #0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon-pulse {
|
||||
0%,
|
||||
100% {
|
||||
text-shadow:
|
||||
0 0 7px #fff,
|
||||
0 0 10px #fff,
|
||||
0 0 21px #0f0,
|
||||
0 0 42px #0f0,
|
||||
0 0 82px #0f0,
|
||||
0 0 92px #0f0,
|
||||
0 0 102px #0f0,
|
||||
0 0 151px #0f0;
|
||||
}
|
||||
50% {
|
||||
text-shadow:
|
||||
0 0 4px #fff,
|
||||
0 0 7px #fff,
|
||||
0 0 15px #0f0,
|
||||
0 0 30px #0f0,
|
||||
0 0 60px #0f0,
|
||||
0 0 70px #0f0,
|
||||
0 0 80px #0f0,
|
||||
0 0 120px #0f0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon-flicker {
|
||||
0%,
|
||||
19%,
|
||||
21%,
|
||||
23%,
|
||||
25%,
|
||||
54%,
|
||||
56%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
20%,
|
||||
24%,
|
||||
55% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
22% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,16 @@
|
|||
@import "partials/global-styles";
|
||||
|
||||
@import "partials/neon-sign";
|
||||
@import "partials/music";
|
||||
@import "partials/vu-meter";
|
||||
@import "partials/terminal";
|
||||
@import "partials/now-playing";
|
||||
@import "partials/lavalamp";
|
||||
|
||||
@import "partials/content-screens";
|
||||
|
||||
@import "pages/about";
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap");
|
||||
|
||||
* {
|
||||
|
|
@ -17,7 +22,6 @@
|
|||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-family: "Courier New", monospace;
|
||||
background: #1a1a1a;
|
||||
position: relative;
|
||||
|
|
@ -1548,78 +1552,3 @@ body {
|
|||
|
||||
/* Import a nice cursive font */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap");
|
||||
|
||||
/* Neon sign styling */
|
||||
.neon-sign {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 60%;
|
||||
transform: translateX(-50%) rotate(-10deg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.neon-text {
|
||||
font-family: "Neonderthaw", cursive;
|
||||
font-size: 7rem;
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
/* White core */
|
||||
0 0 5px #fff,
|
||||
0 0 5px #fff,
|
||||
/* Bright green inner glow */ 0 0 21px #0f0,
|
||||
0 0 42px #0f0,
|
||||
0 0 82px #0f0,
|
||||
/* Outer green glow */ 0 0 92px #0f0,
|
||||
0 0 142px #0f0,
|
||||
0 0 181px #0f0;
|
||||
animation:
|
||||
neon-flicker 10s infinite alternate,
|
||||
neon-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes neon-pulse {
|
||||
0%,
|
||||
100% {
|
||||
text-shadow:
|
||||
0 0 7px #fff,
|
||||
0 0 10px #fff,
|
||||
0 0 21px #0f0,
|
||||
0 0 42px #0f0,
|
||||
0 0 82px #0f0,
|
||||
0 0 92px #0f0,
|
||||
0 0 102px #0f0,
|
||||
0 0 151px #0f0;
|
||||
}
|
||||
50% {
|
||||
text-shadow:
|
||||
0 0 4px #fff,
|
||||
0 0 7px #fff,
|
||||
0 0 15px #0f0,
|
||||
0 0 30px #0f0,
|
||||
0 0 60px #0f0,
|
||||
0 0 70px #0f0,
|
||||
0 0 80px #0f0,
|
||||
0 0 120px #0f0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon-flicker {
|
||||
0%,
|
||||
19%,
|
||||
21%,
|
||||
23%,
|
||||
25%,
|
||||
54%,
|
||||
56%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
20%,
|
||||
24%,
|
||||
55% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
22% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,13 @@ minify:
|
|||
disableXML: true
|
||||
minifyOutput: true
|
||||
|
||||
frontmatter:
|
||||
lastmod:
|
||||
- lastmod
|
||||
- :git
|
||||
- date
|
||||
- publishDate
|
||||
|
||||
params:
|
||||
env: production
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ title: Some stuff about me
|
|||
author: Dan
|
||||
type: about
|
||||
date: 2024-01-09T11:46:01+00:00
|
||||
lastmod: 2025-12-09
|
||||
comments: false
|
||||
---
|
||||
|
||||
This page is coming soon...
|
||||
This page is coming soon.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Music & Audio
|
||||
author: Dan
|
||||
type: about
|
||||
type: audio
|
||||
date: 2025-12-08T11:46:01+00:00
|
||||
comments: false
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,6 +1,104 @@
|
|||
{{ define "main" }} 1234
|
||||
{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define
|
||||
"main" }}
|
||||
<article class="about-page">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="about-content">{{ .Content }}</div>
|
||||
<div class="about-content">
|
||||
<div class="about-header">{{ partial "elements/lavalamp.html" . }}</div>
|
||||
|
||||
<div class="content-screen">
|
||||
<div class="screen-display crt no-scroll">
|
||||
> about -v <br />
|
||||
<span>Name</span> / <span class="info">Dan (He/Him)</span><br />
|
||||
<span>Age</span> / <span class="info">40-something</span><br />
|
||||
<span>Location</span> / <span class="info">UK 🇬🇧</span><br /><br />
|
||||
<span>Interests</span> /
|
||||
<span class="info">
|
||||
Programming. Music. Movies. Tech. Photography. </span
|
||||
><br />
|
||||
<span class="cursor-blink">_</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wide-item">
|
||||
<div class="content-screen">
|
||||
<div class="screen-display crt">
|
||||
> cat manifesto
|
||||
<div style="display: flex; justify-content: center">
|
||||
<pre>
|
||||
|
||||
▄▄
|
||||
██ █▄
|
||||
▄ ▄ ▀▀▄██▄ ▄██▄
|
||||
███▄███▄ ▄▀▀█▄ ████▄ ██ ██ ▄█▀█▄ ▄██▀█ ██ ▄███▄
|
||||
██ ██ ██ ▄█▀██ ██ ██ ██ ██ ██▄█▀ ▀███▄ ██ ██ ██
|
||||
▄██ ██ ▀█▄▀█▄██▄██ ▀█▄██▄██▄▀█▄▄▄█▄▄██▀▄██▄▀███▀
|
||||
██
|
||||
▀▀
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
|
||||
<p>I hate being told what to do.</p>
|
||||
<p>
|
||||
That's about the long and the short of it. But if you want to know
|
||||
more...
|
||||
</p>
|
||||
<p>
|
||||
I grew up with the internet. I'm of the generation that saw the
|
||||
internet come into existence, when it was free, open and finding out
|
||||
what it could become. There was so much hope.
|
||||
</p>
|
||||
<p>
|
||||
Unfortunately what it became was 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.
|
||||
</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
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
This website is meant to be a giant fuck you to web 2.0, social
|
||||
media, algorithms and anyone or anything that tells me what to think
|
||||
or feel.
|
||||
</p>
|
||||
<p>
|
||||
I want to invoke the feeling of the early internet, with some amount
|
||||
of modernity thrown in.
|
||||
</p>
|
||||
<p>
|
||||
This is my space. Anyone is welcome to hang out if you bring good
|
||||
vibes.
|
||||
</p>
|
||||
<span class="cursor-blink">_</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-screen">
|
||||
<div class="screen-display crt no-scroll">
|
||||
> ./hardware -main <br />
|
||||
PC /
|
||||
<span class="info">Ryzen 7 9800X3D, Radeon RX 7900 XTX, 64gb RAM</span>
|
||||
/ <span class="warning">Bazzite • kitty • KDE Plasma</span
|
||||
><br />
|
||||
Camera / <span class="info">Fuji X-T5</span><br />
|
||||
Audio / <span class="info">Hiby R4 EVA, Fiio FT-1</span> <br /><br />
|
||||
More info coming soon...
|
||||
<br /><span class="cursor-blink">_</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
{{ define "main" }}
|
||||
{{ define "header" }}
|
||||
<!-- Sir, this is a homepage -->
|
||||
{{ end }}{{ define "main" }}
|
||||
<div class="wall"></div>
|
||||
|
||||
<!-- Neon sign above monitor -->
|
||||
<div class="neon-sign">
|
||||
<div class="neon-text">ritual.sh</div>
|
||||
</div>
|
||||
{{ partial "elements/neon-sign.html" . }}
|
||||
|
||||
<!-- Sticky notes -->
|
||||
<div class="sticky-note note1">fix bugs</div>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Poster on wall -->
|
||||
<!-- Now playing poster on wall -->
|
||||
<div class="poster">
|
||||
<div class="poster-image" id="posterImage">
|
||||
<script src="/js/nowplaying.js"></script>
|
||||
|
|
@ -66,77 +66,6 @@
|
|||
<!-- Desk -->
|
||||
<div class="desk"></div>
|
||||
|
||||
<!-- Curved cables on desk using SVG -->
|
||||
<svg
|
||||
class="cable-svg"
|
||||
style="position: absolute; bottom: 8%; left: 15%; width: 200px; height: 150px"
|
||||
>
|
||||
<path
|
||||
d="M 20 10 Q 40 60, 80 120"
|
||||
stroke="#222"
|
||||
stroke-width="3"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="cable-svg"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
right: 20%;
|
||||
width: 180px;
|
||||
height: 140px;
|
||||
"
|
||||
>
|
||||
<path
|
||||
d="M 150 20 Q 100 70, 40 130"
|
||||
stroke="#1a1a1a"
|
||||
stroke-width="3"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="cable-svg"
|
||||
style="position: absolute; bottom: 8%; left: 28%; width: 220px; height: 160px"
|
||||
>
|
||||
<path
|
||||
d="M 10 30 Q 80 40, 160 140"
|
||||
stroke="#252525"
|
||||
stroke-width="2.5"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="cable-svg"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
right: 35%;
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
"
|
||||
>
|
||||
<path
|
||||
d="M 130 15 Q 70 50, 20 110"
|
||||
stroke="#2a2a2a"
|
||||
stroke-width="2.5"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="cable-svg"
|
||||
style="position: absolute; bottom: 8%; left: 42%; width: 160px; height: 130px"
|
||||
>
|
||||
<path
|
||||
d="M 30 20 Q 60 80, 120 125"
|
||||
stroke="#1f1f1f"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="monitor-stand-small"></div>
|
||||
|
||||
<!-- Desk monitor -->
|
||||
<div class="secondary-screen desk-monitor">
|
||||
<div class="screen-display large crt">
|
||||
|
|
@ -253,7 +182,7 @@
|
|||
<div class="widget router"></div>
|
||||
<div class="widget hard-drive"></div>
|
||||
|
||||
{{ partial "lavalamp.html" . }}
|
||||
{{ partial "elements/lavalamp.html" . }}
|
||||
|
||||
<!-- CRT Monitor -->
|
||||
<div class="crt-container">
|
||||
|
|
@ -413,6 +342,6 @@ $pages "Lastmod" "desc") }}
|
|||
<div id="latest-post">
|
||||
<div id="latest-post-link">{{ .Permalink }}</div>
|
||||
<div id="latest-post-title">{{ .Title }}</div>
|
||||
<div id="latest-post-date">{{ .Date.Format "Jan 2, 2006" }}</div>
|
||||
<div id="latest-post-date">{{ .Lastmod.Format "Jan 2, 2006" }}</div>
|
||||
</div>
|
||||
{{ end }} {{ end }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="container">
|
||||
<div>
|
||||
<svg style="position: absolute; width: 0; height: 0">
|
||||
<defs>
|
||||
<filter id="goo">
|
||||
|
|
@ -6,7 +6,11 @@
|
|||
<feColorMatrix
|
||||
in="blur"
|
||||
mode="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"
|
||||
values="
|
||||
1 0 0 0 0
|
||||
0 1 0 0 0
|
||||
0 0 1 0 0
|
||||
0 0 0 18 -7"
|
||||
result="goo"
|
||||
/>
|
||||
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
|
||||
|
|
@ -17,6 +21,8 @@
|
|||
<div class="lava-lamp-container">
|
||||
<div class="lamp-cap"></div>
|
||||
<div class="lava-lamp" id="lavaLamp">
|
||||
<div class="blobs-container"></div>
|
||||
<!-- NEW: wrapper for blobs -->
|
||||
<div class="lamp-text">ABOUT</div>
|
||||
</div>
|
||||
<div class="lamp-base"></div>
|
||||
3
layouts/partials/elements/neon-sign.html
Normal file
3
layouts/partials/elements/neon-sign.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<div class="neon-sign">
|
||||
<div class="neon-text">ritual.sh</div>
|
||||
</div>
|
||||
|
|
@ -1,22 +1,9 @@
|
|||
<nav role="navigation" style="display:none;">
|
||||
<div>
|
||||
<a href="{{ .Site.BaseURL }}">
|
||||
{{ .Site.Title }}
|
||||
</a>
|
||||
<div>
|
||||
{{ partial "i18nlist.html" . }}
|
||||
{{ if .Site.Menus.main }}
|
||||
<ul>
|
||||
{{ range .Site.Menus.main }}
|
||||
<li>
|
||||
<a href="{{ .URL }}" title="{{ .Name }} page">
|
||||
{{ .Name }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
{{ partial "social-follow.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
<nav role="navigation">
|
||||
<div>
|
||||
<a href="/">
|
||||
<div class="neon-sign">
|
||||
<div class="neon-text">ritual.sh</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
Loading…
Add table
Add a link
Reference in a new issue