diff --git a/package.json b/package.json index d466598..b456b87 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@mdx-js/react": "^3.1.1", "@next/mdx": "^16.1.1", "@types/mdx": "^2.0.13", + "framer-motion": "^12.26.2", "gray-matter": "^4.0.3", "next": "16.1.1", "react": "19.2.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 916933b..fb94336 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@types/mdx': specifier: ^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: specifier: ^4.0.3 version: 4.0.3 @@ -1165,6 +1168,20 @@ packages: resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==} 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: resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} @@ -1690,6 +1707,12 @@ packages: minimist@1.2.8: 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: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -3416,6 +3439,15 @@ snapshots: dependencies: 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.prototype.name@1.1.8: @@ -4151,6 +4183,12 @@ snapshots: minimist@1.2.8: {} + motion-dom@12.26.2: + dependencies: + motion-utils: 12.24.10 + + motion-utils@12.24.10: {} + ms@2.1.3: {} nanoid@3.3.11: {} diff --git a/public/icon.svg b/public/icon.svg new file mode 100644 index 0000000..bffae99 --- /dev/null +++ b/public/icon.svg @@ -0,0 +1,4 @@ + + + >_ + diff --git a/src/app/globals.css b/src/app/globals.css index 67cf6cc..b74e629 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b4ce7a8..cf42acb 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -15,29 +15,35 @@ const geistMono = Geist_Mono({ export const metadata: Metadata = { metadataBase: new URL("https://mainasara.dev"), title: { - default: "Mainasara Tsowa - Developer & Cybersecurity Expert", + default: "Mainasara Tsowa | Security Researcher & Full-Stack Developer", template: "%s | Mainasara Tsowa", }, 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: [ - "developer", + "security researcher", + "penetration testing", + "pentest", "cybersecurity", - "full-stack", - "web development", - "security", - "programming", - "digital art", - "creative writing", + "OSINT", + "vulnerability research", + "Next.js developer", + "full-stack developer", + "security tooling", + "web security", + "application security", + "security consulting", + "React developer", + "TypeScript", ], - authors: [{ name: "Mainasara Tsowa" }], + authors: [{ name: "Mainasara Tsowa", url: "https://mainasara.dev" }], creator: "Mainasara Tsowa", publisher: "Mainasara Tsowa", robots: "index, follow", openGraph: { - title: "Mainasara Tsowa - Developer & Cybersecurity Expert", + title: "Mainasara Tsowa | Security Researcher & Full-Stack Developer", 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", siteName: "Mainasara Tsowa", locale: "en_US", @@ -47,15 +53,15 @@ export const metadata: Metadata = { url: "/media/me/me.jpeg", width: 800, height: 800, - alt: "Mainasara Tsowa", + alt: "Mainasara Tsowa - Security Researcher", }, ], }, twitter: { card: "summary_large_image", - title: "Mainasara Tsowa - Developer & Cybersecurity Expert", + title: "Mainasara Tsowa | Security Researcher & Full-Stack Developer", 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"], creator: "@neutrino2211", }, @@ -63,8 +69,8 @@ export const metadata: Metadata = { canonical: "https://mainasara.dev", }, icons: { - icon: [{ url: "/favicon.ico" }, { url: "/icon.png", type: "image/png" }], - apple: [{ url: "/apple-icon.png" }], + icon: [{ url: "/icon.svg", type: "image/svg+xml" }], + apple: [{ url: "/icon.svg" }], }, manifest: "/manifest.json", verification: { @@ -83,9 +89,9 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 441890f..6398769 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,258 +6,453 @@ import Link from "next/link"; export const metadata: Metadata = { title: "Home", 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: { - title: "Home | Mainasara Tsowa", + title: "Mainasara Tsowa | Security Researcher", 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", }, twitter: { - title: "Home | Mainasara Tsowa", + title: "Mainasara Tsowa | Security Researcher", 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() { return ( -
-
-
-
-
- Mainasara Tsowa +
+ {/* Scanline overlay */} +
+
+
+ +
+ {/* Header */} +
+
+ {/* Profile Image - Clean, no terminal effect */} +
+
+ Mainasara Tsowa +
+
+
+ + {/* Info */} +
+
+ $ whoami +
+

+ MAINASARA TSOWA +

+
+ > Security Researcher{" "} + | Full-Stack Developer +
+

+ /* Building secure systems and breaking insecure ones. + Specialized in offensive security, OSINT frameworks, and Next.js applications.{" "} + */ +

+
+
+ + {/* Quick Stats */} +
+
+
5+
+
Years Exp
+
+
+
Next.js
+
Specialist
+
+
+
OSINT
+
Tools
+
+
+
Pentest
+
Security
-

- Mainasara Tsowa -

-

- Developer & Cybersecurity Expert working on secure, elegant digital - solutions -

- - -
-
-

- About -

-

- I'm a passionate developer and cybersecurity expert who - believes in building beautiful, secure, and purposeful digital - solutions. When I'm not coding or exploring security tooling, - you'll probably find me trying my hands at some creative - projects. -

-
- -
-

- Expertise -

-
-
-

- Development -

-
    -
  • - - Full-Stack Applications -
    • -
  • - - Clean Architecture -
    • -
  • - - Performance Optimization -
    • -
-
-
-

- Cybersecurity -

-
    -
  • - - Security Tooling -
    • -
  • - - Penetration Testing -
    • -
  • - - Security Architecture -
    • -
-
-
-
- - - -
-

- Creative Corner -

-
- -
🎨
-

- Digital Art -

-

- Someone messing around with colors and shapes. -

- - -
📝
-

- Mini Stories -

-

- I like good narratives, so I try to imitate them. -

- - -
🌸
-

- Thoughts -

-

- Rants on technology, maybe something else. -

- -
-
- -
-

- Get In Touch -

-
-

- Let's collaborate on something interesting -

- - SEND EMAIL - -
-
-
- -