Crea una página web moderna y elegante para una ceremonia de graduación, con los siguientes elementos visuales y funcionales:

1. Fondo dinámico:

Usa un fondo animado con partículas brillantes o estrellas en movimiento suave, similar a un cielo nocturno con destellos sutiles.
Alternativamente, si las partículas no son viables, aplica un fondo de degradado animado con los colores de la bandera de la institución: azul Francia (#0055A4), blanco (#FFFFFF) y verde botella (#006633). El degradado debe ser suave y tener una transición continua entre los colores.
2. Estructura de la información:

Primera línea: Un texto centrado y elegante que diga 'Estudiante' en letras claras y legibles, con un tamaño de fuente mediano.
Fotografía del estudiante: Debajo del texto 'Estudiante', coloca una fotografía del estudiante con un marco decorativo y profesional. El marco debe ser delgado, con un diseño que combine los colores de la institución (azul Francia, blanco y verde botella).
Nombre del estudiante: Debajo de la fotografía, muestra el nombre del estudiante en letras grandes, con una tipografía elegante y destacada.
Título académico: Debajo del nombre, en letras más pequeñas pero claras, coloca el texto 'Técnico Medio'.
Carrera: Finalmente, muestra el nombre de la carrera (ejemplo: 'Gastronomía') en un tamaño de fuente intermedio, con un estilo que combine con el resto del diseño.
3. Estilo visual:

Usa una paleta de colores basada en los colores de la institución: azul Francia, blanco y verde botella.
Asegúrate de que el diseño sea responsivo y se adapte a diferentes tamaños de pantalla.
Incluye transiciones suaves al cargar la página o al cambiar de estudiante, para darle un toque profesional y dinámico.
4. Toques adicionales:

Si es posible, añade un efecto de iluminación sutil alrededor del marco de la fotografía para resaltar al estudiante.
Usa tipografías modernas y legibles para todos los textos.
El objetivo es crear una experiencia visualmente atractiva y emotiva, ideal para una ceremonia de graduación.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Graduation Glow Gala
-emoji: 🐢
-colorFrom: indigo
-colorTo: blue
+title: Graduation Glow Gala ✨
+colorFrom: green
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/graduation-card.js

@@ -0,0 +1,129 @@
+class GraduationCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          max-width: 800px;
+          margin: 0 auto;
+          text-align: center;
+          padding: 2rem;
+          position: relative;
+        }
+        
+        .student-title {
+          font-family: 'Playfair Display', serif;
+          font-size: 2rem;
+          color: white;
+          margin-bottom: 1.5rem;
+          text-transform: uppercase;
+          letter-spacing: 3px;
+        }
+        
+        .photo-frame {
+          width: 250px;
+          height: 250px;
+          margin: 0 auto 2rem;
+          border: 3px solid white;
+          border-radius: 5px;
+          padding: 10px;
+          position: relative;
+          box-shadow: 0 0 25px rgba(0, 85, 164, 0.5);
+          background: rgba(255, 255, 255, 0.1);
+          transition: all 0.3s ease;
+        }
+        
+        .photo-frame:hover {
+          box-shadow: 0 0 35px rgba(0, 102, 51, 0.7);
+        }
+        
+        .photo-frame::before {
+          content: '';
+          position: absolute;
+          top: -5px;
+          left: -5px;
+          right: -5px;
+          bottom: -5px;
+          border: 1px solid #0055A4;
+          border-radius: 8px;
+          pointer-events: none;
+          animation: pulse 3s infinite alternate;
+        }
+        
+        @keyframes pulse {
+          0% { border-color: #0055A4; }
+          50% { border-color: #006633; }
+          100% { border-color: #0055A4; }
+        }
+        
+        .student-photo {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 3px;
+        }
+        
+        .student-name {
+          font-family: 'Montserrat', sans-serif;
+          font-size: 2.5rem;
+          color: white;
+          margin-bottom: 0.5rem;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+        }
+        
+        .degree {
+          font-family: 'Montserrat', sans-serif;
+          font-size: 1.2rem;
+          color: #FFD700;
+          margin-bottom: 0.5rem;
+          font-weight: 300;
+        }
+        
+        .major {
+          font-family: 'Montserrat', sans-serif;
+          font-size: 1.5rem;
+          color: white;
+          font-weight: 500;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+          border-top: 1px solid rgba(255, 255, 255, 0.3);
+          padding-top: 0.5rem;
+          display: inline-block;
+        }
+        
+        @media (max-width: 768px) {
+          .student-title {
+            font-size: 1.5rem;
+          }
+          
+          .photo-frame {
+            width: 200px;
+            height: 200px;
+          }
+          
+          .student-name {
+            font-size: 2rem;
+          }
+          
+          .major {
+            font-size: 1.2rem;
+          }
+        }
+      </style>
+      
+      <div class="student-title">Estudiante</div>
+      <div class="photo-frame">
+        <img class="student-photo" src="http://static.photos/people/300x300/1" alt="Foto del estudiante">
+      </div>
+      <div class="student-name">Nombre del Estudiante</div>
+      <div class="degree">Técnico Medio</div>
+      <div class="major">Gastronomía</div>
+    `;
+  }
+}
+
+customElements.define('graduation-card', GraduationCard);

graduation.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ceremonia de Graduación</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Playfair+Display:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <style>
+      body {
+        background: linear-gradient(-45deg, #0055A4, #006633, #0055A4, #006633);
+        background-size: 400% 400%;
+        animation: gradientBG 15s ease infinite;
+        min-height: 100vh;
+        margin: 0;
+        overflow-x: hidden;
+      }
+      
+      @keyframes gradientBG {
+        0% { background-position: 0% 50%; }
+        50% { background-position: 100% 50%; }
+        100% { background-position: 0% 50%; }
+      }
+      
+      .particles {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+      }
+      
+      .content {
+        position: relative;
+        z-index: 1;
+        padding: 2rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+      }
+    </style>
+</head>
+<body>
+    <canvas id="particles" class="particles"></canvas>
+    
+    <div class="content">
+      <graduation-card></graduation-card>
+    </div>
+    
+    <script src="components/graduation-card.js"></script>
+    <script>
+      // Particle background
+      document.addEventListener('DOMContentLoaded', () => {
+        const canvas = document.getElementById('particles');
+        const ctx = canvas.getContext('2d');
+        
+        function resizeCanvas() {
+          canvas.width = window.innerWidth;
+          canvas.height = window.innerHeight;
+        }
+        
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+        
+        const particles = [];
+        const colors = ['#0055A4', '#FFFFFF', '#006633', '#FFD700'];
+        
+        class Particle {
+          constructor() {
+            this.x = Math.random() * canvas.width;
+            this.y = Math.random() * canvas.height;
+            this.size = Math.random() * 3 + 1;
+            this.speedX = Math.random() * 1 - 0.5;
+            this.speedY = Math.random() * 1 - 0.5;
+            this.color = colors[Math.floor(Math.random() * colors.length)];
+            this.alpha = Math.random() * 0.5 + 0.1;
+          }
+          
+          update() {
+            this.x += this.speedX;
+            this.y += this.speedY;
+            
+            if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
+            if (this.y > canvas.height || this.y < 0) this.speedY *= -1;
+          }
+          
+          draw() {
+            ctx.save();
+            ctx.globalAlpha = this.alpha;
+            ctx.fillStyle = this.color;
+            ctx.beginPath();
+            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+          }
+        }
+        
+        function init() {
+          for (let i = 0; i < 100; i++) {
+            particles.push(new Particle());
+          }
+        }
+        
+        function animate() {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          
+          for (let i = 0; i < particles.length; i++) {
+            particles[i].update();
+            particles[i].draw();
+          }
+          
+          connectParticles();
+          requestAnimationFrame(animate);
+        }
+        
+        function connectParticles() {
+          for (let i = 0; i < particles.length; i++) {
+            for (let j = i; j < particles.length; j++) {
+              const dx = particles[i].x - particles[j].x;
+              const dy = particles[i].y - particles[j].y;
+              const distance = Math.sqrt(dx * dx + dy * dy);
+              
+              if (distance < 150) {
+                ctx.beginPath();
+                ctx.strokeStyle = `rgba(255, 255, 255, ${1 - distance/150})`;
+                ctx.lineWidth = 0.5;
+                ctx.moveTo(particles[i].x, particles[i].y);
+                ctx.lineTo(particles[j].x, particles[j].y);
+                ctx.stroke();
+              }
+            }
+          }
+        }
+        
+        init();
+        animate();
+      });
+    </script>
+</body>
+</html>

index.html

@@ -1,19 +1,342 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Partículas Interactivas con Brillo</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #0a1929, #152642, #1c2e4a);
+            color: #fff;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        
+        #particle-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            position: relative;
+            z-index: 1;
+        }
+        
+        header {
+            text-align: center;
+            padding: 2rem 0;
+        }
+        
+        h1 {
+            font-size: 3.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(to right, #032998, #005a20);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        }
+        
+        .subtitle {
+            font-size: 1.5rem;
+            margin-bottom: 2rem;
+            color: #e6f7ff;
+        }
+        
+        .content {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 2rem;
+            margin: 2rem 0;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+        }
+        
+        .features {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1.5rem;
+            justify-content: center;
+            margin: 2rem 0;
+        }
+        
+        .feature {
+            background: rgba(255, 255, 255, 0.15);
+            border-radius: 15px;
+            padding: 1.5rem;
+            width: 300px;
+            transition: transform 0.3s ease;
+        }
+        
+        .feature:hover {
+            transform: translateY(-5px);
+            background: rgba(255, 255, 255, 0.2);
+        }
+        
+        .feature h3 {
+            color: #005a20;
+            margin-bottom: 1rem;
+            font-size: 1.5rem;
+        }
+        
+        .instructions {
+            text-align: center;
+            margin-top: 3rem;
+            padding: 1.5rem;
+            background: rgba(3, 41, 152, 0.2);
+            border-radius: 15px;
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(3, 41, 152, 0.4); }
+            70% { box-shadow: 0 0 0 15px rgba(3, 41, 152, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(3, 41, 152, 0); }
+        }
+        
+        footer {
+            text-align: center;
+            margin-top: 3rem;
+            padding: 1.5rem;
+            color: #a8e6cf;
+            font-size: 0.9rem;
+        }
+        
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2.5rem;
+            }
+            
+            .subtitle {
+                font-size: 1.2rem;
+            }
+            
+            .feature {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <canvas id="particle-canvas"></canvas>
+    
+    <div class="container">
+        <header>
+            <h1>Partículas con Brillo</h1>
+            <p class="subtitle">Mueve el mouse para interactuar con las partículas luminosas</p>
+        </header>
+        
+        <div class="content">
+            <h2>Efecto de Partículas con Brillo</h2>
+            <p>Este efecto crea un sistema de partículas luminosas que reacciona al movimiento de tu cursor. Todas las partículas tienen un efecto de brillo y se conectan entre sí.</p>
+            
+            <div class="features">
+                <div class="feature">
+                    <h3>Brillo en Partículas</h3>
+                    <p>Todas las partículas tienen un efecto de brillo que las hace resaltar en la oscuridad.</p>
+                </div>
+                <div class="feature">
+                    <h3>Interacción en Tiempo Real</h3>
+                    <p>Las partículas responden inmediatamente al movimiento de tu mouse, creando un efecto visual dinámico.</p>
+                </div>
+                <div class="feature">
+                    <h3>Efecto de Repulsión</h3>
+                    <p>El cursor repele las partículas, creando un espacio vacío a su alrededor que sigue tu movimiento.</p>
+                </div>
+            </div>
+            
+            <div class="instructions">
+                <p>¡Mueve el mouse por la pantalla para ver las partículas reaccionar y brillar!</p>
+            </div>
+        </div>
+        
+        <footer>
+            <p>Creado con HTML5 Canvas y JavaScript | Efecto de partículas con brillo</p>
+        </footer>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const canvas = document.getElementById('particle-canvas');
+            const ctx = canvas.getContext('2d');
+            
+            // Ajustar el tamaño del canvas
+            function resizeCanvas() {
+                canvas.width = window.innerWidth;
+                canvas.height = window.innerHeight;
+            }
+            
+            window.addEventListener('resize', resizeCanvas);
+            resizeCanvas();
+            
+            // Configuración de partículas
+            const particles = [];
+            const particleCount = 120;
+            const mouse = {
+                x: undefined,
+                y: undefined,
+                radius: 70  // Radio de influencia del mouse
+            };
+            
+            // Obtener la posición del mouse
+            window.addEventListener('mousemove', (e) => {
+                mouse.x = e.x;
+                mouse.y = e.y;
+            });
+            
+            // Ocultar el mouse cuando sale de la ventana
+            window.addEventListener('mouseout', () => {
+                mouse.x = undefined;
+                mouse.y = undefined;
+            });
+            
+            // Colores para las partículas (azul, blanco, verde oscuro)
+            const colors = ['#032998', '#ffffff', '#005a20'];
+            
+            // Clase de partícula
+            class Particle {
+                constructor() {
+                    this.x = Math.random() * canvas.width;
+                    this.y = Math.random() * canvas.height;
+                    this.size = Math.random() * 4 + 1;
+                    this.speedX = Math.random() * 2 - 1;
+                    this.speedY = Math.random() * 2 - 1;
+                    this.color = colors[Math.floor(Math.random() * colors.length)];
+                    // Intensidad de brillo aleatoria
+                    this.glowIntensity = Math.random() * 15 + 5;
+                }
+                
+                update() {
+                    // Rebotar en los bordes
+                    if (this.x > canvas.width || this.x < 0) {
+                        this.speedX = -this.speedX;
+                    }
+                    if (this.y > canvas.height || this.y < 0) {
+                        this.speedY = -this.speedY;
+                    }
+                    
+                    // Mover partículas
+                    this.x += this.speedX;
+                    this.y += this.speedY;
+                    
+                    // Interacción con el mouse - REPULSIÓN
+                    if (mouse.x && mouse.y) {
+                        const dx = this.x - mouse.x;
+                        const dy = this.y - mouse.y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        
+                        // Si el mouse está lo suficientemente cerca, repeler la partícula
+                        if (distance < mouse.radius) {
+                            const angle = Math.atan2(dy, dx);
+                            const force = (mouse.radius - distance) / mouse.radius;
+                            
+                            // Aplicar fuerza de repulsión (alejarse del mouse)
+                            this.x += Math.cos(angle) * force * 10;
+                            this.y += Math.sin(angle) * force * 10;
+                        }
+                    }
+                }
+                
+                draw() {
+                    // Efecto de brillo para todas las partículas
+                    ctx.shadowColor = this.color;
+                    ctx.shadowBlur = this.glowIntensity;
+                    
+                    ctx.fillStyle = this.color;
+                    ctx.beginPath();
+                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                    ctx.fill();
+                    
+                    // Restablecer sombra para otros elementos
+                    ctx.shadowBlur = 0;
+                }
+            }
+            
+            // Crear partículas
+            function createParticles() {
+                for (let i = 0; i < particleCount; i++) {
+                    particles.push(new Particle());
+                }
+            }
+            
+            // Conectar partículas cercanas
+            function connectParticles() {
+                const maxDistance = 100;
+                for (let i = 0; i < particles.length; i++) {
+                    for (let j = i; j < particles.length; j++) {
+                        const dx = particles[i].x - particles[j].x;
+                        const dy = particles[i].y - particles[j].y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        
+                        if (distance < maxDistance) {
+                            // Cambiar el color de la línea según los colores de las partículas
+                            let lineColor = 'rgba(255, 255, 255, 0.1)';
+                            if (particles[i].color !== particles[j].color) {
+                                if ((particles[i].color === '#032998' && particles[j].color === '#ffffff') || 
+                                    (particles[i].color === '#ffffff' && particles[j].color === '#032998')) {
+                                    lineColor = 'rgba(3, 41, 152, 0.3)'; // Azul con blanco
+                                } else if ((particles[i].color === '#ffffff' && particles[j].color === '#005a20') || 
+                                           (particles[i].color === '#005a20' && particles[j].color === '#ffffff')) {
+                                    lineColor = 'rgba(0, 90, 32, 0.3)'; // Verde con blanco
+                                } else if ((particles[i].color === '#032998' && particles[j].color === '#005a20') || 
+                                           (particles[i].color === '#005a20' && particles[j].color === '#032998')) {
+                                    lineColor = 'rgba(3, 41, 152, 0.4)'; // Azul con verde
+                                }
+                            } else {
+                                // Mismo color
+                                if (particles[i].color === '#032998') {
+                                    lineColor = 'rgba(3, 41, 152, 0.2)';
+                                } else if (particles[i].color === '#005a20') {
+                                    lineColor = 'rgba(0, 90, 32, 0.2)';
+                                } else if (particles[i].color === '#ffffff') {
+                                    lineColor = 'rgba(255, 255, 255, 0.15)';
+                                }
+                            }
+                            
+                            ctx.beginPath();
+                            ctx.strokeStyle = lineColor;
+                            ctx.lineWidth = 0.7;
+                            ctx.moveTo(particles[i].x, particles[i].y);
+                            ctx.lineTo(particles[j].x, particles[j].y);
+                            ctx.stroke();
+                        }
+                    }
+                }
+            }
+            
+            // Animación
+            function animate() {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                
+                // Actualizar y dibujar partículas
+                for (let i = 0; i < particles.length; i++) {
+                    particles[i].update();
+                    particles[i].draw();
+                }
+                
+                // Conectar partículas
+                connectParticles();
+                
+                requestAnimationFrame(animate);
+            }
+            
+            createParticles();
+            animate();
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,176 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.createElement('canvas');
+    const background = document.getElementById('animated-background');
+    background.appendChild(canvas);
+    
+    canvas.style.position = 'absolute';
+    canvas.style.top = '0';
+    canvas.style.left = '0';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    
+    // Resize canvas to full window
+    function resizeCanvas() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    }
+    window.addEventListener('resize', resizeCanvas);
+    resizeCanvas();
+    
+    const ctx = canvas.getContext('2d');
+    
+    // Particle system
+    let particles = [];
+    let particleCount = 150;
+    let speed = 5;
+    let size = 5;
+    let effectType = 'cosmic';
+    
+    // Create particles
+    function createParticles() {
+        particles = [];
+        for (let i = 0; i < particleCount; i++) {
+            particles.push({
+                x: Math.random() * canvas.width,
+                y: Math.random() * canvas.height,
+                size: Math.random() * size + 1,
+                speedX: (Math.random() - 0.5) * speed,
+                speedY: (Math.random() - 0.5) * speed,
+                color: `hsl(${Math.random() * 360}, 70%, 60%)`,
+                angle: Math.random() * Math.PI * 2,
+                angleSpeed: (Math.random() - 0.5) * 0.02
+            });
+        }
+    }
+    
+    // Draw particles
+    function drawParticles() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        particles.forEach(p => {
+            // Update position
+            p.x += p.speedX;
+            p.y += p.speedY;
+            p.angle += p.angleSpeed;
+            
+            // Wrap around edges
+            if (p.x < 0) p.x = canvas.width;
+            if (p.x > canvas.width) p.x = 0;
+            if (p.y < 0) p.y = canvas.height;
+            if (p.y > canvas.height) p.y = 0;
+            
+            // Draw based on effect type
+            if (effectType === 'cosmic') {
+                drawCosmicParticle(p);
+            } else if (effectType === 'bubbles') {
+                drawBubbleParticle(p);
+            } else if (effectType === 'stars') {
+                drawStarParticle(p);
+            }
+        });
+        
+        requestAnimationFrame(drawParticles);
+    }
+    
+    function drawCosmicParticle(p) {
+        ctx.save();
+        ctx.translate(p.x, p.y);
+        ctx.rotate(p.angle);
+        
+        // Glow effect
+        const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, p.size * 2);
+        gradient.addColorStop(0, p.color);
+        gradient.addColorStop(1, 'transparent');
+        
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(0, 0, p.size * 2, 0, Math.PI * 2);
+        ctx.fill();
+        
+        // Core
+        ctx.fillStyle = p.color;
+        ctx.beginPath();
+        ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2);
+        ctx.fill();
+        
+        ctx.restore();
+    }
+    
+    function drawBubbleParticle(p) {
+        ctx.fillStyle = `rgba(255, 255, 255, ${p.size / 20})`;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.strokeStyle = `rgba(255, 255, 255, 0.3)`;
+        ctx.stroke();
+    }
+    
+    function drawStarParticle(p) {
+        const spikes = 5;
+        const outerRadius = p.size;
+        const innerRadius = p.size / 2;
+        
+        ctx.save();
+        ctx.translate(p.x, p.y);
+        ctx.rotate(p.angle);
+        
+        ctx.fillStyle = p.color;
+        ctx.beginPath();
+        
+        for (let i = 0; i < spikes * 2; i++) {
+            const radius = i % 2 === 0 ? outerRadius : innerRadius;
+            const angle = (i * Math.PI) / spikes;
+            ctx.lineTo(Math.cos(angle) * radius, Math.sin(angle) * radius);
+        }
+        
+        ctx.closePath();
+        ctx.fill();
+        
+        // Glow
+        ctx.shadowColor = p.color;
+        ctx.shadowBlur = 10;
+        ctx.fill();
+        
+        ctx.restore();
+    }
+    
+    // Change effect type
+    document.getElementById('change-effect').addEventListener('click', () => {
+        const effects = ['cosmic', 'bubbles', 'stars'];
+        const currentIndex = effects.indexOf(effectType);
+        effectType = effects[(currentIndex + 1) % effects.length];
+        createParticles();
+    });
+    
+    // Toggle controls panel
+    const controlsPanel = document.getElementById('controls-panel');
+    document.getElementById('toggle-controls').addEventListener('click', () => {
+        controlsPanel.style.transform = controlsPanel.style.transform === 'translateY(0px)' ? 
+            'translateY(100%)' : 'translateY(0)';
+    });
+    
+    // Update settings from controls
+    document.getElementById('particle-count').addEventListener('input', (e) => {
+        particleCount = parseInt(e.target.value);
+        createParticles();
+    });
+    
+    document.getElementById('speed').addEventListener('input', (e) => {
+        speed = parseInt(e.target.value);
+        particles.forEach(p => {
+            p.speedX = (Math.random() - 0.5) * speed;
+            p.speedY = (Math.random() - 0.5) * speed;
+        });
+    });
+    
+    document.getElementById('size').addEventListener('input', (e) => {
+        size = parseInt(e.target.value);
+        particles.forEach(p => {
+            p.size = Math.random() * size + 1;
+        });
+    });
+    
+    // Initialize
+    createParticles();
+    drawParticles();
+});

style.css

@@ -1,28 +1,74 @@
+
+/* Base styles */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Montserrat', sans-serif;
+    margin: 0;
+    padding: 0;
+    color: white;
+}
+
+/* Animation for floating elements */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Page transitions */
+.fade-in {
+    animation: fadeIn 1.5s ease-in-out;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .student-photo {
+        width: 180px;
+        height: 180px;
+    }
+    
+    .student-name {
+        font-size: 1.8rem;
+    }
+    
+    .major {
+        font-size: 1.2rem;
+    }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@media (max-width: 480px) {
+    .student-photo {
+        width: 150px;
+        height: 150px;
+    }
+    
+    .student-name {
+        font-size: 1.5rem;
+    }
 }