Skip to content

Commit c1166aa

Browse files
Merge pull request #42 from OpenRockets/copilot/fix-website-alignment-issue
[WIP] Fix website misalignment and add new nonprofit
2 parents 9e0dba8 + 5f37498 commit c1166aa

File tree

2 files changed

+166
-16
lines changed

2 files changed

+166
-16
lines changed

index.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,17 @@
1010

1111
<!-- Brand Portfolio Styles -->
1212
<link rel="stylesheet" href="styles/brand-portfolio.css">
13+
14+
<!-- Three.js for 3D Background -->
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
1316
</head>
1417
<body>
18+
<!-- 3D Background Canvas -->
19+
<canvas id="bg-canvas"></canvas>
20+
21+
<!-- Vignette Overlay -->
22+
<div class="vignette-overlay"></div>
23+
1524
<!-- Hero Section -->
1625
<section class="hero">
1726
<div class="container">
@@ -51,6 +60,12 @@ <h2 class="section-title">Our Nonprofits</h2>
5160
<p class="affiliate-name">MarsPreneurs</p>
5261
<p class="affiliate-url">marspreneurs.com</p>
5362
</a>
63+
64+
<a href="https://github.com/openrockets-india" target="_blank" class="affiliate-item">
65+
<img src="https://github.com/openrockets-india.png" alt="OpenRockets India" class="affiliate-logo">
66+
<p class="affiliate-name">OpenRockets India</p>
67+
<p class="affiliate-url">github.com/openrockets-india</p>
68+
</a>
5469
</div>
5570
</div>
5671
</section>
@@ -164,5 +179,85 @@ <h3 class="committee-year-title">2024</h3>
164179
</div>
165180
</div>
166181
</footer>
182+
183+
<!-- Three.js 3D Background Script -->
184+
<script>
185+
// Three.js setup for animated cubes background
186+
const canvas = document.getElementById('bg-canvas');
187+
const scene = new THREE.Scene();
188+
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
189+
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
190+
191+
renderer.setSize(window.innerWidth, window.innerHeight);
192+
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
193+
194+
// Create cubes
195+
const cubes = [];
196+
const cubeCount = 30;
197+
198+
for (let i = 0; i < cubeCount; i++) {
199+
const size = Math.random() * 0.8 + 0.2;
200+
const geometry = new THREE.BoxGeometry(size, size, size);
201+
202+
// Randomly choose between black wireframe and white wireframe
203+
const isWhite = Math.random() > 0.5;
204+
const material = new THREE.MeshBasicMaterial({
205+
color: isWhite ? 0xffffff : 0x1d1d1f,
206+
wireframe: true,
207+
transparent: true,
208+
opacity: 0.15
209+
});
210+
211+
const cube = new THREE.Mesh(geometry, material);
212+
213+
// Random positions spread across the scene
214+
cube.position.x = (Math.random() - 0.5) * 20;
215+
cube.position.y = (Math.random() - 0.5) * 20;
216+
cube.position.z = (Math.random() - 0.5) * 15 - 5;
217+
218+
// Random rotation speeds
219+
cube.userData = {
220+
rotationSpeedX: (Math.random() - 0.5) * 0.01,
221+
rotationSpeedY: (Math.random() - 0.5) * 0.01,
222+
rotationSpeedZ: (Math.random() - 0.5) * 0.005,
223+
floatAmplitude: Math.random() * 0.5 + 0.2,
224+
floatSpeed: Math.random() * 0.5 + 0.3,
225+
floatOffset: Math.random() * Math.PI * 2,
226+
initialY: cube.position.y
227+
};
228+
229+
scene.add(cube);
230+
cubes.push(cube);
231+
}
232+
233+
camera.position.z = 5;
234+
235+
// Animation loop
236+
let time = 0;
237+
function animate() {
238+
requestAnimationFrame(animate);
239+
time += 0.01;
240+
241+
cubes.forEach(cube => {
242+
cube.rotation.x += cube.userData.rotationSpeedX;
243+
cube.rotation.y += cube.userData.rotationSpeedY;
244+
cube.rotation.z += cube.userData.rotationSpeedZ;
245+
246+
// Gentle floating motion - oscillate around initial position
247+
cube.position.y = cube.userData.initialY + Math.sin(time * cube.userData.floatSpeed + cube.userData.floatOffset) * cube.userData.floatAmplitude;
248+
});
249+
250+
renderer.render(scene, camera);
251+
}
252+
253+
animate();
254+
255+
// Handle window resize
256+
window.addEventListener('resize', () => {
257+
camera.aspect = window.innerWidth / window.innerHeight;
258+
camera.updateProjectionMatrix();
259+
renderer.setSize(window.innerWidth, window.innerHeight);
260+
});
261+
</script>
167262
</body>
168263
</html>

styles/brand-portfolio.css

Lines changed: 71 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,60 @@
1010

