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
@@ -13,6 +13,7 @@
|
|||||||
"@mdx-js/react": "^3.1.1",
|
"@mdx-js/react": "^3.1.1",
|
||||||
"@next/mdx": "^16.1.1",
|
"@next/mdx": "^16.1.1",
|
||||||
"@types/mdx": "^2.0.13",
|
"@types/mdx": "^2.0.13",
|
||||||
|
"framer-motion": "^12.26.2",
|
||||||
"gray-matter": "^4.0.3",
|
"gray-matter": "^4.0.3",
|
||||||
"next": "16.1.1",
|
"next": "16.1.1",
|
||||||
"react": "19.2.3",
|
"react": "19.2.3",
|
||||||
|
|||||||
38
pnpm-lock.yaml
generated
38
pnpm-lock.yaml
generated
@@ -20,6 +20,9 @@ importers:
|
|||||||
'@types/mdx':
|
'@types/mdx':
|
||||||
specifier: ^2.0.13
|
specifier: ^2.0.13
|
||||||
version: 2.0.13
|
version: 2.0.13
|
||||||
|
framer-motion:
|
||||||
|
specifier: ^12.26.2
|
||||||
|
version: 12.26.2(react-dom@19.1.0(react@19.2.3))(react@19.2.3)
|
||||||
gray-matter:
|
gray-matter:
|
||||||
specifier: ^4.0.3
|
specifier: ^4.0.3
|
||||||
version: 4.0.3
|
version: 4.0.3
|
||||||
@@ -1165,6 +1168,20 @@ packages:
|
|||||||
resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
|
resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
|
|
||||||
|
framer-motion@12.26.2:
|
||||||
|
resolution: {integrity: sha512-lflOQEdjquUi9sCg5Y1LrsZDlsjrHw7m0T9Yedvnk7Bnhqfkc89/Uha10J3CFhkL+TCZVCRw9eUGyM/lyYhXQA==}
|
||||||
|
peerDependencies:
|
||||||
|
'@emotion/is-prop-valid': '*'
|
||||||
|
react: ^18.0.0 || ^19.0.0
|
||||||
|
react-dom: ^18.0.0 || ^19.0.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@emotion/is-prop-valid':
|
||||||
|
optional: true
|
||||||
|
react:
|
||||||
|
optional: true
|
||||||
|
react-dom:
|
||||||
|
optional: true
|
||||||
|
|
||||||
function-bind@1.1.2:
|
function-bind@1.1.2:
|
||||||
resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
|
resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
|
||||||
|
|
||||||
@@ -1690,6 +1707,12 @@ packages:
|
|||||||
minimist@1.2.8:
|
minimist@1.2.8:
|
||||||
resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
|
resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
|
||||||
|
|
||||||
|
motion-dom@12.26.2:
|
||||||
|
resolution: {integrity: sha512-KLMT1BroY8oKNeliA3JMNJ+nbCIsTKg6hJpDb4jtRAJ7nCKnnpg/LTq/NGqG90Limitz3kdAnAVXecdFVGlWTw==}
|
||||||
|
|
||||||
|
motion-utils@12.24.10:
|
||||||
|
resolution: {integrity: sha512-x5TFgkCIP4pPsRLpKoI86jv/q8t8FQOiM/0E8QKBzfMozWHfkKap2gA1hOki+B5g3IsBNpxbUnfOum1+dgvYww==}
|
||||||
|
|
||||||
ms@2.1.3:
|
ms@2.1.3:
|
||||||
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
||||||
|
|
||||||
@@ -3416,6 +3439,15 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
is-callable: 1.2.7
|
is-callable: 1.2.7
|
||||||
|
|
||||||
|
framer-motion@12.26.2(react-dom@19.1.0(react@19.2.3))(react@19.2.3):
|
||||||
|
dependencies:
|
||||||
|
motion-dom: 12.26.2
|
||||||
|
motion-utils: 12.24.10
|
||||||
|
tslib: 2.8.1
|
||||||
|
optionalDependencies:
|
||||||
|
react: 19.2.3
|
||||||
|
react-dom: 19.1.0(react@19.2.3)
|
||||||
|
|
||||||
function-bind@1.1.2: {}
|
function-bind@1.1.2: {}
|
||||||
|
|
||||||
function.prototype.name@1.1.8:
|
function.prototype.name@1.1.8:
|
||||||
@@ -4151,6 +4183,12 @@ snapshots:
|
|||||||
|
|
||||||
minimist@1.2.8: {}
|
minimist@1.2.8: {}
|
||||||
|
|
||||||
|
motion-dom@12.26.2:
|
||||||
|
dependencies:
|
||||||
|
motion-utils: 12.24.10
|
||||||
|
|
||||||
|
motion-utils@12.24.10: {}
|
||||||
|
|
||||||
ms@2.1.3: {}
|
ms@2.1.3: {}
|
||||||
|
|
||||||
nanoid@3.3.11: {}
|
nanoid@3.3.11: {}
|
||||||
|
|||||||
4
public/icon.svg
Normal file
4
public/icon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||||
|
<rect width="32" height="32" fill="#0a0a0a"/>
|
||||||
|
<text x="4" y="22" font-family="monospace" font-size="18" font-weight="bold" fill="#00ff41">>_</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 235 B |
@@ -1,32 +1,38 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Neo-brutalist muted color palette */
|
/* Hacker/Cyberpunk color palette */
|
||||||
--background: #FAF8F5;
|
--background: #0a0a0a;
|
||||||
--foreground: #3D3D3D;
|
--background-secondary: #111111;
|
||||||
--card-bg: #FEFDFB;
|
--foreground: #00ff41;
|
||||||
--border-color: #3D3D3D;
|
--foreground-dim: #00cc33;
|
||||||
|
--foreground-muted: #008f11;
|
||||||
|
|
||||||
/* Muted accent colors */
|
--card-bg: #0d0d0d;
|
||||||
--sage: #B8C5B3;
|
--card-bg-hover: #141414;
|
||||||
--sage-light: #CBD6C8;
|
--border-color: #00ff41;
|
||||||
--sage-dark: #A8B5A0;
|
--border-dim: #00cc33;
|
||||||
|
|
||||||
--terracotta: #D4B5A0;
|
/* Accent colors */
|
||||||
--terracotta-light: #E0C9B8;
|
--cyan: #00d4ff;
|
||||||
--terracotta-dark: #C9A88E;
|
--cyan-dim: #00a8cc;
|
||||||
|
--magenta: #ff00ff;
|
||||||
|
--magenta-dim: #cc00cc;
|
||||||
|
--yellow: #ffff00;
|
||||||
|
--yellow-dim: #cccc00;
|
||||||
|
--red: #ff3333;
|
||||||
|
--red-dim: #cc2929;
|
||||||
|
--orange: #ff6600;
|
||||||
|
|
||||||
--blue-grey: #A5B4BE;
|
/* Terminal colors */
|
||||||
--blue-grey-light: #B8C5CE;
|
--terminal-green: #00ff41;
|
||||||
--blue-grey-dark: #9BAAB5;
|
--terminal-amber: #ffb000;
|
||||||
|
--terminal-blue: #0080ff;
|
||||||
|
|
||||||
--rose: #D4B5B8;
|
/* Glow effects */
|
||||||
--rose-light: #E0C9CC;
|
--glow-green: 0 0 10px #00ff41, 0 0 20px #00ff4180, 0 0 30px #00ff4140;
|
||||||
--rose-dark: #C9A8AB;
|
--glow-cyan: 0 0 10px #00d4ff, 0 0 20px #00d4ff80;
|
||||||
|
--glow-magenta: 0 0 10px #ff00ff, 0 0 20px #ff00ff80;
|
||||||
--sand: #E8DCC8;
|
|
||||||
--sand-light: #F0E8D8;
|
|
||||||
--sand-dark: #DDD0BB;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
@@ -36,54 +42,333 @@
|
|||||||
--font-mono: var(--font-geist-mono);
|
--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 {
|
:root {
|
||||||
--background: #1A1A1A;
|
--background: #0a0a0a;
|
||||||
--foreground: #E8E3D8;
|
--foreground: #00ff41;
|
||||||
--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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--foreground);
|
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 */
|
/* Scanline effect overlay */
|
||||||
.shadow-neo-brutal {
|
.scanlines::before {
|
||||||
box-shadow: 5px 5px 0px var(--border-color);
|
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 {
|
/* CRT screen flicker */
|
||||||
box-shadow: 7px 7px 0px var(--border-color);
|
@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 {
|
.crt-flicker {
|
||||||
box-shadow: 5px 5px 0px var(--border-color);
|
animation: flicker 0.15s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow-brutal-hover {
|
/* Typing cursor animation */
|
||||||
box-shadow: 7px 7px 0px var(--border-color);
|
@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; }
|
||||||
|
|||||||
@@ -15,29 +15,35 @@ const geistMono = Geist_Mono({
|
|||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
metadataBase: new URL("https://mainasara.dev"),
|
metadataBase: new URL("https://mainasara.dev"),
|
||||||
title: {
|
title: {
|
||||||
default: "Mainasara Tsowa - Developer & Cybersecurity Expert",
|
default: "Mainasara Tsowa | Security Researcher & Full-Stack Developer",
|
||||||
template: "%s | Mainasara Tsowa",
|
template: "%s | Mainasara Tsowa",
|
||||||
},
|
},
|
||||||
description:
|
description:
|
||||||
"Passionate developer and cybersecurity expert building secure, elegant digital solutions. Explore projects, creative writing, and technical insights.",
|
"Security researcher and full-stack developer specializing in penetration testing, OSINT frameworks, vulnerability research, and building secure applications with Next.js. Open for security consulting and development projects.",
|
||||||
keywords: [
|
keywords: [
|
||||||
"developer",
|
"security researcher",
|
||||||
|
"penetration testing",
|
||||||
|
"pentest",
|
||||||
"cybersecurity",
|
"cybersecurity",
|
||||||
"full-stack",
|
"OSINT",
|
||||||
"web development",
|
"vulnerability research",
|
||||||
"security",
|
"Next.js developer",
|
||||||
"programming",
|
"full-stack developer",
|
||||||
"digital art",
|
"security tooling",
|
||||||
"creative writing",
|
"web security",
|
||||||
|
"application security",
|
||||||
|
"security consulting",
|
||||||
|
"React developer",
|
||||||
|
"TypeScript",
|
||||||
],
|
],
|
||||||
authors: [{ name: "Mainasara Tsowa" }],
|
authors: [{ name: "Mainasara Tsowa", url: "https://mainasara.dev" }],
|
||||||
creator: "Mainasara Tsowa",
|
creator: "Mainasara Tsowa",
|
||||||
publisher: "Mainasara Tsowa",
|
publisher: "Mainasara Tsowa",
|
||||||
robots: "index, follow",
|
robots: "index, follow",
|
||||||
openGraph: {
|
openGraph: {
|
||||||
title: "Mainasara Tsowa - Developer & Cybersecurity Expert",
|
title: "Mainasara Tsowa | Security Researcher & Full-Stack Developer",
|
||||||
description:
|
description:
|
||||||
"Passionate developer and cybersecurity expert building secure, elegant digital solutions.",
|
"Security researcher specializing in offensive security, OSINT frameworks, and building secure applications with Next.js.",
|
||||||
url: "https://mainasara.dev",
|
url: "https://mainasara.dev",
|
||||||
siteName: "Mainasara Tsowa",
|
siteName: "Mainasara Tsowa",
|
||||||
locale: "en_US",
|
locale: "en_US",
|
||||||
@@ -47,15 +53,15 @@ export const metadata: Metadata = {
|
|||||||
url: "/media/me/me.jpeg",
|
url: "/media/me/me.jpeg",
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 800,
|
height: 800,
|
||||||
alt: "Mainasara Tsowa",
|
alt: "Mainasara Tsowa - Security Researcher",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
twitter: {
|
twitter: {
|
||||||
card: "summary_large_image",
|
card: "summary_large_image",
|
||||||
title: "Mainasara Tsowa - Developer & Cybersecurity Expert",
|
title: "Mainasara Tsowa | Security Researcher & Full-Stack Developer",
|
||||||
description:
|
description:
|
||||||
"Passionate developer and cybersecurity expert building secure, elegant digital solutions.",
|
"Security researcher specializing in offensive security, OSINT frameworks, and secure application development.",
|
||||||
images: ["/media/me/me.jpeg"],
|
images: ["/media/me/me.jpeg"],
|
||||||
creator: "@neutrino2211",
|
creator: "@neutrino2211",
|
||||||
},
|
},
|
||||||
@@ -63,8 +69,8 @@ export const metadata: Metadata = {
|
|||||||
canonical: "https://mainasara.dev",
|
canonical: "https://mainasara.dev",
|
||||||
},
|
},
|
||||||
icons: {
|
icons: {
|
||||||
icon: [{ url: "/favicon.ico" }, { url: "/icon.png", type: "image/png" }],
|
icon: [{ url: "/icon.svg", type: "image/svg+xml" }],
|
||||||
apple: [{ url: "/apple-icon.png" }],
|
apple: [{ url: "/icon.svg" }],
|
||||||
},
|
},
|
||||||
manifest: "/manifest.json",
|
manifest: "/manifest.json",
|
||||||
verification: {
|
verification: {
|
||||||
@@ -83,9 +89,9 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning className="dark">
|
||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-[#0a0a0a]`}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
471
src/app/page.tsx
471
src/app/page.tsx
@@ -6,228 +6,416 @@ import Link from "next/link";
|
|||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Home",
|
title: "Home",
|
||||||
description:
|
description:
|
||||||
"Welcome to my personal portfolio. I'm Mainasara Tsowa, a developer and cybersecurity expert passionate about building secure, elegant digital solutions.",
|
"Security Researcher & Full-Stack Developer with expertise in penetration testing, security tooling, and building secure applications with Next.js.",
|
||||||
openGraph: {
|
openGraph: {
|
||||||
title: "Home | Mainasara Tsowa",
|
title: "Mainasara Tsowa | Security Researcher",
|
||||||
description:
|
description:
|
||||||
"Welcome to my personal portfolio. Developer and cybersecurity expert building secure, elegant digital solutions.",
|
"Security Researcher & Full-Stack Developer specializing in offensive security, OSINT, and secure application development.",
|
||||||
url: "https://mainasara.dev",
|
url: "https://mainasara.dev",
|
||||||
},
|
},
|
||||||
twitter: {
|
twitter: {
|
||||||
title: "Home | Mainasara Tsowa",
|
title: "Mainasara Tsowa | Security Researcher",
|
||||||
description:
|
description:
|
||||||
"Welcome to my personal portfolio. Developer and cybersecurity expert building secure, elegant digital solutions.",
|
"Security Researcher & Full-Stack Developer specializing in offensive security, OSINT, and secure application development.",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[#FAF8F5] font-mono">
|
<div className="min-h-screen bg-[#0a0a0a] font-mono relative grid-overlay">
|
||||||
<div className="max-w-4xl mx-auto px-6 py-12">
|
{/* Scanline overlay */}
|
||||||
<header className="text-center mb-16">
|
<div className="fixed inset-0 pointer-events-none z-50 opacity-30">
|
||||||
<div className="mb-8">
|
<div className="w-full h-full bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.3)_2px,rgba(0,0,0,0.3)_4px)]" />
|
||||||
<div className="w-32 h-32 mx-auto bg-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#B8C5B3]">
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-5xl mx-auto px-6 py-8 relative z-10">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="mb-12">
|
||||||
|
<div className="flex flex-col md:flex-row items-center gap-8 mb-8">
|
||||||
|
{/* Profile Image - Clean, no terminal effect */}
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-36 h-36 overflow-hidden border-2 border-[#00ff41] box-glow-green">
|
||||||
<Image
|
<Image
|
||||||
src="/media/me/me.jpeg"
|
src="/media/me/me.jpeg"
|
||||||
alt="Mainasara Tsowa"
|
alt="Mainasara Tsowa"
|
||||||
className="rounded-full"
|
className="w-full h-full object-cover"
|
||||||
width={128}
|
width={144}
|
||||||
height={128}
|
height={144}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="absolute -bottom-2 -right-2 status-online" />
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
|
|
||||||
Mainasara Tsowa
|
{/* Info */}
|
||||||
|
<div className="text-center md:text-left flex-1">
|
||||||
|
<div className="text-[#00ff4180] text-sm mb-2">
|
||||||
|
$ whoami
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-[#00ff41] glow-green mb-2 text-glitch">
|
||||||
|
MAINASARA TSOWA
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg text-[#5D5D5D] max-w-2xl mx-auto leading-relaxed font-semibold">
|
<div className="text-[#00d4ff] text-lg mb-4">
|
||||||
Developer & Cybersecurity Expert working on secure, elegant digital
|
<span className="text-[#ff00ff]">></span> Security Researcher{" "}
|
||||||
solutions
|
<span className="text-[#00ff4160]">|</span> Full-Stack Developer
|
||||||
|
</div>
|
||||||
|
<p className="text-[#00ff4180] max-w-lg leading-relaxed text-sm">
|
||||||
|
<span className="text-[#00d4ff]">/*</span> Building secure systems and breaking insecure ones.
|
||||||
|
Specialized in offensive security, OSINT frameworks, and Next.js applications.{" "}
|
||||||
|
<span className="text-[#00d4ff]">*/</span>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Stats */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div className="hacker-card p-4 text-center">
|
||||||
|
<div className="text-[#00d4ff] text-2xl font-bold">5+</div>
|
||||||
|
<div className="text-[#00ff4160] text-xs uppercase">Years Exp</div>
|
||||||
|
</div>
|
||||||
|
<div className="hacker-card p-4 text-center">
|
||||||
|
<div className="text-[#ff00ff] text-2xl font-bold">Next.js</div>
|
||||||
|
<div className="text-[#00ff4160] text-xs uppercase">Specialist</div>
|
||||||
|
</div>
|
||||||
|
<div className="hacker-card p-4 text-center">
|
||||||
|
<div className="text-[#ffff00] text-2xl font-bold">OSINT</div>
|
||||||
|
<div className="text-[#00ff4160] text-xs uppercase">Tools</div>
|
||||||
|
</div>
|
||||||
|
<div className="hacker-card p-4 text-center">
|
||||||
|
<div className="text-[#00ff41] text-2xl font-bold">Pentest</div>
|
||||||
|
<div className="text-[#00ff4160] text-xs uppercase">Security</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<nav className="mb-16">
|
{/* Social Links Bar */}
|
||||||
<div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-6 shadow-brutal">
|
<nav className="mb-12 fade-in fade-in-delay-1">
|
||||||
<ul className="flex flex-wrap justify-center gap-4 md:gap-8">
|
<div className="flex flex-wrap justify-center gap-4">
|
||||||
{/*<li>
|
|
||||||
<a
|
<a
|
||||||
href="https://blog.mainasara.dev"
|
href="https://github.com/neutrino2211"
|
||||||
className="text-[#3D3D3D] font-bold hover:bg-[#E8DCC8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hacker-btn px-6 py-3 flex items-center gap-2 text-sm"
|
||||||
>
|
>
|
||||||
Blog
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
GitHub
|
||||||
</a>
|
</a>
|
||||||
</li>*/}
|
<a
|
||||||
|
href="https://www.linkedin.com/in/mainasara-tsowa-17098b214/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hacker-btn px-6 py-3 flex items-center gap-2 text-sm"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
||||||
|
</svg>
|
||||||
|
LinkedIn
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://x.com/neutrino2211"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hacker-btn px-6 py-3 flex items-center gap-2 text-sm"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||||
|
</svg>
|
||||||
|
@neutrino2211
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="mailto:tsowamainasara@gmail.com"
|
||||||
|
className="hacker-btn px-6 py-3 flex items-center gap-2 text-sm border-[#00d4ff] text-[#00d4ff] hover:bg-[#00d4ff15]"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
Contact
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Navigation - Zen World */}
|
||||||
|
<nav className="mb-12 fade-in fade-in-delay-2">
|
||||||
|
<div className="terminal-window p-4">
|
||||||
|
<div className="text-[#00ff4180] text-xs mb-1">$ cd ~/zen/</div>
|
||||||
|
<div className="text-[#00ff41cc] text-sm mb-4 text-center">
|
||||||
|
<span className="text-[#00d4ff]">//</span> Enter my zen world <span className="text-[#00d4ff]">//</span>
|
||||||
|
</div>
|
||||||
|
<ul className="flex flex-wrap justify-center gap-3">
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
href="/digital-art"
|
href="/digital-art"
|
||||||
className="text-[#3D3D3D] font-bold hover:bg-[#E0C9CC] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
|
className="zen-btn px-4 py-2 text-sm border border-[#ff00ff] text-[#ff00ff] hover:bg-[#ff00ff20] hover:shadow-[0_0_15px_#ff00ff40]"
|
||||||
>
|
>
|
||||||
Digital Art
|
digital-art
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
href="/stories"
|
href="/stories"
|
||||||
className="text-[#3D3D3D] font-bold hover:bg-[#F0E8D8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
|
className="zen-btn px-4 py-2 text-sm border border-[#ffff00] text-[#ffff00] hover:bg-[#ffff0020] hover:shadow-[0_0_15px_#ffff0040]"
|
||||||
>
|
>
|
||||||
Mini Stories
|
stories
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
href="/thoughts"
|
href="/thoughts"
|
||||||
className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
|
className="zen-btn px-4 py-2 text-sm border border-[#00d4ff] text-[#00d4ff] hover:bg-[#00d4ff20] hover:shadow-[0_0_15px_#00d4ff40]"
|
||||||
>
|
>
|
||||||
Thoughts
|
thoughts
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main className="space-y-16">
|
<main className="space-y-12">
|
||||||
<section
|
{/* About Section */}
|
||||||
id="about"
|
<section className="fade-in fade-in-delay-3">
|
||||||
className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
|
<div className="terminal-window overflow-hidden">
|
||||||
>
|
<div className="terminal-header px-4 py-2 flex items-center gap-2">
|
||||||
<h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
|
<span className="text-[#00ff41] text-sm opacity-60">about.sh</span>
|
||||||
About
|
</div>
|
||||||
</h2>
|
<div className="p-6">
|
||||||
<p className="text-[#5D5D5D] leading-relaxed text-center max-w-3xl mx-auto font-semibold">
|
<div className="text-[#00ff4160] text-sm mb-4">
|
||||||
I'm a passionate developer and cybersecurity expert who
|
$ cat /home/mainasara/about.txt
|
||||||
believes in building beautiful, secure, and purposeful digital
|
</div>
|
||||||
solutions. When I'm not coding or exploring security tooling,
|
<div className="space-y-4 text-[#00ff41cc]">
|
||||||
you'll probably find me trying my hands at some creative
|
<p className="leading-relaxed">
|
||||||
projects.
|
<span className="text-[#00d4ff]">[*]</span> Security researcher with a passion for
|
||||||
|
breaking things to understand how they work. I build tools that help security
|
||||||
|
professionals work more efficiently.
|
||||||
</p>
|
</p>
|
||||||
|
<p className="leading-relaxed">
|
||||||
|
<span className="text-[#ff00ff]">[*]</span> Full-stack developer specializing in
|
||||||
|
Next.js and React ecosystems. I believe secure code is the foundation of
|
||||||
|
every great application.
|
||||||
|
</p>
|
||||||
|
<p className="leading-relaxed">
|
||||||
|
<span className="text-[#ffff00]">[*]</span> When not hunting vulnerabilities or
|
||||||
|
writing code, I explore creative outlets through digital art and fiction writing.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section
|
{/* Skills Section */}
|
||||||
id="expertise"
|
<section className="fade-in fade-in-delay-4">
|
||||||
className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
|
<div className="terminal-window overflow-hidden">
|
||||||
>
|
<div className="terminal-header px-4 py-2 flex items-center gap-2">
|
||||||
<h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
|
<span className="text-[#00ff41] text-sm opacity-60">skills.json</span>
|
||||||
Expertise
|
</div>
|
||||||
</h2>
|
<div className="p-6">
|
||||||
|
<div className="text-[#00ff4160] text-sm mb-4">
|
||||||
|
$ cat /etc/skills.json | jq
|
||||||
|
</div>
|
||||||
<div className="grid md:grid-cols-2 gap-6">
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
<div className="bg-[#CBD6C8] border-2 border-[#3D3D3D] rounded-sm p-6">
|
{/* Security Skills */}
|
||||||
<h3 className="text-lg font-bold text-[#3D3D3D] mb-3 uppercase">
|
<div className="hacker-card p-5">
|
||||||
Development
|
<h3 className="text-[#ff3333] font-bold mb-4 flex items-center gap-2">
|
||||||
|
<span className="text-lg">{"{"}</span>
|
||||||
|
<span>"security"</span>
|
||||||
|
<span className="text-lg">:</span>
|
||||||
</h3>
|
</h3>
|
||||||
<ul className="space-y-2 text-[#5D5D5D]">
|
<ul className="space-y-2 text-sm ml-4">
|
||||||
<li className="flex items-center">
|
<li className="flex items-center gap-2">
|
||||||
<span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
|
<span className="text-[#00d4ff]">"</span>
|
||||||
Full-Stack Applications
|
<span className="text-[#00ff41cc]">Penetration Testing</span>
|
||||||
|
<span className="text-[#00d4ff]">"</span>
|
||||||
|
<span className="text-[#00ff4160]">,</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center">
|
<li className="flex items-center gap-2">
|
||||||
<span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
|
<span className="text-[#00d4ff]">"</span>
|
||||||
Clean Architecture
|
<span className="text-[#00ff41cc]">OSINT & Reconnaissance</span>
|
||||||
|
<span className="text-[#00d4ff]">"</span>
|
||||||
|
<span className="text-[#00ff4160]">,</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center">
|
<li className="flex items-center gap-2">
|
||||||
<span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
|
<span className="text-[#00d4ff]">"</span>
|
||||||
Performance Optimization
|
<span className="text-[#00ff41cc]">Security Architecture</span>
|
||||||
|
<span className="text-[#00d4ff]">"</span>
|
||||||
|
<span className="text-[#00ff4160]">,</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="text-[#00d4ff]">"</span>
|
||||||
|
<span className="text-[#00ff41cc]">Vulnerability Research</span>
|
||||||
|
<span className="text-[#00d4ff]">"</span>
|
||||||
|
<span className="text-[#00ff4160]">,</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="text-[#00d4ff]">"</span>
|
||||||
|
<span className="text-[#00ff41cc]">Security Tooling</span>
|
||||||
|
<span className="text-[#00d4ff]">"</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div className="text-[#ff3333] font-bold mt-2">{"}"}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-[#B8C5CE] border-2 border-[#3D3D3D] rounded-sm p-6">
|
|
||||||
<h3 className="text-lg font-bold text-[#3D3D3D] mb-3 uppercase">
|
{/* Development Skills */}
|
||||||
Cybersecurity
|
<div className="hacker-card p-5">
|
||||||
|
<h3 className="text-[#00d4ff] font-bold mb-4 flex items-center gap-2">
|
||||||
|
<span className="text-lg">{"{"}</span>
|
||||||
|
<span>"development"</span>
|
||||||
|
<span className="text-lg">:</span>
|
||||||
</h3>
|
</h3>
|
||||||
<ul className="space-y-2 text-[#5D5D5D]">
|
<ul className="space-y-2 text-sm ml-4">
|
||||||
<li className="flex items-center">
|
<li className="flex items-center gap-2">
|
||||||
<span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
|
<span className="text-[#ff00ff]">"</span>
|
||||||
Security Tooling
|
<span className="text-[#00ff41cc]">Next.js / React</span>
|
||||||
|
<span className="text-[#ff00ff]">"</span>
|
||||||
|
<span className="text-[#00ff4160]">,</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center">
|
<li className="flex items-center gap-2">
|
||||||
<span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
|
<span className="text-[#ff00ff]">"</span>
|
||||||
Penetration Testing
|
<span className="text-[#00ff41cc]">TypeScript / Node.js</span>
|
||||||
|
<span className="text-[#ff00ff]">"</span>
|
||||||
|
<span className="text-[#00ff4160]">,</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center">
|
<li className="flex items-center gap-2">
|
||||||
<span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
|
<span className="text-[#ff00ff]">"</span>
|
||||||
Security Architecture
|
<span className="text-[#00ff41cc]">Python / Go</span>
|
||||||
|
<span className="text-[#ff00ff]">"</span>
|
||||||
|
<span className="text-[#00ff4160]">,</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="text-[#ff00ff]">"</span>
|
||||||
|
<span className="text-[#00ff41cc]">API Design & Integration</span>
|
||||||
|
<span className="text-[#ff00ff]">"</span>
|
||||||
|
<span className="text-[#00ff4160]">,</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="text-[#ff00ff]">"</span>
|
||||||
|
<span className="text-[#00ff41cc]">Cloud & DevOps</span>
|
||||||
|
<span className="text-[#ff00ff]">"</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div className="text-[#00d4ff] font-bold mt-2">{"}"}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Projects Section */}
|
||||||
<ProjectsSection />
|
<ProjectsSection />
|
||||||
|
|
||||||
<section
|
{/* Creative Corner */}
|
||||||
id="writing"
|
<section className="fade-in fade-in-delay-5">
|
||||||
className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
|
<div className="terminal-window overflow-hidden">
|
||||||
>
|
<div className="terminal-header px-4 py-2 flex items-center gap-2">
|
||||||
<h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
|
<span className="text-[#00ff41] text-sm opacity-60">creative.exe</span>
|
||||||
Creative Corner
|
</div>
|
||||||
</h2>
|
<div className="p-6">
|
||||||
<div className="grid md:grid-cols-3 gap-6">
|
<div className="text-[#00ff4160] text-sm mb-4">
|
||||||
|
$ ./creative --list
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-4">
|
||||||
<Link
|
<Link
|
||||||
href="/digital-art"
|
href="/digital-art"
|
||||||
className="bg-[#F0E8D8] border-2 border-[#3D3D3D] rounded-sm p-6 text-center hover:bg-[#E8DCC8] transition-colors"
|
className="hacker-card p-6 text-center group"
|
||||||
>
|
>
|
||||||
<div className="text-4xl mb-3">🎨</div>
|
<div className="text-4xl mb-3 group-hover:scale-110 transition-transform">
|
||||||
<h3 className="text-lg font-bold text-[#3D3D3D] mb-2 uppercase">
|
<span className="text-[#ff00ff]">[</span>
|
||||||
Digital Art
|
<span className="text-[#00ff41]">ART</span>
|
||||||
</h3>
|
<span className="text-[#ff00ff]">]</span>
|
||||||
<p className="text-[#5D5D5D] text-sm">
|
</div>
|
||||||
Someone messing around with colors and shapes.
|
<h3 className="text-[#ff00ff] font-bold mb-2">Digital Art</h3>
|
||||||
|
<p className="text-[#00ff4160] text-xs">
|
||||||
|
Experimental visuals and creative explorations
|
||||||
</p>
|
</p>
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/stories"
|
href="/stories"
|
||||||
className="bg-[#CBD6C8] border-2 border-[#3D3D3D] rounded-sm p-6 text-center hover:bg-[#B8C5B3] transition-colors"
|
className="hacker-card p-6 text-center group"
|
||||||
>
|
>
|
||||||
<div className="text-4xl mb-3">📝</div>
|
<div className="text-4xl mb-3 group-hover:scale-110 transition-transform">
|
||||||
<h3 className="text-lg font-bold text-[#3D3D3D] mb-2 uppercase">
|
<span className="text-[#ffff00]">[</span>
|
||||||
Mini Stories
|
<span className="text-[#00ff41]">TXT</span>
|
||||||
</h3>
|
<span className="text-[#ffff00]">]</span>
|
||||||
<p className="text-[#5D5D5D] text-sm">
|
</div>
|
||||||
I like good narratives, so I try to imitate them.
|
<h3 className="text-[#ffff00] font-bold mb-2">Mini Stories</h3>
|
||||||
|
<p className="text-[#00ff4160] text-xs">
|
||||||
|
Short fiction and narrative experiments
|
||||||
</p>
|
</p>
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/thoughts"
|
href="/thoughts"
|
||||||
className="bg-[#B8C5CE] border-2 border-[#3D3D3D] rounded-sm p-6 text-center hover:bg-[#A5B4BE] transition-colors"
|
className="hacker-card p-6 text-center group"
|
||||||
>
|
>
|
||||||
<div className="text-4xl mb-3">🌸</div>
|
<div className="text-4xl mb-3 group-hover:scale-110 transition-transform">
|
||||||
<h3 className="text-lg font-bold text-[#3D3D3D] mb-2 uppercase">
|
<span className="text-[#00d4ff]">[</span>
|
||||||
Thoughts
|
<span className="text-[#00ff41]">LOG</span>
|
||||||
</h3>
|
<span className="text-[#00d4ff]">]</span>
|
||||||
<p className="text-[#5D5D5D] text-sm">
|
</div>
|
||||||
Rants on technology, maybe something else.
|
<h3 className="text-[#00d4ff] font-bold mb-2">Thoughts</h3>
|
||||||
|
<p className="text-[#00ff4160] text-xs">
|
||||||
|
Reflections on tech, security, and life
|
||||||
</p>
|
</p>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section
|
{/* Contact Section */}
|
||||||
id="contact"
|
<section>
|
||||||
className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
|
<div className="terminal-window overflow-hidden">
|
||||||
>
|
<div className="terminal-header px-4 py-2 flex items-center gap-2">
|
||||||
<h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
|
<span className="text-[#00ff41] text-sm opacity-60">contact.sh</span>
|
||||||
Get In Touch
|
</div>
|
||||||
</h2>
|
<div className="p-6 text-center">
|
||||||
<div className="text-center">
|
<div className="text-[#00ff4160] text-sm mb-6">
|
||||||
<p className="text-[#5D5D5D] mb-6 font-semibold">
|
$ echo "Let's connect"
|
||||||
Let's collaborate on something interesting
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<p className="text-[#00ff41cc] mb-2">
|
||||||
|
Available for security consulting, development projects, and interesting collaborations.
|
||||||
</p>
|
</p>
|
||||||
|
<p className="text-[#00ff4160] text-sm">
|
||||||
|
Response time: < 24h
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap justify-center gap-4">
|
||||||
<a
|
<a
|
||||||
href="mailto:tsowamainasara@gmail.com"
|
href="mailto:tsowamainasara@gmail.com"
|
||||||
className="inline-block bg-[#3D3D3D] text-white px-8 py-4 font-bold border-2 border-[#3D3D3D] hover:bg-[#FEFDFB] hover:text-[#3D3D3D] transition-colors rounded-sm"
|
className="hacker-btn px-8 py-4 font-bold text-lg"
|
||||||
>
|
>
|
||||||
SEND EMAIL
|
<span className="text-[#00ff4160] mr-2">$</span>
|
||||||
|
SEND_MESSAGE
|
||||||
</a>
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://github.com/neutrino2211"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hacker-btn px-8 py-4 font-bold text-lg border-[#00d4ff] text-[#00d4ff] hover:bg-[#00d4ff15]"
|
||||||
|
>
|
||||||
|
<span className="text-[#00d4ff80] mr-2">$</span>
|
||||||
|
VIEW_CODE
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer className="mt-20 text-center">
|
{/* Footer */}
|
||||||
<div className="flex justify-center space-x-6 mb-6">
|
<footer className="mt-16 text-center">
|
||||||
|
<div className="terminal-window p-6">
|
||||||
|
<div className="flex justify-center gap-6 mb-6">
|
||||||
<a
|
<a
|
||||||
href="https://github.com/neutrino2211/"
|
href="https://github.com/neutrino2211"
|
||||||
className="text-[#3D3D3D] font-bold hover:text-[#B8C5B3] transition-colors"
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-[#00ff4180] hover:text-[#00ff41] transition-colors"
|
||||||
>
|
>
|
||||||
<span className="sr-only">GitHub</span>
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||||
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path
|
<path
|
||||||
fillRule="evenodd"
|
fillRule="evenodd"
|
||||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||||
@@ -237,27 +425,34 @@ export default function Home() {
|
|||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://www.linkedin.com/in/mainasara-tsowa-17098b214/"
|
href="https://www.linkedin.com/in/mainasara-tsowa-17098b214/"
|
||||||
className="text-[#3D3D3D] font-bold hover:text-[#A5B4BE] transition-colors"
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-[#00ff4180] hover:text-[#00d4ff] transition-colors"
|
||||||
>
|
>
|
||||||
<span className="sr-only">LinkedIn</span>
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||||
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://x.com/neutrino2211/"
|
href="https://x.com/neutrino2211"
|
||||||
className="text-[#3D3D3D] font-bold hover:text-[#D4B5A0] transition-colors"
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-[#00ff4180] hover:text-[#ff00ff] transition-colors"
|
||||||
>
|
>
|
||||||
<span className="sr-only">Twitter</span>
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||||
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||||
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
|
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
|
<div className="text-[#00ff4140] text-xs">
|
||||||
<p className="text-sm uppercase">
|
<span className="text-[#00ff4160]">/*</span> Built with Next.js |{" "}
|
||||||
Built with Charm Crush, Z.AI GLM and some muted colors
|
<span className="text-[#00d4ff80]">mainasara.dev</span> |{" "}
|
||||||
</p>
|
{new Date().getFullYear()}{" "}
|
||||||
|
<span className="text-[#00ff4160]">*/</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-[#00ff4130] text-xs font-mono">
|
||||||
|
root@mainasara:~# <span className="cursor-blink"></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
25
src/app/template.tsx
Normal file
25
src/app/template.tsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
|
export default function Template({ children }: { children: React.ReactNode }) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const isHackerTheme = pathname === "/";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={pathname}
|
||||||
|
initial={{ opacity: 0, y: 8 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -8 }}
|
||||||
|
transition={{
|
||||||
|
duration: 0.35,
|
||||||
|
ease: [0.22, 1, 0.36, 1],
|
||||||
|
}}
|
||||||
|
className={isHackerTheme ? "bg-[#0a0a0a]" : ""}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -4,17 +4,30 @@ import { useState } from "react";
|
|||||||
import { projects, Project } from "@/data/projects";
|
import { projects, Project } from "@/data/projects";
|
||||||
|
|
||||||
const categoryColors = {
|
const categoryColors = {
|
||||||
security: "bg-[#E0C9B8] hover:border-[#5D5D5D]",
|
security: {
|
||||||
development: "bg-[#B8C5CE] hover:border-[#5D5D5D]",
|
border: "border-[#ff3333]",
|
||||||
art: "bg-[#E0C9CC] hover:border-[#5D5D5D]",
|
text: "text-[#ff3333]",
|
||||||
other: "bg-[#E8DCC8] hover:border-[#5D5D5D]",
|
glow: "hover:shadow-[0_0_15px_#ff333340]",
|
||||||
};
|
tag: "bg-[#ff333320] text-[#ff3333]",
|
||||||
|
},
|
||||||
const categoryHoverColors = {
|
development: {
|
||||||
security: "hover:text-[#C9A88E]",
|
border: "border-[#00d4ff]",
|
||||||
development: "hover:text-[#9BAAB5]",
|
text: "text-[#00d4ff]",
|
||||||
art: "hover:text-[#C9A8AB]",
|
glow: "hover:shadow-[0_0_15px_#00d4ff40]",
|
||||||
other: "hover:text-[#DDD0BB]",
|
tag: "bg-[#00d4ff20] text-[#00d4ff]",
|
||||||
|
},
|
||||||
|
art: {
|
||||||
|
border: "border-[#ff00ff]",
|
||||||
|
text: "text-[#ff00ff]",
|
||||||
|
glow: "hover:shadow-[0_0_15px_#ff00ff40]",
|
||||||
|
tag: "bg-[#ff00ff20] text-[#ff00ff]",
|
||||||
|
},
|
||||||
|
other: {
|
||||||
|
border: "border-[#ffff00]",
|
||||||
|
text: "text-[#ffff00]",
|
||||||
|
glow: "hover:shadow-[0_0_15px_#ffff0040]",
|
||||||
|
tag: "bg-[#ffff0020] text-[#ffff00]",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function ProjectsSection() {
|
export default function ProjectsSection() {
|
||||||
@@ -24,64 +37,117 @@ export default function ProjectsSection() {
|
|||||||
const additionalProjects = projects.filter((project) => !project.featured);
|
const additionalProjects = projects.filter((project) => !project.featured);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section id="projects">
|
||||||
id="projects"
|
<div className="terminal-window rounded-lg overflow-hidden">
|
||||||
className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
|
<div className="terminal-header px-4 py-2 flex items-center gap-2">
|
||||||
>
|
<span className="text-[#00ff41] text-sm opacity-60">projects.sh</span>
|
||||||
<h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
|
</div>
|
||||||
Featured Projects
|
<div className="p-6">
|
||||||
</h2>
|
<div className="text-[#00ff4160] text-sm mb-6">
|
||||||
|
$ ls -la ~/projects/ --featured
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="grid md:grid-cols-2 gap-6 mb-6">
|
<div className="grid md:grid-cols-2 gap-6 mb-6">
|
||||||
{featuredProjects.map((project) => (
|
{featuredProjects.map((project, index) => (
|
||||||
<ProjectCard key={project.id} project={project} />
|
<ProjectCard key={project.id} project={project} index={index} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={`overflow-hidden transition-all duration-500 ease-in-out ${
|
className={`overflow-hidden transition-all duration-500 ease-in-out ${
|
||||||
isExpanded ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
|
isExpanded ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
{additionalProjects.length > 0 && (
|
||||||
|
<div className="text-[#00ff4160] text-sm mb-4 mt-4">
|
||||||
|
$ ls -la ~/projects/ --all
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="grid md:grid-cols-2 gap-6">
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
{additionalProjects.map((project) => (
|
{additionalProjects.map((project, index) => (
|
||||||
<ProjectCard key={project.id} project={project} />
|
<ProjectCard
|
||||||
|
key={project.id}
|
||||||
|
project={project}
|
||||||
|
index={index + featuredProjects.length}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{additionalProjects.length > 0 && (
|
{additionalProjects.length > 0 && (
|
||||||
<div className="text-center mt-6">
|
<div className="text-center mt-8">
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsExpanded(!isExpanded)}
|
onClick={() => setIsExpanded(!isExpanded)}
|
||||||
className="bg-[#3D3D3D] text-white px-6 py-3 font-bold border-2 border-[#3D3D3D] hover:bg-[#FEFDFB] hover:text-[#3D3D3D] transition-colors uppercase rounded-sm"
|
className="hacker-btn px-8 py-3 font-bold"
|
||||||
>
|
>
|
||||||
{isExpanded ? "Show Less" : "Read More"}
|
<span className="text-[#00ff4160] mr-2">$</span>
|
||||||
|
{isExpanded ? "COLLAPSE" : "SHOW_ALL"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function ProjectCard({ project }: { project: Project }) {
|
function ProjectCard({ project, index }: { project: Project; index: number }) {
|
||||||
const colorClass = categoryColors[project.category];
|
const colors = categoryColors[project.category];
|
||||||
const hoverColorClass = categoryHoverColors[project.category];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`${colorClass} border-2 border-[#3D3D3D] rounded-sm p-6 transition-colors`}
|
className={`hacker-card p-5 transition-all duration-300 ${colors.border} border ${colors.glow}`}
|
||||||
>
|
>
|
||||||
<h3 className="text-lg font-bold text-[#3D3D3D] mb-2 uppercase">
|
{/* Project header */}
|
||||||
|
<div className="flex items-start justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-[#00ff4160] text-xs font-mono">
|
||||||
|
[{String(index).padStart(2, "0")}]
|
||||||
|
</span>
|
||||||
|
<span className={`text-xs px-2 py-0.5 ${colors.tag} font-mono`}>
|
||||||
|
{project.category}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{project.featured && (
|
||||||
|
<span className="text-[#ffff00] text-xs animate-pulse">*</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Project title */}
|
||||||
|
<h3 className={`text-lg font-bold mb-2 ${colors.text}`}>
|
||||||
|
<span className="text-[#00ff4160]">./</span>
|
||||||
{project.title}
|
{project.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-[#5D5D5D] text-sm mb-3">{project.description}</p>
|
|
||||||
|
{/* Description */}
|
||||||
|
<p className="text-[#00ff41cc] text-sm mb-4 leading-relaxed">
|
||||||
|
<span className="text-[#00ff4160]"># </span>
|
||||||
|
{project.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Link */}
|
||||||
{project.link && (
|
{project.link && (
|
||||||
<a
|
<a
|
||||||
href={project.link}
|
href={project.link}
|
||||||
className={`text-[#3D3D3D] font-bold underline ${hoverColorClass} transition-colors`}
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={`inline-flex items-center gap-2 text-sm font-mono ${colors.text} hover:underline group`}
|
||||||
>
|
>
|
||||||
View Project →
|
<span className="text-[#00ff4160]">></span>
|
||||||
|
<span>VIEW_PROJECT</span>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 transform group-hover:translate-x-1 transition-transform"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user