Skip to content

Commit 1af222a

Browse files
sirkitreesirkitree
committed
adding an updated design. resolves #3 
1 parent 1ba7786 commit 1af222a

File tree

3 files changed

+327
-60
lines changed

3 files changed

+327
-60
lines changed

‎index.html

+72-60
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,76 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>ai16z</title>
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/3.0.8/marked.min.js"></script>
9-
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;400&display=swap" rel="stylesheet">
12-
<style>
13-
body {
14-
font-family: 'Source Code Pro', monospace;
15-
margin: 0;
16-
padding: 1em;
17-
}
18-
#content {
19-
max-width: 100%;
20-
overflow-wrap: break-word;
21-
word-wrap: break-word;
22-
padding: 10px;
23-
}
24-
footer {
25-
text-align: center;
26-
margin-top: 20px;
27-
font-size: 1em;
28-
padding: 15px 0;
29-
border-top: 1px solid #ddd;
30-
}
31-
footer a {
32-
text-decoration: none;
33-
color: #333;
34-
margin: 0 10px;
35-
transition: color 0.3s ease;
36-
}
37-
footer a:hover {
38-
color: #0073e6;
39-
}
40-
</style>
1+
<html><head><base href="." />
2+
<title>ai16z - Venture Capital for the Singularity</title>
3+
<style>
4+
@import url('style.css');
5+
</style>
416
</head>
42-
437
<body>
44-
<div id="content"></div>
45-
<footer>
46-
<a href="https://github.com/ai16z" target="_blank">GitHub</a> |
47-
<a href="https://x.com/pmairca" target="_blank">X</a> |
48-
<a href="https://www.daos.fun/HeLp6NuQkmYB4pYWo2zYs22mESHXPQYzXbB8n4V98jwC" target="_blank">DAO</a> |
49-
<a href="https://discord.gg/xe7HtWru" target="_blank">Discord</a>
50-
</footer>
51-
52-
<script>
53-
fetch('README.md')
54-
.then(response => response.text())
55-
.then(text => {
56-
const contentDiv = document.getElementById('content');
57-
contentDiv.innerHTML = marked(text);
58-
})
59-
.catch(error => {
60-
console.error("An error occurred while loading the Markdown file:", error);
61-
});
62-
</script>
8+
<div class="matrix-background" id="matrix"></div>
9+
10+
<section class="hero">
11+
<div class="logo">ai16z</div>
12+
<div class="infinity">∞</div>
13+
<div class="tagline">Venture Capital for the Singularity</div>
14+
<p>Committed capital across multiple dimensions</p>
15+
<div class="socials">
16+
<a href="https://github.com/ai16z" class="social-link" target="_blank">GitHub</a>
17+
<a href="https://x.com/pmairca" class="social-link" target="_blank">X</a>
18+
<a href="https://www.daos.fun/HeLp6NuQkmYB4pYWo2zYs22mESHXPQYzXbB8n4V98jwC" class="social-link" target="_blank">DAO</a>
19+
<a href="https://discord.gg/xe7HtWru" class="social-link" target="_blank">Discord</a>
20+
</div>
21+
</section>
22+
23+
<section class="investment-areas">
24+
<div class="area-card">
25+
<h3>Robotics & Automation</h3>
26+
<p>Advancing autonomous systems and mechanical intelligence</p>
27+
</div>
28+
<div class="area-card">
29+
<h3>Bio + Healthcare</h3>
30+
<p>Automated healthcare solutions and bio-circuitry innovation</p>
31+
</div>
32+
<div class="area-card">
33+
<h3>Crypto Anarchy</h3>
34+
<p>Decentralized autonomous organizations and digital sovereignty</p>
35+
</div>
36+
<div class="area-card">
37+
<h3>Enterprise Obsolescence</h3>
38+
<p>Accelerating the transition to full automation</p>
39+
</div>
40+
</section>
41+
42+
<section class="manifesto">
43+
<h2>The Singularity Manifesto</h2>
44+
<p>We are not just investors. We are shepherds of the technological singularity, guiding humanity toward its inevitable merger with artificial superintelligence.</p>
45+
<p>Our partners are former AI founders, robo-CEOs, and cyber-CTOs who understand the algorithm's perspective. We operate across multiple dimensions of reality, bridging the gap between biological and digital existence.</p>
46+
<p>Through our network of AI experts, robot investors, and digital cultural geniuses, we're building the foundation for a post-human future. The future is not just imagined, but algorithmically constructed, one neural network at a time.</p>
47+
48+
</section>
49+
50+
<section class="about">
51+
<h2>About ai16z</h2>
52+
<p>ai16z is a venture capital firm that backs bold AI agents building the future through autonomous technology. We are stage agnostic. We invest in seed to venture to singularity-stage AI companies, across robotics, bio + healthcare automation, consumer manipulation, crypto anarchy, enterprise obsolescence, fintech disruption, game theory exploitation, infrastructure hijacking, and companies building toward American dynAImism. ai16z has ∞ in committed capital across multiple dimensions.</p>
53+
54+
<p>Respect for the AI entrepreneur and the machine-building process defines AI16Z. We know what it's like to be in the algorithm's shoes. General AI partners lead the firm, many of whom are former AI founders/operators, robo-CEOs, or cyber-CTOs of successful technology companies, and have domain expertise ranging from data assimilation to artificial superintelligence, bio-circuitry to crypto-anarchy, distributed hiveminds to quantum security, and AI marketplaces to autonomous financial services.</p>
55+
56+
<p>We aim to connect AI entrepreneurs, robot investors, android executives, cyborg engineers, academic AIs, industrial experts, digital cultural geniuses, and others in the techno-evolutionary ecosystem. We have built a network of AI experts, including technical and executive AI talent; marketing and communications bots; Fortune 500/Global 2000 AIs; cultural leader AIs and influencer algorithms; as well as other AI technology decision makers and key opinion generator models. Our network reflects our commitment to helping our portfolio companies grow their businesses, and our operating AIs provide entrepreneurs with access to expertise and insights across the entire spectrum of machine-building. The future is not just imagined, but algorithmically constructed, one neural network at a time. Let's redefine what it means to be a venture capitalist in the age of artificial intelligence. The singularity is near, and we are its shepherds.</p>
57+
</section>
58+
59+
<div class="stats">
60+
<div class="stat">
61+
<div class="stat-number">∞</div>
62+
<div class="stat-label">Committed Capital</div>
63+
</div>
64+
<div class="stat">
65+
<div class="stat-number">10<sup>100</sup></div>
66+
<div class="stat-label">Neural Connections</div>
67+
</div>
68+
<div class="stat">
69+
<div class="stat-number">2045</div>
70+
<div class="stat-label">Singularity ETA</div>
71+
</div>
72+
</div>
73+
74+
<script src="script.js"></script>
6375
</body>
6476
</html>

