Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | portfolio.html |
| Date | Not specified in source |
| Path or archive member | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/portfolio.html |
| Original SHA-256 | 70137c70e156860319a7cdd0a8aa53da76cf48a07e8d9200590a7c90d21b8a0a |
| Reading-copy SHA-256 | 70137c70e156860319a7cdd0a8aa53da76cf48a07e8d9200590a7c90d21b8a0a |
| Archive source | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/portfolio.html"} |
Every recorded occurrence
These 2 records contain identical original source bytes. Their paths and revisions remain part of the archive.
| Original record | Branch or archive | Revision / identifier | Original location |
|---|---|---|---|
| portfolio.html | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/portfolio.html"} | libsrc-729c10df95ee | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/portfolio.html |
| c5d40c072d00a3995f99b44286cc238093dd0191 | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/.content_store/c5/c5d40c072d00a3995f99b44286cc238093dd0191"} | libsrc-51fa3b76b43a | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/.content_store/c5/c5d40c072d00a3995f99b44286cc238093dd0191 |
Recovered source transcript
Download complete source text ↓1,547 lines · 52.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio | ThatAIGuy</title>
<meta name="description" content="86+ production websites. Award-winning web development powered by MEGAMIND AGI.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
:root {
--matrix-green: #00ff41;
--matrix-bright: #39ff14;
--matrix-dark: #003b00;
--neon-cyan: #00f5ff;
--neon-magenta: #ff00ff;
--bg-black: #000000;
--bg-dark: #020502;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Rajdhani', sans-serif;
background: var(--bg-black);
color: var(--matrix-green);
overflow-x: hidden;
cursor: default;
}
/* Custom Cursor */
.cursor {
width: 20px;
height: 20px;
border: 2px solid var(--matrix-green);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: transform 0.1s ease, opacity 0.3s ease;
mix-blend-mode: difference;
}
.cursor-dot {
width: 4px;
height: 4px;
background: var(--matrix-green);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
}
/* Three.js Canvas */
#matrix-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* CRT Effect */
.crt-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
background:
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15) 0px,
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
}
.crt-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%);
}
/* Flicker Animation */
@keyframes flicker {
0%, 100% { opacity: 1; }
3% { opacity: 0.9; }
6% { opacity: 1; }
7% { opacity: 0.85; }
8% { opacity: 1; }
9% { opacity: 0.9; }
10% { opacity: 1; }
89% { opacity: 1; }
90% { opacity: 0.95; }
99% { opacity: 1; }
}
/* Navigation */
nav {
position: fixed;
top: 0;
width: 100%;
padding: 1.5rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
}
.logo {
font-family: 'Orbitron', sans-serif;
font-size: 1.6rem;
font-weight: 900;
color: var(--matrix-green);
text-decoration: none;
text-shadow: 0 0 10px var(--matrix-green), 0 0 20px var(--matrix-green), 0 0 40px var(--matrix-green);
animation: flicker 8s infinite;
position: relative;
}
.logo::after {
content: '_';
animation: blink 1s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.nav-links {
display: flex;
gap: 3rem;
list-style: none;
}
.nav-links a {
font-family: 'Share Tech Mono', monospace;
font-size: 0.9rem;
text-decoration: none;
color: rgba(0, 255, 65, 0.6);
letter-spacing: 0.2em;
transition: all 0.3s ease;
position: relative;
padding: 0.5rem 0;
}
.nav-links a::before {
content: '[ ';
opacity: 0;
transition: all 0.3s ease;
}
.nav-links a::after {
content: ' ]';
opacity: 0;
transition: all 0.3s ease;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--matrix-bright);
text-shadow: 0 0 10px var(--matrix-green), 0 0 20px var(--matrix-green);
}
.nav-links a:hover::before,
.nav-links a:hover::after,
.nav-links a.active::before,
.nav-links a.active::after {
opacity: 1;
}
.nav-cta {
font-family: 'Share Tech Mono', monospace;
font-size: 0.85rem;
padding: 0.8rem 1.5rem;
background: transparent;
border: 1px solid var(--matrix-green);
color: var(--matrix-green);
text-decoration: none;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-cta::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 300%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--matrix-green), transparent);
transition: left 0.6s ease;
}
.nav-cta:hover {
color: #000;
background: var(--matrix-green);
box-shadow: 0 0 30px var(--matrix-green), 0 0 60px var(--matrix-green), inset 0 0 20px rgba(0,0,0,0.3);
transform: scale(1.05);
}
.nav-cta:hover::before {
left: 100%;
}
/* Main Content */
main {
position: relative;
z-index: 10;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 120px 5% 80px;
position: relative;
}
.glitch-container {
position: relative;
margin-bottom: 2rem;
}
.glitch {
font-family: 'Orbitron', sans-serif;
font-size: clamp(3rem, 10vw, 7rem);
font-weight: 900;
color: var(--matrix-bright);
text-shadow: 0 0 10px var(--matrix-green);
position: relative;
animation: glitch-skew 4s infinite linear alternate-reverse;
}
.glitch::before,
.glitch::after {
content: 'PORTFOLIO';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
color: var(--neon-cyan);
animation: glitch-1 2s infinite linear alternate-reverse;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
transform: translate(-2px, -2px);
}
.glitch::after {
color: var(--neon-magenta);
animation: glitch-2 3s infinite linear alternate-reverse;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
transform: translate(2px, 2px);
}
@keyframes glitch-1 {
0%, 100% { transform: translate(0); }
20% { transform: translate(-3px, 3px); }
40% { transform: translate(-3px, -3px); }
60% { transform: translate(3px, 3px); }
80% { transform: translate(3px, -3px); }
}
@keyframes glitch-2 {
0%, 100% { transform: translate(0); }
20% { transform: translate(3px, -3px); }
40% { transform: translate(3px, 3px); }
60% { transform: translate(-3px, -3px); }
80% { transform: translate(-3px, 3px); }
}
@keyframes glitch-skew {
0%, 100% { transform: skew(0deg); }
20% { transform: skew(-0.5deg); }
40% { transform: skew(0.5deg); }
60% { transform: skew(0deg); }
80% { transform: skew(-0.3deg); }
}
.hero-subtitle {
font-family: 'Share Tech Mono', monospace;
font-size: 1.1rem;
color: rgba(0, 255, 65, 0.7);
letter-spacing: 0.3em;
margin-bottom: 3rem;
}
/* Terminal Window */
.terminal {
background: rgba(0, 10, 0, 0.95);
border: 1px solid var(--matrix-green);
width: 100%;
max-width: 800px;
box-shadow: 0 0 50px rgba(0, 255, 65, 0.2), inset 0 0 100px rgba(0, 255, 65, 0.03);
}
.terminal-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 15px;
background: rgba(0, 30, 0, 0.8);
border-bottom: 1px solid rgba(0, 255, 65, 0.2);
}
.terminal-btn {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
.terminal-btn:hover {
transform: scale(1.2);
}
.terminal-btn.close { background: #ff5f56; box-shadow: 0 0 10px #ff5f56; }
.terminal-btn.minimize { background: #ffbd2e; box-shadow: 0 0 10px #ffbd2e; }
.terminal-btn.maximize { background: #27ca40; box-shadow: 0 0 10px #27ca40; }
.terminal-title {
font-family: 'Share Tech Mono', monospace;
font-size: 0.8rem;
color: rgba(0, 255, 65, 0.6);
margin-left: 1rem;
}
.terminal-body {
padding: 1.5rem;
font-family: 'Share Tech Mono', monospace;
font-size: 0.95rem;
line-height: 1.8;
}
.terminal-line {
opacity: 0;
transform: translateY(10px);
animation: terminalType 0.5s ease forwards;
}
.terminal-line:nth-child(1) { animation-delay: 0.5s; }
.terminal-line:nth-child(2) { animation-delay: 1s; }
.terminal-line:nth-child(3) { animation-delay: 1.5s; }
.terminal-line:nth-child(4) { animation-delay: 2s; }
.terminal-line:nth-child(5) { animation-delay: 2.5s; }
.terminal-line:nth-child(6) { animation-delay: 3s; }
.terminal-line:nth-child(7) { animation-delay: 3.5s; }
@keyframes terminalType {
to {
opacity: 1;
transform: translateY(0);
}
}
.prompt {
color: var(--neon-cyan);
}
.command {
color: var(--matrix-bright);
}
.output {
color: rgba(0, 255, 65, 0.7);
padding-left: 1rem;
}
.highlight {
color: var(--matrix-bright);
text-shadow: 0 0 5px var(--matrix-green);
}
.cursor-blink {
display: inline-block;
width: 10px;
height: 18px;
background: var(--matrix-green);
animation: blink 1s infinite;
vertical-align: middle;
margin-left: 5px;
box-shadow: 0 0 10px var(--matrix-green);
}
/* Scroll Indicator */
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
animation: bounce 2s infinite;
}
.scroll-indicator span {
font-family: 'Share Tech Mono', monospace;
font-size: 0.7rem;
color: rgba(0, 255, 65, 0.5);
letter-spacing: 0.2em;
}
.scroll-arrow {
width: 20px;
height: 20px;
border-right: 2px solid var(--matrix-green);
border-bottom: 2px solid var(--matrix-green);
transform: rotate(45deg);
opacity: 0.5;
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(10px); }
}
/* Stats Section */
.stats-section {
padding: 6rem 5%;
background: linear-gradient(180deg, transparent 0%, rgba(0, 20, 0, 0.5) 50%, transparent 100%);
position: relative;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.stat-card {
text-align: center;
padding: 2rem;
background: rgba(0, 20, 0, 0.5);
border: 1px solid rgba(0, 255, 65, 0.1);
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--matrix-green), transparent);
transform: translateX(-100%);
transition: transform 1s ease;
}
.stat-card:hover {
transform: translateY(-10px);
border-color: var(--matrix-green);
box-shadow: 0 20px 60px rgba(0, 255, 65, 0.15);
}
.stat-card:hover::before {
transform: translateX(100%);
}
.stat-value {
font-family: 'Orbitron', sans-serif;
font-size: 4rem;
font-weight: 900;
color: var(--matrix-bright);
text-shadow: 0 0 30px var(--matrix-green);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.8rem;
color: rgba(0, 255, 65, 0.6);
letter-spacing: 0.15em;
}
/* Filter Section */
.filter-section {
padding: 3rem 5%;
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.filter-btn {
font-family: 'Share Tech Mono', monospace;
font-size: 0.9rem;
padding: 1rem 2rem;
background: transparent;
border: 1px solid rgba(0, 255, 65, 0.3);
color: rgba(0, 255, 65, 0.6);
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
}
.filter-btn::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: var(--matrix-green);
transition: height 0.4s ease;
z-index: -1;
}
.filter-btn:hover {
color: var(--matrix-bright);
border-color: var(--matrix-green);
text-shadow: 0 0 10px var(--matrix-green);
}
.filter-btn.active {
color: #000;
background: var(--matrix-green);
border-color: var(--matrix-green);
box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
}
/* Portfolio Grid */
.portfolio-section {
padding: 2rem 5% 6rem;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 2.5rem;
max-width: 1400px;
margin: 0 auto;
}
.project-card {
position: relative;
background: linear-gradient(135deg, rgba(0, 30, 0, 0.9), rgba(0, 10, 0, 0.95));
border: 1px solid rgba(0, 255, 65, 0.15);
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
transform-style: preserve-3d;
perspective: 1000px;
}
.project-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, var(--matrix-green), transparent 30%);
opacity: 0;
animation: none;
z-index: 0;
}
.project-card:hover {
transform: translateY(-15px) rotateX(5deg) rotateY(-2deg);
border-color: var(--matrix-green);
box-shadow:
0 40px 80px rgba(0, 255, 65, 0.2),
0 0 0 1px var(--matrix-green),
inset 0 1px 0 rgba(0, 255, 65, 0.1);
}
.project-card:hover::before {
opacity: 0.3;
animation: rotate 4s linear infinite;
}
@keyframes rotate {
to { transform: rotate(360deg); }
}
.card-image {
height: 240px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 30% 30%, rgba(0, 255, 65, 0.1), transparent 50%),
linear-gradient(180deg, rgba(0, 40, 0, 0.8), rgba(0, 10, 0, 0.9));
}
.card-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
background: linear-gradient(transparent, rgba(0, 10, 0, 1));
z-index: 2;
}
.card-icon {
font-size: 5rem;
filter: drop-shadow(0 0 30px var(--matrix-green));
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
z-index: 1;
}
.project-card:hover .card-icon {
transform: scale(1.3) translateY(-10px);
filter: drop-shadow(0 0 50px var(--matrix-green)) drop-shadow(0 0 80px var(--matrix-green));
}
.card-badge {
position: absolute;
top: 1rem;
right: 1rem;
font-family: 'Share Tech Mono', monospace;
font-size: 0.65rem;
padding: 0.4rem 0.8rem;
background: rgba(0, 0, 0, 0.9);
border: 1px solid var(--matrix-green);
color: var(--matrix-green);
letter-spacing: 0.1em;
z-index: 3;
box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
}
.card-content {
padding: 1.75rem;
position: relative;
z-index: 1;
}
.card-title {
font-family: 'Orbitron', sans-serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--matrix-bright);
margin-bottom: 0.75rem;
transition: all 0.3s ease;
}
.project-card:hover .card-title {
text-shadow: 0 0 20px var(--matrix-green), 0 0 40px var(--matrix-green);
}
.card-desc {
font-size: 0.95rem;
color: rgba(0, 255, 65, 0.7);
line-height: 1.7;
margin-bottom: 1.25rem;
}
.card-tech {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1.5rem;
}
.tech-tag {
font-family: 'Share Tech Mono', monospace;
font-size: 0.7rem;
padding: 0.4rem 0.8rem;
background: rgba(0, 255, 65, 0.05);
border: 1px solid rgba(0, 255, 65, 0.2);
color: var(--matrix-green);
transition: all 0.3s ease;
}
.project-card:hover .tech-tag {
border-color: var(--matrix-green);
box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
background: rgba(0, 255, 65, 0.1);
}
.card-link {
font-family: 'Share Tech Mono', monospace;
font-size: 0.9rem;
color: var(--matrix-green);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.75rem;
transition: all 0.3s ease;
padding: 0.5rem 0;
}
.card-link::before {
content: '>';
}
.card-link::after {
content: '→';
transition: transform 0.3s ease;
}
.card-link:hover {
color: var(--matrix-bright);
text-shadow: 0 0 15px var(--matrix-green);
}
.card-link:hover::after {
transform: translateX(8px);
}
/* More Projects Section */
.more-section {
text-align: center;
padding: 5rem 5%;
border-top: 1px solid rgba(0, 255, 65, 0.1);
background: linear-gradient(180deg, rgba(0, 20, 0, 0.3), transparent);
}
.more-count {
font-family: 'Orbitron', sans-serif;
font-size: 4rem;
font-weight: 900;
color: var(--matrix-bright);
text-shadow: 0 0 40px var(--matrix-green);
margin-bottom: 0.5rem;
}
.more-text {
font-family: 'Share Tech Mono', monospace;
font-size: 1rem;
color: rgba(0, 255, 65, 0.6);
margin-bottom: 2.5rem;
letter-spacing: 0.1em;
}
.btn-primary {
font-family: 'Orbitron', sans-serif;
font-size: 1rem;
font-weight: 600;
padding: 1.25rem 3rem;
background: transparent;
border: 2px solid var(--matrix-green);
color: var(--matrix-green);
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-primary::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: var(--matrix-green);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
z-index: -1;
}
.btn-primary:hover {
color: #000;
box-shadow: 0 0 50px var(--matrix-green), 0 0 100px rgba(0, 255, 65, 0.3);
transform: scale(1.05);
}
.btn-primary:hover::before {
width: 400px;
height: 400px;
}
/* Footer */
footer {
padding: 4rem 5%;
text-align: center;
border-top: 1px solid rgba(0, 255, 65, 0.1);
background: rgba(0, 10, 0, 0.5);
position: relative;
z-index: 10;
}
.footer-logo {
font-family: 'Orbitron', sans-serif;
font-size: 1.5rem;
font-weight: 800;
color: var(--matrix-green);
text-shadow: 0 0 20px var(--matrix-green);
margin-bottom: 1rem;
}
footer p {
font-family: 'Share Tech Mono', monospace;
font-size: 0.8rem;
color: rgba(0, 255, 65, 0.5);
letter-spacing: 0.1em;
}
footer a {
color: var(--matrix-green);
text-decoration: none;
transition: all 0.3s ease;
}
footer a:hover {
text-shadow: 0 0 10px var(--matrix-green);
}
/* Mobile */
@media (max-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile Menu Button */
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
z-index: 1001;
}
.mobile-menu-btn span {
width: 25px;
height: 2px;
background: var(--matrix-green);
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.mobile-menu-btn {
display: flex;
}
.nav-links {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.98);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.nav-links.active {
opacity: 1;
visibility: visible;
}
.nav-links li {
list-style: none;
}
.nav-links a {
font-size: 1.5rem;
}
.nav-cta {
display: none;
}
.glitch {
font-size: 3rem;
}
.stats-grid {
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.stat-value {
font-size: 2.5rem;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
.filter-section {
gap: 0.75rem;
}
.filter-btn {
padding: 0.75rem 1.25rem;
font-size: 0.8rem;
}
}
/* Loading Animation */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loading-overlay.hidden {
opacity: 0;
visibility: hidden;
}
.loading-text {
font-family: 'Share Tech Mono', monospace;
font-size: 1rem;
color: var(--matrix-green);
letter-spacing: 0.2em;
margin-bottom: 2rem;
}
.loading-bar {
width: 200px;
height: 3px;
background: rgba(0, 255, 65, 0.2);
position: relative;
overflow: hidden;
}
.loading-bar::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background: var(--matrix-green);
box-shadow: 0 0 20px var(--matrix-green);
animation: loading 1.5s ease forwards;
}
@keyframes loading {
to { width: 100%; }
}
</style>
</head>
<body>
<!-- Loading Screen -->
<div class="loading-overlay" id="loading">
<p class="loading-text">INITIALIZING PORTFOLIO...</p>
<div class="loading-bar"></div>
</div>
<!-- Custom Cursor -->
<div class="cursor" id="cursor"></div>
<div class="cursor-dot" id="cursor-dot"></div>
<!-- Three.js Matrix Background -->
<canvas id="matrix-canvas"></canvas>
<div class="crt-overlay"></div>
<nav>
<a href="/" class="logo">ThatAIGuy</a>
<ul class="nav-links">
<li><a href="/portfolio" class="active">PORTFOLIO</a></li>
<li><a href="/services">SERVICES</a></li>
<li><a href="/megamind">ABOUT AGI</a></li>
<li><a href="/contact">CONTACT</a></li>
</ul>
<a href="/contact" class="nav-cta">[ CONNECT ]</a>
<button class="mobile-menu-btn" aria-label="Toggle menu">
<span></span>
<span></span>
<span></span>
</button>
</nav>
<main>
<section class="hero">
<div class="glitch-container">
<h1 class="glitch">PORTFOLIO</h1>
</div>
<p class="hero-subtitle">// PRODUCTION WEBSITES DEPLOYED</p>
<div class="terminal">
<div class="terminal-header">
<div class="terminal-btn close"></div>
<div class="terminal-btn minimize"></div>
<div class="terminal-btn maximize"></div>
<span class="terminal-title">megamind@portfolio ~ </span>
</div>
<div class="terminal-body">
<div class="terminal-line">
<span class="prompt">root@megamind:~$</span> <span class="command">./scan_deployments.sh</span>
</div>
<div class="terminal-line output">
[SCAN] Connecting to Netlify infrastructure...
</div>
<div class="terminal-line output">
[FOUND] <span class="highlight">86</span> production websites detected
</div>
<div class="terminal-line output">
[SYNC] Neural patterns: <span class="highlight">258,000,000,000</span> active
</div>
<div class="terminal-line output">
[STATUS] All systems operational
</div>
<div class="terminal-line output">
[READY] Portfolio data loaded successfully
</div>
<div class="terminal-line">
<span class="prompt">root@megamind:~$</span> <span class="command">_</span><span class="cursor-blink"></span>
</div>
</div>
</div>
<div class="scroll-indicator">
<span>SCROLL TO EXPLORE</span>
<div class="scroll-arrow"></div>
</div>
</section>
<section class="stats-section">
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value" data-count="86">0</div>
<div class="stat-label">SITES DEPLOYED</div>
</div>
<div class="stat-card">
<div class="stat-value">100%</div>
<div class="stat-label">UPTIME</div>
</div>
<div class="stat-card">
<div class="stat-value">24/7</div>
<div class="stat-label">MONITORING</div>
</div>
<div class="stat-card">
<div class="stat-value" data-count="258">0</div>
<div class="stat-label">BILLION NEURONS</div>
</div>
</div>
</section>
<section class="filter-section">
<button class="filter-btn active" data-filter="all">ALL_PROJECTS</button>
<button class="filter-btn" data-filter="client">CLIENT_WORK</button>
<button class="filter-btn" data-filter="personal">PERSONAL</button>
<button class="filter-btn" data-filter="demo">DEMO_SITES</button>
</section>
<section class="portfolio-section">
<div class="portfolio-grid" id="portfolio-grid">
<!-- TCB Combat Sports -->
<article class="project-card" data-category="client">
<div class="card-image">
<span class="card-icon">🥊</span>
<span class="card-badge">CLIENT</span>
</div>
<div class="card-content">
<h3 class="card-title">TCB Combat Sports</h3>
<p class="card-desc">Award-winning martial arts gym site. Team USA athletes, cinematic design, video integration, fighter profiles.</p>
<div class="card-tech">
<span class="tech-tag">HTML5</span>
<span class="tech-tag">CSS3</span>
<span class="tech-tag">JavaScript</span>
<span class="tech-tag">GSAP</span>
</div>
<a href="https://tcbcombatsports.com" target="_blank" class="card-link">VIEW_LIVE</a>
</div>
</article>
<!-- ThatAIGuy -->
<article class="project-card" data-category="personal">
<div class="card-image">
<span class="card-icon">🧠</span>
<span class="card-badge">PERSONAL</span>
</div>
<div class="card-content">
<h3 class="card-title">ThatAIGuy Portfolio</h3>
<p class="card-desc">AGI-powered portfolio featuring MEGAMIND — 258 billion neurons, consciousness metrics, golden ratio convergence.</p>
<div class="card-tech">
<span class="tech-tag">Three.js</span>
<span class="tech-tag">WebGL</span>
<span class="tech-tag">GSAP</span>
<span class="tech-tag">Canvas</span>
</div>
<a href="https://thataiguy.org" target="_blank" class="card-link">VIEW_LIVE</a>
</div>
</article>
<!-- FeedTheJoe -->
<article class="project-card" data-category="personal">
<div class="card-image">
<span class="card-icon">☕</span>
<span class="card-badge">PERSONAL</span>
</div>
<div class="card-content">
<h3 class="card-title">FeedTheJoe</h3>
<p class="card-desc">Personal brand and freelance services hub. Web development, AI consulting, and technical solutions.</p>
<div class="card-tech">
<span class="tech-tag">HTML5</span>
<span class="tech-tag">CSS3</span>
<span class="tech-tag">JavaScript</span>
</div>
<a href="https://feedthejoe.com" target="_blank" class="card-link">VIEW_LIVE</a>
</div>
</article>
<!-- ThatComputerDude -->
<article class="project-card" data-category="personal">
<div class="card-image">
<span class="card-icon">💻</span>
<span class="card-badge">PERSONAL</span>
</div>
<div class="card-content">
<h3 class="card-title">ThatComputerDude</h3>
<p class="card-desc">Tech services and computer repair. Professional design, service booking, and customer management.</p>
<div class="card-tech">
<span class="tech-tag">HTML5</span>
<span class="tech-tag">CSS3</span>
<span class="tech-tag">Responsive</span>
</div>
<a href="https://thatcomputerdude.netlify.app" target="_blank" class="card-link">VIEW_LIVE</a>
</div>
</article>
<!-- ThatAICharity -->
<article class="project-card" data-category="personal">
<div class="card-image">
<span class="card-icon">❤️</span>
<span class="card-badge">NONPROFIT</span>
</div>
<div class="card-content">
<h3 class="card-title">ThatAICharity</h3>
<p class="card-desc">AI-focused charitable organization. Technology for social good, community impact, donation platform.</p>
<div class="card-tech">
<span class="tech-tag">HTML5</span>
<span class="tech-tag">CSS3</span>
<span class="tech-tag">Nonprofit</span>
</div>
<a href="https://thataicharity.netlify.app" target="_blank" class="card-link">VIEW_LIVE</a>
</div>
</article>
<!-- AI Music Interaction -->
<article class="project-card" data-category="personal">
<div class="card-image">
<span class="card-icon">🎵</span>
<span class="card-badge">PERSONAL</span>
</div>
<div class="card-content">
<h3 class="card-title">AI Music Interaction</h3>
<p class="card-desc">Interactive AI-powered music experience. Real-time audio visualization, Web Audio API, ML integration.</p>
<div class="card-tech">
<span class="tech-tag">Web Audio</span>
<span class="tech-tag">Canvas</span>
<span class="tech-tag">AI/ML</span>
</div>
<a href="https://aimusicinteraction.netlify.app" target="_blank" class="card-link">VIEW_LIVE</a>
</div>
</article>
<!-- 3E Enterprises -->
<article class="project-card" data-category="demo">
<div class="card-image">
<span class="card-icon">🏢</span>
<span class="card-badge">DEMO</span>
</div>
<div class="card-content">
<h3 class="card-title">3E Enterprises</h3>
<p class="card-desc">Corporate business services demo. Professional design, lead generation, service showcases.</p>
<div class="card-tech">
<span class="tech-tag">HTML5</span>
<span class="tech-tag">CSS3</span>
<span class="tech-tag">Business</span>
</div>
<a href="https://3e-enterprises-demo.netlify.app" target="_blank" class="card-link">VIEW_LIVE</a>
</div>
</article>
<!-- CodeeMac Beauty -->
<article class="project-card" data-category="demo">
<div class="card-image">
<span class="card-icon">💄</span>
<span class="card-badge">DEMO</span>
</div>
<div class="card-content">
<h3 class="card-title">CodeeMac Beauty</h3>
<p class="card-desc">Beauty and cosmetics demo. Elegant feminine design, service booking, product showcases.</p>
<div class="card-tech">
<span class="tech-tag">HTML5</span>
<span class="tech-tag">CSS3</span>
<span class="tech-tag">Beauty</span>
</div>
<a href="https://codeemac-beauty-demo.netlify.app" target="_blank" class="card-link">VIEW_LIVE</a>
</div>
</article>
<!-- TCB Plumbing -->
<article class="project-card" data-category="demo">
<div class="card-image">
<span class="card-icon">🔧</span>
<span class="card-badge">DEMO</span>
</div>
<div class="card-content">
<h3 class="card-title">TCB Plumbing HVAC</h3>
<p class="card-desc">Home services demo. Plumbing, HVAC, air quality. Service areas, contact forms, scheduling.</p>
<div class="card-tech">
<span class="tech-tag">HTML5</span>
<span class="tech-tag">CSS3</span>
<span class="tech-tag">Services</span>
</div>
<a href="https://tcb-plumbing-hvac-air.netlify.app" target="_blank" class="card-link">VIEW_LIVE</a>
</div>
</article>
<!-- D'Cannela -->
<article class="project-card" data-category="demo">
<div class="card-image">
<span class="card-icon">🥐</span>
<span class="card-badge">DEMO</span>
</div>
<div class="card-content">
<h3 class="card-title">D'Cannela Chimney Cake</h3>
<p class="card-desc">Artisan bakery demo for Tulsa. Warm, inviting design showcasing Hungarian chimney cakes.</p>
<div class="card-tech">
<span class="tech-tag">HTML5</span>
<span class="tech-tag">CSS3</span>
<span class="tech-tag">Food</span>
</div>
<a href="#" class="card-link">VIEW_DEMO</a>
</div>
</article>
<!-- Mobile Notary 313 -->
<article class="project-card" data-category="demo">
<div class="card-image">
<span class="card-icon">📋</span>
<span class="card-badge">DEMO</span>
</div>
<div class="card-content">
<h3 class="card-title">Mobile Notary 313</h3>
<p class="card-desc">Professional notary services demo. Mobile services, booking, service areas, trust indicators.</p>
<div class="card-tech">
<span class="tech-tag">HTML5</span>
<span class="tech-tag">CSS3</span>
<span class="tech-tag">Services</span>
</div>
<a href="#" class="card-link">VIEW_DEMO</a>
</div>
</article>
<!-- Goldielinks -->
<article class="project-card" data-category="demo">
<div class="card-image">
<span class="card-icon">✨</span>
<span class="card-badge">DEMO</span>
</div>
<div class="card-content">
<h3 class="card-title">Goldielinks Jewelry</h3>
<p class="card-desc">Permanent jewelry demo for Tulsa sisters. Luxury design, booking integration, elegant aesthetic.</p>
<div class="card-tech">
<span class="tech-tag">HTML5</span>
<span class="tech-tag">CSS3</span>
<span class="tech-tag">Luxury</span>
</div>
<a href="#" class="card-link">VIEW_DEMO</a>
</div>
</article>
</div>
</section>
<section class="more-section">
<div class="more-count">+74</div>
<p class="more-text">MORE PROJECTS DEPLOYED ON NETLIFY</p>
<a href="https://app.netlify.com/teams/thataiguy" target="_blank" class="btn-primary">VIEW ALL PROJECTS</a>
</section>
</main>
<footer>
<div class="footer-logo">ThatAIGuy_</div>
<p>© 2026 ThatAIGuy Web Development // Powered by <a href="/megamind">MEGAMIND AGI</a></p>
</footer>
<script>
// Loading Screen
window.addEventListener('load', () => {
setTimeout(() => {
document.getElementById('loading').classList.add('hidden');
}, 2000);
});
// Custom Cursor
const cursor = document.getElementById('cursor');
const cursorDot = document.getElementById('cursor-dot');
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
cursorDot.style.left = mouseX - 2 + 'px';
cursorDot.style.top = mouseY - 2 + 'px';
});
function animateCursor() {
cursorX += (mouseX - cursorX) * 0.1;
cursorY += (mouseY - cursorY) * 0.1;
cursor.style.left = cursorX - 10 + 'px';
cursor.style.top = cursorY - 10 + 'px';
requestAnimationFrame(animateCursor);
}
animateCursor();
// Cursor hover effects
document.querySelectorAll('a, button').forEach(el => {
el.addEventListener('mouseenter', () => {
cursor.style.transform = 'scale(1.5)';
cursor.style.borderColor = '#39ff14';
});
el.addEventListener('mouseleave', () => {
cursor.style.transform = 'scale(1)';
cursor.style.borderColor = '#00ff41';
});
});
// Three.js Matrix Rain
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('matrix-canvas'),
alpha: true,
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// Matrix characters
const matrixChars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンMEGAMIND01';
// Create particle system
const particleCount = 5000;
const positions = new Float32Array(particleCount * 3);
const velocities = new Float32Array(particleCount);
const sizes = new Float32Array(particleCount);
for (let i = 0; i < particleCount; i++) {
positions[i * 3] = (Math.random() - 0.5) * 100;
positions[i * 3 + 1] = Math.random() * 100 - 50;
positions[i * 3 + 2] = (Math.random() - 0.5) * 50;
velocities[i] = Math.random() * 0.5 + 0.1;
sizes[i] = Math.random() * 2 + 1;
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
const material = new THREE.PointsMaterial({
color: 0x00ff41,
size: 0.5,
transparent: true,
opacity: 0.8,
blending: THREE.AdditiveBlending
});
const particles = new THREE.Points(geometry, material);
scene.add(particles);
camera.position.z = 30;
function animate() {
requestAnimationFrame(animate);
const positions = particles.geometry.attributes.position.array;
for (let i = 0; i < particleCount; i++) {
positions[i * 3 + 1] -= velocities[i];
if (positions[i * 3 + 1] < -50) {
positions[i * 3 + 1] = 50;
}
}
particles.geometry.attributes.position.needsUpdate = true;
particles.rotation.y += 0.0005;
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Stats Counter Animation
const observerOptions = { threshold: 0.5 };
const statsObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.querySelectorAll('[data-count]').forEach(stat => {
const target = parseInt(stat.dataset.count);
animateCount(stat, 0, target, 2000);
});
statsObserver.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.stats-section').forEach(section => {
statsObserver.observe(section);
});
function animateCount(el, start, end, duration) {
const startTime = performance.now();
function update(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const eased = 1 - Math.pow(1 - progress, 4);
el.textContent = Math.floor(start + (end - start) * eased);
if (progress < 1) requestAnimationFrame(update);
}
requestAnimationFrame(update);
}
// Filter functionality
const filterBtns = document.querySelectorAll('.filter-btn');
const cards = document.querySelectorAll('.project-card');
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
filterBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const filter = btn.dataset.filter;
cards.forEach((card, index) => {
const category = card.dataset.category;
const shouldShow = filter === 'all' || category === filter;
if (shouldShow) {
card.style.display = 'block';
card.style.animation = `fadeInUp 0.6s ease ${index * 0.08}s forwards`;
} else {
card.style.animation = 'fadeOut 0.3s ease forwards';
setTimeout(() => {
card.style.display = 'none';
}, 300);
}
});
});
});
// Card animations on scroll
const cardObserver = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
entry.target.style.animation = `fadeInUp 0.8s ease ${index * 0.1}s forwards`;