1111
body {
1212
font-family: 'Ubuntu', sans-serif;
13-
background-color: #ffffff;
13+
background-color: #fdfbf7;
14+
background-image:
15+
repeating-linear-gradient(
16+
transparent,
17+
transparent 31px,
18+
#e8e8e8 31px,
19+
#e8e8e8 32px
20+
);
21+
background-attachment: local;
1422
color: #1d1d1f;
1523
line-height: 1.6;
1624
-webkit-font-smoothing: antialiased;
1725
-moz-osx-font-smoothing: grayscale;
26+
position: relative;
27+
}
28+
29+
/* 3D Background Canvas */
30+
#bg-canvas {
31+
position: fixed;
32+
top: 0;
33+
left: 0;
34+
width: 100%;
35+
height: 100%;
36+
z-index: -1;
37+
pointer-events: none;
38+
}
39+
40+
/* Vignette Overlay - Shadow from corners */
41+
.vignette-overlay {
42+
position: fixed;
43+
top: 0;
44+
left: 0;
45+
width: 100%;
46+
height: 100%;
47+
pointer-events: none;
48+
z-index: 0;
49+
background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.15) 100%);
1850
}
1951

2052
.container {
2153
max-width: 980px;
2254
margin: 0 auto;
2355
padding: 0 22px;
56+
position: relative;
57+
z-index: 1;
2458
}
2559

2660
/* Hero Section */
2761
.hero {
2862
text-align: center;
2963
padding: 80px 0 60px;
64+
position: relative;
65+
z-index: 1;
66+
font-family: 'Times New Roman', Times, serif;
3067
}
3168

3269
.hero-logo {
@@ -47,7 +84,8 @@ body {
4784
display: inline-block;
4885
color: #1d1d1f;
4986
text-decoration: underline;
50-
font-size: 17px;
87+
font-family: 'Times New Roman', Times, serif;
88+
font-size: 20px;
5189
font-weight: 500;
5290
transition: opacity 0.2s ease;
5391
}
@@ -57,15 +95,17 @@ body {
5795
}
5896

5997
.hero-title {
60-
font-size: 48px;
98+
font-family: 'Times New Roman', Times, serif;
99+
font-size: 56px;
61100
font-weight: 700;
62101
letter-spacing: -0.5px;
63102
margin-bottom: 12px;
64103
color: #1d1d1f;
65104
}
66105

67106
.hero-subtitle {
68-
font-size: 21px;
107+
font-family: 'Times New Roman', Times, serif;
108+
font-size: 24px;
69109
font-weight: 400;
70110
color: #86868b;
71111
max-width: 600px;
@@ -92,6 +132,9 @@ body {
92132
.section {
93133
padding: 80px 0;
94134
border-top: 1px solid #d2d2d7;
135+
position: relative;
136+
z-index: 1;
137+
background-color: rgba(253, 251, 247, 0.9);
95138
}
96139

97140
.section-title {
@@ -112,53 +155,63 @@ body {
112155
/* Affiliate Nonprofits Grid */
113156
.affiliates-grid {
114157
display: grid;
115-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
116-
gap: 40px;
158+
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
159+
gap: 24px;
117160
justify-items: center;
161+
align-items: start;
118162
}
119163

120164
.affiliate-item {
121165
text-align: center;
122166
text-decoration: none;
123167
color: inherit;
124168
transition: opacity 0.2s ease;
169+
display: flex;
170+
flex-direction: column;
171+
align-items: center;
125172
}
126173

127174
.affiliate-item:hover {
128175
opacity: 0.7;
129176
}
130177

131178
.affiliate-logo {
132-
width: 136px;
133-
height: 136px;
179+
width: 100px;
180+
height: 100px;
134181
object-fit: contain;
135-
margin-bottom: 16px;
182+
margin-bottom: 12px;
136183
border-radius: 16px;
184+
flex-shrink: 0;
137185
}
138186

139187
.affiliate-logo-text {
140-
width: 136px;
141-
height: 136px;
188+
width: 100px;
189+
height: 100px;
142190
display: flex;
143191
align-items: center;
144192
justify-content: center;
145193
background-color: #1d1d1f;
146194
color: #ffffff;
147-
font-size: 40px;
195+
font-size: 32px;
148196
font-weight: 700;
149197
border-radius: 16px;
150-
margin: 0 auto 16px;
198+
margin-bottom: 12px;
199+
flex-shrink: 0;
151200
}
152201

153202
.affiliate-name {
154-
font-size: 17px;
203+
font-size: 15px;
155204
font-weight: 500;
156205
color: #1d1d1f;
157206
margin-bottom: 4px;
207+
min-height: 40px;
208+
display: flex;
209+
align-items: center;
210+
justify-content: center;
158211
}
159212

160213
.affiliate-url {
161-
font-size: 14px;
214+
font-size: 12px;
162215
color: #86868b;
163216
}
164217

@@ -196,8 +249,10 @@ body {
196249

197250
/* Committee Section - highlighted with subtle gray background for visual separation */
198251
.committee-section {
199-
background-color: #f5f5f7;
252+
background-color: rgba(245, 243, 239, 0.95);
200253
padding: 80px 0;
254+
position: relative;
255+
z-index: 1;
201256
}
202257

203258
.committee-year {

0 commit comments

Comments
 (0)