Skip to content

Add 3D thumbnails with metallic materials for project and demo cards #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Add 3D thumbnails with metallic materials for project and demo cards #2

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
60573a0
Initial plan
Copilot Nov 29, 2025
a4c9103
Add 3D thumbnails with metallic materials for project and demo cards
Copilot Nov 29, 2025
e36332e
Address code review: use Map for thumbnail data, add cleanup function
Copilot Nov 29, 2025
2523ca7
Add debounced resize handler for better performance
Copilot Nov 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 198 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,27 @@
transform: translateX(100%);
}

/* 3D Thumbnail Container Styles */
.threejs-thumb {
position: relative;
width: 100%;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(135deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.9));
border-radius: 0.5rem 0.5rem 0 0;
}
.threejs-thumb canvas {
display: block;
}
@media (min-width: 768px) {
.threejs-thumb {
height: 140px;
}
}

</style>
</head>
<body class="bg-black text-gray-200">
Expand Down Expand Up @@ -206,7 +227,7 @@ <h2 class="text-4xl font-bold text-center mb-16 text-gradient">Engineering Proje
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">

<div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
<div class="text-7xl p-8 bg-gray-800/80 text-center">🏆</div>
<div class="threejs-thumb" data-shape="trophy" data-accent="blue"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3">ASME IMECE BrainBolt 2025</h3>
<p class="text-gray-400 mb-4">
Expand All @@ -226,7 +247,7 @@ <h3 class="text-2xl font-semibold mb-3">ASME IMECE BrainBolt 2025</h3>
</div>

<div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-pink-500/30 hover:border-pink-500 transform hover:-translate-y-2">
<div class="text-7xl p-8 bg-gray-800/80 text-center">🚣</div>
<div class="threejs-thumb" data-shape="torus" data-accent="pink"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3">Kayak Paddle Optimization</h3>
<p class="text-gray-400 mb-4">
Expand All @@ -246,7 +267,7 @@ <h3 class="text-2xl font-semibold mb-3">Kayak Paddle Optimization</h3>
</div>

<div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
<div class="text-7xl p-8 bg-gray-800/80 text-center">🤖</div>
<div class="threejs-thumb" data-shape="robot" data-accent="blue"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3">Glass Cleaning Robot</h3>
<p class="text-gray-400 mb-4">
Expand Down Expand Up @@ -276,6 +297,7 @@ <h2 class="text-4xl font-bold text-center mb-16 text-gradient">Web Demos & Mini-
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">

<div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
<div class="threejs-thumb" data-shape="octahedron" data-accent="blue"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3 text-blue-400">Pitchathon Site</h3>
<p class="text-gray-400 mb-6 h-16">A simple, clean website for a pitching competition. Built with HTML & CSS.</p>
Expand All @@ -287,17 +309,19 @@ <h3 class="text-2xl font-semibold mb-3 text-blue-400">Pitchathon Site</h3>
</div>

<div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-pink-500/30 hover:border-pink-500 transform hover:-translate-y-2">
<div class="threejs-thumb" data-shape="dodecahedron" data-accent="pink"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3 text-pink-400">Job Application Form</h3>
<p class="text-gray-400 mb-6 h-16">A responsive job application form layout. A pure HTML & CSS exercise.</p>
<div class="flex gap-4">
<a href="https://defaulte-r.github.io/JobApplication/" target="_blank" class="flex-1 text-center px-4 py-2 text-sm font-semibold text-white bg-pink-600 rounded-lg hover:bg-pink-700 transition duration-300">View Live Site</a>
<a href="httpsm://github.com/DEFAULTE-R/JobApplication" target="_blank" class="flex-1 text-center px-4 py-2 text-sm font-semibold text-gray-200 bg-gray-800 rounded-lg hover:bg-gray-700 transition duration-300">View Code</a>
<a href="https://github.com/DEFAULTE-R/JobApplication" target="_blank" class="flex-1 text-center px-4 py-2 text-sm font-semibold text-gray-200 bg-gray-800 rounded-lg hover:bg-gray-700 transition duration-300">View Code</a>
</div>
</div>
</div>

<div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
<div class="threejs-thumb" data-shape="icosahedron" data-accent="blue"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3 text-blue-400">Drestein</h3>
<p class="text-gray-400 mb-6 h-16">A landing page concept. (Feel free to update this description!)</p>
Expand All @@ -309,6 +333,7 @@ <h3 class="text-2xl font-semibold mb-3 text-blue-400">Drestein</h3>
</div>

<div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
<div class="threejs-thumb" data-shape="torusKnot" data-accent="blue"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3 text-blue-400">SIH Campus 2</h3>
<p class="text-gray-400 mb-6 h-16">A website for the Smart India Hackathon campus event.</p>
Expand All @@ -320,6 +345,7 @@ <h3 class="text-2xl font-semibold mb-3 text-blue-400">SIH Campus 2</h3>
</div>

<div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-pink-500/30 hover:border-pink-500 transform hover:-translate-y-2">
<div class="threejs-thumb" data-shape="gear" data-accent="pink"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3 text-pink-400">SIH Cam</h3>
<p class="text-gray-400 mb-6 h-16">Another project related to the Smart India Hackathon.</p>
Expand All @@ -331,12 +357,13 @@ <h3 class="text-2xl font-semibold mb-3 text-pink-400">SIH Cam</h3>
</div>

