Added the hacker space section
This commit is contained in:
parent
876cc5b5cd
commit
9681466082
GPG key ID:
20D439A69163544A
5 changed files with 248 additions and 0 deletions
|
|
@ -513,3 +513,68 @@ footer {
|
|||
border-image: var(--gradient) 1;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════
|
||||
HACKER SPACE
|
||||
═══════════════════════════ */
|
||||
.space-card {
|
||||
transition: transform 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.space-card:hover .copy-btn {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.key-wrapper {
|
||||
/* Ensure the gradient matches the card's perceived background */
|
||||
/* Since card is white/5 on dark, we can use a gradient from transparent to that color */
|
||||
}
|
||||
|
||||
.key-wrapper .fade-overlay {
|
||||
/* Use a gradient that fades to the background color to hide text effectively */
|
||||
background: linear-gradient(to bottom, transparent, #111 90%);
|
||||
}
|
||||
|
||||
.key-wrapper.expanded {
|
||||
max-height: 2000px; /* Arbitrary large value for transition */
|
||||
}
|
||||
|
||||
.key-wrapper.expanded .fade-overlay {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.toggle-btn i {
|
||||
transition: transform 0.3s var(--ease-smooth);
|
||||
}
|
||||
|
||||
.toggle-btn.active i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Override global scrollbar hiding for specific elements */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
|
|
|||
124
index.html
124
index.html
|
|
@ -337,6 +337,130 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Hacker Space Section -->
|
||||
<section id="hacker-space" class="py-20 px-6 md:px-20 bg-dark text-white relative z-10 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="mb-16">
|
||||
<h2 class="text-4xl md:text-6xl font-display font-bold tracking-tighter mb-6">
|
||||
<span class="stroke-text">Hacker</span> <span class="gradient-text">Space</span>
|
||||
</h2>
|
||||
<p class="text-lg md:text-xl text-gray-400 font-light max-w-2xl leading-relaxed">
|
||||
Verify the authenticity of my digital identity, commits, and messages using the cryptographic keys provided below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-10">
|
||||
|
||||
<!-- GPG Key -->
|
||||
<div class="space-card">
|
||||
<h3 class="text-xl font-display font-bold uppercase mb-4 flex items-center gap-3">
|
||||
<i class="fas fa-key text-accent"></i> Public GPG Key
|
||||
</h3>
|
||||
<div class="relative bg-white/5 border border-white/10 rounded-xl p-6 hover:border-accent/50 transition-colors duration-300 group">
|
||||
<div class="key-wrapper relative overflow-hidden max-h-40 transition-all duration-500 ease-in-out">
|
||||
<pre class="text-xs text-gray-400 font-mono overflow-x-auto whitespace-pre-wrap break-all custom-scrollbar select-all pb-8">-----BEGIN PGP PUBLIC KEY BLOCK-----
|
||||
|
||||
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
|
||||
=afRP
|
||||
-----END PGP PUBLIC KEY BLOCK-----</pre>
|
||||
<div class="fade-overlay absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-dark to-transparent pointer-events-none transition-opacity duration-300"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<button class="toggle-btn text-xs font-bold uppercase tracking-widest text-accent hover:text-white transition-colors flex items-center gap-2">
|
||||
<span>Show More</span> <i class="fas fa-chevron-down text-[10px]"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="absolute top-4 right-4 bg-white/10 hover:bg-accent text-white p-2 rounded-lg transition-colors copy-btn" aria-label="Copy GPG Key">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
<!-- SSH Key -->
|
||||
<div class="space-card">
|
||||
<h3 class="text-xl font-display font-bold uppercase mb-4 flex items-center gap-3">
|
||||
<i class="fas fa-terminal text-accent"></i> Public SSH Key
|
||||
</h3>
|
||||
<div class="relative bg-white/5 border border-white/10 rounded-xl p-6 hover:border-accent/50 transition-colors duration-300 h-full flex flex-col justify-center">
|
||||
<code class="text-sm text-gray-400 font-mono break-all select-all block">ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAILL6VG06YjdEn8VLCWkmNSz76duWB2n9+S7vEcx8JoEe pierre.emmanuel.gobillard@gmail.com</code>
|
||||
<button class="absolute top-4 right-4 bg-white/10 hover:bg-accent text-white p-2 rounded-lg transition-colors copy-btn" aria-label="Copy SSH Key">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bitcoin Address -->
|
||||
<div class="space-card">
|
||||
<h3 class="text-xl font-display font-bold uppercase mb-4 flex items-center gap-3">
|
||||
<i class="fab fa-bitcoin text-accent"></i> Bitcoin Address
|
||||
</h3>
|
||||
<div class="relative bg-white/5 border border-white/10 rounded-xl p-6 hover:border-accent/50 transition-colors duration-300 h-full flex flex-col justify-center items-center text-center gap-4">
|
||||
<div class="w-32 h-32 bg-white rounded-lg p-2">
|
||||
<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=bc1qg5h6wfgvus8x36vpejvruc8hd4vqcvv8030vat" alt="Bitcoin QR Code" class="w-full h-full object-contain">
|
||||
</div>
|
||||
<code class="text-sm text-gray-400 font-mono break-all select-all">bc1qg5h6wfgvus8x36vpejvruc8hd4vqcvv8030vat</code>
|
||||
<button class="absolute top-4 right-4 bg-white/10 hover:bg-accent text-white p-2 rounded-lg transition-colors copy-btn" aria-label="Copy Bitcoin Address">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark py-10 px-6 md:px-20">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
|
|
|
|||
52
js/main.js
52
js/main.js
|
|
@ -331,4 +331,56 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
);
|
||||
}
|
||||
|
||||
// ── 18. HACKER SPACE COPY FUNCTIONALITY ────────────────────────────
|
||||
const copyBtns = document.querySelectorAll('.copy-btn');
|
||||
|
||||
copyBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
// Find the pre or code element within the same card
|
||||
const card = btn.closest('.space-card');
|
||||
const codeElement = card.querySelector('pre, code');
|
||||
|
||||
if (codeElement) {
|
||||
const textToCopy = codeElement.innerText;
|
||||
|
||||
navigator.clipboard.writeText(textToCopy).then(() => {
|
||||
const originalIcon = btn.innerHTML;
|
||||
|
||||
// Show success feedback
|
||||
btn.innerHTML = '<i class="fas fa-check"></i>';
|
||||
btn.classList.add('text-green-400');
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalIcon;
|
||||
btn.classList.remove('text-green-400');
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('Failed to copy: ', err);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ── 19. HACKER SPACE EXPAND FUNCTIONALITY ──────────────────────────
|
||||
const toggleBtns = document.querySelectorAll('.toggle-btn');
|
||||
|
||||
toggleBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const card = btn.closest('.space-card');
|
||||
const wrapper = card.querySelector('.key-wrapper');
|
||||
const icon = btn.querySelector('i');
|
||||
const textSpan = btn.querySelector('span');
|
||||
|
||||
wrapper.classList.toggle('expanded');
|
||||
btn.classList.toggle('active');
|
||||
|
||||
if (wrapper.classList.contains('expanded')) {
|
||||
textSpan.textContent = 'Show Less';
|
||||
} else {
|
||||
textSpan.textContent = 'Show More';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
1
token.txt
Normal file
1
token.txt
Normal file
|
|
@ -0,0 +1 @@
|
|||
684ee3108de0e7ac9aa3f6b590da51f6c71809d3740cdf47532cd47a2fdf364d
|
||||
6
token.txt.sig
Normal file
6
token.txt.sig
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
-----BEGIN SSH SIGNATURE-----
|
||||
U1NIU0lHAAAAAQAAADMAAAALc3NoLWVkMjU1MTkAAAAgsvpUbTpiN0SfxUsJaSY1LPvp25
|
||||
YHaf35Lu8RzHwmgR4AAAAFZ2l0ZWEAAAAAAAAABnNoYTUxMgAAAFMAAAALc3NoLWVkMjU1
|
||||
MTkAAABAb3dQ59ES+8/7FCwzGAcomYt5mCrhwEb3gO2OfmL1FZz8aGQEmhnEejly8QsLSd
|
||||
BS+QpT+uC/w+Rt7aSIfK7EDg==
|
||||
-----END SSH SIGNATURE-----
|
||||
Loading…
Add table
Add a link
Reference in a new issue