redesign: Hacker theme for security researcher portfolio
- Complete visual overhaul with cyberpunk/terminal aesthetic - Dark theme with matrix green (#00ff41), cyan, magenta accents - Terminal-styled sections with command prompts - Sharp angular design (removed all rounded corners) - Added glowing borders, scanline effects, animations - New SVG favicon with terminal prompt icon - Added framer-motion page transitions for smooth theme switching - "Enter my zen world" section for calm pastel pages - Updated metadata/SEO for security researcher branding - Social links: GitHub, LinkedIn, X, Email Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
neutrino2211
@@ -1,32 +1,38 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
/* Neo-brutalist muted color palette */
|
||||
--background: #FAF8F5;
|
||||
--foreground: #3D3D3D;
|
||||
--card-bg: #FEFDFB;
|
||||
--border-color: #3D3D3D;
|
||||
/* Hacker/Cyberpunk color palette */
|
||||
--background: #0a0a0a;
|
||||
--background-secondary: #111111;
|
||||
--foreground: #00ff41;
|
||||
--foreground-dim: #00cc33;
|
||||
--foreground-muted: #008f11;
|
||||
|
||||
/* Muted accent colors */
|
||||
--sage: #B8C5B3;
|
||||
--sage-light: #CBD6C8;
|
||||
--sage-dark: #A8B5A0;
|
||||
--card-bg: #0d0d0d;
|
||||
--card-bg-hover: #141414;
|
||||
--border-color: #00ff41;
|
||||
--border-dim: #00cc33;
|
||||
|
||||
--terracotta: #D4B5A0;
|
||||
--terracotta-light: #E0C9B8;
|
||||
--terracotta-dark: #C9A88E;
|
||||
/* Accent colors */
|
||||
--cyan: #00d4ff;
|
||||
--cyan-dim: #00a8cc;
|
||||
--magenta: #ff00ff;
|
||||
--magenta-dim: #cc00cc;
|
||||
--yellow: #ffff00;
|
||||
--yellow-dim: #cccc00;
|
||||
--red: #ff3333;
|
||||
--red-dim: #cc2929;
|
||||
--orange: #ff6600;
|
||||
|
||||
--blue-grey: #A5B4BE;
|
||||
--blue-grey-light: #B8C5CE;
|
||||
--blue-grey-dark: #9BAAB5;
|
||||
/* Terminal colors */
|
||||
--terminal-green: #00ff41;
|
||||
--terminal-amber: #ffb000;
|
||||
--terminal-blue: #0080ff;
|
||||
|
||||
--rose: #D4B5B8;
|
||||
--rose-light: #E0C9CC;
|
||||
--rose-dark: #C9A8AB;
|
||||
|
||||
--sand: #E8DCC8;
|
||||
--sand-light: #F0E8D8;
|
||||
--sand-dark: #DDD0BB;
|
||||
/* Glow effects */
|
||||
--glow-green: 0 0 10px #00ff41, 0 0 20px #00ff4180, 0 0 30px #00ff4140;
|
||||
--glow-cyan: 0 0 10px #00d4ff, 0 0 20px #00d4ff80;
|
||||
--glow-magenta: 0 0 10px #ff00ff, 0 0 20px #ff00ff80;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -36,54 +42,333 @@
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* No light mode - always dark for hacker aesthetic */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--background: #1A1A1A;
|
||||
--foreground: #E8E3D8;
|
||||
--card-bg: #242424;
|
||||
--border-color: #4D4D4D;
|
||||
|
||||
--sage: #8A9985;
|
||||
--sage-light: #9BAA96;
|
||||
--sage-dark: #7A8975;
|
||||
|
||||
--terracotta: #A38E7D;
|
||||
--terracotta-light: #B29E8D;
|
||||
--terracotta-dark: #937E6D;
|
||||
|
||||
--blue-grey: #7D8C95;
|
||||
--blue-grey-light: #8D9CA5;
|
||||
--blue-grey-dark: #6D7C85;
|
||||
|
||||
--rose: #A38E91;
|
||||
--rose-light: #B39EA1;
|
||||
--rose-dark: #937E81;
|
||||
|
||||
--sand: #B8AC98;
|
||||
--sand-light: #C8BCA8;
|
||||
--sand-dark: #A89C88;
|
||||
--background: #0a0a0a;
|
||||
--foreground: #00ff41;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
/* Neo-brutalist shadow utilities */
|
||||
.shadow-neo-brutal {
|
||||
box-shadow: 5px 5px 0px var(--border-color);
|
||||
/* Scanline effect overlay */
|
||||
.scanlines::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15),
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.shadow-neo-brutal-hover {
|
||||
box-shadow: 7px 7px 0px var(--border-color);
|
||||
/* CRT screen flicker */
|
||||
@keyframes flicker {
|
||||
0% { opacity: 0.97; }
|
||||
5% { opacity: 0.95; }
|
||||
10% { opacity: 0.97; }
|
||||
15% { opacity: 0.94; }
|
||||
20% { opacity: 0.98; }
|
||||
50% { opacity: 0.96; }
|
||||
80% { opacity: 0.97; }
|
||||
90% { opacity: 0.94; }
|
||||
100% { opacity: 0.98; }
|
||||
}
|
||||
|
||||
.shadow-brutal {
|
||||
box-shadow: 5px 5px 0px var(--border-color);
|
||||
.crt-flicker {
|
||||
animation: flicker 0.15s infinite;
|
||||
}
|
||||
|
||||
.shadow-brutal-hover {
|
||||
box-shadow: 7px 7px 0px var(--border-color);
|
||||
/* Typing cursor animation */
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.cursor-blink::after {
|
||||
content: "_";
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
/* Glitch effect */
|
||||
@keyframes glitch {
|
||||
0% {
|
||||
transform: translate(0);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-2px, 2px);
|
||||
}
|
||||
40% {
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
60% {
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.glitch:hover {
|
||||
animation: glitch 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Text glitch effect */
|
||||
@keyframes textGlitch {
|
||||
0% {
|
||||
text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff;
|
||||
}
|
||||
25% {
|
||||
text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff;
|
||||
}
|
||||
50% {
|
||||
text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff;
|
||||
}
|
||||
75% {
|
||||
text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff;
|
||||
}
|
||||
100% {
|
||||
text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff;
|
||||
}
|
||||
}
|
||||
|
||||
.text-glitch:hover {
|
||||
animation: textGlitch 0.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Matrix rain background */
|
||||
@keyframes matrix-rain {
|
||||
0% {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Neon glow effects */
|
||||
.glow-green {
|
||||
text-shadow: var(--glow-green);
|
||||
}
|
||||
|
||||
.glow-cyan {
|
||||
text-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
.glow-magenta {
|
||||
text-shadow: var(--glow-magenta);
|
||||
}
|
||||
|
||||
.box-glow-green {
|
||||
box-shadow: 0 0 5px #00ff41, 0 0 10px #00ff4180, inset 0 0 5px #00ff4120;
|
||||
}
|
||||
|
||||
.box-glow-cyan {
|
||||
box-shadow: 0 0 5px #00d4ff, 0 0 10px #00d4ff80, inset 0 0 5px #00d4ff20;
|
||||
}
|
||||
|
||||
.box-glow-magenta {
|
||||
box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff80, inset 0 0 5px #ff00ff20;
|
||||
}
|
||||
|
||||
/* Terminal window styling */
|
||||
.terminal-window {
|
||||
background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
|
||||
border: 1px solid #00ff41;
|
||||
box-shadow: 0 0 10px #00ff4140, inset 0 0 50px #00ff4108;
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
background: linear-gradient(90deg, #1a1a1a, #0d0d0d);
|
||||
border-bottom: 1px solid #00ff4180;
|
||||
}
|
||||
|
||||
/* Typing animation */
|
||||
@keyframes typing {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
.typing-effect {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
animation: typing 2s steps(30, end);
|
||||
}
|
||||
|
||||
/* Pulse animation for active elements */
|
||||
@keyframes pulse-green {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px #00ff41;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px #00ff41, 0 0 30px #00ff4180;
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-glow {
|
||||
animation: pulse-green 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Code highlight style */
|
||||
.code-block {
|
||||
background: #0d0d0d;
|
||||
border-left: 3px solid #00ff41;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* Hacker button style */
|
||||
.hacker-btn {
|
||||
background: transparent;
|
||||
border: 1px solid #00ff41;
|
||||
color: #00ff41;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hacker-btn::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, #00ff4120, transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.hacker-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.hacker-btn:hover {
|
||||
background: #00ff4115;
|
||||
box-shadow: 0 0 10px #00ff4180, inset 0 0 10px #00ff4120;
|
||||
}
|
||||
|
||||
/* Zen button - simple transition without hardcoded colors */
|
||||
.zen-btn {
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Link styling */
|
||||
.hacker-link {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hacker-link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background: #00d4ff;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.hacker-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hacker-link:hover {
|
||||
text-shadow: 0 0 10px #00d4ff80;
|
||||
}
|
||||
|
||||
/* Selection styling */
|
||||
::selection {
|
||||
background: #00ff41;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #00ff4180;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #00ff41;
|
||||
}
|
||||
|
||||
/* Card hover effects */
|
||||
.hacker-card {
|
||||
background: #0d0d0d;
|
||||
border: 1px solid #00ff4140;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hacker-card:hover {
|
||||
border-color: #00ff41;
|
||||
box-shadow: 0 0 20px #00ff4130, inset 0 0 20px #00ff4108;
|
||||
}
|
||||
|
||||
/* Status indicator */
|
||||
.status-online {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #00ff41;
|
||||
box-shadow: 0 0 10px #00ff41;
|
||||
animation: pulse-green 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ASCII art styling */
|
||||
.ascii-art {
|
||||
font-family: 'Courier New', monospace;
|
||||
white-space: pre;
|
||||
line-height: 1.2;
|
||||
font-size: 10px;
|
||||
color: #00ff4180;
|
||||
}
|
||||
|
||||
/* Grid overlay effect */
|
||||
.grid-overlay {
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
/* Fade in animation */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.fade-in-delay-1 { animation-delay: 0.1s; opacity: 0; }
|
||||
.fade-in-delay-2 { animation-delay: 0.2s; opacity: 0; }
|
||||
.fade-in-delay-3 { animation-delay: 0.3s; opacity: 0; }
|
||||
.fade-in-delay-4 { animation-delay: 0.4s; opacity: 0; }
|
||||
.fade-in-delay-5 { animation-delay: 0.5s; opacity: 0; }
|
||||
|
||||
Reference in New Issue
Block a user