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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue