930 lines
35 KiB
HTML
930 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Emilia Marigold</title>
|
|
<style>
|
|
/* --- CSS STYLES --- */
|
|
|
|
:root
|
|
{
|
|
/* Your Specific Palette */
|
|
--color-home: #ff6b6b;
|
|
--color-projects: #ffd700;
|
|
--color-contact: #6bce6b;
|
|
--color-coolsites: #6cbfff;
|
|
--color-blog: #d4a5ff;
|
|
|
|
/* Base Light Theme Colors */
|
|
--bg-body: #d4d4d4;
|
|
--bg-content: #e5eaf5;
|
|
--text-main: #333333;
|
|
--text-secondary: #666666;
|
|
--nav-bg: #e5eaf5;
|
|
--nav-shadow: 0 4px 15px rgba(0,0,0,0.15);
|
|
|
|
/* Rainbow Animation Settings */
|
|
--rainbow-speed: 10s;
|
|
}
|
|
|
|
[data-theme="dark"]
|
|
{
|
|
--bg-body: #1a1a1a;
|
|
--bg-content: #2d2d2d;
|
|
--text-main: #e0e0e0;
|
|
--text-secondary: #b0b0b0;
|
|
--nav-bg: #252525;
|
|
--nav-shadow: 0 4px 15px rgba(0,0,0,0.5);
|
|
|
|
/* Updated Palette for Dark Mode */
|
|
--color-home: #ff6b6b;
|
|
--color-projects: #ffd700;
|
|
--color-contact: #6bce6b;
|
|
--color-coolsites: #6cbfff;
|
|
--color-blog: #d4a5ff;
|
|
}
|
|
|
|
*
|
|
{
|
|
box-sizing: border-box;
|
|
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: var(--bg-body);
|
|
color: var(--text-main);
|
|
line-height: 1.6;
|
|
background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5d/Marigold_Field_20020400_11.jpg');
|
|
}
|
|
|
|
/* --- NAVIGATION STYLES (Reverted to Single Colors, Added Rainbow Border) --- */
|
|
.navbar
|
|
{
|
|
position: fixed;
|
|
top: 30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1000;
|
|
display: flex;
|
|
outline: none;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 15px 25px;
|
|
background-color: var(--nav-bg);
|
|
box-shadow: var(--nav-shadow);
|
|
transition: all 0.4s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-btn
|
|
{
|
|
text-decoration: none;
|
|
color: inherit;
|
|
padding: 10px 25px;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
border: 2px solid transparent; /* Default: transparent border */
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
/* Base colors for buttons (Single Colors on Hover) */
|
|
.btn-home { color: var(--color-home); }
|
|
.btn-home:hover
|
|
{
|
|
background-color: var(--color-home);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-projects { color: var(--color-projects); }
|
|
.btn-projects:hover
|
|
{
|
|
background-color: var(--color-projects);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-contact { color: var(--color-contact); }
|
|
.btn-contact:hover
|
|
{
|
|
background-color: var(--color-contact);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-coolsites { color: var(--color-coolsites); }
|
|
.btn-coolsites:hover
|
|
{
|
|
background-color: var(--color-coolsites);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-blog { color: var(--color-blog); }
|
|
.btn-blog:hover
|
|
{
|
|
background-color: var(--color-blog);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/*
|
|
RAINBOW OUTLINE LOGIC FOR NAVBAR
|
|
When hovering a nav button, we add a gradient border
|
|
*/
|
|
.nav-btn:hover {
|
|
/* Create a pseudo-element for the rainbow border */
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box; /* Keeps bg inside border */
|
|
}
|
|
|
|
/* Apply Rainbow Border on Hover via specific hover classes */
|
|
.nav-btn.btn-home:hover {
|
|
border-image: linear-gradient(45deg, var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog)) 1;
|
|
border-width: 2px;
|
|
box-shadow: 0 0 10px var(--color-home);
|
|
}
|
|
|
|
.nav-btn.btn-projects:hover {
|
|
border-image: linear-gradient(45deg, var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog), var(--color-home)) 1;
|
|
border-width: 2px;
|
|
box-shadow: 0 0 10px var(--color-projects);
|
|
}
|
|
|
|
.nav-btn.btn-contact:hover {
|
|
border-image: linear-gradient(45deg, var(--color-contact), var(--color-coolsites), var(--color-blog), var(--color-home), var(--color-projects)) 1;
|
|
border-width: 2px;
|
|
box-shadow: 0 0 10px var(--color-contact);
|
|
}
|
|
|
|
.nav-btn.btn-coolsites:hover {
|
|
border-image: linear-gradient(45deg, var(--color-coolsites), var(--color-blog), var(--color-home), var(--color-projects), var(--color-contact)) 1;
|
|
border-width: 2px;
|
|
box-shadow: 0 0 10px var(--color-coolsites);
|
|
}
|
|
|
|
.nav-btn.btn-blog:hover {
|
|
border-image: linear-gradient(45deg, var(--color-blog), var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites)) 1;
|
|
border-width: 2px;
|
|
box-shadow: 0 0 10px var(--color-blog);
|
|
}
|
|
|
|
/* --- THEME TOGGLE STYLES --- */
|
|
.theme-toggle-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 15px;
|
|
padding-left: 15px;
|
|
border-left: 2px solid rgba(128,128,128,0.3);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.theme-toggle-container:hover {
|
|
border-left-color: var(--color-contact);
|
|
background-color: rgba(0,0,0,0.05);
|
|
box-shadow: 0 0 10px var(--color-contact);
|
|
}
|
|
|
|
.theme-label {
|
|
font-size: 0.8rem;
|
|
margin-right: 10px;
|
|
font-weight: bold;
|
|
color: var(--text-main);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.theme-toggle-container:hover .theme-label {
|
|
color: var(--color-coolsites);
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 26px;
|
|
}
|
|
|
|
.switch input { opacity: 0; width: 0; height: 0; }
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-color: #ccc;
|
|
transition: .4s;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 20px; width: 20px;
|
|
left: 3px; bottom: 3px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
body[data-theme="dark"] .slider { background-color: #777; }
|
|
body[data-theme="dark"] .slider:before { transform: translateX(24px); }
|
|
|
|
.icon-sun { position: absolute; left: 5px; top: 5px; font-size: 14px; color: #FFD700; opacity: 0; transition: opacity 0.3s; }
|
|
.icon-moon { position: absolute; right: 5px; top: 5px; font-size: 16px; color: #8A2BE2; opacity: 1; transition: opacity 0.3s; }
|
|
body[data-theme="dark"] .icon-sun { opacity: 1; }
|
|
body[data-theme="dark"] .icon-moon { opacity: 0; }
|
|
|
|
/* --- MAIN CONTENT --- */
|
|
.content-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
padding-top: 250px;
|
|
}
|
|
|
|
h1, h2 { color: var(--text-main); transition: color 0.3s ease; }
|
|
h1 { font-size: 3.5rem; margin-bottom: 10px; }
|
|
p { color: var(--text-secondary); margin-bottom: 20px; transition: color 0.3s ease; }
|
|
|
|
.section {
|
|
margin-bottom: 80px;
|
|
padding: 40px;
|
|
background: var(--bg-content);
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
/* Section Hover Effect */
|
|
.section:hover {
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
|
border: 2px solid rgba(128,128,128,0.1);
|
|
}
|
|
|
|
.card {
|
|
background: var(--bg-content);
|
|
border: 1px solid rgba(128,128,128,0.2);
|
|
height: 150px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
color: var(--text-secondary);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
|
border-color: var(--color-coolsites);
|
|
}
|
|
|
|
/* --- CONTACT SECTION STYLES --- */
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px;
|
|
}
|
|
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
|
|
|
|
.contact-section-title {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 20px;
|
|
border-bottom: 2px solid var(--text-secondary);
|
|
padding-bottom: 10px;
|
|
display: inline-block;
|
|
color: var(--text-main);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.contact-section-title:hover {
|
|
color: var(--color-contact);
|
|
}
|
|
|
|
.info-list { list-style: none; padding: 0; margin-bottom: 30px; }
|
|
|
|
.info-item {
|
|
margin-bottom: 15px;
|
|
padding: 15px;
|
|
background-color: rgba(0,0,0,0.03);
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
body[data-theme="dark"] .info-item { background-color: rgba(255,255,255,0.05); }
|
|
|
|
.info-item:hover {
|
|
transform: translateX(5px);
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
|
|
border: 2px solid transparent; /* Prepare for rainbow border */
|
|
/* Apply rainbow border to contact items */
|
|
border-image: linear-gradient(90deg, var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog)) 1;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: bold;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: var(--text-secondary);
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 1.05rem;
|
|
color: var(--text-main);
|
|
word-break: break-all;
|
|
font-family: monospace;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Copy Icon with Rainbow Effect */
|
|
.copy-icon {
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
opacity: 0.7;
|
|
transition: all 0.3s;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-main);
|
|
margin-left: 10px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.copy-icon:hover {
|
|
opacity: 1;
|
|
transform: scale(1.15);
|
|
background-color: rgba(0,0,0,0.05);
|
|
color: var(--color-contact);
|
|
/* Add rainbow border to copy icon on hover */
|
|
border: 2px solid transparent;
|
|
border-image: linear-gradient(45deg, var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog)) 1;
|
|
box-shadow: 0 0 8px var(--color-contact);
|
|
}
|
|
|
|
/* PGP Key Block Styles */
|
|
.pgp-container {
|
|
background-color: #f0f0f0;
|
|
padding: 25px;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 0.85rem;
|
|
color: #333;
|
|
position: relative;
|
|
line-height: 1.6;
|
|
transition: all 0.4s ease;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
body[data-theme="dark"] .pgp-container {
|
|
background-color: #1e1e1e;
|
|
color: #d4d4d4;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.pgp-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid currentColor;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.pgp-container:hover {
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
|
/* PGP gets a purple/cool sites rainbow */
|
|
border-image: linear-gradient(45deg, var(--color-coolsites), var(--color-blog), var(--color-home), var(--color-projects)) 1;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.pgp-text { white-space: pre-wrap; font-weight: 500; transition: color 0.3s ease; }
|
|
|
|
.action-btn {
|
|
padding: 8px 16px;
|
|
background-color: var(--text-main);
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
body[data-theme="dark"] .action-btn { background-color: var(--text-main); }
|
|
|
|
.action-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
background-color: var(--color-contact);
|
|
border: 2px solid transparent;
|
|
border-image: linear-gradient(90deg, var(--color-contact), var(--color-coolsites), var(--color-blog)) 1;
|
|
}
|
|
|
|
/* --- COOL SITES GRID STYLES (Enhanced) --- */
|
|
.sites-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.site-card {
|
|
padding: 25px;
|
|
text-align: center;
|
|
border: 1px solid rgba(128,128,128,0.2);
|
|
transition: all 0.4s ease;
|
|
cursor: pointer;
|
|
background-color: var(--bg-content);
|
|
height: auto;
|
|
min-height: 120px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.site-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
|
/* Site Cards get a full Rainbow Outline */
|
|
border: 2px solid transparent;
|
|
border-image: linear-gradient(45deg, var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog), var(--color-home)) 1;
|
|
color: var(--color-coolsites);
|
|
}
|
|
|
|
.site-card.animating-text::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
/* Site Card Text Rainbow on Hover */
|
|
.site-card.animating-text h2,
|
|
.site-card.animating-text p,
|
|
.site-card.animating-text .site-name,
|
|
.site-card.animating-text .site-icon {
|
|
color: transparent;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
var(--color-home),
|
|
var(--color-projects),
|
|
var(--color-contact),
|
|
var(--color-coolsites),
|
|
var(--color-blog),
|
|
var(--color-home)
|
|
);
|
|
background-size: 400%;
|
|
animation: rainbow-wrap var(--rainbow-speed) linear infinite;
|
|
}
|
|
|
|
.site-icon { font-size: 2.5rem; margin-bottom: 10px; transition: color 0.3s ease; z-index: 2; position: relative;}
|
|
.site-name { font-size: 1.2rem; font-weight: 600; transition: color 0.3s ease; z-index: 2; position: relative; }
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 50px;
|
|
background-color: var(--bg-body);
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
border-top: 1px solid rgba(0,0,0,0.1);
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
footer:hover {
|
|
border-top-color: var(--color-contact);
|
|
box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
/* --- KEYFRAMES FOR INFINITE RAINBOW --- */
|
|
@keyframes rainbow-wrap {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Floating Navigation Bar -->
|
|
<nav class="navbar">
|
|
<a href="#home" class="nav-btn btn-home" data-text="home">home</a>
|
|
<a href="#projects" class="nav-btn btn-projects" data-text="projects">projects</a>
|
|
<a href="#contact" class="nav-btn btn-contact" data-text="contact me">contact me</a>
|
|
<a href="#cool-sites" class="nav-btn btn-coolsites" data-text="cool sites">cool sites</a>
|
|
<a href="#blog" class="nav-btn btn-blog" data-text="blog">blog</a>
|
|
|
|
<!-- Dark Mode Toggle -->
|
|
<div class="theme-toggle-container" id="theme-toggle">
|
|
<span class="theme-label" id="theme-text">Light</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="theme-switch">
|
|
<span class="slider">
|
|
<span class="icon-sun">☀</span>
|
|
<span class="icon-moon">☾</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="content-container">
|
|
|
|
<!-- Hero Section -->
|
|
<section id="home">
|
|
<div class="card" style="height: 250px; font-size: 2rem;">
|
|
<h1>Emilia Marigold</h1>
|
|
|
|
<p>Welcome to my digital garden. I design, I code, and I build cool things.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section id="projects" class="section">
|
|
<h2>Projects</h2>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
|
<div class="sites-grid">
|
|
<div class="site-card" onclick="window.open('https://example.com', '_blank')">
|
|
<div class="site-name">Project One</div>
|
|
</div>
|
|
<div class="site-card" onclick="window.open('https://example.com', '_blank')">
|
|
<div class="site-name">Project Two</div>
|
|
</div>
|
|
<div class="site-card" onclick="window.open('https://example.com', '_blank')">
|
|
<div class="site-name">Project Three</div>
|
|
</div>
|
|
<div class="site-card" onclick="window.open('https://example.com', '_blank')">
|
|
<div class="site-name">Project Four</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="section">
|
|
<h2>Contact Me</h2>
|
|
<p>You can reach out to me via email, Matrix, or check my public key for secure communication.</p>
|
|
|
|
<div class="contact-grid">
|
|
<!-- Contact Info -->
|
|
<div>
|
|
<h3 class="contact-section-title">Messaging</h3>
|
|
|
|
<div class="info-list">
|
|
<h4 class="info-label">Email</h4>
|
|
<ul>
|
|
<li class="info-item">
|
|
<span class="info-value">EmiliaMarigold@Protonmail.com</span>
|
|
<button class="copy-icon" title="Copy">🔗</button>
|
|
</li>
|
|
<li class="info-item">
|
|
<span class="info-value">Emilia@Marigold.games</span>
|
|
<button class="copy-icon" title="Copy">🔗</button>
|
|
</li>
|
|
<li class="info-item">
|
|
<span class="info-value">Epochryphon@protonmail.com</span>
|
|
<button class="copy-icon" title="Copy">🔗</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="info-list">
|
|
<h4 class="info-label">Matrix</h4>
|
|
<ul>
|
|
<li class="info-item">
|
|
<span class="info-value">@emilia:digitalthird.space</span>
|
|
<button class="copy-icon" title="Copy">🔗</button>
|
|
</li>
|
|
<li class="info-item">
|
|
<span class="info-value">@epochryphon:matrix.org</span>
|
|
<button class="copy-icon" title="Copy">🔗</button>
|
|
</li>
|
|
<li class="info-item">
|
|
<span class="info-value">@emiliamarigold:matrix.org</span>
|
|
<button class="copy-icon" title="Copy">🔗</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="info-list">
|
|
<h4 class="info-label">Session I.D.</h4>
|
|
<ul>
|
|
<li class="info-item">
|
|
<span class="info-value" style="font-size: 0.95rem;">
|
|
05aa14c6e8412c9b5fa6890b73ac09a4a<br>
|
|
9cb2a8f4166309c8a29f759f5f373f814
|
|
</span>
|
|
<button class="copy-icon" title="Copy">🔗</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PGP Public Key -->
|
|
<div>
|
|
<h3 class="contact-section-title">Security</h3>
|
|
<div class="pgp-container">
|
|
<div class="pgp-header">
|
|
<span>PGP Public Key</span>
|
|
<button class="action-btn" onclick="copyPGP()">Copy Key</button>
|
|
</div>
|
|
<div class="pgp-text" id="pgp-block">
|
|
-----BEGIN PGP PUBLIC KEY BLOCK-----
|
|
|
|
mDMEaayTBxYJKwYBBAHaRw8BAQdA
|
|
St/IB4hdoodPISaGb5mj2a7FEfFr
|
|
tBMz64raNfaYJRW0L0VtaWxpYSBN
|
|
YXJpZ29sZCA8RW1pbGlhTWFyaWdv
|
|
bGRAcHJvdG9ubWFpbC5jb20+iJYE
|
|
ExYKAD4WIQTwfVpXmIupgTn0bwG9
|
|
SlTYKqPsUgUCaayTBwIbAwUJBaOa
|
|
gAULCQgHAgYVCgkICwIEFgIDAQIe
|
|
AQIXgAAKCRC9SlTYKqPsUjuGAPwK
|
|
WSAAyUkDO+6nmK0ekqvW6haxJfLG
|
|
HC3RAV7RBZ9rjQD/XKJ05a6iH1/I
|
|
UWaFtaP2iFXPTJRjIVvDZH2kbOCW
|
|
Tge4OARprJMHEgorBgEEAZdVAQUB
|
|
AQdArjF9SSY3OzhezxnCSyTFXAoR
|
|
J8OrTKlELgzN9HKSNyADAQgHiH4E
|
|
GBYKACYWIQTwfVpXmIupgTn0bwG9
|
|
SlTYKqPsUgUCaayTBwIbDAUJBaOa
|
|
gAAKCRC9SlTYKqPsUmhdAQDmEkvL
|
|
ewoNDVDnw3wdAV26mot/vU3eHqxm
|
|
0WBqOMk6AAD/dbv641CCRkU2mRlW
|
|
N62pYzDLVSlPBLre
|
|
MC9tQ6zkQg8=
|
|
=7nBx
|
|
|
|
-----END PGP PUBLIC KEY BLOCK-----
|
|
</div>
|
|
</div>
|
|
|
|
<p style="margin-top: 20px; font-size: 0.9rem;">
|
|
Use this key to encrypt emails sent to me or to verify my signatures.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cool Sites Section -->
|
|
<section id="cool-sites" class="section">
|
|
<h2>Cool Sites</h2>
|
|
<p>A collection of organizations and platforms that promote digital freedom, privacy, and open source innovation.</p>
|
|
|
|
<div class="sites-grid">
|
|
<div class="site-card fsf" onclick="window.open('https://www.fsf.org', '_blank')">
|
|
<div class="site-icon">FSF</div>
|
|
<div class="site-name">Free Software Foundation</div>
|
|
</div>
|
|
<div class="site-card linux" onclick="window.open('https://www.kernel.org', '_blank')">
|
|
<div class="site-icon">🐧</div>
|
|
<div class="site-name">Linux</div>
|
|
</div>
|
|
<div class="site-card debian" onclick="window.open('https://www.debian.org', '_blank')">
|
|
<div class="site-icon">Debian</div>
|
|
<div class="site-name">Debian GNU/Linux</div>
|
|
</div>
|
|
<div class="site-card antix" onclick="window.open('https://antixlinux.com', '_blank')">
|
|
<div class="site-icon">antiX</div>
|
|
<div class="site-name">antiX</div>
|
|
</div>
|
|
<div class="site-card wikipedia" onclick="window.open('https://www.wikipedia.org', '_blank')">
|
|
<div class="site-icon">Wikipedia</div>
|
|
<div class="site-name">Wikipedia</div>
|
|
</div>
|
|
<div class="site-card aclu" onclick="window.open('https://www.aclu.org', '_blank')">
|
|
<div class="site-icon">⚖️</div>
|
|
<div class="site-name">ACLU</div>
|
|
</div>
|
|
<div class="site-card matrix" onclick="window.open('https://matrix.org', '_blank')">
|
|
<div class="site-icon">Matrix</div>
|
|
<div class="site-name">Matrix.org</div>
|
|
</div>
|
|
<div class="site-card mullvad" onclick="window.open('https://mullvad.net', '_blank')">
|
|
<div class="site-icon">🛡️</div>
|
|
<div class="site-name">Mullvad VPN</div>
|
|
</div>
|
|
<div class="site-card tor" onclick="window.open('https://www.torproject.org', '_blank')">
|
|
<div class="site-icon">Onion</div>
|
|
<div class="site-name">The Tor Project</div>
|
|
</div>
|
|
<div class="site-card graphene" onclick="window.open('https://grapheneos.org', '_blank')">
|
|
<div class="site-icon">GrapheneOS</div>
|
|
<div class="site-name">GrapheneOS is a degoogled, security hardened android distro. I use it on all my mobile devices.</div>
|
|
</div>
|
|
<div class="site-card openbsd" onclick="window.open('https://www.openbsd.org', '_blank')">
|
|
<div class="site-icon">OpenBSD</div>
|
|
<div class="site-name">OpenBSD is a security-focused, FLOSS software OS, likely the most free highly UNIX like OS available.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Blog Section -->
|
|
<section id="blog" class="section">
|
|
<h2>Blog</h2>
|
|
<p>Thoughts on web development, design systems, and the creative process. Latest updates from my desk.</p>
|
|
<div class="sites-grid">
|
|
<div class="site-card" style="border-left: 5px solid var(--color-blog);">
|
|
<div class="site-icon">📝</div>
|
|
<div class="site-name">Latest Post: Minimalism</div>
|
|
</div>
|
|
<div class="site-card" style="border-left: 5px solid var(--color-projects);">
|
|
<div class="site-icon">💻</div>
|
|
<div class="site-name">Tutorial: CSS Grid</div>
|
|
</div>
|
|
<div class="site-card" style="border-left: 5px solid var(--color-home);">
|
|
<div class="site-icon">📊</div>
|
|
<div class="site-name">Review: 2024 Tools</div>
|
|
</div>
|
|
<div class="site-card" style="border-left: 5px solid var(--color-coolsites);">
|
|
<div class="site-icon">🌿</div>
|
|
<div class="site-name">Life Update</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
© <span id="year"></span> Emilia Marigold. Simple, Minimal, Light & Dark.
|
|
</footer>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
/* --- JAVASCRIPT --- */
|
|
|
|
const toggleButton = document.getElementById('theme-switch');
|
|
const themeToggleContainer = document.getElementById('theme-toggle');
|
|
const body = document.body;
|
|
const themeText = document.getElementById('theme-text');
|
|
|
|
function setTheme(themeName) {
|
|
body.setAttribute('data-theme', themeName);
|
|
if (themeName === 'dark') {
|
|
toggleButton.checked = true;
|
|
themeText.textContent = "Dark";
|
|
} else {
|
|
toggleButton.checked = false;
|
|
themeText.textContent = "Light";
|
|
}
|
|
}
|
|
|
|
const currentTheme = localStorage.getItem('theme') ||
|
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
setTheme(currentTheme);
|
|
|
|
toggleButton.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
setTheme('dark');
|
|
} else {
|
|
setTheme('light');
|
|
}
|
|
});
|
|
|
|
body.addEventListener('click', function() {
|
|
localStorage.setItem('theme', body.getAttribute('data-theme'));
|
|
});
|
|
|
|
// Theme Toggle Hover Effect for Rainbow
|
|
themeToggleContainer.addEventListener('mouseenter', () => {
|
|
themeToggleContainer.classList.add('animating-text');
|
|
// Add rainbow border to the toggle container
|
|
const container = themeToggleContainer;
|
|
container.style.border = "2px solid transparent";
|
|
container.style.borderImage = "linear-gradient(45deg, var(--color-contact), var(--color-coolsites), var(--color-blog)) 1";
|
|
});
|
|
themeToggleContainer.addEventListener('mouseleave', () => {
|
|
themeToggleContainer.classList.remove('animating-text');
|
|
themeToggleContainer.style.border = "none";
|
|
});
|
|
|
|
document.getElementById('year').textContent = new Date().getFullYear();
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
});
|
|
|
|
// --- RAINBOW LOGIC FOR SELECTED OBJECTS ---
|
|
|
|
// 1. Navigation Buttons
|
|
const navButtons = document.querySelectorAll('.nav-btn');
|
|
|
|
navButtons.forEach(btn => {
|
|
btn.addEventListener('mouseenter', () => {
|
|
btn.classList.add('animating');
|
|
});
|
|
btn.addEventListener('mouseleave', () => {
|
|
btn.classList.remove('animating');
|
|
});
|
|
});
|
|
|
|
// 2. Site Cards (Cool Sites & Blog)
|
|
const siteCards = document.querySelectorAll('.site-card');
|
|
|
|
siteCards.forEach(card => {
|
|
card.addEventListener('mouseenter', () => {
|
|
card.classList.add('animating-text');
|
|
});
|
|
card.addEventListener('mouseleave', () => {
|
|
card.classList.remove('animating-text');
|
|
});
|
|
});
|
|
|
|
// 3. Contact Info Items (Text and Icons)
|
|
const contactItems = document.querySelectorAll('.info-item');
|
|
|
|
contactItems.forEach(item => {
|
|
item.addEventListener('mouseenter', () => {
|
|
item.classList.add('animating-text');
|
|
const label = item.querySelector('.info-label');
|
|
const value = item.querySelector('.info-value');
|
|
if(label) label.classList.add('animating');
|
|
if(value) value.classList.add('animating');
|
|
});
|
|
item.addEventListener('mouseleave', () => {
|
|
item.classList.remove('animating-text');
|
|
const label = item.querySelector('.info-label');
|
|
const value = item.querySelector('.info-value');
|
|
if(label) label.classList.remove('animating');
|
|
if(value) value.classList.remove('animating');
|
|
});
|
|
});
|
|
|
|
// 4. Copy Icons in Contact Section
|
|
const copyIcons = document.querySelectorAll('.copy-icon');
|
|
|
|
copyIcons.forEach(icon => {
|
|
icon.addEventListener('mouseenter', () => {
|
|
icon.style.color = "var(--color-contact)";
|
|
icon.classList.add('animating');
|
|
// Apply rainbow gradient to the icon
|
|
icon.style.backgroundImage = `linear-gradient(90deg, var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog))`;
|
|
icon.style.backgroundClip = "text";
|
|
icon.style.webkitBackgroundClip = "text";
|
|
icon.style.color = "transparent";
|
|
});
|
|
icon.addEventListener('mouseleave', () => {
|
|
icon.classList.remove('animating');
|
|
icon.style.backgroundImage = "";
|
|
icon.style.color = "var(--color-contact)";
|
|
});
|
|
});
|
|
|
|
// Copy to Clipboard for Contact Info
|
|
document.querySelectorAll('.copy-icon').forEach(icon => {
|
|
icon.addEventListener('click', function() {
|
|
const textToCopy = this.previousElementSibling.innerText;
|
|
navigator.clipboard.writeText(textToCopy).then(() => {
|
|
const originalIcon = this.innerText;
|
|
this.innerText = '✅';
|
|
this.style.color = 'var(--color-contact)';
|
|
// Add temporary rainbow to the checkmark
|
|
this.style.backgroundImage = `linear-gradient(90deg, var(--color-home), var(--color-projects), var(--color-contact))`;
|
|
this.style.backgroundClip = "text";
|
|
this.style.webkitBackgroundClip = "text";
|
|
this.style.color = "transparent";
|
|
|
|
setTimeout(() => {
|
|
this.innerText = originalIcon;
|
|
this.style.backgroundImage = "";
|
|
this.style.color = "var(--color-contact)";
|
|
}, 2000);
|
|
});
|
|
});
|
|
});
|
|
|
|
function copyPGP() {
|
|
const pgpText = document.getElementById('pgp-block').innerText;
|
|
navigator.clipboard.writeText(pgpText).then(() => {
|
|
const btn = document.querySelector('.pgp-container .action-btn');
|
|
const originalText = btn.innerText;
|
|
btn.innerText = "Copied!";
|
|
btn.style.backgroundImage = "linear-gradient(90deg, var(--color-contact), var(--color-coolsites))";
|
|
btn.style.backgroundClip = "text";
|
|
btn.style.webkitBackgroundClip = "text";
|
|
btn.style.color = "transparent";
|
|
setTimeout(() => {
|
|
btn.innerText = originalText;
|
|
btn.style.backgroundImage = "";
|
|
btn.style.color = "white";
|
|
}, 2000);
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|