<div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
<div class="threejs-thumb" data-shape="robot" data-accent="blue"></div>
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3 text-blue-400">Robot Project Page</h3>
<p class="text-gray-400 mb-6 h-16">A simple HTML page for the Smart Glass Cleaning Robot project.</p>
<div class="flex gap-4">
<a href="https://defaulte-r.github.io/Smart-Glass-Cleaning-Robot/" target="_blank" class="flex-1 text-center px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition duration-300">View Live Site</a>
<a href="httpss://github.com/DEFAULTE-R/Smart-Glass-Cleaning-Robot" target="_blank" class="flex-1 text-center px-4 py-2 text-sm font-semibold text-gray-200 bg-gray-800 rounded-lg hover:bg-gray-700 transition duration-300">View Code</a>
<a href="https://github.com/DEFAULTE-R/Smart-Glass-Cleaning-Robot" target="_blank" class="flex-1 text-center px-4 py-2 text-sm font-semibold text-gray-200 bg-gray-800 rounded-lg hover:bg-gray-700 transition duration-300">View Code</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -728,10 +755,176 @@ <h3 class="text-2xl font-semibold text-gray-100">Let's work together</h3>
});
}

// --- 3D Thumbnail Data Storage ---
const thumbnailDataMap = new Map();

// --- 3D Thumbnail Generator for Project/Demo Cards ---
function createThumb3D(container, shapeType, accentColor) {
if (!container) return null;

const width = container.clientWidth;
const height = container.clientHeight;

// Scene
const scene = new THREE.Scene();

// Camera - adjusted FOV for better fit
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
camera.position.z = 4;

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(width, height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
container.appendChild(renderer.domElement);

// Colors - Metallic palette with neon accents
const accentHex = accentColor === 'pink' ? 0xec4899 : 0x3b82f6;
const metallicColor = 0x9ca3af; // Silver/gray

// Geometry creation based on shape type
let geometry;
const scale = 1.2; // Base scale for all objects

switch(shapeType) {
case 'trophy':
geometry = new THREE.ConeGeometry(0.8 * scale, 1.4 * scale, 6);
break;
case 'torus':
geometry = new THREE.TorusGeometry(0.7 * scale, 0.25 * scale, 16, 50);
break;
case 'robot':
geometry = new THREE.BoxGeometry(1 * scale, 1.2 * scale, 0.8 * scale);
break;
case 'octahedron':
geometry = new THREE.OctahedronGeometry(0.9 * scale, 0);
break;
case 'dodecahedron':
geometry = new THREE.DodecahedronGeometry(0.85 * scale, 0);
break;
case 'icosahedron':
geometry = new THREE.IcosahedronGeometry(0.9 * scale, 0);
break;
case 'torusKnot':
geometry = new THREE.TorusKnotGeometry(0.5 * scale, 0.18 * scale, 80, 12);
break;
case 'gear':
geometry = new THREE.CylinderGeometry(0.8 * scale, 0.8 * scale, 0.3 * scale, 12);
break;
default:
geometry = new THREE.IcosahedronGeometry(0.9 * scale, 0);
}

// Metallic material for the main object
const mainMaterial = new THREE.MeshStandardMaterial({
color: metallicColor,
metalness: 0.7,
roughness: 0.2
});
const mainMesh = new THREE.Mesh(geometry, mainMaterial);
mainMesh.position.set(0, 0, 0);
scene.add(mainMesh);

// Wireframe overlay with accent color
const wireframeMaterial = new THREE.MeshBasicMaterial({
color: accentHex,
wireframe: true,
transparent: true,
opacity: 0.4
});
const wireframeMesh = new THREE.Mesh(geometry, wireframeMaterial);
wireframeMesh.position.set(0, 0, 0);
scene.add(wireframeMesh);

// Lighting setup
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(2, 3, 4);
scene.add(directionalLight);

// Colored rim light for glow effect
const rimLight = new THREE.PointLight(accentHex, 0.6, 10);
rimLight.position.set(-2, 1, 2);
scene.add(rimLight);

// Second accent light
const secondLight = new THREE.PointLight(accentColor === 'pink' ? 0x3b82f6 : 0xec4899, 0.3, 8);
secondLight.position.set(2, -1, 1);
scene.add(secondLight);

// Animation with cleanup capability
let animationId = null;
let isAnimating = true;

function animate() {
if (!isAnimating) return;
animationId = requestAnimationFrame(animate);
mainMesh.rotation.x += 0.005;
mainMesh.rotation.y += 0.008;
wireframeMesh.rotation.x += 0.005;
wireframeMesh.rotation.y += 0.008;
renderer.render(scene, camera);
}
animate();

// Cleanup function to stop animation and dispose resources
function cleanup() {
isAnimating = false;
if (animationId !== null) {
cancelAnimationFrame(animationId);
}
geometry.dispose();
mainMaterial.dispose();
wireframeMaterial.dispose();
renderer.dispose();
thumbnailDataMap.delete(container);
}

// Store reference in Map for resize handling
const thumbData = { camera, renderer, scene, mainMesh, wireframeMesh, cleanup };
thumbnailDataMap.set(container, thumbData);

return thumbData;
}

// --- Initialize all 3D Thumbnails ---
function initThumbnails() {
const thumbContainers = document.querySelectorAll('.threejs-thumb');
thumbContainers.forEach(container => {
const shape = container.dataset.shape || 'icosahedron';
const accent = container.dataset.accent || 'blue';
createThumb3D(container, shape, accent);
});

// Debounced resize handler for performance
let resizeTimeout;
function handleResize() {
thumbContainers.forEach(container => {
const thumbData = thumbnailDataMap.get(container);
if (thumbData) {
const { camera, renderer } = thumbData;
const width = container.clientWidth;
const height = container.clientHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
});
}

window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(handleResize, 150);
});
}

// Start everything
initAboutCanvas(); // Initialize the new canvas
initTypingAnimation(); // Start the typing effect
initMobileMenu(); // Initialize the mobile menu
initThumbnails(); // Initialize 3D thumbnails
});
</script>
</body>
Expand Down