├── index.html ├── style.css ├── README.md └── script.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Papel picado encodedmabel 6 | 7 | 8 | 9 |
10 | 11 |

12 |

"Happy Birthday"

13 |

❤ MABEL ❤️ 14 |

15 |

16 | 17 | 18 | 19 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* by mabelolivera 2 | https://linktr.ee/mabelolivera10 3 | 4 | */ 5 | 6 | @import url("https://fonts.googleapis.com/css2?family=Asap&display=swap"); 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | box-sizing: border-box; 11 | } 12 | html, 13 | body { 14 | background: radial-gradient( 15 | circle farthest-corner, 16 | hsl(159, 95%, 8%), 17 | hsl(320deg, 100%, 2%) 100% 18 | ); 19 | overscroll-behavior-x: none; 20 | overscroll-behavior-y: none; 21 | } 22 | body { 23 | font-family: "Asap", sans-serif; 24 | position: relative; 25 | width: 100vw; 26 | min-height: 100vh; 27 | text-align: center; 28 | overflow-x: hidden; 29 | color: white; 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | } 34 | h1 { 35 | font-size: max(35px, 7vw); 36 | text-shadow: 1px 1px black; 37 | mix-blend-mode: difference; 38 | z-index: 1; 39 | margin-bottom: 10px; 40 | } 41 | canvas { 42 | -moz-user-select: none; 43 | -webkit-user-select: none; 44 | -ms-user-select: none; 45 | user-select: none; 46 | position: fixed; 47 | width: 100vw; 48 | height: 100vh; 49 | top: 0; 50 | left: 0; 51 | z-index: 0; 52 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # happybirthday-papel-picado 2 | 3 | ¡Hola! Soy [Mabel Olivera - @mabelolivera10]() y estoy encantada de conocerte. 4 | 5 | ## Acerca de mí👀 6 | Soy una persona apasionada por mi profesión, con una excelente capacidad de organización y facilidad para trabajar en equipo. Me considero altamente adaptable a diferentes entornos y siempre enfocada en alcanzar objetivos. Además, poseo conocimientos en diversos lenguajes de programación como Java, Visual.NET, PHP, entre otros. Tengo un gran interés en el desarrollo de software y el análisis de sistemas. 7 | 8 | 🌱 Actualmente, estoy enfocada en seguir aprendiendo y mejorando mis habilidades en distintos lenguajes de programación. 9 | 10 | ## Colaboración💞 11 | Estoy interesada en colaborar contigo en proyectos emocionantes y desafiantes. ¡Juntos podemos lograr grandes cosas! 12 | 13 | ## Contacto 📫 14 | Puedes encontrarme en mis redes sociales: 15 | 16 | - [Facebook](https://www.facebook.com/mabelquispeolivera/) 17 | - [Instagram](https://www.instagram.com/mabelolivera10/) 18 | - [TikTok](https://www.tiktok.com/@encodedmabel) 19 | - [YouTube](https://www.youtube.com/@encodedmabel) 20 | - [LinkedIn](https://www.linkedin.com/in/mabelquispeolivera/) 21 | - [Twitter](https://twitter.com/mabel_Q_O) 22 | - [CodeOpen](https://codepen.io/mabelolivera10) 23 | - [Sitio Web](https://encoded.pe/) 24 | 25 | ¡Espero poder conectarme contigo pronto y colaborar en futuros proyectos! 😊 26 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | "use strict"; 3 | import * as THREE from "three"; 4 | import { OrbitControls } from "three/addons/controls/OrbitControls.js"; 5 | 6 | console.clear(); 7 | 8 | (function () { 9 | const worldRadius = 5; 10 | const confettiSize = 0.07; 11 | const confettiNum = 3000; 12 | const rotateRange_x = Math.PI / 30; 13 | const rotateRange_y = Math.PI / 50; 14 | const speed_y = 0.01; 15 | const speed_x = 0.003; 16 | const speed_z = 0.005; 17 | 18 | let camera, scene, renderer, controls; 19 | let confettiMesh; 20 | const dummy = new THREE.Object3D(); 21 | const matrix = new THREE.Matrix4(); 22 | const color = new THREE.Color(); 23 | 24 | init(); 25 | 26 | function init() { 27 | // 28 | camera = new THREE.PerspectiveCamera( 29 | 35, 30 | window.innerWidth / window.innerHeight, 31 | 1, 32 | worldRadius * 3 33 | ); 34 | camera.position.z = worldRadius * Math.sqrt(2); 35 | 36 | 37 | scene = new THREE.Scene(); 38 | 39 | function getRandomColor() { 40 | let saturation = 100; 41 | let lightness = 50; 42 | const colors = [ 43 | "hsl(0, " + saturation + "%, " + lightness + "%)", 44 | "hsl(30, " + saturation + "%, " + lightness + "%)", 45 | "hsl(60, " + saturation + "%, " + lightness + "%)", 46 | "hsl(90, " + saturation + "%, " + lightness + "%)", 47 | "hsl(120, " + saturation + "%, " + lightness + "%)", 48 | "hsl(150, " + saturation + "%, " + lightness + "%)", 49 | "hsl(180, " + saturation + "%, " + lightness + "%)", 50 | "hsl(210, " + saturation + "%, " + lightness + "%)", 51 | "hsl(240, " + saturation + "%, " + lightness + "%)", 52 | "hsl(270, " + saturation + "%, " + lightness + "%)", 53 | "hsl(300, " + saturation + "%, " + lightness + "%)", 54 | "hsl(330, " + saturation + "%, " + lightness + "%)" 55 | ]; 56 | return colors[Math.floor(Math.random() * colors.length)]; 57 | //return color.setHex(0xffffff * Math.random()); 58 | } 59 | // 60 | const confettiGeometry = new THREE.PlaneGeometry( 61 | confettiSize / 2, 62 | confettiSize 63 | ); 64 | const confettiMaterial = new THREE.MeshBasicMaterial({ 65 | color: 0xffffff, 66 | side: THREE.DoubleSide 67 | }); 68 | confettiMesh = new THREE.InstancedMesh( 69 | confettiGeometry, 70 | confettiMaterial, 71 | confettiNum 72 | ); 73 | 74 | // set random position and rotation 75 | for (let i = 0; i < confettiNum; i++) { 76 | matrix.makeRotationFromEuler( 77 | new THREE.Euler( 78 | Math.random() * Math.PI, 79 | Math.random() * Math.PI, 80 | Math.random() * Math.PI 81 | ) 82 | ); 83 | matrix.setPosition( 84 | THREE.MathUtils.randFloat(-worldRadius, worldRadius), 85 | THREE.MathUtils.randFloat(-worldRadius, worldRadius), 86 | THREE.MathUtils.randFloat(-worldRadius, worldRadius) 87 | ); 88 | confettiMesh.setMatrixAt(i, matrix); 89 | confettiMesh.setColorAt(i, color.set(getRandomColor())); 90 | } 91 | scene.add(confettiMesh); 92 | // 93 | renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); 94 | renderer.setPixelRatio(window.devicePixelRatio); 95 | renderer.setSize(window.innerWidth, window.innerHeight); 96 | renderer.shadowMap.enabled = false; 97 | document.body.appendChild(renderer.domElement); 98 | // 99 | controls = new OrbitControls(camera, renderer.domElement); 100 | controls.target.y = 0.5; 101 | controls.autoRotate = true; //true 102 | controls.autoRotateSpeed = 2; 103 | controls.enableDamping = true; 104 | controls.enablePan = false; 105 | controls.minDistance = 1; 106 | controls.maxDistance = worldRadius * Math.sqrt(2); 107 | controls.minPolarAngle = 0; 108 | controls.maxPolarAngle = Math.PI / 2; 109 | controls.update(); 110 | // 111 | animate(); 112 | // 113 | window.addEventListener("resize", onWindowResize); 114 | } 115 | function onWindowResize() { 116 | camera.aspect = window.innerWidth / window.innerHeight; 117 | camera.updateProjectionMatrix(); 118 | renderer.setSize(window.innerWidth, window.innerHeight); 119 | } 120 | function animate() { 121 | requestAnimationFrame(animate); 122 | controls.update(); 123 | 124 | if (confettiMesh) { 125 | for (let i = 0; i < confettiNum; i++) { 126 | confettiMesh.getMatrixAt(i, matrix); 127 | matrix.decompose(dummy.position, dummy.quaternion, dummy.scale); 128 | 129 | dummy.position.y -= speed_y * ((i % 4) + 1); 130 | 131 | 132 | if (dummy.position.y < -worldRadius) { 133 | dummy.position.y = worldRadius; 134 | dummy.position.x = THREE.MathUtils.randFloat( 135 | -worldRadius, 136 | worldRadius 137 | ); 138 | dummy.position.z = THREE.MathUtils.randFloat( 139 | -worldRadius, 140 | worldRadius 141 | ); 142 | } else { 143 | 144 | if (i % 4 == 1) { 145 | dummy.position.x += speed_x; 146 | dummy.position.z += speed_z; 147 | } else if (i % 4 == 2) { 148 | dummy.position.x += speed_x; 149 | dummy.position.z -= speed_z; 150 | } else if (i % 4 == 3) { 151 | dummy.position.x -= speed_x; 152 | dummy.position.z += speed_z; 153 | } else { 154 | dummy.position.x -= speed_x; 155 | dummy.position.z -= speed_z; 156 | } 157 | } 158 | // rotation 159 | dummy.rotation.x += THREE.MathUtils.randFloat(0, rotateRange_x); 160 | dummy.rotation.z += THREE.MathUtils.randFloat(0, rotateRange_y); 161 | 162 | dummy.updateMatrix(); 163 | confettiMesh.setMatrixAt(i, dummy.matrix); 164 | } 165 | confettiMesh.instanceMatrix.needsUpdate = true; 166 | } 167 | renderer.render(scene, camera); 168 | } 169 | })(); --------------------------------------------------------------------------------