remove bloat css change of them toggle
This commit is contained in:
samantha42
@@ -1 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M3 11.5066C3 16.7497 7.25034 21 12.4934 21C16.2209 21 19.4466 18.8518 21 15.7259C12.4934 15.7259 8.27411 11.5066 8.27411 3C5.14821 4.55344 3 7.77915 3 11.5066Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#aa00ff"><path d="M3 11.5066C3 16.7497 7.25034 21 12.4934 21C16.2209 21 19.4466 18.8518 21 15.7259C12.4934 15.7259 8.27411 11.5066 8.27411 3C5.14821 4.55344 3 7.77915 3 11.5066Z" stroke="#aa00ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||||
|
Before Width: | Height: | Size: 438 B After Width: | Height: | Size: 438 B |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 632 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@@ -1 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M22 12L23 12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 2V1" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 23V22" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 20L19 19" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L19 5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 20L5 19" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 4L5 5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M1 12L2 12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffff00"><path d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" stroke="#ffd043" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M22 12L23 12" stroke="#ffff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 2V1" stroke="#ffff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 23V22" stroke="#ffff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 20L19 19" stroke="#ffff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L19 5" stroke="#ffff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 20L5 19" stroke="#ffff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 4L5 5" stroke="#ffff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M1 12L2 12" stroke="#ffff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
+35
-87
@@ -18,13 +18,7 @@
|
||||
<nav>
|
||||
<a class="nav-logo" href="#">samantha_vero_friis</a>
|
||||
<div class="nav-links">
|
||||
<a href="/engine">engine</a>
|
||||
<a href="/portfolio">portfolio</a>
|
||||
<a href="/cinema">cinema</a>
|
||||
<a href="/finance">finance</a>
|
||||
<a href="/infra">infrastructure</a>
|
||||
<a href="/git">git</a>
|
||||
<a class="cta" href="mailto:me@samantha42.xyz">contact</a>
|
||||
<a onclick="openOverlay()" >login</a>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
@@ -32,24 +26,8 @@
|
||||
<div class="shell">
|
||||
<aside>
|
||||
<div class="row">
|
||||
<div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle"
|
||||
aria-label="Toggle day/night mode">
|
||||
<div class="track day" id="track">
|
||||
<div class="stars">
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="knob day" id="knob">
|
||||
<div class="sun-rays" id="rays"></div>
|
||||
<div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
|
||||
<div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
|
||||
<div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<img id="day" src="/static/icons/lovesun.png" width="30px" class="hidden" onclick="makeday()" >
|
||||
<img id="night" src="/static/icons/sleepmoon.png" width="30px" onclick="makenight()" >
|
||||
</div>
|
||||
<div>
|
||||
<p class="sidebar-label">navigate</p>
|
||||
@@ -61,6 +39,8 @@
|
||||
<a href="#automation">automation</a>
|
||||
<a href="#interests">interests</a>
|
||||
<a class="hidden" href="/42">42</a>
|
||||
<a href="#newsletter">newsletter</a>
|
||||
<a href="#contact">contact</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,8 +79,8 @@
|
||||
<div class="hero-meta">
|
||||
<span>
|
||||
<div hx-get="/status" hx-trigger="load" hx-swap="outerHTML"></div>
|
||||
<span>samantha42.xyz</span>
|
||||
<span>me@samantha42.xyz</span>
|
||||
<span class="exp-tag">samantha42.xyz</span>
|
||||
<span class="exp-tag">me@samantha42.xyz</span>
|
||||
</div>
|
||||
</section>
|
||||
<section id="experience">
|
||||
@@ -458,67 +438,34 @@
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const toggle = document.getElementById('toggle');
|
||||
const track = document.getElementById('track');
|
||||
const knob = document.getElementById('knob');
|
||||
const rays = document.getElementById('rays');
|
||||
const stateLabel = document.getElementById('state-label');
|
||||
const themeRoot = document.getElementById('themeRoot');
|
||||
|
||||
let isDay = true;
|
||||
|
||||
const RAY_COUNT = 8;
|
||||
for (let i = 0; i < RAY_COUNT; i++) {
|
||||
const r = document.createElement('div');
|
||||
r.className = 'ray';
|
||||
r.style.transform = `rotate(${i * (360/RAY_COUNT)}deg)`;
|
||||
rays.appendChild(r);
|
||||
}
|
||||
|
||||
function applyState() {
|
||||
if (isDay) {
|
||||
track.className = 'track day';
|
||||
knob.className = 'knob day';
|
||||
toggle.setAttribute('aria-checked', 'true');
|
||||
themeRoot.classList.remove('night');
|
||||
} else {
|
||||
track.className = 'track night';
|
||||
knob.className = 'knob night';
|
||||
toggle.setAttribute('aria-checked', 'false');
|
||||
themeRoot.classList.add('night');
|
||||
}
|
||||
}
|
||||
|
||||
toggle.addEventListener('click', () => { isDay = !isDay; applyState(); });
|
||||
toggle.addEventListener('keydown', e => {
|
||||
if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); isDay = !isDay; applyState(); }
|
||||
});
|
||||
|
||||
function copyClass() {
|
||||
navigator.clipboard.writeText(classOut.textContent).catch(() => {});
|
||||
}
|
||||
// just some fun.
|
||||
// just some fun.
|
||||
console.log("%c👀 hi there!", "font-size:20px")
|
||||
|
||||
|
||||
function makeday() {
|
||||
themeRoot.classList.remove('night');
|
||||
const day = document.getElementById('day');
|
||||
const night = document.getElementById('night');
|
||||
day.classList.add("hidden");
|
||||
night.classList.remove("hidden");
|
||||
}
|
||||
function makenight() {
|
||||
themeRoot.classList.add('night');
|
||||
const day = document.getElementById('day');
|
||||
const night = document.getElementById('night');
|
||||
day.classList.remove("hidden");
|
||||
night.classList.add("hidden");
|
||||
}
|
||||
|
||||
// about.js
|
||||
function closeOverlay() {
|
||||
document.getElementById('overlay').style.display = 'none';
|
||||
// about.js
|
||||
function closeOverlay() {
|
||||
document.getElementById('overlay').style.display = 'none';
|
||||
}
|
||||
|
||||
// or toggle it from anywhere:
|
||||
function openOverlay() {
|
||||
document.getElementById('overlay').style.display = 'flex';
|
||||
}
|
||||
|
||||
// or toggle it from anywhere:
|
||||
function openOverlay() {
|
||||
document.getElementById('overlay').style.display = 'flex';
|
||||
}
|
||||
|
||||
function InterestShow() {
|
||||
const body = document.getElementById('interests-body');
|
||||
const button = document.getElementById('interest-button');
|
||||
button.textContent = "close ↑"
|
||||
body.classList.remove("hidden")
|
||||
}
|
||||
|
||||
function toggleInterests() {
|
||||
const body = document.getElementById('interests-body');
|
||||
const button = document.getElementById('interest-button');
|
||||
@@ -529,7 +476,8 @@ function openOverlay() {
|
||||
button.textContent = "close ↑"
|
||||
}
|
||||
}
|
||||
function nlSubmit() {
|
||||
|
||||
function nlSubmit() {
|
||||
const input = document.getElementById('nl-email');
|
||||
const val = input.value.trim();
|
||||
if (!val || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) {
|
||||
@@ -545,9 +493,9 @@ function openOverlay() {
|
||||
document.getElementById('nl-note').style.display = 'none';
|
||||
document.getElementById('nl-success').style.display = 'block';
|
||||
}
|
||||
document.getElementById('nl-email').addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') nlSubmit();
|
||||
});
|
||||
document.getElementById('nl-email').addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') nlSubmit();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
+12
-93
@@ -436,99 +436,7 @@ a{
|
||||
gap: 1rem;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.toggle-wrap {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.track {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
border-radius: 12.5px;
|
||||
transition: background 0.5s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.track.day { background: #87CEEB; }
|
||||
.track.night { background: #1a1a3e; }
|
||||
.stars {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
.night .stars { opacity: 1; }
|
||||
.star {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: twinkle 2s infinite;
|
||||
}
|
||||
.star:nth-child(1) { width:2px; height:2px; top:4px; left:6px; animation-delay:0s; }
|
||||
.star:nth-child(2) { width:1px; height:1px; top:10px; left:14px; animation-delay:0.4s; }
|
||||
.star:nth-child(3) { width:1px; height:1px; top:5px; left:22px; animation-delay:0.8s; }
|
||||
.star:nth-child(4) { width:2px; height:2px; top:14px; left:10px; animation-delay:1.2s; }
|
||||
.star:nth-child(5) { width:1px; height:1px; top:8px; left:30px; animation-delay:0.2s; }
|
||||
@keyframes twinkle {
|
||||
0%,100% { opacity:1; } 50% { opacity:0.3; }
|
||||
}
|
||||
.knob {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
border-radius: 50%;
|
||||
transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
.knob.night {
|
||||
left: 3px;
|
||||
background: radial-gradient(circle at 35% 35%, #e8e8ff, #c8c8f8);
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(180,180,255,0.18),
|
||||
0 0 7px 4px rgba(140,140,255,0.35),
|
||||
0 0 14px 6px rgba(100,100,220,0.18);
|
||||
}
|
||||
.knob.day {
|
||||
left: 28px;
|
||||
background: radial-gradient(circle at 40% 40%, #fff8c5, #FFD700);
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(255,220,0,0.25),
|
||||
0 0 8px 4px rgba(255,200,0,0.45),
|
||||
0 0 16px 6px rgba(255,160,0,0.2);
|
||||
}
|
||||
.sun-rays {
|
||||
position: absolute;
|
||||
inset: -7px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.15s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.knob.day .sun-rays { opacity: 1; }
|
||||
.ray {
|
||||
position: absolute;
|
||||
width: 1.5px;
|
||||
height: 4px;
|
||||
background: rgba(255,220,0,0.9);
|
||||
border-radius: 1px;
|
||||
left: 50%;
|
||||
transform-origin: 50% 16px;
|
||||
margin-left: -0.75px;
|
||||
}
|
||||
.moon-crater {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(140,140,200,0.4);
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.knob.day .moon-crater { opacity: 0; }
|
||||
.knob.night .moon-crater { opacity: 1; }
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
@@ -667,3 +575,14 @@ button:hover {
|
||||
}
|
||||
|
||||
.cta-btn:hover { opacity: 0.85; }
|
||||
.available {
|
||||
background:rgba(65, 219, 26, 0.07);color:var(--green);
|
||||
border:1px solid var(--green);
|
||||
padding:2px 8px;border-radius:3px;
|
||||
}
|
||||
|
||||
.busy {
|
||||
background:rgba(219, 26, 26, 0.07);color:var(--red);
|
||||
border:1px solid var(--red);
|
||||
padding:2px 8px;border-radius:3px;
|
||||
}
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -1,6 +1,5 @@
|
||||
function cureClick() {
|
||||
if (document.getElementById('cure-canvas')) return;
|
||||
|
||||
if (document.getElementById('lightning-canvas')) stopLightning();
|
||||
if (document.getElementById('typewriter-canvas')) stopTypewriter();
|
||||
if (document.getElementById('matrix-canvas')) stopMatrix();
|
||||
@@ -10,7 +9,7 @@ function cureClick() {
|
||||
el.textContent = "Actually... I'm feeling much better now!"
|
||||
startWater();
|
||||
isDay = false;
|
||||
applyState();
|
||||
makenight();
|
||||
setTimeout(() => {
|
||||
el.textContent = 'interest';
|
||||
stopWater();
|
||||
@@ -167,7 +166,7 @@ function draculaClick() {
|
||||
el.textContent = 'You have your whole life ahead of you. And I only offer death.';
|
||||
startLightning();
|
||||
isDay = false;
|
||||
applyState();
|
||||
makenight();
|
||||
setTimeout(() => {
|
||||
el.textContent = 'interest';
|
||||
stopLightning();
|
||||
@@ -276,7 +275,7 @@ function dragonTypewriterClick() {
|
||||
el.textContent = 'case file 36609...';
|
||||
startTypewriter();
|
||||
isDay = false;
|
||||
applyState();
|
||||
makenight();
|
||||
setTimeout(() => {
|
||||
el.textContent = 'interest';
|
||||
stopTypewriter();
|
||||
@@ -531,7 +530,7 @@ function stopTypewriter() {
|
||||
el.textContent = 'wake up, neo...';
|
||||
startMatrix();
|
||||
isDay = false;
|
||||
applyState();
|
||||
makenight();
|
||||
setTimeout(() => {
|
||||
el.textContent = 'interest';
|
||||
stopMatrix();
|
||||
@@ -685,7 +684,7 @@ function stopMatrix() {
|
||||
startRain();
|
||||
|
||||
isDay = false
|
||||
applyState();
|
||||
makenight();
|
||||
|
||||
setTimeout(() => {
|
||||
el.textContent = "interest";
|
||||
|
||||
Reference in New Issue
Block a user