Add 3D animated cubes, ruled paper background, vignette effect, and Times font for hero

Copilot · NekshaDeSilva · Copilot · commit 5f37498ea66d · 2026-02-17T18:17:49.000Z
Co-authored-by: NekshaDeSilva &lt;102156620+NekshaDeSilva@users.noreply.github.com&gt;
diff --git a/index.html b/index.html
@@ -10,8 +10,17 @@
     
     <!-- Brand Portfolio Styles -->
     <link rel="stylesheet" href="styles/brand-portfolio.css">
+    
+    <!-- Three.js for 3D Background -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 </head>
 <body>
+    <!-- 3D Background Canvas -->
+    <canvas id="bg-canvas"></canvas>
+    
+    <!-- Vignette Overlay -->
+    <div class="vignette-overlay"></div>
+    
     <!-- Hero Section -->
     <section class="hero">
         <div class="container">
@@ -170,5 +179,85 @@ <h3 class="committee-year-title">2024</h3>
             </div>
         </div>
     </footer>
+    
+    <!-- Three.js 3D Background Script -->
+    <script>
+        // Three.js setup for animated cubes background
+        const canvas = document.getElementById('bg-canvas');
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
+        
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        
+        // Create cubes
+        const cubes = [];
+        const cubeCount = 30;
+        
+        for (let i = 0; i < cubeCount; i++) {
+            const size = Math.random() * 0.8 + 0.2;
+            const geometry = new THREE.BoxGeometry(size, size, size);
+            
+            // Randomly choose between black wireframe and white wireframe
+            const isWhite = Math.random() > 0.5;
+            const material = new THREE.MeshBasicMaterial({
+                color: isWhite ? 0xffffff : 0x1d1d1f,
+                wireframe: true,
+                transparent: true,
+                opacity: 0.15
+            });
+            
+            const cube = new THREE.Mesh(geometry, material);
+            
+            // Random positions spread across the scene
+            cube.position.x = (Math.random() - 0.5) * 20;
+            cube.position.y = (Math.random() - 0.5) * 20;
+            cube.position.z = (Math.random() - 0.5) * 15 - 5;
+            
+            // Random rotation speeds
+            cube.userData = {
+                rotationSpeedX: (Math.random() - 0.5) * 0.01,
+                rotationSpeedY: (Math.random() - 0.5) * 0.01,
+                rotationSpeedZ: (Math.random() - 0.5) * 0.005,
+                floatAmplitude: Math.random() * 0.5 + 0.2,
+                floatSpeed: Math.random() * 0.5 + 0.3,
+                floatOffset: Math.random() * Math.PI * 2,
+                initialY: cube.position.y
+            };
+            
+            scene.add(cube);
+            cubes.push(cube);
+        }
+        
+        camera.position.z = 5;
+        
+        // Animation loop
+        let time = 0;
+        function animate() {
+            requestAnimationFrame(animate);
+            time += 0.01;
+            
+            cubes.forEach(cube => {
+                cube.rotation.x += cube.userData.rotationSpeedX;
+                cube.rotation.y += cube.userData.rotationSpeedY;
+                cube.rotation.z += cube.userData.rotationSpeedZ;
+                
+                // Gentle floating motion - oscillate around initial position
+                cube.position.y = cube.userData.initialY + Math.sin(time * cube.userData.floatSpeed + cube.userData.floatOffset) * cube.userData.floatAmplitude;
+            });
+            
+            renderer.render(scene, camera);
+        }
+        
+        animate();
+        
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+    </script>
 </body>
 </html>
diff --git a/styles/brand-portfolio.css b/styles/brand-portfolio.css
@@ -10,23 +10,60 @@
 
 body {
     font-family: 'Ubuntu', sans-serif;
-    background-color: #ffffff;
+    background-color: #fdfbf7;
+    background-image: 
+        repeating-linear-gradient(
+            transparent,
+            transparent 31px,
+            #e8e8e8 31px,
+            #e8e8e8 32px
+        );
+    background-attachment: local;
     color: #1d1d1f;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    position: relative;
+}
+
+/* 3D Background Canvas */
+#bg-canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+}
+
+/* Vignette Overlay - Shadow from corners */
+.vignette-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.15) 100%);
 }
 
 .container {
     max-width: 980px;
     margin: 0 auto;
     padding: 0 22px;
+    position: relative;
+    z-index: 1;
 }
 
 /* Hero Section */
 .hero {
     text-align: center;
     padding: 80px 0 60px;
+    position: relative;
+    z-index: 1;
+    font-family: 'Times New Roman', Times, serif;
 }
 
 .hero-logo {
@@ -47,7 +84,8 @@ body {
     display: inline-block;
     color: #1d1d1f;
     text-decoration: underline;
-    font-size: 17px;
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 20px;
     font-weight: 500;
     transition: opacity 0.2s ease;
 }
@@ -57,15 +95,17 @@ body {
 }
 
 .hero-title {
-    font-size: 48px;
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 56px;
     font-weight: 700;
     letter-spacing: -0.5px;
     margin-bottom: 12px;
     color: #1d1d1f;
 }
 
 .hero-subtitle {
-    font-size: 21px;
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 24px;
     font-weight: 400;
     color: #86868b;
     max-width: 600px;
@@ -92,6 +132,9 @@ body {
 .section {
     padding: 80px 0;
     border-top: 1px solid #d2d2d7;
+    position: relative;
+    z-index: 1;
+    background-color: rgba(253, 251, 247, 0.9);
 }
 
 .section-title {
@@ -206,8 +249,10 @@ body {
 
 /* Committee Section - highlighted with subtle gray background for visual separation */
 .committee-section {
-    background-color: #f5f5f7;
+    background-color: rgba(245, 243, 239, 0.95);
     padding: 80px 0;
+    position: relative;
+    z-index: 1;
 }
 
 .committee-year {