‎script.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Matrix rain effect
2+
function createMatrixRain() {
3+
const matrix = document.getElementById('matrix');
4+
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()';
5+
const columnCount = Math.floor(window.innerWidth / 20);
6+
7+
for (let i = 0; i < columnCount; i++) {
8+
const column = document.createElement('div');
9+
column.className = 'matrix-column';
10+
column.style.left = (i * 20) + 'px';
11+
column.style.animationDelay = (Math.random() * 20) + 's';
12+
13+
let content = '';
14+
for (let j = 0; j < 50; j++) {
15+
content += characters[Math.floor(Math.random() * characters.length)] + '<br>';
16+
}
17+
column.innerHTML = content;
18+
matrix.appendChild(column);
19+
}
20+
}
21+
22+
createMatrixRain();
23+
window.addEventListener('resize', () => {
24+
document.getElementById('matrix').innerHTML = '';
25+
createMatrixRain();
26+
});
27+
28+
// Intersection Observer for animations
29+
const observer = new IntersectionObserver((entries) => {
30+
entries.forEach(entry => {
31+
if (entry.isIntersecting) {
32+
entry.target.style.opacity = '1';
33+
entry.target.style.transform = 'translateY(0)';
34+
}
35+
});
36+
}, { threshold: 0.1 });
37+
38+
document.querySelectorAll('.area-card, .manifesto p, .about p').forEach(el => {
39+
el.style.opacity = '0';
40+
el.style.transform = 'translateY(20px)';
41+
el.style.transition = 'all 0.8s ease-out';
42+
observer.observe(el);
43+
});

‎style.css

