Adding contact information, updating about page
This commit is contained in:
Dan
parent
80b1d7634a
commit
0041a48bae
11 changed files with 526 additions and 43 deletions
|
|
@ -2,6 +2,10 @@
|
|||
color: white;
|
||||
margin: auto;
|
||||
|
||||
.content-screen {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
> .about-content {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
|
|
@ -14,6 +18,125 @@
|
|||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.about-contact-section {
|
||||
margin-top: 1rem;
|
||||
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
@media (min-width: 600px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #0f0;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted rgba(0, 255, 0, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: rgba(0, 255, 0, 0.8);
|
||||
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.pgp-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0;
|
||||
|
||||
@media (min-width: 600px) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pgp-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(0, 255, 0, 0.1);
|
||||
border: 1px solid rgba(0, 255, 0, 0.3);
|
||||
color: #0f0;
|
||||
text-decoration: none;
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
border-radius: 3px;
|
||||
|
||||
.button-icon {
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 255, 0, 0.2);
|
||||
border-color: rgba(0, 255, 0, 0.6);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
|
||||
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
.copy-feedback {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 10px;
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: #0f0;
|
||||
background: rgba(0, 255, 0, 0.1);
|
||||
border: 1px solid rgba(0, 255, 0, 0.3);
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: #f00;
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 0, 0, 0.3);
|
||||
text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-header {
|
||||
position: absolute;
|
||||
left: -80px;
|
||||
|
|
@ -37,6 +160,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
> .about-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> .info-badges {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
|
@ -55,6 +182,23 @@
|
|||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.about-music {
|
||||
pointer-events: none;
|
||||
|
||||
> .music {
|
||||
scale: 1.6;
|
||||
|
||||
.ipod-group {
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.vu-meter {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -558,6 +558,142 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Contact section styling
|
||||
.blog-contact-section {
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
background: rgba(0, 255, 0, 0.05);
|
||||
border: 1px solid rgba(0, 255, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
|
||||
@include media-down(lg) {
|
||||
margin-top: 30px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 15px;
|
||||
color: greenyellow;
|
||||
text-shadow: 0 0 10px rgba(173, 255, 47, 0.5);
|
||||
|
||||
@include media-down(lg) {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.contact-email,
|
||||
.contact-pgp {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
|
||||
@include media-down(lg) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
color: greenyellow;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
text-shadow: 0 0 5px rgba(173, 255, 47, 0.5);
|
||||
}
|
||||
|
||||
.contact-email a {
|
||||
color: #0f0;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted rgba(0, 255, 0, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: rgba(0, 255, 0, 0.8);
|
||||
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
|
||||
background: rgba(0, 255, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.pgp-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pgp-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 15px;
|
||||
background: rgba(0, 255, 0, 0.1);
|
||||
border: 1px solid rgba(0, 255, 0, 0.3);
|
||||
color: #0f0;
|
||||
text-decoration: none;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
border-radius: 3px;
|
||||
|
||||
@include media-down(lg) {
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
font-size: 1.1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 255, 0, 0.2);
|
||||
border-color: rgba(0, 255, 0, 0.6);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
|
||||
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
.copy-feedback {
|
||||
margin-top: 10px;
|
||||
font-size: 0.85rem;
|
||||
padding: 8px 12px;
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: #0f0;
|
||||
background: rgba(0, 255, 0, 0.1);
|
||||
border: 1px solid rgba(0, 255, 0, 0.3);
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: #f00;
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 0, 0, 0.3);
|
||||
text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Blog image styling
|
||||
.blog-img-container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
.whiteboard {
|
||||
background: linear-gradient(135deg, #f5f5f0 0%, #e8e8dd 100%);
|
||||
border-radius: 8px;
|
||||
padding: 3rem 2rem;
|
||||
|
||||
box-shadow:
|
||||
0 10px 40px rgba(0, 0, 0, 0.1),
|
||||
inset 0 0 100px rgba(0, 0, 0, 0.02);
|
||||
|
|
@ -24,15 +24,27 @@
|
|||
|
||||
// Subtle texture overlay
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.01) 2px, rgba(0, 0, 0, 0.01) 4px),
|
||||
repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.01) 2px, rgba(0, 0, 0, 0.01) 4px);
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 0, 0, 0.01) 2px,
|
||||
rgba(0, 0, 0, 0.01) 4px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 0, 0, 0.01) 2px,
|
||||
rgba(0, 0, 0, 0.01) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -77,18 +89,20 @@
|
|||
.resource-pin {
|
||||
position: relative;
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
|
||||
// Random slight rotations for pins
|
||||
&:nth-child(3n+1) {
|
||||
&:nth-child(3n + 1) {
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
&:nth-child(3n+2) {
|
||||
&:nth-child(3n + 2) {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
|
||||
&:nth-child(3n+3) {
|
||||
&:nth-child(3n + 3) {
|
||||
transform: rotate(-0.5deg);
|
||||
}
|
||||
|
||||
|
|
@ -120,7 +134,7 @@
|
|||
transition: transform 0.3s ease;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -147,19 +161,19 @@
|
|||
gap: 1rem;
|
||||
|
||||
// Vary note colors
|
||||
.resource-pin:nth-child(4n+1) & {
|
||||
.resource-pin:nth-child(4n + 1) & {
|
||||
background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%); // Yellow
|
||||
}
|
||||
|
||||
.resource-pin:nth-child(4n+2) & {
|
||||
.resource-pin:nth-child(4n + 2) & {
|
||||
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); // Blue
|
||||
}
|
||||
|
||||
.resource-pin:nth-child(4n+3) & {
|
||||
.resource-pin:nth-child(4n + 3) & {
|
||||
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); // Green
|
||||
}
|
||||
|
||||
.resource-pin:nth-child(4n+4) & {
|
||||
.resource-pin:nth-child(4n + 4) & {
|
||||
background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); // Pink
|
||||
}
|
||||
}
|
||||
|
|
@ -172,7 +186,13 @@
|
|||
|
||||
// Lavalamp icon
|
||||
&.lavalamp {
|
||||
background: linear-gradient(180deg, transparent 0%, transparent 20%, #9333ea 20%, #7c3aed 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
transparent 20%,
|
||||
#9333ea 20%,
|
||||
#7c3aed 100%
|
||||
);
|
||||
border-radius: 10px 10px 40px 40px;
|
||||
border: 3px solid #6b21a8;
|
||||
position: relative;
|
||||
|
|
@ -180,7 +200,7 @@
|
|||
|
||||
// Lamp base
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
|
|
@ -193,7 +213,7 @@
|
|||
|
||||
// Lava blobs
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
|
|
@ -219,7 +239,7 @@
|
|||
// Equalizer bars
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
width: 8px;
|
||||
|
|
@ -280,7 +300,8 @@
|
|||
}
|
||||
|
||||
@keyframes float-blob {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
|
|
@ -289,7 +310,8 @@
|
|||
}
|
||||
|
||||
@keyframes float-blob-2 {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
|
|
@ -298,7 +320,8 @@
|
|||
}
|
||||
|
||||
@keyframes equalizer-1 {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
height: 35px;
|
||||
}
|
||||
50% {
|
||||
|
|
@ -307,7 +330,8 @@
|
|||
}
|
||||
|
||||
@keyframes equalizer-2 {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
height: 25px;
|
||||
}
|
||||
50% {
|
||||
|
|
@ -316,7 +340,8 @@
|
|||
}
|
||||
|
||||
@keyframes equalizer-3 {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
height: 30px;
|
||||
}
|
||||
50% {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue