Adding about page
This commit is contained in:
Dan
parent
1e6f9a845e
commit
6f4e21572a
16 changed files with 479 additions and 225 deletions
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