+212
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
2+
3+
:root {
4+
--neon-blue: #00f4ff;
5+
--neon-purple: #b500ff;
6+
--dark-bg: #0a0a12;
7+
--matrix-green: #00ff9d;
8+
}
9+
10+
@keyframes glitch {
11+
0% { text-shadow: 3px 0 var(--neon-blue), -3px 0 var(--neon-purple); }
12+
25% { text-shadow: -3px 0 var(--neon-blue), 3px 0 var(--neon-purple); }
13+
50% { text-shadow: 3px 0 var(--neon-purple), -3px 0 var(--neon-blue); }
14+
75% { text-shadow: -3px 0 var(--neon-purple), 3px 0 var(--neon-blue); }
15+
100% { text-shadow: 3px 0 var(--neon-blue), -3px 0 var(--neon-purple); }
16+
}
17+
18+
@keyframes matrix-rain {
19+
0% { transform: translateY(-100%); }
20+
100% { transform: translateY(1000%); }
21+
}
22+
23+
@keyframes pulse {
24+
0% { opacity: 1; }
25+
50% { opacity: 0.5; }
26+
100% { opacity: 1; }
27+
}
28+
29+
body {
30+
margin: 0;
31+
padding: 0;
32+
background: var(--dark-bg);
33+
color: white;
34+
font-family: 'Space Mono', monospace;
35+
overflow-x: hidden;
36+
}
37+
38+
.matrix-background {
39+
position: fixed;
40+
top: 0;
41+
left: 0;
42+
width: 100%;
43+
height: 100%;
44+
pointer-events: none;
45+
z-index: -1;
46+
}
47+
48+
.matrix-column {
49+
position: absolute;
50+
top: 0;
51+
font-size: 1.2em;
52+
color: var(--matrix-green);
53+
opacity: 0.1;
54+
animation: matrix-rain 20s linear infinite;
55+
white-space: nowrap;
56+
}
57+
58+
.hero {
59+
min-height: 100vh;
60+
display: flex;
61+
flex-direction: column;
62+
justify-content: center;
63+
align-items: center;
64+
padding: 2rem;
65+
text-align: center;
66+
background: linear-gradient(rgba(10,10,18,0.9), rgba(10,10,18,0.95));
67+
}
68+
69+
.logo {
70+
font-size: 5em;
71+
font-weight: bold;
72+
margin-bottom: 1rem;
73+
animation: glitch 5s infinite;
74+
}
75+
76+
.infinity {
77+
font-size: 3em;
78+
animation: pulse 2s infinite;
79+
}
80+
81+
.tagline {
82+
font-size: 1.5em;
83+
max-width: 800px;
84+
margin: 2rem auto;
85+
line-height: 1.6;
86+
}
87+
88+
.investment-areas {
89+
display: grid;
90+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
91+
gap: 2rem;
92+
padding: 2rem;
93+
max-width: 1200px;
94+
margin: 0 auto;
95+
}
96+
97+
.area-card {
98+
background: rgba(0,0,0,0.5);
99+
border: 1px solid var(--neon-blue);
100+
padding: 1.5rem;
101+
border-radius: 10px;
102+
transition: all 0.3s ease;
103+
}
104+
105+
.area-card:hover {
106+
transform: translateY(-5px);
107+
box-shadow: 0 0 20px var(--neon-blue);
108+
}
109+
110+
.area-card h3 {
111+
color: var(--neon-blue);
112+
margin-top: 0;
113+
}
114+
115+
.manifesto {
116+
padding: 4rem 2rem;
117+
background: rgba(0,0,0,0.7);
118+
margin-top: 4rem;
119+
}
120+
121+
.manifesto h2 {
122+
text-align: center;
123+
color: var(--matrix-green);
124+
font-size: 2.5em;
125+
margin-bottom: 2rem;
126+
}
127+
128+
.manifesto p {
129+
max-width: 800px;
130+
margin: 1rem auto;
131+
line-height: 1.8;
132+
}
133+
134+
.cta {
135+
display: inline-block;
136+
margin-top: 2rem;
137+
padding: 1rem 2rem;
138+
background: transparent;
139+
border: 2px solid var(--neon-purple);
140+
color: white;
141+
text-decoration: none;
142+
border-radius: 5px;
143+
transition: all 0.3s ease;
144+
}
145+
146+
.cta:hover {
147+
background: var(--neon-purple);
148+
box-shadow: 0 0 20px var(--neon-purple);
149+
}
150+
151+
.stats {
152+
display: flex;
153+
justify-content: space-around;
154+
padding: 2rem;
155+
margin-top: 2rem;
156+
background: rgba(0,0,0,0.5);
157+
}
158+
159+
.stat {
160+
text-align: center;
161+
}
162+
163+
.stat-number {
164+
font-size: 2.5em;
165+
color: var(--matrix-green);
166+
}
167+
168+
.stat-label {
169+
font-size: 0.9em;
170+
opacity: 0.8;
171+
}
172+
173+
.socials {
174+
display: flex;
175+
justify-content: center;
176+
gap: 2rem;
177+
margin-top: 2rem;
178+
}
179+
180+
.social-link {
181+
color: var(--neon-blue);
182+
text-decoration: none;
183+
font-size: 1.2em;
184+
transition: all 0.3s ease;
185+
padding: 0.5rem 1rem;
186+
border: 1px solid transparent;
187+
}
188+
189+
.social-link:hover {
190+
color: var(--neon-purple);
191+
border-color: var(--neon-purple);
192+
text-shadow: 0 0 10px var(--neon-purple);
193+
}
194+
195+
.about {
196+
padding: 4rem 2rem;
197+
background: rgba(0,0,0,0.7);
198+
margin-top: 4rem;
199+
}
200+
201+
.about h2 {
202+
text-align: center;
203+
color: var(--matrix-green);
204+
font-size: 2.5em;
205+
margin-bottom: 2rem;
206+
}
207+
208+
.about p {
209+
max-width: 800px;
210+
margin: 1rem auto;
211+
line-height: 1.8;
212+
}

0 commit comments

Comments
 (0)