Skip to content

Commit 3dda2c9

Browse files
defnetuncer98defnetuncer98
authored
Add files via upload
1 parent 94e7fe2 commit 3dda2c9

1 file changed

Lines changed: 140 additions & 63 deletions

File tree

‎index.html‎

Lines changed: 140 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,204 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>BlueVariable Studio</title>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>BlueVariable</title>
7+
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
9+
710
<script src="https://cdn.tailwindcss.com"></script>
8-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
11+
<script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
912

1013
<style>
11-
body{font-family:'Inter',sans-serif;background:#030712;color:white}
12-
.hero{
13-
background:radial-gradient(circle at 30% 20%,rgba(59,130,246,0.25),transparent 40%),
14-
radial-gradient(circle at 80% 0%,rgba(96,165,250,0.25),transparent 35%),
15-
#030712;
14+
body{
15+
margin:0;
16+
background:#05070f;
17+
color:white;
18+
font-family:'Inter',sans-serif;
19+
overflow-x:hidden;
20+
}
21+
22+
canvas{
23+
position:fixed;
24+
top:0;
25+
left:0;
26+
z-index:0;
27+
}
28+
29+
.content{
30+
position:relative;
31+
z-index:2;
32+
}
33+
34+
.glow{
35+
background:linear-gradient(90deg,#60a5fa,#3b82f6);
36+
-webkit-background-clip:text;
37+
-webkit-text-fill-color:transparent;
38+
}
39+
40+
.section{
41+
max-width:1100px;
42+
margin:auto;
43+
padding:160px 24px;
1644
}
17-
.glass{
18-
background:rgba(255,255,255,0.04);
45+
46+
.card{
47+
background:rgba(255,255,255,0.03);
1948
border:1px solid rgba(255,255,255,0.08);
20-
backdrop-filter:blur(10px);
49+
border-radius:20px;
50+
padding:40px;
51+
backdrop-filter:blur(12px);
2152
}
22-
</style>
2353

54+
</style>
2455
</head>
56+
2557
<body>
2658

27-
<header class="max-w-6xl mx-auto flex justify-between items-center p-6">
59+
<canvas id="bg"></canvas>
60+
61+
<div class="content">
2862

63+
<header class="flex justify-between items-center p-8 max-w-6xl mx-auto">
2964
<div class="flex items-center gap-3">
30-
<img src="logo.png" class="h-10">
31-
<span class="font-semibold tracking-wide">bluevariable</span>
65+
<img src="logo.png" class="h-10"/>
66+
<span class="font-semibold">bluevariable</span>
3267
</div>
3368

34-
<nav class="space-x-8 text-gray-400 text-sm">
35-
<a href="#game" class="hover:text-white">Game</a>
36-
<a href="#blog" class="hover:text-white">Dev Blog</a>
37-
<a href="#studio" class="hover:text-white">Studio</a>
69+
<nav class="text-sm text-gray-400 space-x-6">
70+
<a href="#game">game</a>
71+
<a href="#blog">dev blog</a>
72+
<a href="#studio">studio</a>
3873
</nav>
39-
4074
</header>
4175

42-
<section class="hero text-center py-40 px-6">
76+
<section class="section text-center">
4377

44-
<h1 class="text-6xl md:text-7xl font-extrabold mb-6 tracking-tight">
78+
<h1 class="text-7xl font-extrabold mb-6 glow">
4579
BlueVariable
4680
</h1>
4781

48-
<p class="text-gray-400 max-w-xl mx-auto mb-10">
49-
A two-person indie studio building small, thoughtful gameplay experiences.
82+
<p class="text-gray-400 max-w-xl mx-auto mb-12">
83+
A two-person indie studio creating experimental gameplay experiences.
5084
</p>
5185

52-
<a href="#game" class="bg-blue-600 hover:bg-blue-500 px-8 py-4 rounded-xl font-medium transition">
53-
See Our Game
54-
</a>
86+
<div class="text-blue-400 font-semibold text-lg">
87+
Purrfect Fit — Coming 2027
88+
</div>
5589

5690
</section>
5791

58-
<section id="game" class="max-w-5xl mx-auto py-32 px-6">
59-
60-
<h2 class="text-4xl font-bold mb-12 text-center">Current Project</h2>
92+
<section id="game" class="section">
6193

62-
<div class="glass p-12 rounded-3xl text-center">
94+
<div class="card text-center">
95+
<h2 class="text-4xl font-bold mb-6">Purrfect Fit</h2>
6396

64-
<h3 class="text-3xl font-bold mb-4">Purrfect Fit</h3>
65-
66-
<p class="text-gray-400 max-w-xl mx-auto mb-6">
67-
A cozy puzzle experience about finding the perfect place for every cat.
97+
<p class="text-gray-400 max-w-xl mx-auto mb-8">
98+
A cozy puzzle game about finding the perfect place for every cat.
6899
</p>
69100

70-
<div class="text-blue-400 font-semibold text-lg mb-8">
71-
COMING SOON — 2027
101+
<div class="text-blue-400 font-semibold">
102+
Steam page coming soon
72103
</div>
73104

74-
<button class="border border-white/20 px-6 py-3 rounded-xl text-sm hover:bg-white hover:text-black transition">
75-
Wishlist on Steam (Soon)
76-
</button>
77-
78105
</div>
79106

80107
</section>
81108

82-
<section id="blog" class="max-w-6xl mx-auto py-32 px-6">
109+
<section id="blog" class="section">
83110

84-
<h2 class="text-4xl font-bold mb-16 text-center">Dev Blog</h2>
111+
<h2 class="text-4xl font-bold mb-12">Dev Blog</h2>
85112

86113
<div class="grid md:grid-cols-3 gap-8">
87114

88-
<div class="glass p-8 rounded-2xl hover:scale-105 transition">
89-
<div class="text-sm text-gray-500 mb-3">Dev Log #1</div>
90-
<h3 class="font-semibold mb-3">Starting Purrfect Fit</h3>
91-
<p class="text-gray-400 text-sm">How the idea for our cozy puzzle game began.</p>
115+
<div class="card">
116+
<h3 class="font-semibold mb-2">Starting Development</h3>
117+
<p class="text-gray-400 text-sm">The origin of Purrfect Fit.</p>
92118
</div>
93119

94-
<div class="glass p-8 rounded-2xl hover:scale-105 transition">
95-
<div class="text-sm text-gray-500 mb-3">Dev Log #2</div>
96-
<h3 class="font-semibold mb-3">Early Prototypes</h3>
97-
<p class="text-gray-400 text-sm">Testing puzzle mechanics and level design.</p>
120+
<div class="card">
121+
<h3 class="font-semibold mb-2">Puzzle Mechanics</h3>
122+
<p class="text-gray-400 text-sm">Designing the core systems.</p>
98123
</div>
99124

100-
<div class="glass p-8 rounded-2xl hover:scale-105 transition">
101-
<div class="text-sm text-gray-500 mb-3">Dev Log #3</div>
102-
<h3 class="font-semibold mb-3">Art Direction</h3>
103-
<p class="text-gray-400 text-sm">Developing the visual style of the game.</p>
125+
<div class="card">
126+
<h3 class="font-semibold mb-2">Visual Style</h3>
127+
<p class="text-gray-400 text-sm">Exploring the art direction.</p>
104128
</div>
105129

106130
</div>
107131

108132
</section>
109133

110-
<section id="studio" class="py-32 px-6 max-w-3xl mx-auto text-center">
134+
<section id="studio" class="section text-center">
111135

112-
<h2 class="text-4xl font-bold mb-8">The Studio</h2>
136+
<h2 class="text-4xl font-bold mb-6">Studio</h2>
113137

114-
<p class="text-gray-400 leading-relaxed">
115-
BlueVariable is a tiny independent game studio made of two developers. We focus on creative mechanics, cozy experiences, and carefully crafted gameplay. Our goal is to build small games that feel memorable and personal.
138+
<p class="text-gray-400 max-w-xl mx-auto">
139+
BlueVariable is a small independent game studio run by two developers building thoughtful and experimental games.
116140
</p>
117141

118142
</section>
119143

120-
<footer class="border-t border-white/10 text-center py-10 text-gray-500 text-sm">
144+
<footer class="text-center text-gray-500 pb-16">
145+
© BlueVariable
146+
</footer>
121147

122-
© 2026 BlueVariable Studio
148+
</div>
123149

124-
</footer>
150+
<script>
151+
152+
const scene = new THREE.Scene();
153+
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,1000);
154+
155+
const renderer = new THREE.WebGLRenderer({canvas:document.getElementById("bg"),alpha:true});
156+
renderer.setSize(window.innerWidth,window.innerHeight);
157+
158+
camera.position.z = 6;
159+
160+
const geometry = new THREE.IcosahedronGeometry(1,1);
161+
const material = new THREE.MeshStandardMaterial({
162+
color:0x3b82f6,
163+
wireframe:true
164+
});
165+
166+
const meshes=[];
167+
168+
for(let i=0;i<12;i++){
169+
const mesh = new THREE.Mesh(geometry,material);
170+
mesh.position.x=(Math.random()-0.5)*15;
171+
mesh.position.y=(Math.random()-0.5)*10;
172+
mesh.position.z=(Math.random()-0.5)*10;
173+
174+
scene.add(mesh);
175+
meshes.push(mesh);
176+
}
177+
178+
const light = new THREE.PointLight(0xffffff,1);
179+
light.position.set(5,5,5);
180+
scene.add(light);
181+
182+
function animate(){
183+
requestAnimationFrame(animate);
184+
185+
meshes.forEach(m=>{
186+
m.rotation.x+=0.002;
187+
m.rotation.y+=0.003;
188+
});
189+
190+
renderer.render(scene,camera);
191+
}
192+
193+
animate();
194+
195+
window.addEventListener("resize",()=>{
196+
renderer.setSize(window.innerWidth,window.innerHeight);
197+
camera.aspect=window.innerWidth/window.innerHeight;
198+
camera.updateProjectionMatrix();
199+
});
200+
201+
</script>
125202

126203
</body>
127204
</html>

0 commit comments

Comments
 (0)