feat: Complete hack-ademic redesign with terminal/cyberpunk aesthetic
- New cursor effect with matrix particles, glitch effects, crosshair design - Terminal-themed globals.css with scanlines, neon borders, glitch animations - Hero section with ASCII art, boot sequence, typing effect - Work/Research section with expandable academic papers - About section with terminal blocks, mycelium ASCII art - Skills section as interactive file tree with progress bars - Contact section with network visualization and ping simulation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
df7149db34
commit
a07088c362
338
app/globals.css
338
app/globals.css
|
|
@ -4,79 +4,32 @@
|
|||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--background: oklch(0.16 0.01 265);
|
||||
--foreground: oklch(0.95 0.01 265);
|
||||
--card: oklch(0.2 0.015 265);
|
||||
--card-foreground: oklch(0.95 0.01 265);
|
||||
--popover: oklch(0.2 0.015 265);
|
||||
--popover-foreground: oklch(0.95 0.01 265);
|
||||
--primary: oklch(0.7 0.15 265);
|
||||
--primary-foreground: oklch(0.98 0.01 265);
|
||||
--secondary: oklch(0.25 0.015 265);
|
||||
--secondary-foreground: oklch(0.95 0.01 265);
|
||||
--muted: oklch(0.25 0.015 265);
|
||||
--muted-foreground: oklch(0.55 0.01 265);
|
||||
--accent: oklch(0.65 0.18 185);
|
||||
--accent-foreground: oklch(0.98 0.01 265);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.98 0.01 265);
|
||||
--border: oklch(0.28 0.015 265);
|
||||
--input: oklch(0.28 0.015 265);
|
||||
--ring: oklch(0.7 0.15 265);
|
||||
--chart-1: oklch(0.7 0.15 265);
|
||||
--chart-2: oklch(0.65 0.18 185);
|
||||
--chart-3: oklch(0.6 0.12 145);
|
||||
--chart-4: oklch(0.75 0.16 285);
|
||||
--chart-5: oklch(0.65 0.14 225);
|
||||
--radius: 0.75rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.145 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.145 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.269 0 0);
|
||||
--input: oklch(0.269 0 0);
|
||||
--ring: oklch(0.439 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.269 0 0);
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
/* Hack-ademic color palette - terminal greens, amber, deep blacks */
|
||||
--background: oklch(0.08 0.01 150);
|
||||
--foreground: oklch(0.85 0.08 145);
|
||||
--card: oklch(0.12 0.015 150);
|
||||
--card-foreground: oklch(0.85 0.08 145);
|
||||
--popover: oklch(0.1 0.015 150);
|
||||
--popover-foreground: oklch(0.85 0.08 145);
|
||||
--primary: oklch(0.7 0.18 145);
|
||||
--primary-foreground: oklch(0.08 0.01 150);
|
||||
--secondary: oklch(0.15 0.02 150);
|
||||
--secondary-foreground: oklch(0.75 0.12 145);
|
||||
--muted: oklch(0.18 0.015 150);
|
||||
--muted-foreground: oklch(0.55 0.06 145);
|
||||
--accent: oklch(0.75 0.15 85);
|
||||
--accent-foreground: oklch(0.08 0.01 150);
|
||||
--destructive: oklch(0.6 0.2 25);
|
||||
--destructive-foreground: oklch(0.95 0.01 150);
|
||||
--border: oklch(0.22 0.03 145);
|
||||
--input: oklch(0.15 0.02 150);
|
||||
--ring: oklch(0.7 0.18 145);
|
||||
--radius: 0.25rem;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: "Geist", "Geist Fallback";
|
||||
--font-mono: "Geist Mono", "Geist Mono Fallback";
|
||||
--font-sans: "JetBrains Mono", "Fira Code", "SF Mono", "Monaco", monospace;
|
||||
--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Monaco", monospace;
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
|
|
@ -96,54 +49,247 @@
|
|||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--radius-sm: calc(var(--radius) - 2px);
|
||||
--radius-md: var(--radius);
|
||||
--radius-lg: calc(var(--radius) + 2px);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground font-mono;
|
||||
cursor: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 255, 100, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 255, 100, 0.02) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
a, button, [role="button"] {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(52, 211, 153, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
/* Scanline effect overlay */
|
||||
.scanlines::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9990;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.1),
|
||||
rgba(0, 0, 0, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Glitch text effect */
|
||||
.glitch {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glitch::before,
|
||||
.glitch::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.glitch::before {
|
||||
animation: glitch-1 2s infinite linear alternate-reverse;
|
||||
color: #ff0000;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.glitch::after {
|
||||
animation: glitch-2 3s infinite linear alternate-reverse;
|
||||
color: #00ffff;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
@keyframes glitch-1 {
|
||||
0%, 100% { clip-path: inset(0 0 95% 0); transform: translate(-2px, 2px); }
|
||||
20% { clip-path: inset(30% 0 50% 0); transform: translate(2px, -2px); }
|
||||
40% { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
|
||||
60% { clip-path: inset(10% 0 70% 0); transform: translate(0, 2px); }
|
||||
80% { clip-path: inset(80% 0 5% 0); transform: translate(2px, 0); }
|
||||
}
|
||||
|
||||
@keyframes glitch-2 {
|
||||
0%, 100% { clip-path: inset(95% 0 0 0); transform: translate(2px, -2px); }
|
||||
20% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 2px); }
|
||||
40% { clip-path: inset(20% 0 60% 0); transform: translate(2px, 0); }
|
||||
60% { clip-path: inset(70% 0 10% 0); transform: translate(0, -2px); }
|
||||
80% { clip-path: inset(5% 0 80% 0); transform: translate(-2px, 0); }
|
||||
}
|
||||
|
||||
/* Terminal cursor blink */
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.cursor-blink::after {
|
||||
content: "_";
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
/* Typing effect */
|
||||
@keyframes typing {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
.typing {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
animation: typing 2s steps(40, end);
|
||||
}
|
||||
|
||||
/* Fade in from below */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Glow pulse */
|
||||
@keyframes glow-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.glow-pulse {
|
||||
animation: glow-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Matrix rain character style */
|
||||
.matrix-char {
|
||||
font-family: monospace;
|
||||
text-shadow: 0 0 8px currentColor;
|
||||
}
|
||||
|
||||
/* Terminal window styling */
|
||||
.terminal-window {
|
||||
background: linear-gradient(180deg, rgba(15, 23, 20, 0.95) 0%, rgba(10, 18, 15, 0.98) 100%);
|
||||
border: 1px solid rgba(52, 211, 153, 0.3);
|
||||
box-shadow:
|
||||
0 0 20px rgba(52, 211, 153, 0.1),
|
||||
inset 0 0 60px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
background: linear-gradient(180deg, rgba(52, 211, 153, 0.15) 0%, rgba(52, 211, 153, 0.05) 100%);
|
||||
border-bottom: 1px solid rgba(52, 211, 153, 0.2);
|
||||
}
|
||||
|
||||
/* Academic citation style */
|
||||
.citation {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(52, 211, 153, 0.6);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.citation::before {
|
||||
content: "[";
|
||||
}
|
||||
|
||||
.citation::after {
|
||||
content: "]";
|
||||
}
|
||||
|
||||
/* Code block styling */
|
||||
.code-block {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-left: 3px solid rgba(52, 211, 153, 0.5);
|
||||
padding: 1rem;
|
||||
font-family: monospace;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Neon border */
|
||||
.neon-border {
|
||||
border: 1px solid rgba(52, 211, 153, 0.5);
|
||||
box-shadow:
|
||||
0 0 5px rgba(52, 211, 153, 0.3),
|
||||
inset 0 0 5px rgba(52, 211, 153, 0.1);
|
||||
}
|
||||
|
||||
/* Hover glow effect */
|
||||
.hover-glow {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-glow:hover {
|
||||
box-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
|
||||
border-color: rgba(52, 211, 153, 0.8);
|
||||
}
|
||||
|
||||
/* ASCII art container */
|
||||
.ascii-art {
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
line-height: 1.1;
|
||||
font-size: 0.5rem;
|
||||
color: rgba(52, 211, 153, 0.4);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.ascii-art {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating animation */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Stagger animation delays */
|
||||
.stagger-1 { animation-delay: 0.1s; }
|
||||
.stagger-2 { animation-delay: 0.2s; }
|
||||
.stagger-3 { animation-delay: 0.3s; }
|
||||
.stagger-4 { animation-delay: 0.4s; }
|
||||
.stagger-5 { animation-delay: 0.5s; }
|
||||
|
|
|
|||
|
|
@ -1,61 +1,152 @@
|
|||
"use client"
|
||||
|
||||
const MYCELIUM_ASCII = `
|
||||
╭───╮ ╭───╮
|
||||
│ ◉ ├─────┤ ◉ │
|
||||
╰─┬─╯ ╰─┬─╯
|
||||
│ ╭────┴────╮
|
||||
╭──┴──╮ │ NODES │
|
||||
│ ◉◉◉ ├─┤ CONNECT │
|
||||
╰──┬──╯ ╰────┬────╯
|
||||
│ │
|
||||
═══╧═════════╧═══
|
||||
`
|
||||
|
||||
const BIO_BLOCKS = [
|
||||
{
|
||||
command: "cat identity.yml",
|
||||
content: `name: "Jeff Emmett"
|
||||
role: "Token Engineering Researcher"
|
||||
focus: ["regenerative_systems", "crypto_commons", "emancipatory_tech"]
|
||||
affiliation: ["Commons Stack", "MycoFi", "Bonding Curve Research Group"]`,
|
||||
},
|
||||
{
|
||||
command: "cat mission.md",
|
||||
content: `## Core Mission
|
||||
|
||||
Designing cyber-physical commons architectures that translate
|
||||
Elinor Ostrom's principles into DAO templates. Building
|
||||
customizable libraries for communal management of public goods.
|
||||
|
||||
> "Just as the Golden Gate Bridge required rigorous engineering,
|
||||
> our token economies need mathematical validation."`,
|
||||
},
|
||||
{
|
||||
command: "cat research_focus.txt",
|
||||
content: `PRIMARY ISSUANCE MARKETS
|
||||
└── Challenging fixed-supply paradigm
|
||||
└── Dynamic token mechanisms
|
||||
└── Volatility dampening
|
||||
└── Sustainable ecosystem revenue
|
||||
|
||||
MYCOECONOMICS
|
||||
└── Fungal network-inspired economics
|
||||
└── Evolutionary resource allocation
|
||||
└── Regenerative protocol design
|
||||
└── Mutual aid & permaculture currency`,
|
||||
},
|
||||
]
|
||||
|
||||
const STATS = [
|
||||
{ value: "2015", label: "// origin_block", subtext: "First entry into Web3" },
|
||||
{ value: "8+", label: "// years_exp", subtext: "Token Engineering" },
|
||||
{ value: "∞", label: "// impact_scope", subtext: "Regenerative systems" },
|
||||
]
|
||||
|
||||
export function AboutSection() {
|
||||
return (
|
||||
<section className="py-32 px-6 bg-card/30">
|
||||
<section id="about" className="py-20 px-4 md:px-6 bg-black/30">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="mb-16">
|
||||
<h2 className="text-5xl md:text-6xl font-bold mb-6">About Me</h2>
|
||||
{/* Section header */}
|
||||
<div className="mb-12">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<span className="text-emerald-500 text-sm">$</span>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-emerald-400">
|
||||
whoami
|
||||
</h2>
|
||||
</div>
|
||||
<div className="code-block">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
# Operator Profile
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
## Token engineer, systems thinker, regenerative economist
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 text-lg leading-relaxed">
|
||||
<p className="text-foreground/90">
|
||||
I'm a token engineering researcher and systems designer exploring the intersection of economics, ecology,
|
||||
and decentralized coordination. My work focuses on creating tools and frameworks that enable communities to
|
||||
manage shared resources sustainably and equitably—what I call "decent/ralised" systems.
|
||||
</p>
|
||||
{/* ASCII art and bio blocks */}
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
{/* ASCII Mycelium */}
|
||||
<div className="hidden md:block">
|
||||
<pre className="ascii-art text-emerald-400/50 text-xs leading-tight">
|
||||
{MYCELIUM_ASCII}
|
||||
</pre>
|
||||
<p className="text-xs text-muted-foreground mt-4 text-center">
|
||||
mycelial_network.active
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground">
|
||||
As a co-founder of the Commons Stack, I've been instrumental in developing cyber-physical commons
|
||||
architectures that translate Elinor Ostrom's principles into DAO templates. We're building customizable
|
||||
libraries of tools for communal management of public goods, including innovations like Augmented Bonding
|
||||
Curves and Conviction Voting—a novel continuous decision-making mechanism that addresses critical attack
|
||||
vectors in traditional governance systems.
|
||||
</p>
|
||||
|
||||
<p className="text-muted-foreground">
|
||||
Through the Bonding Curve Research Group, I research and develop Primary Issuance Markets that enable
|
||||
dynamic token supply mechanisms. This work challenges the fixed supply paradigm dominant in Web3, offering
|
||||
adaptive approaches that dampen volatility and generate sustainable revenue for token ecosystems. Our
|
||||
research shows that tokens using primary issuance markets significantly outperform fixed-supply tokens in
|
||||
price stability and risk-adjusted returns.
|
||||
</p>
|
||||
|
||||
<p className="text-muted-foreground">
|
||||
My MycoFi research explores mycoeconomics—economic systems inspired by fungal networks. By emulating
|
||||
nature's evolutionary resource allocation algorithms through mycelial intelligence, we can design
|
||||
regenerative protocols built on cooperation, mutual aid, and permaculture currency principles rather than
|
||||
extractive growth models. I authored book.mycofi.earth to share these insights.
|
||||
</p>
|
||||
|
||||
<p className="text-muted-foreground">
|
||||
I'm passionate about open-source token engineering tools like cadCAD, which I helped open source at the 2019
|
||||
Token Engineering Global Gathering. Just as the Golden Gate Bridge required rigorous engineering, our token
|
||||
economies need mathematical validation and simulation to serve as robust public infrastructure.
|
||||
</p>
|
||||
{/* Bio blocks */}
|
||||
<div className="md:col-span-2 space-y-6">
|
||||
{BIO_BLOCKS.map((block, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="terminal-window rounded-lg overflow-hidden fade-in-up"
|
||||
style={{ animationDelay: `${index * 0.15}s` }}
|
||||
>
|
||||
<div className="terminal-header px-4 py-2">
|
||||
<span className="text-xs text-emerald-400/60 font-mono">
|
||||
jeff@emmett:~$ {block.command}
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<pre className="text-sm text-emerald-300/80 whitespace-pre-wrap font-mono leading-relaxed">
|
||||
{block.content}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 grid md:grid-cols-3 gap-8">
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold text-primary mb-2">8+</h3>
|
||||
<p className="text-muted-foreground">Years in Token Engineering</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold text-primary mb-2">50+</h3>
|
||||
<p className="text-muted-foreground">Research Publications</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold text-primary mb-2">∞</h3>
|
||||
<p className="text-muted-foreground">Regenerative Impact</p>
|
||||
</div>
|
||||
{/* Stats grid */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{STATS.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="terminal-window rounded-lg p-4 text-center fade-in-up"
|
||||
style={{ animationDelay: `${0.5 + index * 0.1}s` }}
|
||||
>
|
||||
<div className="text-3xl md:text-4xl font-bold text-emerald-400 mb-1">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-xs text-cyan-400/70 font-mono mb-1">
|
||||
{stat.label}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{stat.subtext}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tools declaration */}
|
||||
<div className="mt-12 code-block">
|
||||
<p className="text-amber-400 text-sm">/* Open Source Contributions */</p>
|
||||
<p className="text-emerald-400/80 text-sm mt-2">
|
||||
<span className="text-cyan-400">export const</span> tools = [
|
||||
</p>
|
||||
<p className="text-emerald-400/80 text-sm pl-4">
|
||||
"cadCAD", <span className="text-muted-foreground">// Token economy simulation</span>
|
||||
</p>
|
||||
<p className="text-emerald-400/80 text-sm pl-4">
|
||||
"Conviction Voting", <span className="text-muted-foreground">// Novel governance mechanism</span>
|
||||
</p>
|
||||
<p className="text-emerald-400/80 text-sm pl-4">
|
||||
"Augmented Bonding Curves", <span className="text-muted-foreground">// Sustainable funding</span>
|
||||
</p>
|
||||
<p className="text-emerald-400/80 text-sm">];</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,75 +1,180 @@
|
|||
import { Github, Mail } from "lucide-react"
|
||||
"use client"
|
||||
|
||||
const socials = [
|
||||
{ icon: Mail, label: "Email", href: "mailto:jeff@emmett.com" },
|
||||
const NETWORK_NODES = [
|
||||
{
|
||||
icon: () => (
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm5.01 18.5c-1.75 1.75-4.08 2.71-6.51 2.71s-4.76-.96-6.51-2.71C2.24 16.75 1.28 14.42 1.28 12s.96-4.76 2.71-6.51C5.74 3.74 8.07 2.78 10.5 2.78s4.76.96 6.51 2.71c1.75 1.75 2.71 4.08 2.71 6.51s-.96 4.76-2.71 6.51z" />
|
||||
</svg>
|
||||
),
|
||||
label: "Bluesky",
|
||||
href: "https://bsky.app/profile/jeffemmett.bsky.social",
|
||||
protocol: "mailto:",
|
||||
address: "jeff@commonsstack.org",
|
||||
label: "email",
|
||||
icon: "📧",
|
||||
description: "pgp_key_available",
|
||||
},
|
||||
{
|
||||
icon: () => (
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" />
|
||||
</svg>
|
||||
),
|
||||
label: "Medium",
|
||||
href: "https://medium.com/@jeffemmett",
|
||||
protocol: "https://",
|
||||
address: "bsky.app/profile/jeffemmett.bsky.social",
|
||||
label: "bluesky",
|
||||
icon: "🦋",
|
||||
description: "@jeffemmett",
|
||||
},
|
||||
{
|
||||
icon: Github,
|
||||
label: "Commons Stack",
|
||||
href: "https://commonsstack.org",
|
||||
protocol: "https://",
|
||||
address: "twitter.com/JeffEmmett",
|
||||
label: "x/twitter",
|
||||
icon: "𝕏",
|
||||
description: "@JeffEmmett",
|
||||
},
|
||||
{
|
||||
icon: () => (
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
),
|
||||
label: "MycoFi",
|
||||
href: "https://mycofi.earth",
|
||||
protocol: "https://",
|
||||
address: "medium.com/@jeffemmett",
|
||||
label: "medium",
|
||||
icon: "📝",
|
||||
description: "long_form_research",
|
||||
},
|
||||
{
|
||||
protocol: "https://",
|
||||
address: "commonsstack.org",
|
||||
label: "commons_stack",
|
||||
icon: "🏛️",
|
||||
description: "primary_organization",
|
||||
},
|
||||
{
|
||||
protocol: "https://",
|
||||
address: "mycofi.earth",
|
||||
label: "mycofi",
|
||||
icon: "🍄",
|
||||
description: "mycoeconomics_research",
|
||||
},
|
||||
]
|
||||
|
||||
const ASCII_NETWORK = `
|
||||
◉─────◉─────◉
|
||||
│╲ ╱│╲ ╱│
|
||||
│ ╲ ╱ │ ╲ ╱ │
|
||||
◉──◉──◉──◉──◉
|
||||
│ ╱ ╲ │ ╱ ╲ │
|
||||
│╱ ╲│╱ ╲│
|
||||
◉─────◉─────◉
|
||||
`
|
||||
|
||||
export function ContactSection() {
|
||||
return (
|
||||
<section id="contact" className="py-32 px-6 bg-card/30">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="mb-16">
|
||||
<h2 className="text-5xl md:text-6xl font-bold mb-6">Let's Connect</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto text-balance leading-relaxed">
|
||||
Interested in token engineering, regenerative economics, or building commons-based systems? Let's
|
||||
collaborate.
|
||||
</p>
|
||||
<section id="connect" className="py-20 px-4 md:px-6 bg-black/30">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Section header */}
|
||||
<div className="mb-12">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<span className="text-emerald-500 text-sm">$</span>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-emerald-400">
|
||||
ssh connect@jeff.emmett
|
||||
</h2>
|
||||
</div>
|
||||
<div className="code-block">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
# Establish Connection
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
## Token engineering, regenerative economics, commons-based systems
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-6 justify-center mb-12">
|
||||
{socials.map((social) => {
|
||||
const Icon = social.icon
|
||||
return (
|
||||
{/* Network visualization + links */}
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
{/* ASCII Network */}
|
||||
<div className="hidden md:flex flex-col items-center justify-center">
|
||||
<pre className="ascii-art text-emerald-400/40 text-sm">
|
||||
{ASCII_NETWORK}
|
||||
</pre>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
node_mesh.active
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Connection nodes */}
|
||||
<div className="md:col-span-2 grid grid-cols-2 gap-4">
|
||||
{NETWORK_NODES.map((node, index) => (
|
||||
<a
|
||||
key={social.label}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
key={node.label}
|
||||
href={`${node.protocol}${node.address}`}
|
||||
target={node.protocol === "mailto:" ? undefined : "_blank"}
|
||||
rel="noopener noreferrer"
|
||||
className="group flex items-center gap-3 px-6 py-4 bg-secondary text-secondary-foreground rounded-lg font-medium transition-all hover:scale-105 hover:bg-primary hover:text-primary-foreground"
|
||||
className="terminal-window rounded-lg p-4 hover-glow transition-all group fade-in-up"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
<span>{social.label}</span>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-2xl">{node.icon}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-emerald-400 text-sm font-mono">
|
||||
{node.label}
|
||||
</span>
|
||||
<span className="text-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{node.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-12 border-t border-border">
|
||||
<p className="text-muted-foreground font-mono text-sm">
|
||||
© 2025 Jeff Emmett. Built with Next.js & TailwindCSS
|
||||
</p>
|
||||
{/* Connection prompt */}
|
||||
<div className="terminal-window rounded-lg overflow-hidden mb-8">
|
||||
<div className="terminal-header px-4 py-2">
|
||||
<span className="text-xs text-emerald-400/60 font-mono">
|
||||
connection_status
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-4 md:p-6 font-mono text-sm">
|
||||
<p className="text-emerald-400">
|
||||
<span className="text-cyan-400">$</span> ping collaboration.request
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
PING collaboration.request (∞.∞.∞.∞): 56 data bytes
|
||||
</p>
|
||||
<p className="text-emerald-400/70 mt-1">
|
||||
64 bytes from jeff@emmett: icmp_seq=0 ttl=∞ time={"<"}1ms
|
||||
</p>
|
||||
<p className="text-emerald-400/70">
|
||||
64 bytes from jeff@emmett: icmp_seq=1 ttl=∞ time={"<"}1ms
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
--- collaboration.request ping statistics ---
|
||||
</p>
|
||||
<p className="text-emerald-400 mt-1">
|
||||
<span className="text-amber-400">STATUS:</span> READY_TO_CONNECT
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs mt-3">
|
||||
Interested in token engineering, regenerative economics, or building
|
||||
commons-based systems? Let's collaborate.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-emerald-500/20 pt-8">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div className="code-block px-4 py-2">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<span className="text-amber-400">/*</span> Built with Next.js +
|
||||
TailwindCSS <span className="text-amber-400">*/</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span>©{" "}{new Date().getFullYear()}</span>
|
||||
<span className="text-emerald-400">jeff.emmett</span>
|
||||
<span className="text-cyan-400">|</span>
|
||||
<span>open_source_human</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 text-center">
|
||||
<p className="citation">
|
||||
"Building regenerative systems one token at a time."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,197 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
|
||||
interface Particle {
|
||||
id: number
|
||||
x: number
|
||||
y: number
|
||||
char: string
|
||||
opacity: number
|
||||
velocity: { x: number; y: number }
|
||||
life: number
|
||||
}
|
||||
|
||||
const MATRIX_CHARS = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン∞∂∆∇∫∮≈≠≤≥'
|
||||
|
||||
export function CursorEffect() {
|
||||
const [position, setPosition] = useState({ x: 0, y: 0 })
|
||||
const [position, setPosition] = useState({ x: -100, y: -100 })
|
||||
const [isHovering, setIsHovering] = useState(false)
|
||||
const [trails, setTrails] = useState<Array<{ x: number; y: number; id: number }>>([])
|
||||
const [particles, setParticles] = useState<Particle[]>([])
|
||||
const [glitchOffset, setGlitchOffset] = useState({ x: 0, y: 0 })
|
||||
|
||||
const createParticle = useCallback((x: number, y: number): Particle => {
|
||||
const angle = Math.random() * Math.PI * 2
|
||||
const speed = Math.random() * 2 + 1
|
||||
return {
|
||||
id: Date.now() + Math.random(),
|
||||
x,
|
||||
y,
|
||||
char: MATRIX_CHARS[Math.floor(Math.random() * MATRIX_CHARS.length)],
|
||||
opacity: 1,
|
||||
velocity: {
|
||||
x: Math.cos(angle) * speed,
|
||||
y: Math.sin(angle) * speed + 1, // slight downward bias
|
||||
},
|
||||
life: 1,
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let trailId = 0
|
||||
let frameId: number
|
||||
let lastTime = 0
|
||||
|
||||
const animate = (time: number) => {
|
||||
if (time - lastTime > 50) {
|
||||
setParticles(prev =>
|
||||
prev
|
||||
.map(p => ({
|
||||
...p,
|
||||
x: p.x + p.velocity.x,
|
||||
y: p.y + p.velocity.y,
|
||||
life: p.life - 0.02,
|
||||
opacity: p.life,
|
||||
}))
|
||||
.filter(p => p.life > 0)
|
||||
)
|
||||
lastTime = time
|
||||
}
|
||||
frameId = requestAnimationFrame(animate)
|
||||
}
|
||||
|
||||
frameId = requestAnimationFrame(animate)
|
||||
return () => cancelAnimationFrame(frameId)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let particleThrottle = 0
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
setPosition({ x: e.clientX, y: e.clientY })
|
||||
|
||||
// Add trail
|
||||
const newTrail = { x: e.clientX, y: e.clientY, id: trailId++ }
|
||||
setTrails(prev => [...prev.slice(-8), newTrail])
|
||||
|
||||
// Check if hovering over interactive element
|
||||
// Spawn particles occasionally
|
||||
particleThrottle++
|
||||
if (particleThrottle % 3 === 0) {
|
||||
setParticles(prev => [...prev.slice(-30), createParticle(e.clientX, e.clientY)])
|
||||
}
|
||||
|
||||
// Random glitch effect
|
||||
if (Math.random() > 0.95) {
|
||||
setGlitchOffset({
|
||||
x: (Math.random() - 0.5) * 10,
|
||||
y: (Math.random() - 0.5) * 10,
|
||||
})
|
||||
setTimeout(() => setGlitchOffset({ x: 0, y: 0 }), 50)
|
||||
}
|
||||
|
||||
const target = e.target as HTMLElement
|
||||
const isInteractive = target.closest('a, button, [role="button"]')
|
||||
const isInteractive = target.closest('a, button, [role="button"], input, textarea')
|
||||
setIsHovering(!!isInteractive)
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove)
|
||||
return () => window.removeEventListener('mousemove', handleMouseMove)
|
||||
}, [])
|
||||
}, [createParticle])
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Main cursor */}
|
||||
<div
|
||||
className="pointer-events-none fixed z-[9999] mix-blend-difference"
|
||||
style={{
|
||||
left: `${position.x}px`,
|
||||
top: `${position.y}px`,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
transition: 'width 0.2s, height 0.2s',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`rounded-full bg-primary transition-all duration-200 ${
|
||||
isHovering ? 'h-12 w-12' : 'h-6 w-6'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Trail effect */}
|
||||
{trails.map((trail, index) => (
|
||||
<div
|
||||
key={trail.id}
|
||||
className="pointer-events-none fixed z-[9998] rounded-full bg-accent mix-blend-screen"
|
||||
{/* Matrix particle trail */}
|
||||
{particles.map(particle => (
|
||||
<span
|
||||
key={particle.id}
|
||||
className="pointer-events-none fixed z-[9996] font-mono text-xs select-none"
|
||||
style={{
|
||||
left: `${trail.x}px`,
|
||||
top: `${trail.y}px`,
|
||||
left: particle.x,
|
||||
top: particle.y,
|
||||
opacity: particle.opacity * 0.6,
|
||||
color: `hsl(${120 + Math.random() * 20}, 100%, ${50 + particle.opacity * 30}%)`,
|
||||
textShadow: '0 0 8px currentColor',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: `${4 + index}px`,
|
||||
height: `${4 + index}px`,
|
||||
opacity: (index + 1) / trails.length * 0.3,
|
||||
transition: 'opacity 0.5s',
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{particle.char}
|
||||
</span>
|
||||
))}
|
||||
|
||||
{/* Outer ring */}
|
||||
{/* Main cursor - terminal style */}
|
||||
<div
|
||||
className="pointer-events-none fixed z-[9997] rounded-full border-2 border-primary/30 transition-all duration-300"
|
||||
className="pointer-events-none fixed z-[9999]"
|
||||
style={{
|
||||
left: `${position.x}px`,
|
||||
top: `${position.y}px`,
|
||||
left: position.x + glitchOffset.x,
|
||||
top: position.y + glitchOffset.y,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: isHovering ? '64px' : '48px',
|
||||
height: isHovering ? '64px' : '48px',
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{/* Outer scan ring */}
|
||||
<div
|
||||
className={`absolute rounded-full border transition-all duration-300 ${
|
||||
isHovering
|
||||
? 'w-16 h-16 border-amber-400/60'
|
||||
: 'w-10 h-10 border-emerald-400/40'
|
||||
}`}
|
||||
style={{
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
boxShadow: isHovering
|
||||
? '0 0 20px rgba(251, 191, 36, 0.3), inset 0 0 20px rgba(251, 191, 36, 0.1)'
|
||||
: '0 0 15px rgba(52, 211, 153, 0.2)',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Inner crosshair */}
|
||||
<div className="relative">
|
||||
{/* Horizontal line */}
|
||||
<div
|
||||
className={`absolute h-px transition-all duration-200 ${
|
||||
isHovering ? 'w-8 bg-amber-400' : 'w-5 bg-emerald-400'
|
||||
}`}
|
||||
style={{
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
boxShadow: '0 0 10px currentColor',
|
||||
}}
|
||||
/>
|
||||
{/* Vertical line */}
|
||||
<div
|
||||
className={`absolute w-px transition-all duration-200 ${
|
||||
isHovering ? 'h-8 bg-amber-400' : 'h-5 bg-emerald-400'
|
||||
}`}
|
||||
style={{
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
boxShadow: '0 0 10px currentColor',
|
||||
}}
|
||||
/>
|
||||
{/* Center dot */}
|
||||
<div
|
||||
className={`absolute w-1.5 h-1.5 rounded-full transition-all duration-200 ${
|
||||
isHovering ? 'bg-amber-400' : 'bg-emerald-400'
|
||||
}`}
|
||||
style={{
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
boxShadow: '0 0 10px currentColor, 0 0 20px currentColor',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Glitch duplicate (red channel) */}
|
||||
{glitchOffset.x !== 0 && (
|
||||
<div
|
||||
className="pointer-events-none fixed z-[9998] w-3 h-3 rounded-full bg-red-500/50"
|
||||
style={{
|
||||
left: position.x - glitchOffset.x * 2,
|
||||
top: position.y - glitchOffset.y * 2,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
filter: 'blur(1px)',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,78 +2,231 @@
|
|||
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
const MUSHROOM_ASCII = `
|
||||
████████
|
||||
██░░░░░░░░██
|
||||
██░░░░░░░░░░░░██
|
||||
██░░░░░░░░░░░░░░░░██
|
||||
██░░░░██░░░░░░██░░░░░░██
|
||||
██░░░░░░░░░░░░░░░░░░░░██
|
||||
██░░░░░░░░░░░░░░░░██
|
||||
████████████████
|
||||
██░░██
|
||||
██░░██
|
||||
██░░░░░░██
|
||||
`
|
||||
|
||||
const RESEARCH_DOMAINS = [
|
||||
"mycoeconomics",
|
||||
"token_engineering",
|
||||
"psilo_cybernetics",
|
||||
"institutional_neuroplasticity",
|
||||
"zk_local_first_systems",
|
||||
"regenerative_crypto_commons",
|
||||
"emancipatory_technology",
|
||||
]
|
||||
|
||||
export function HeroSection() {
|
||||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
|
||||
const [typedText, setTypedText] = useState("")
|
||||
const [currentDomain, setCurrentDomain] = useState(0)
|
||||
const [showCursor, setShowCursor] = useState(true)
|
||||
const [bootSequence, setBootSequence] = useState(0)
|
||||
|
||||
const fullText = RESEARCH_DOMAINS[currentDomain]
|
||||
|
||||
// Boot sequence effect
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
setMousePosition({
|
||||
x: (e.clientX / window.innerWidth - 0.5) * 20,
|
||||
y: (e.clientY / window.innerHeight - 0.5) * 20,
|
||||
})
|
||||
}
|
||||
const bootSteps = [1, 2, 3, 4, 5]
|
||||
let step = 0
|
||||
const bootInterval = setInterval(() => {
|
||||
if (step < bootSteps.length) {
|
||||
setBootSequence(bootSteps[step])
|
||||
step++
|
||||
} else {
|
||||
clearInterval(bootInterval)
|
||||
}
|
||||
}, 300)
|
||||
return () => clearInterval(bootInterval)
|
||||
}, [])
|
||||
|
||||
window.addEventListener("mousemove", handleMouseMove)
|
||||
return () => window.removeEventListener("mousemove", handleMouseMove)
|
||||
// Typing effect
|
||||
useEffect(() => {
|
||||
if (bootSequence < 5) return
|
||||
|
||||
let charIndex = 0
|
||||
setTypedText("")
|
||||
|
||||
const typeInterval = setInterval(() => {
|
||||
if (charIndex < fullText.length) {
|
||||
setTypedText(fullText.slice(0, charIndex + 1))
|
||||
charIndex++
|
||||
} else {
|
||||
clearInterval(typeInterval)
|
||||
setTimeout(() => {
|
||||
setCurrentDomain((prev) => (prev + 1) % RESEARCH_DOMAINS.length)
|
||||
}, 2000)
|
||||
}
|
||||
}, 80)
|
||||
|
||||
return () => clearInterval(typeInterval)
|
||||
}, [currentDomain, fullText, bootSequence])
|
||||
|
||||
// Cursor blink
|
||||
useEffect(() => {
|
||||
const cursorInterval = setInterval(() => {
|
||||
setShowCursor((prev) => !prev)
|
||||
}, 530)
|
||||
return () => clearInterval(cursorInterval)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden px-6">
|
||||
{/* Animated background elements */}
|
||||
<div className="absolute inset-0 overflow-hidden opacity-20">
|
||||
<div
|
||||
className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-primary blur-[120px] animate-float"
|
||||
style={{
|
||||
transform: `translate(${mousePosition.x}px, ${mousePosition.y}px)`,
|
||||
transition: "transform 0.3s ease-out",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-accent blur-[120px]"
|
||||
style={{
|
||||
transform: `translate(${-mousePosition.x}px, ${-mousePosition.y}px)`,
|
||||
transition: "transform 0.3s ease-out",
|
||||
animationDelay: "2s",
|
||||
}}
|
||||
/>
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden px-4 md:px-6 scanlines">
|
||||
{/* Background grid pattern - handled by body in CSS */}
|
||||
|
||||
{/* Floating ASCII mushroom */}
|
||||
<div className="absolute top-10 right-10 md:top-20 md:right-20 opacity-20 animate-float hidden md:block">
|
||||
<pre className="ascii-art text-emerald-400/30">{MUSHROOM_ASCII}</pre>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 max-w-5xl text-center">
|
||||
<div className="mb-6 inline-block">
|
||||
<span className="text-sm font-mono text-muted-foreground border border-border px-4 py-2 rounded-full">
|
||||
{"{ Token Engineering & Regenerative Economics }"}
|
||||
{/* Main terminal window */}
|
||||
<div className="relative z-10 w-full max-w-4xl terminal-window rounded-lg overflow-hidden">
|
||||
{/* Terminal header */}
|
||||
<div className="terminal-header px-4 py-3 flex items-center gap-2">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-500/80" />
|
||||
</div>
|
||||
<span className="text-xs text-emerald-400/60 ml-4 font-mono">
|
||||
jeff@emmett:~/research$
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-6xl md:text-8xl font-bold mb-6 text-balance leading-tight">Jeff Emmett</h1>
|
||||
{/* Terminal content */}
|
||||
<div className="p-6 md:p-8 space-y-6">
|
||||
{/* Boot sequence */}
|
||||
<div className="space-y-1 text-xs md:text-sm text-emerald-400/70">
|
||||
{bootSequence >= 1 && (
|
||||
<p className="fade-in-up">[OK] Loading cognitive_substrate.so</p>
|
||||
)}
|
||||
{bootSequence >= 2 && (
|
||||
<p className="fade-in-up stagger-1">[OK] Initializing mycelial_network</p>
|
||||
)}
|
||||
{bootSequence >= 3 && (
|
||||
<p className="fade-in-up stagger-2">[OK] Mounting /dev/commons</p>
|
||||
)}
|
||||
{bootSequence >= 4 && (
|
||||
<p className="fade-in-up stagger-3">[OK] Syncing regenerative_protocols</p>
|
||||
)}
|
||||
{bootSequence >= 5 && (
|
||||
<p className="fade-in-up stagger-4 text-emerald-400">
|
||||
[READY] System initialized. Welcome.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-3xl mx-auto text-balance leading-relaxed">
|
||||
Token engineering researcher exploring bonding curves, Web3 economies, and mycoeconomics. Building tools for
|
||||
regenerative communities and commons-based governance.
|
||||
</p>
|
||||
{bootSequence >= 5 && (
|
||||
<>
|
||||
{/* Main title */}
|
||||
<div className="space-y-4 pt-4">
|
||||
<h1
|
||||
className="text-4xl md:text-6xl lg:text-7xl font-bold text-emerald-400 glitch"
|
||||
data-text="JEFF EMMETT"
|
||||
>
|
||||
JEFF EMMETT
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-4 justify-center">
|
||||
<a
|
||||
href="#work"
|
||||
className="group relative px-8 py-4 bg-primary text-primary-foreground rounded-lg font-medium overflow-hidden transition-all hover:scale-105"
|
||||
>
|
||||
<span className="relative z-10">View Research</span>
|
||||
<div className="absolute inset-0 bg-accent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
className="px-8 py-4 bg-secondary text-secondary-foreground rounded-lg font-medium transition-all hover:scale-105 hover:bg-secondary/80"
|
||||
>
|
||||
Get in Touch
|
||||
</a>
|
||||
<div className="flex items-center gap-2 text-lg md:text-xl text-amber-400/90">
|
||||
<span className="text-emerald-500">$</span>
|
||||
<span className="text-muted-foreground">exploring</span>
|
||||
<span className="text-emerald-300">
|
||||
{typedText}
|
||||
<span
|
||||
className={`${showCursor ? "opacity-100" : "opacity-0"}`}
|
||||
>
|
||||
_
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description block */}
|
||||
<div className="code-block text-sm md:text-base space-y-2 mt-6">
|
||||
<p className="text-emerald-400/80">
|
||||
<span className="text-amber-400">/**</span>
|
||||
</p>
|
||||
<p className="text-emerald-400/80 pl-2">
|
||||
* Token engineering researcher at the intersection of
|
||||
</p>
|
||||
<p className="text-emerald-400/80 pl-2">
|
||||
* regenerative systems, crypto commons, and emancipatory tech.
|
||||
</p>
|
||||
<p className="text-emerald-400/80 pl-2">*</p>
|
||||
<p className="text-emerald-400/80 pl-2">
|
||||
* Co-founder:{" "}
|
||||
<span className="text-cyan-400">Commons Stack</span>,{" "}
|
||||
<span className="text-cyan-400">MycoFi</span>
|
||||
</p>
|
||||
<p className="text-emerald-400/80 pl-2">
|
||||
* Research: Bonding curves, conviction voting, institutional design
|
||||
</p>
|
||||
<p className="text-emerald-400/80">
|
||||
<span className="text-amber-400">*/</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Navigation links */}
|
||||
<div className="flex flex-wrap gap-4 pt-6">
|
||||
<a
|
||||
href="#research"
|
||||
className="group px-6 py-3 neon-border hover-glow rounded text-emerald-400 text-sm md:text-base transition-all"
|
||||
>
|
||||
<span className="text-muted-foreground">$</span> cat{" "}
|
||||
<span className="text-cyan-400">research.md</span>
|
||||
<span className="opacity-0 group-hover:opacity-100 transition-opacity ml-2">
|
||||
→
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#projects"
|
||||
className="group px-6 py-3 neon-border hover-glow rounded text-emerald-400 text-sm md:text-base transition-all"
|
||||
>
|
||||
<span className="text-muted-foreground">$</span> ls{" "}
|
||||
<span className="text-cyan-400">./projects/</span>
|
||||
<span className="opacity-0 group-hover:opacity-100 transition-opacity ml-2">
|
||||
→
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="#connect"
|
||||
className="group px-6 py-3 bg-emerald-500/20 neon-border hover-glow rounded text-emerald-400 text-sm md:text-base transition-all"
|
||||
>
|
||||
<span className="text-muted-foreground">$</span> ssh{" "}
|
||||
<span className="text-cyan-400">connect</span>
|
||||
<span className="opacity-0 group-hover:opacity-100 transition-opacity ml-2">
|
||||
→
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Academic citation */}
|
||||
<div className="pt-8 border-t border-emerald-500/20">
|
||||
<p className="citation">
|
||||
Emmett, J. (2019-present). "Towards Regenerative Cryptoeconomics:
|
||||
Designing Systems for Collective Flourishing." Working papers
|
||||
available at commons.stack
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<div className="absolute bottom-12 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<div className="h-12 w-8 rounded-full border-2 border-muted-foreground/30 flex items-start justify-center p-2">
|
||||
<div className="h-2 w-1 bg-muted-foreground/50 rounded-full animate-pulse" />
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-emerald-400/50 text-xs animate-bounce">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<span>scroll</span>
|
||||
<span>▼</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,58 +1,163 @@
|
|||
const skills = {
|
||||
"Token Engineering": [
|
||||
"Bonding Curves",
|
||||
"cadCAD Modeling",
|
||||
"Primary Issuance Markets",
|
||||
"Dynamic Supply Tokens",
|
||||
"Cryptoeconomics",
|
||||
"Agent-Based Modeling",
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
interface SkillNode {
|
||||
id: string
|
||||
name: string
|
||||
level: number // 0-100
|
||||
dependencies: string[]
|
||||
description: string
|
||||
}
|
||||
|
||||
const SKILL_TREE: Record<string, SkillNode[]> = {
|
||||
"token_engineering/": [
|
||||
{ id: "bc", name: "bonding_curves.sol", level: 95, dependencies: [], description: "AMMs & primary issuance markets" },
|
||||
{ id: "cv", name: "conviction_voting.py", level: 90, dependencies: ["bc"], description: "Continuous decision-making" },
|
||||
{ id: "abc", name: "augmented_bonding.ts", level: 88, dependencies: ["bc"], description: "Sustainable funding mechanisms" },
|
||||
{ id: "cad", name: "cadCAD_modeling/", level: 92, dependencies: [], description: "Agent-based economic simulation" },
|
||||
{ id: "ds", name: "dynamic_supply.rs", level: 85, dependencies: ["bc", "cad"], description: "Elastic token mechanisms" },
|
||||
],
|
||||
"DAO Tooling": [
|
||||
"Conviction Voting",
|
||||
"Augmented Bonding Curves",
|
||||
"Commons Stack",
|
||||
"Governance Systems",
|
||||
"Cyber-Physical Commons",
|
||||
"Ostrom Compliance",
|
||||
"governance/": [
|
||||
{ id: "dao", name: "dao_templates/", level: 90, dependencies: [], description: "Cyber-physical commons frameworks" },
|
||||
{ id: "ost", name: "ostrom_compliance.md", level: 88, dependencies: ["dao"], description: "8 principles encoded" },
|
||||
{ id: "cgov", name: "collective_governance/", level: 85, dependencies: ["cv"], description: "Participatory systems" },
|
||||
],
|
||||
"Research Areas": [
|
||||
"Regenerative Economics",
|
||||
"Mycoeconomics",
|
||||
"Complex Systems",
|
||||
"Behavioral Economics",
|
||||
"Token Design",
|
||||
"Public Goods Funding",
|
||||
"research/": [
|
||||
{ id: "myco", name: "mycoeconomics/", level: 80, dependencies: [], description: "Fungal network economics" },
|
||||
{ id: "regen", name: "regenerative_economics.tex", level: 85, dependencies: ["myco"], description: "Beyond extractive models" },
|
||||
{ id: "complex", name: "complex_systems.jl", level: 78, dependencies: [], description: "Emergence & adaptation" },
|
||||
{ id: "behav", name: "behavioral_economics/", level: 75, dependencies: [], description: "Human coordination patterns" },
|
||||
],
|
||||
Technical: ["Python", "Solidity", "Simulation", "Data Analysis", "Systems Design", "Web3"],
|
||||
"tools/": [
|
||||
{ id: "py", name: "python", level: 88, dependencies: [], description: "Primary analysis language" },
|
||||
{ id: "sol", name: "solidity", level: 75, dependencies: [], description: "Smart contract development" },
|
||||
{ id: "sim", name: "simulation/", level: 85, dependencies: ["py", "cad"], description: "Monte Carlo & ABM" },
|
||||
{ id: "web3", name: "web3_stack/", level: 80, dependencies: ["sol"], description: "Decentralized infrastructure" },
|
||||
],
|
||||
}
|
||||
|
||||
function ProgressBar({ level }: { level: number }) {
|
||||
const filled = Math.floor(level / 5)
|
||||
const empty = 20 - filled
|
||||
return (
|
||||
<span className="font-mono text-xs">
|
||||
<span className="text-emerald-400">{"█".repeat(filled)}</span>
|
||||
<span className="text-emerald-400/20">{"░".repeat(empty)}</span>
|
||||
<span className="text-muted-foreground ml-2">{level}%</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export function SkillsSection() {
|
||||
const [expandedDir, setExpandedDir] = useState<string | null>("token_engineering/")
|
||||
|
||||
return (
|
||||
<section className="py-32 px-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="mb-16">
|
||||
<h2 className="text-5xl md:text-6xl font-bold mb-6">Expertise & Focus Areas</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl text-balance leading-relaxed">
|
||||
Interdisciplinary approach to building resilient token economies and regenerative systems
|
||||
</p>
|
||||
<section id="skills" className="py-20 px-4 md:px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Section header */}
|
||||
<div className="mb-12">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<span className="text-emerald-500 text-sm">$</span>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-emerald-400">
|
||||
tree ~/skills --depth=2
|
||||
</h2>
|
||||
</div>
|
||||
<div className="code-block">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
# Expertise & Focus Areas
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
## Interdisciplinary toolkit for building resilient token economies
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
{Object.entries(skills).map(([category, items]) => (
|
||||
<div key={category}>
|
||||
<h3 className="text-2xl font-semibold mb-6 text-primary">{category}</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{items.map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg font-medium hover:bg-primary hover:text-primary-foreground transition-colors"
|
||||
>
|
||||
{skill}
|
||||
{/* Skill tree */}
|
||||
<div className="terminal-window rounded-lg overflow-hidden">
|
||||
<div className="terminal-header px-4 py-2 flex items-center justify-between">
|
||||
<span className="text-xs text-emerald-400/60 font-mono">
|
||||
jeff@emmett:~/skills$
|
||||
</span>
|
||||
<span className="text-xs text-amber-400/60">
|
||||
[SKILL_TREE v2.0]
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-4 md:p-6 font-mono text-sm">
|
||||
{/* Root */}
|
||||
<div className="text-emerald-400 mb-2">~/skills/</div>
|
||||
|
||||
{/* Directories */}
|
||||
{Object.entries(SKILL_TREE).map(([dir, skills], dirIndex) => (
|
||||
<div key={dir} className="ml-4">
|
||||
{/* Directory name */}
|
||||
<div
|
||||
className="flex items-center gap-2 cursor-pointer hover:text-emerald-300 transition-colors py-1"
|
||||
onClick={() => setExpandedDir(expandedDir === dir ? null : dir)}
|
||||
>
|
||||
<span className="text-cyan-400">
|
||||
{expandedDir === dir ? "▼" : "▶"}
|
||||
</span>
|
||||
))}
|
||||
<span className="text-amber-400">{dir}</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
[{skills.length} items]
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Skills in directory */}
|
||||
{expandedDir === dir && (
|
||||
<div className="ml-6 space-y-2 mt-2 mb-4">
|
||||
{skills.map((skill, index) => (
|
||||
<div
|
||||
key={skill.id}
|
||||
className="fade-in-up group"
|
||||
style={{ animationDelay: `${index * 0.05}s` }}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-muted-foreground">├──</span>
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2 md:gap-4">
|
||||
<span className={`${skill.name.endsWith('/') ? 'text-amber-400' : 'text-emerald-300'}`}>
|
||||
{skill.name}
|
||||
</span>
|
||||
<ProgressBar level={skill.level} />
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
└─ {skill.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="text-muted-foreground">└── ...</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-6 pt-4 border-t border-emerald-500/20">
|
||||
<p className="text-muted-foreground text-xs">
|
||||
<span className="text-emerald-400">4 directories</span>,{" "}
|
||||
<span className="text-cyan-400">17 skills</span>,{" "}
|
||||
<span className="text-amber-400">∞ learning</span>
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Methodology note */}
|
||||
<div className="mt-8 code-block">
|
||||
<p className="text-amber-400 text-sm">/* Methodology */</p>
|
||||
<p className="text-emerald-400/80 text-sm mt-2">
|
||||
<span className="text-muted-foreground">// Skills interconnect like mycelial networks</span>
|
||||
</p>
|
||||
<p className="text-emerald-400/80 text-sm">
|
||||
<span className="text-muted-foreground">// Each node strengthens the whole system</span>
|
||||
</p>
|
||||
<p className="text-emerald-400/80 text-sm">
|
||||
<span className="text-muted-foreground">// Constant iteration, never complete</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,91 +1,224 @@
|
|||
import { Card } from "@/components/ui/card"
|
||||
"use client"
|
||||
|
||||
const projects = [
|
||||
import { useState } from "react"
|
||||
|
||||
interface ResearchItem {
|
||||
id: string
|
||||
title: string
|
||||
category: string
|
||||
year: string
|
||||
abstract: string
|
||||
tags: string[]
|
||||
link?: string
|
||||
status: "published" | "working" | "ongoing"
|
||||
}
|
||||
|
||||
const RESEARCH_ITEMS: ResearchItem[] = [
|
||||
{
|
||||
title: "Commons Stack",
|
||||
description:
|
||||
"Cyber-physical commons architecture translating Ostrom's principles into DAO templates. Building open-source, token engineered component libraries for communal management of public goods.",
|
||||
tags: ["Token Engineering", "DAOs", "Ostrom Compliance", "Public Goods"],
|
||||
image: "/commons-stack-dao-governance-blockchain.jpg",
|
||||
id: "bonding-curves",
|
||||
title: "Bonding Curves: A Mathematical Primitive for Collective Intelligence",
|
||||
category: "token_engineering",
|
||||
year: "2019",
|
||||
abstract:
|
||||
"Exploration of automated market makers as coordination mechanisms for decentralized communities. Analysis of augmented bonding curves for sustainable funding of public goods.",
|
||||
tags: ["AMM", "DeFi", "public_goods", "cadCAD"],
|
||||
link: "https://medium.com/commonsstack",
|
||||
status: "published",
|
||||
},
|
||||
{
|
||||
title: "Bonding Curve Research Group",
|
||||
description:
|
||||
"Research and development of Primary Issuance Markets enabling dynamic token supply. Challenging fixed supply paradigms with adaptive mechanisms that dampen volatility.",
|
||||
tags: ["Bonding Curves", "cadCAD", "Token Economics", "DeFi"],
|
||||
image: "/bonding-curve-token-economics-chart.jpg",
|
||||
id: "conviction-voting",
|
||||
title: "Conviction Voting: A Novel Continuous Decision Making Framework",
|
||||
category: "governance",
|
||||
year: "2020",
|
||||
abstract:
|
||||
"Time-weighted voting mechanism that allows preferences to accumulate over time, reducing plutocratic attack vectors and enabling more nuanced collective decision-making.",
|
||||
tags: ["governance", "voting", "mechanism_design"],
|
||||
link: "https://blog.giveth.io/conviction-voting",
|
||||
status: "published",
|
||||
},
|
||||
{
|
||||
title: "MycoFi & Mycoeconomics",
|
||||
description:
|
||||
"Economic systems inspired by fungal networks. Regenerative protocols built on cooperation, mutual aid, and permaculture currency principles. Author of book.mycofi.earth.",
|
||||
tags: ["Regenerative Economics", "Biomimicry", "Permaculture", "Web3"],
|
||||
image: "/mycelium-network-nature-fungal.jpg",
|
||||
id: "mycofi",
|
||||
title: "MycoFi: Towards Mycelial Finance and Regenerative Economics",
|
||||
category: "mycoeconomics",
|
||||
year: "2023",
|
||||
abstract:
|
||||
"Framework for understanding economic systems through the lens of fungal networks. Proposes biomimetic approaches to resource allocation and value flow in decentralized systems.",
|
||||
tags: ["biomimicry", "regenerative", "networks", "ecology"],
|
||||
link: "https://mycofi.earth",
|
||||
status: "ongoing",
|
||||
},
|
||||
{
|
||||
title: "Conviction Voting",
|
||||
description:
|
||||
"Novel continuous decision-making mechanism for DAO governance. Eliminates time-boxed voting attack vectors while increasing community participation and long-term alignment.",
|
||||
tags: ["Governance", "Voting Systems", "Social Sensor Fusion", "cadCAD"],
|
||||
image: "/conviction-voting-governance-dashboard.jpg",
|
||||
id: "psilo-cybernetics",
|
||||
title: "Psilo-Cybernetics: Consciousness, Computation, and Collective Intelligence",
|
||||
category: "psilo_cybernetics",
|
||||
year: "2024",
|
||||
abstract:
|
||||
"Theoretical framework connecting altered states of consciousness with distributed systems theory. Exploring the intersection of psychedelic research and cybernetic governance.",
|
||||
tags: ["consciousness", "cybernetics", "emergence"],
|
||||
status: "working",
|
||||
},
|
||||
{
|
||||
title: "Augmented Bonding Curves",
|
||||
description:
|
||||
"Primary Issuance Markets that create economic boundaries for commons ecosystems. Enables continuous fundraising, algorithmic liquidity, and price volatility dampening.",
|
||||
tags: ["Token Design", "AMMs", "Cryptoeconomics", "Funding Mechanisms"],
|
||||
image: "/augmented-bonding-curve-economic-system.jpg",
|
||||
id: "institutional-neuroplasticity",
|
||||
title: "Institutional Neuroplasticity: Adaptive Governance for Complex Systems",
|
||||
category: "governance",
|
||||
year: "2024",
|
||||
abstract:
|
||||
"Applying principles of neural plasticity to institutional design. How organizations can maintain coherence while adapting to changing conditions through distributed learning.",
|
||||
tags: ["institutions", "adaptation", "complexity"],
|
||||
status: "working",
|
||||
},
|
||||
{
|
||||
title: "Token Engineering Commons",
|
||||
description:
|
||||
"First field test of Commons Stack components. Outperformed other public goods tokens in risk-adjusted returns, demonstrating benefits of primary issuance markets.",
|
||||
tags: ["DAO", "TEC", "Token Engineering", "Community Governance"],
|
||||
image: "/token-engineering-community-collaborative.jpg",
|
||||
id: "zk-local-first",
|
||||
title: "Zero-Knowledge Local-First: Privacy-Preserving Decentralized Coordination",
|
||||
category: "cryptography",
|
||||
year: "2025",
|
||||
abstract:
|
||||
"Architecture for local-first applications with ZK proofs for selective disclosure. Enabling community coordination without surveillance capitalism.",
|
||||
tags: ["ZK", "privacy", "local_first", "p2p"],
|
||||
status: "working",
|
||||
},
|
||||
]
|
||||
|
||||
const CATEGORIES = [
|
||||
{ id: "all", label: "/*" },
|
||||
{ id: "token_engineering", label: "token_eng" },
|
||||
{ id: "governance", label: "governance" },
|
||||
{ id: "mycoeconomics", label: "myco" },
|
||||
{ id: "cryptography", label: "crypto" },
|
||||
{ id: "psilo_cybernetics", label: "psilo" },
|
||||
]
|
||||
|
||||
export function WorkSection() {
|
||||
const [activeCategory, setActiveCategory] = useState("all")
|
||||
const [expandedItem, setExpandedItem] = useState<string | null>(null)
|
||||
|
||||
const filteredItems =
|
||||
activeCategory === "all"
|
||||
? RESEARCH_ITEMS
|
||||
: RESEARCH_ITEMS.filter((item) => item.category === activeCategory)
|
||||
|
||||
return (
|
||||
<section id="work" className="py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="mb-16">
|
||||
<h2 className="text-5xl md:text-6xl font-bold mb-6">Research & Projects</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl text-balance leading-relaxed">
|
||||
Exploring token engineering, regenerative economics, and decentralized governance systems
|
||||
</p>
|
||||
<section id="research" className="py-20 px-4 md:px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Section header */}
|
||||
<div className="mb-12">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<span className="text-emerald-500 text-sm">$</span>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-emerald-400">
|
||||
cat research.md
|
||||
</h2>
|
||||
</div>
|
||||
<div className="code-block">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
# Research & Working Papers
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
## Exploring regenerative systems, token engineering, and
|
||||
collective intelligence
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{projects.map((project, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="group relative overflow-hidden bg-card border-border hover:border-primary/50 transition-all duration-300 hover:scale-[1.02]"
|
||||
{/* Category filter */}
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{CATEGORIES.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setActiveCategory(cat.id)}
|
||||
className={`px-4 py-2 text-sm rounded transition-all ${
|
||||
activeCategory === cat.id
|
||||
? "bg-emerald-500/20 text-emerald-400 neon-border"
|
||||
: "text-muted-foreground hover:text-emerald-400 border border-transparent hover:border-emerald-500/30"
|
||||
}`}
|
||||
>
|
||||
<div className="aspect-video overflow-hidden bg-muted">
|
||||
<img
|
||||
src={project.image || "/placeholder.svg"}
|
||||
alt={project.title}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3 className="text-2xl font-semibold mb-3 group-hover:text-primary transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-4 leading-relaxed">{project.description}</p>
|
||||
{cat.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Research items */}
|
||||
<div className="space-y-4">
|
||||
{filteredItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="terminal-window rounded-lg overflow-hidden fade-in-up"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
<div
|
||||
className="p-4 md:p-6 cursor-pointer"
|
||||
onClick={() =>
|
||||
setExpandedItem(expandedItem === item.id ? null : item.id)
|
||||
}
|
||||
>
|
||||
{/* Header row */}
|
||||
<div className="flex items-start justify-between gap-4 mb-3">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span
|
||||
className={`text-xs px-2 py-0.5 rounded ${
|
||||
item.status === "published"
|
||||
? "bg-emerald-500/20 text-emerald-400"
|
||||
: item.status === "ongoing"
|
||||
? "bg-amber-500/20 text-amber-400"
|
||||
: "bg-cyan-500/20 text-cyan-400"
|
||||
}`}
|
||||
>
|
||||
{item.status}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{item.year}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg md:text-xl text-emerald-300 font-medium">
|
||||
{item.title}
|
||||
</h3>
|
||||
</div>
|
||||
<span
|
||||
className={`text-emerald-400 transition-transform ${
|
||||
expandedItem === item.id ? "rotate-180" : ""
|
||||
}`}
|
||||
>
|
||||
▼
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tags.map((tag, tagIndex) => (
|
||||
{item.tags.map((tag) => (
|
||||
<span
|
||||
key={tagIndex}
|
||||
className="text-xs font-mono px-3 py-1 bg-secondary text-secondary-foreground rounded-full"
|
||||
key={tag}
|
||||
className="text-xs text-cyan-400/70 before:content-['#']"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Expanded content */}
|
||||
{expandedItem === item.id && (
|
||||
<div className="mt-4 pt-4 border-t border-emerald-500/20">
|
||||
<p className="text-muted-foreground text-sm leading-relaxed mb-4">
|
||||
{item.abstract}
|
||||
</p>
|
||||
{item.link && (
|
||||
<a
|
||||
href={item.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 transition-colors"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<span>→</span>
|
||||
<span>Read more</span>
|
||||
</a>
|
||||
)}
|
||||
<div className="mt-4 citation">
|
||||
Emmett, J. ({item.year}). "{item.title}."
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue