1const COLORS = { 2 WHITE: "#FFFFFF", 3 GREEN: "#C2E663", 4 YELLOW: "#F9F585", 5 ORANGE: "#F3D257", 6 RED: "#EFAE8C", 7 PINK: "#E86BA3", 8 BLUE: "#7BB7D6", 9 GOLD: "#DFC878" 10}; 11 12const TROPHIES = { 13 AWWWARDS: ( x, y, angle, href = null ) => ({ 14 type: "model", 15 url: "/trophies/awwwards-trophy.glb", 16 position: { x, y, z: 0.65 }, 17 rotation: { x: 0, y: angle, z: 0 }, 18 link: { 19 text: "view prize", 20 href 21 }, 22 sound: "falling" 23 }), 24 FWA_DAY: ( x, y, angle, href = null ) => ({ 25 type: "model", 26 url: "/trophies/fwa-trophy-day.glb", 27 position: { x, y, z: 0.65 }, 28 rotation: { x: 0, y: angle, z: 0 }, 29 link: { 30 text: "view prize", 31 href 32 }, 33 sound: "falling" 34 }), 35 FWA_MONTH: ( x, y, angle, href = null ) => ({ 36 type: "model", 37 url: "/trophies/fwa-trophy-month.glb", 38 position: { x, y, z: 0.65 }, 39 rotation: { x: 0, y: angle, z: 0 }, 40 link: { 41 text: "view prize", 42 href 43 }, 44 sound: "falling" 45 }), 46 CSS_DESIGN_DAY: ( x, y, angle, href = null ) => ({ 47 type: "model", 48 url: "/trophies/cssdesign-trophy-day.glb", 49 position: { x, y, z: 0.55 }, 50 rotation: { x: 0, y: angle, z: 0 }, 51 link: { 52 text: "view prize", 53 href 54 }, 55 sound: "falling" 56 }), 57 CSS_DESIGN_YEAR: ( x, y, angle, href = null ) => ({ 58 type: "model", 59 url: "/trophies/cssdesign-trophy-year.glb", 60 position: { x, y, z: 0.55 }, 61 rotation: { x: 0, y: angle, z: 0 }, 62 link: { 63 text: "view prize", 64 href 65 }, 66 sound: "falling" 67 }), 68 STRATEGIES: ( x, y, angle, href = null ) => ({ 69 type: "model", 70 url: "/trophies/strategy-trophy-grand-prix.glb", 71 position: { x, y, z: 0.39 }, 72 openScale: 1.5, 73 rotation: { x: 0, y: angle, z: 0 }, 74 link: { 75 text: "view prize", 76 href 77 }, 78 sound: "falling" 79 }) 80}; 81 82const SPACER = ( size ) => { 83 return { 84 type: "spacer", 85 size 86 }; 87}; 88 89const RANDOM = (...args) => { 90 const randomIndex = Math.floor(Math.random() * args.length); 91 return args[randomIndex]; 92}; 93 94const TITLE = ({ text, x = 0, y = 0, rotation = 0, openScale = 1, link = null }) => { 95 return { 96 type: "title", 97 text, 98 position: { x, y, z: 0 }, 99 rotation: { x: 0, y: rotation, z :0 }, 100 openScale, 101 mobileOpenScale: openScale * 0.5, 102 link 103 }; 104}; 105 106const EXTRUDED_TEXT = ({ text, fontSize, fontDepth, letterSpacing, wordSpacing, x, y, z, color, roughness = 1, metalness = 0, animate = true, immediate = false }) => { 107 return { 108 type: "extrudedText", 109 interactive: false, 110 text, 111 position: { x, y, z }, 112 rotation: { x: 0, y: 0, z: 0 }, 113 color, 114 fontSize, 115 fontDepth, 116 letterSpacing, 117 wordSpacing, 118 roughness, 119 metalness, 120 animate, 121 immediate 122 }; 123}; 124 125const POLAROID = ({ url, title, x, y, rotation, credits = null, link = null }) => { 126 return { 127 type: "polaroid", 128 url, 129 title, 130 position: { x, y, z: 0 }, 131 rotation: { x: 0, y: rotation, z: 0 }, 132 credits, 133 link 134 }; 135}; 136 137const POSTIT = ({ text, url, color, x, y, rotation, credits = null, link = null }) => { 138 return { 139 type: "postit", 140 text, 141 url, 142 color, 143 position: { x, y, z: 0 }, 144 rotation: { x: 0, y: rotation, z: 0 }, 145 credits, 146 link 147 } 148}; 149 150const PAGE = ({ text, x, y, rotation, link }) => { 151 return { 152 type: "page", 153 color: COLORS.WHITE, 154 text, 155 position: { x, y, z: 0 }, 156 rotation: { x: 0, y: rotation, z: 0 }, 157 link 158 }; 159}; 160 161const FOLDED_PAGE = ({ text, x, y, rotation, link }) => { 162 return { 163 type: "foldedPage", 164 color: COLORS.WHITE, 165 text, 166 position: { x, y, z: 0 }, 167 rotation: { x: 0, y: rotation, z: 0 }, 168 link 169 }; 170}; 171 172const CARD = ({ text, url, x, y, rotation, link = null }) => { 173 return { 174 type: "card", 175 position: { x, y, z: 0 }, 176 rotation: { x: 0, y: rotation, z: 0 }, 177 url, 178 text, 179 link 180 }; 181}; 182 183const MODEL = ({ url, position, rotation, openScale = 1, sound = "light-falling", animate = true, script, data, link = null, credits = null }) => { 184 return { 185 type: "model", 186 url, 187 position, 188 rotation, 189 openScale, 190 sound, 191 animate, 192 script, 193 data, 194 link, 195 credits 196 }; 197}; 198 199export default { 200 projects: [ 201 // START 202 { 203 title: "Home", 204 objects: [ 205 { 206 ...EXTRUDED_TEXT({ 207 text: "JORDAN", 208 fontSize: 0.7, 209 fontDepth: 0.25, 210 letterSpacing: 0.05, 211 wordSpacing: 1, 212 x: -2, 213 y: 0, 214 z: -0.1, 215 color: COLORS.WHITE, 216 immediate: true 217 }), 218 mobilePosition: { x: -1.2, y: 0, z: -0.1 } 219 }, 220 { 221 ...EXTRUDED_TEXT({ 222 text: "creative developer", 223 fontSize: 0.1, 224 fontDepth: 0.3, 225 letterSpacing: 0.086, 226 wordSpacing: 1, 227 x: -2, 228 y: 0.2, 229 z: -0.29, 230 color: COLORS.GOLD, 231 roughness: 0, 232 metalness: 1 233 }), 234 mobilePosition: { x: -1.2, y: 0.2, z: -0.29 } 235 }, 236 SPACER(0.2) 237 ] 238 }, 239 // COASTAL WORLD 240 { 241 title: "Coastal Community Bank â Coastal World", 242 objects: [ 243 TITLE({ 244 text: "Coastal\r\nWorld", 245 x: 1.1, 246 y: 0, 247 rotation: 0.1, 248 link: { 249 text: "try the game", 250 href: "https://coastalworld.com/" 251 } 252 }), 253 POLAROID({ 254 url: "/projects/coastal-world/photo.png", 255 title: "Hello World!", 256 x: -1.1, 257 y: -0.2, 258 rotation: -0.2, 259 credits: { 260 text: "Merci Michel", 261 href: "https://www.merci-michel.com" 262 } 263 }), 264 MODEL({ 265 url: "/personal/iphone.glb", 266 position: { x: 2.5, y: 2, z: 0.08 }, 267 rotation: { x: -Math.PI * 0.5, y: 0, z: 0.2 }, 268 animate: false, 269 openScale: 0.8, 270 script: "IPhone", 271 data: [ 272 { 273 title: "Nuages de larmes", 274 album: "Asunomie", 275 url: "/audio/musics/nuages-de-larmes.mp3", 276 color: "#00F" 277 }, 278 { 279 title: "Mii Bossa Nova", 280 album: "Suno's station", 281 url: "/audio/musics/mii-bossa-nova.mp3", 282 color: "#FF0" 283 }, 284 { 285 title: "Binary Boogie", 286 album: "Funky Asuno", 287 url: "/audio/musics/binary-boogie.mp3", 288 color: "#F0F" 289 }, 290 { 291 title: "Mii Bossa Nova 2", 292 album: "Suno's station", 293 url: "/audio/musics/mii-bossa-nova-2.mp3", 294 color: "#FF0" 295 }, 296 { 297 title: "Funky Galaxy", 298 album: "Also-Suno-Alto", 299 url: "/audio/musics/funky-galaxy.mp3", 300 color: "#0FF" 301 }, 302 { 303 title: "Let's Groove", 304 album: "Groovy Misuno", 305 url: "/audio/musics/lets-groove.mp3", 306 color: "#F00" 307 }, 308 { 309 title: "One Up", 310 album: "Low-Sunofi", 311 url: "/audio/musics/one-up.mp3", 312 color: "#456DA0" 313 }, 314 { 315 title: "Two Up", 316 album: "Low-Sunofi", 317 url: "/audio/musics/two-up.mp3", 318 color: "#456DA0" 319 } 320 ],
321 credits: { text: "iPhone 13 Pro by DatSketch â Creative Commons Attribution", href: "https://skfb.ly/o9BML" } 322 }), 323 PAGE({ 324 text: "That's the biggest project I've ever worked on: five developers collaborating on the same website â and when you see the final result, it was absolutely necessary! \r\n My part was building the physics engine, and it really pushed my skills. It's completely custom; the only external library I used was Mesh-BVH, while everything else was crafted specifically for the project. \r\n The entire physics system runs in a subthread: user events are sent to it, and the results are processed and sent back to the main thread. \r\n Without getting too deep into the technical details, it's safe to say this is one of the best websites of its era when you consider the graphics and physics â all achieved without requiring users to install a Unity or Unreal extension. \r\n We crafted a real banger and it was a very very cool moment!", 325 x: -2, 326 y: 2, 327 rotation: -0.1 328 }), 329 POLAROID({ 330 url: "/projects/coastal-world/boat.png", 331 title: "the floating boat", 332 x: -0.6, 333 y: 2, 334 rotation: 0.1, 335 credits: { 336 text: "Merci Michel", 337 href: "https://www.merci-michel.com" 338 } 339 }), 340 POLAROID({ 341 url: "/projects/coastal-world/car.png", 342 title: "the fasty car", 343 x: 0.7, 344 y: 2, 345 rotation: -0.1, 346 credits: { 347 text: "Merci Michel", 348 href: "https://www.merci-michel.com" 349 } 350 }), 351 POLAROID({ 352 url: "/projects/coastal-world/bike.png", 353 title: "the damn bike", 354 x: 1.15, 355 y: 3.65, 356 rotation: -0.5, 357 credits: { 358 text: "Merci Michel", 359 href: "https://www.merci-michel.com" 360 } 361 }), 362 POSTIT({ 363 text: "You can control those 3 \"vehicles\", each got dedicated physics and animations. \r\n Go try them!", 364 url: "/maps/postit/arrow-triple.png", 365 color: COLORS.YELLOW, 366 x: -0.01, 367 y: 3.3, 368 rotation: -0.15 369 }), 370 MODEL({ 371 url: "/personal/ducati-key.glb", 372 position: { x: -0.6, y: 4.3, z: 0 }, 373 rotation: { x: 0, y: -0.2, z: 0 }, 374 animate: false, 375 openScale: 0.8, 376 link: { 377 text: "Go for a ride", 378 href: "https://www.ducati.com/it/it/moto/streetfighter/streetfighter-v4" 379 } 380 }), 381 MODEL({ 382 url: "/projects/coastal-world/character.glb", 383 position: { x: -0.5, y: 5.5, z: 0.3 }, 384 rotation: { x: 0, y: 0.7, z: 0 }, 385 openScale: 2, 386 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" }, 387 sound: "plastic" 388 }), 389 CARD({ 390 text: "A lonnnng case study is on Medium!", 391 url: "/maps/medium-front.png", 392 x: -0.9, 393 y: 6.3, 394 rotation: -0.5, 395 link: { 396 text: "view case", 397 href: "https://mercimichel.medium.com/coastal-world-8f23b945823b" 398 } 399 }), 400 POSTIT({ 401 url: "/projects/coastal-world/draw-1.png", 402 color: COLORS.YELLOW, 403 x: -1.5, 404 y: 5.2, 405 rotation: -0.15, 406 credits: { 407 text: "Merci Michel", 408 href: "https://www.merci-michel.com" 409 } 410 }), 411 POSTIT({ 412 url: "/projects/coastal-world/draw-2.png", 413 color: COLORS.YELLOW, 414 x: 0.3, 415 y: 5.8, 416 rotation: 0.15, 417 credits: { 418 text: "Merci Michel", 419 href: "https://www.merci-michel.com" 420 } 421 }), 422 TROPHIES.FWA_DAY(2.2, 5, -0.9, "https://thefwa.com/cases/coastal-world"), 423 TROPHIES.FWA_MONTH(-2.8, 6.5, 0.5, "https://thefwa.com/cases/coastal-world"), 424 TROPHIES.AWWWARDS(-2.2, 6, 1.1, "https://www.awwwards.com/sites/coastal-world"), 425 TROPHIES.CSS_DESIGN_DAY(2.3, 6.1, -1.1, "https://www.cssdesignawards.com/sites/coastal-world/41762/"), 426 TROPHIES.CSS_DESIGN_YEAR(2.4, 6.8, -0.3, "https://www.cssdesignawards.com/sites/coastal-world/41762/") 427 ] 428 }, 429 // LACOSTE DRAW IT YOURSELF 430 { 431 title: "Lacoste â Draw it yourself", 432 objects: [ 433 TITLE({ 434 text: "Lacoste\r\nDraw it\r\nyourself", 435 x: -1.2, 436 y: 0, 437 rotation: 0.2, 438 link: { 439 text: "customize yours", 440 href: "https://www.draw-your-polo.lacoste.com/fr/" 441 } 442 }), 443 POSTIT({ 444 text: "It's kinda amazing but the polo was sold with those special color pens...", 445 url: "/maps/postit/arrow-bottom-left.png", 446 color: COLORS.ORANGE, 447 x: 0.1, 448 y: 1.8, 449 rotation: -0.15 450 }), 451 POSTIT({ 452 text: "...Which you use to draw on the polo itself! \r\n The ink is washable so you can customize it different everytimes!", 453 url: "/maps/postit/arrow-bottom-right.png", 454 color: COLORS.RED, 455 x: 0.3, 456 y: 3, 457 rotation: 0.15 458 }), 459 MODEL({ 460 url: "/projects/lacoste-drawityourself/polo.glb", 461 position: { x: 3.5, y: 2.5, z: 0.24 }, 462 rotation: { x: -Math.PI * 0.5, y: 0, z: 1.1 }, 463 openScale: 0.35, 464 animate: false, 465 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" } 466 }), 467 MODEL({ 468 url: "/projects/lacoste-drawityourself/pen.glb", 469 position: { x: -1.3, y: 1.3, z: 0 }, 470 rotation: { x: 0, y: -3.2, z: 0 }, 471 script: "ColorPen", 472 data: "green", 473 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" } 474 }), 475 MODEL({ 476 url: "/projects/lacoste-drawityourself/pen.glb", 477 position: { x: -1.05, y: 1.8, z: 0 }, 478 rotation: { x: 0, y: -0.4, z: 0 }, 479 script: "ColorPen", 480 data: "blue", 481 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" } 482 }), 483 MODEL({ 484 url: "/projects/lacoste-drawityourself/pen.glb", 485 position: { x: -1.3, y: 2.1, z: 0 }, 486 rotation: { x: 0, y: -0.2, z: 0 }, 487 script: "ColorPen", 488 data: "yellow", 489 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" } 490 }), 491 MODEL({ 492 url: "/projects/lacoste-drawityourself/pen.glb", 493 position: { x: -0.8, y: 2.5, z: 0 }, 494 rotation: { x: 0, y: 0.1, z: 0 }, 495 script: "ColorPen", 496 data: "red", 497 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" }, 498 }), 499 TROPHIES.FWA_DAY(-1.6, 3, -0.5, "https://thefwa.com/cases/lacoste-draw-it-yourself"), 500 TROPHIES.AWWWARDS(2.2, 4.2, -1.4, "https://www.awwwards.com/sites/lacoste-draw-it-yourself-1"), 501 TROPHIES.CSS_DESIGN_DAY(-2.3, 3.5, 1.1, "https://www.cssdesignawards.com/sites/lacoste-draw-it-yourself/42225/"), 502 FOLDED_PAGE({ 503 text: "I am very proud of those prizes cause I crafted the whole WebGL experience by hands (and keyboard) and I learnt a ton doing it! It was challenging and when it was finally time to go live it was a phenomenal relief.", 504 x: -1.1, 505 y: 4, 506 rotation: 0.3 507 }), 508 POLAROID({ 509 url: "/projects/lacoste-drawityourself/photo.png", 510 title: "My creation", 511 x: 0.3, 512 y: 4.5, 513 rotation: -0.4 514 }), 515 CARD({ 516 text: "A complete case study of all tips and tricks is available! XOXO", 517 url: "/maps/medium-front.png", 518 x: -1.4, 519 y: 5.5, 520 rotation: 2, 521 link: { 522 text: "view case", 523 href: "https://mercimichel.medium.com/lacoste-draw-it-yourself-case-study-15635fa2f9d7" 524 } 525 }), 526 MODEL({ 527 url: "/personal/gopro.glb", 528 position: { x: 1.4, y: 5.3, z: 0.22 }, 529 rotation: { x: 0, y: -1, z: 0 }, 530 animate: false, 531 openScale: 1.5, 532 script: "GoProCamera", 533 credits: { text: "GOPRO Hero 13 BLACK Configcars / maxipub â Creative
533Commons Attribution.", href: "https://skfb.ly/prrsV" } 534 }) 535 ] 536 }, 537 // BOUCHERON QUATRE 538 { 539 title: "Boucheron â Quatre", 540 objects: [ 541 TITLE({ 542 text: "BOUCHERON\r\nQUATRE", 543 x: 0.5, 544 y: 0, 545 rotation: -0.1, 546 link: { 547 text: "try the game", 548 href: "https://quatre.boucheron.com/" 549 } 550 }), 551 TROPHIES.FWA_DAY(2, 1.8, -1.1, "https://thefwa.com/cases/boucheron-quatre-20th-anniversary"), 552 TROPHIES.FWA_MONTH(1.5, 1, -1, "https://thefwa.com/cases/boucheron-quatre-20th-anniversary"), 553 MODEL({ 554 url: "/projects/boucheron-quatre/ring.glb", 555 position: { x: -1, y: 1, z: 0.05 }, 556 rotation: { x: 0, y: 0, z: 0 }, 557 openScale: 4, 558 animate: false, 559 script: "BoucheronRing", 560 data: 0, 561 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" } 562 }), 563 MODEL({ 564 url: "/projects/boucheron-quatre/ring.glb", 565 position: { x: -1.2, y: 1, z: 0.1 }, 566 rotation: { x: 0, y: 0, z: Math.PI * 0.1 }, 567 openScale: 4, 568 animate: false, 569 script: "BoucheronRing", 570 data: 1, 571 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" } 572 }), 573 MODEL({ 574 url: "/projects/boucheron-quatre/ring.glb", 575 position: { x: -1.1, y: 1.3, z: 0.05 }, 576 rotation: { x: 0, y: 0, z: 0 }, 577 openScale: 4, 578 script: "BoucheronRing", 579 data: 2, 580 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" }, 581 sound: "ring" 582 }), 583 POSTIT({ 584 text: "\"Quatre\" means four. \r\n Four rings, \r\n One jewel, \r\n Twenty years, \r\n Twelve mini-games, \r\n One celebration!", 585 color: COLORS.YELLOW, 586 x: 0.3, 587 y: 1.5, 588 rotation: -0.15 589 }), 590 MODEL({ 591 url: "/projects/boucheron-quatre/ring.glb", 592 position: { x: 1.1, y: 1.7, z: 0.05 }, 593 rotation: { x: 0, y: 0, z: 0 }, 594 openScale: 4, 595 script: "BoucheronRing", 596 data: 3, 597 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" }, 598 sound: "ring" 599 }), 600 TROPHIES.AWWWARDS(-1.5, 2.5, 1, "https://www.awwwards.com/sites/quatre-20th-anniversary"), 601 POSTIT({ 602 text: "Each jewel is made of 4 parts: \r\n - Grosgrain \r\n - Diamound line \r\n - Clou de Paris \r\n - Double Godron", 603 url: "/maps/postit/arrow-bottom-right.png", 604 color: COLORS.WHITE, 605 x: -1.5, 606 y: 3.5, 607 rotation: 0.25 608 }), 609 MODEL({ 610 url: "/projects/boucheron-quatre/ring-1.glb", 611 position: { x: -0.85, y: 2.9, z: 0.01 }, 612 rotation: { x: 0, y: 0, z: 0 }, 613 openScale: 4, 614 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" }, 615 sound: "coin" 616 }), 617 MODEL({ 618 url: "/projects/boucheron-quatre/ring-3.glb", 619 position: { x: -0.65, y: 3.2, z: 0.01 }, 620 rotation: { x: 0, y: 0, z: 0 }, 621 openScale: 4, 622 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" }, 623 sound: "coin" 624 }), 625 MODEL({ 626 url: "/projects/boucheron-quatre/ring-2.glb", 627 position: { x: -0.75, y: 3.5, z: 0.01 }, 628 rotation: { x: 0, y: 0, z: 0 }, 629 openScale: 4, 630 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" }, 631 sound: "coin" 632 }), 633 MODEL({ 634 url: "/projects/boucheron-quatre/ring-4.glb", 635 position: { x: -0.6, y: 3.8, z: 0.04 }, 636 rotation: { x: 0, y: 0, z: 0 }, 637 openScale: 4, 638 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" }, 639 sound: "coin" 640 }), 641 POLAROID({ 642 url: "/projects/boucheron-quatre/photo.png", 643 title: "Rings shrug top", 644 x: 0.4, 645 y: 3, 646 rotation: -0.2, 647 credits: { 648 text: "Boucheron", 649 href: "https://www.boucheron.com/" 650 } 651 }), 652 POSTIT({ 653 text: "If that shrug top really exists, it's worth more than a million... \r\n MIL-LI-ION!", 654 url: "/maps/postit/arrow-top-left.png", 655 color: COLORS.PINK, 656 x: 1.5, 657 y: 3.5, 658 rotation: 0.25 659 }), 660 MODEL({ 661 url: "/personal/lol-box.glb", 662 position: { x: 2.8, y: 2.2, z: 0.25 }, 663 rotation: { x: 0, y: -0.5, z: 0 }, 664 openScale: 2, 665 animate: false, 666 credits: { text: "Hextech Chest by TimothyWasTaken â Creative
666Commons Attribution", href: "https://skfb.ly/otRHy" } 667 }), 668 POSTIT({ 669 text: "You recognize this box? \r\n So we both know you've been through a long process of introspection...", 670 url: "/maps/postit/arrow-top-left.png", 671 color: COLORS.GREEN, 672 x: 3, 673 y: 3.2, 674 rotation: -0.8 675 }) 676 ] 677 }, 678 // MONTBLANC LEGEND BLUE 679 { 680 title: "Montblanc â Legend Blue", 681 objects: [ 682 TITLE({ 683 text: "MONTBLANC\r\nLEGEND\r\nBLUE", 684 x: -0.5, 685 y: 0, 686 rotation: 0.2, 687 link: { 688 text: "Try the game", 689 href: "https://therun.montblanclegend.com/" 690 } 691 }), 692 MODEL({ 693 url: "/projects/interparfum-blue/circus.glb", 694 position: { x: -1.8, y: 2.2, z: 0.4 }, 695 rotation: { x: 0, y: -0.5, z: 0 }, 696 animate: false, 697 credits: { text: "Merci Michel", href: "https://www.merci-michel.com" } 698 }), 699 POLAROID({ 700 url: "/projects/interparfum-blue/photo.png", 701 title: "Seizure tunnel", 702 x: 1.25, 703 y: 1, 704 rotation: -0.1 705 }), 706 POLAROID({ 707 url: "/projects/interparfum-blue/rings.png", 708 title: "I'm speed!", 709 x: -0.4, 710 y: 1.3, 711 rotation: 0.4 712 }), 713 FOLDED_PAGE({ 714 text: "One week project, goal was to adapt the same experience already made for Montblanc Red but in blue. \r\n Only huge change was the ball behavior and the growing and glowing trail. \r\n It still managed to win some awards...", 715 x: 0.7, 716 y: 2.5, 717 rotation: -0.3 718 }), 719 POSTIT({ 720 text: "Weirdest \"vehicle\" in the industry: a ball in a ring? \r\n No further comment!", 721 url: "/maps/postit/arrow-top-left.png", 722 color: COLORS.BLUE, 723 x: -0.8, 724 y: 2.7, 725 rotation: -0.2 726 }), 727 TROPHIES.AWWWARDS(2, 2, -1, "https://www.awwwards.com/sites/the-run-interparfums"), 728 TROPHIES.FWA_DAY(2.2, 3.5, 0.5, "https://thefwa.com/cases/the-run-interparfums"), 729 MODEL({ 730 url: "/personal/airpods.glb", 731 position: { x: 0.5, y: 4, z: 0.12 }, 732 rotation: { x: -Math.PI * 0.5, y: 0, z: 1.1 }, 733 animate: false, 734 script: "Airpods", 735 credits: { text: "AirPods Pro by JY_JY_ â Creative Commons Attribution", href: "https://skfb.ly/6VYMN" } 736 }), 737 POSTIT({ 738 text: "Dont panic, it's a CS2 game props! \r\n \r\n KEEP CALM \r\n AND RUSH B \r\n BLYAT!", 739 url: "/maps/postit/cs-grafiti.png", 740 color: COLORS.YELLOW, 741 x: -3, 742 y: 4, 743 rotation: 0.5 744 }), 745 MODEL({ 746 url: "/personal/cs2-bomb.glb", 747 position: { x: -4, y: 3, z: 0.25 }, 748 rotation: { x: -Math.PI * 0.5, y: 0, z: 0.5 }, 749 animate: false, 750 credits: { text: "Counter Strike's bomb by Alex â Creative Commons Attribution", href: "https://skfb.ly/oPA9F" } 751 }) 752 ] 753 }, 754 // CHANEL FACTORY 5 755 { 756 title: "Chanel â Factory 5", 757 objects: [ 758 TITLE({ 759 text: "CHANEL\r\nFACTORY 5", 760 x: 0.2, 761 y: 0, 762 rotation: -0.2, 763 openScale: 0.8, 764 link: { 765 text: "site offline" 766 } 767 }), 768 MODEL({ 769 url: "/projects/chanel-factory/surprise.glb", 770 position: { x: -3.5, y: 3, z: 0.2 }, 771 rotation: { x: -Math.PI * 0.47, y: 0, z: 0.6 }, 772 openScale: 0.4, 773 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" }, 774 sound: "falling" 775 }), 776 MODEL({ 777 url: "/projects/chanel-factory/perfume.glb", 778 position: { x: 2, y: 0, z: 0.42 }, 779 rotation: { x: 0, y: -1, z: 0 }, 780 animate: false, 781 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" } 782 }), 783 PAGE({ 784 text: "Certainly my bigest achievment yet! \r\n It was for the anniversary of Chanel N°5, a limited edition of famous items were made in a \"factory style\" and everybody lucky enough could buy it online or in a pop-up store. \r\n We were a huge team of 4 peoples with Paul Grubber, David Letourneau and Nicolas Ballu to produce 5 chapters of pure WebGL! \r\n The experience was to scroll through a super clean factory making those products in a fanciful way. \r\n We've spent hours of research and development to find a way to pack a lot of animated 3D models... To make it quick, scenes were made of animated \"empties\" (it's here but it's only a point in space) and their matrices were used to move real prefabs in instanced meshes to save memory and draw calls (it certainly only talk to devs, sorry). \r\n Another thing was to analyse device performances and reduce qual
784ity step by step to match the 60 fps minimum even on those damn low-cost Androids (let me hate them). \r\n The amount of work made in such a small period of time was insane, I learnt a lot in many way, even on myself. \r\n \r\n It's certainly going to be a key memory of my early work.", 785 x: 1, 786 y: 2, 787 rotation: 0.2 788 }), 789 POLAROID({ 790 url: "/projects/chanel-factory/photo-2.png", 791 title: "Body Cream", 792 x: 2.6, 793 y: 1, 794 rotation: -0.3, 795 credits: { 796 text: "Chanel x Mazarine", 797 href: "https://www.mazarine.com/projects/chanel-factory-5" 798 } 799 }), 800 POSTIT({ 801 text: "Despite being high quality, you are not ready for the price...", 802 url: "/maps/postit/arrow-bottom-left.png", 803 color: COLORS.WHITE, 804 x: -0.3, 805 y: 2.5, 806 rotation: 0.1 807 }), 808 MODEL({ 809 url: "/projects/chanel-factory/gourd.glb", 810 position: { x: -2, y: 0, z: 0.8 }, 811 rotation: { x: 0, y: 0.55, z: 0 }, 812 animate: false, 813 openScale: 0.9, 814 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" } 815 }), 816 TROPHIES.STRATEGIES(-2, 1, 0.3, "https://www.strategies.fr/creations/mazarine-creative-intelligence-pour-chanel-parfums-beaute-pour-chanel-ndeg5-chanel-factory-5"), 817 MODEL({ 818 url: "/projects/chanel-factory/body-cream.glb", 819 position: { x: -1, y: 1.5, z: 0.08 }, 820 rotation: { x: -Math.PI * 0.55, y: 0, z: 1.1 }, 821 animate: false, 822 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" } 823 }), 824 MODEL({ 825 url: "/projects/chanel-factory/body-lotion.glb", 826 position: { x: -2.2, y: 2.5, z: 0.52 }, 827 rotation: { x: 0, y: 0.5, z: 0 }, 828 animate: false, 829 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" } 830 }), 831 MODEL({ 832 url: "/projects/chanel-factory/body-lotion.glb", 833 position: { x: -1.6, y: 3.1, z: 0.12 }, 834 rotation: { x: -Math.PI * 0.5, y: 0, z: -1.1 }, 835 animate: false, 836 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" } 837 }), 838 MODEL({ 839 url: "/projects/chanel-factory/body-oil.glb", 840 position: { x: 3, y: 3.8, z: 0.68 }, 841 rotation: { x: 0, y: 0, z: 0 }, 842 animate: false, 843 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" } 844 }), 845 MODEL({ 846 url: "/projects/chanel-factory/eau.glb", 847 position: { x: 2.2, y: 3.2, z: 0.55 }, 848 rotation: { x: 0, y: -1, z: 0 }, 849 animate: false, 850 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" } 851 }), 852 MODEL({ 853 url: "/projects/chanel-factory/perfume-blister.glb", 854 position: { x: 2, y: 5, z: 0.18 }, 855 rotation: { x: -Math.PI * 0.5, y: 0, z: 0.5 }, 856 animate: false, 857 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" } 858 }), 859 MODEL({ 860 url: "/projects/chanel-factory/purse-spray.glb", 861 position: { x: -2, y: 4, z: 0.07 }, 862 rotation: { x: -Math.PI * 0.5, y: 0, z: -0.5 }, 863 openScale: 1.5, 864 animate: false, 865 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" } 866 }), 867 MODEL({ 868 url: "/projects/chanel-factory/reload.glb", 869 position: { x: 1.4, y: 3.8, z: 0.05 }, 870 rotation: { x: -Math.PI * 0.5, y: 0, z: 1.5 }, 871 openScale: 1.5, 872 animate: false, 873 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" } 874 }), 875 MODEL({ 876 url: "/projects/chanel-factory/soap.glb", 877 position: { x: 0.5, y: 4.2, z: 0.08 }, 878 rotation: { x: 0, y: 1, z: 0 }, 879 openScale: 1.5, 880 credits: { text: "Chanel x Mazarine", href: "https://www.mazarine.com/projects/chanel-factory-5" }, 881 sound: "light-falling" 882 }), 883 POLAROID({ 884 url: "/projects/chanel-factory/photo-1.png", 885 title: "THE robot arm", 886 x: -0.8, 887 y: 4.3, 888 rotation: -0.3, 889 credits: { 890 text: "Chanel x Mazarine", 891 href: "https://www.mazarine.com/projects/chanel-factory-5" 892 } 893 }), 894 POSTIT({ 895 text: "That goofy mechanical arm was the real star of the show.", 896 url: "/maps/postit/arrow-top-left.png", 897 color: COLORS.WHITE, 898 x: 0.35, 899 y: 5.2, 900 rotation: 0.1 901 }) 902 ] 903 }, 904 // Take over 905 { 906 title: "Mazarine â Take Over", 907 objects: [ 908 TITLE({ 909 text: "MAZARINE\r\nTAKE OVER", 910 x: -0.3, 911 y: 0, 912 rotation: 0.2, 913 link: { 914 text: "view experience", 915 href: "https://www.youtube.com/watch?v=0aQ1ORX_rUw" 916 } 917 }), 918 MODEL({ 919 url: "/projects/mazarine-takeover/monolith.glb", 920 position: { x: 2, y: 1, z: 1 }, 921 rotation: { x: 0, y: 1, z: 0 }, 922 openScale: 0.8, 923 credits: { text: "Mazarine Creative Intelligence" }, 924 script: "ScreenMonolith", 925 data: "/projects/mazarine-takeover/glitch.mp4", 926 animate: false, 927 link: { 928 text: "view full xp", 929 href: "https://youtu.be/0aQ1ORX_rUw" 930 } 931 }), 932 TROPHIES.STRATEGIES(2, 2.2, -0.8, "https://www.strategies.fr/creations/mazarine-en-interne-takeover"), 933 POSTIT({ 934 text: "The real Monolith was above 2 meters tall so for obvious reasons, this one is smaller...", 935 url: "/maps/postit/arrow-top-right.png", 936 color: COLORS.RED, 937 x: 1.2, 938 y: 1.7, 939 rotation: 0.3 940 }), 941 POLAROID({ 942 url: "/projects/mazarine-takeover/photo-1.png", 943 title: "Screen matrices", 944 x: -0.2, 945 y: 1.3, 946 rotation: -0.3 947 }), 948 POSTIT({ 949 text: "The whole screen is a composition of maaany small and seemless screens!", 950 url: "/maps/postit/arrow-top-right.png", 951 color: COLORS.YELLOW, 952 x: -1.5, 953 y: 1.8, 954 rotation: -0.1 955 }), 956 FOLDED_PAGE({ 957 text: "Lionel Orsini and I had to do something cutting-edge for the peri
957od (2019), having an audio conversation in real-time with an AI... It was a pain in the ass coding all that stuff, but when we met the final product... mamamia! It was wonderful! The floor and ceiling were mirrors, making it an infinite screen... \r\n The music, the people â it was joyful.", 958 x: -0.8, 959 y: 3, 960 rotation: 0.3, 961 link: { 962 text: "Lionel's portfolio", 963 href: "https://www.lionelorsini.fr/" 964 } 965 }), 966 POLAROID({ 967 url: "/projects/mazarine-takeover/photo-3.png", 968 title: "Mirror flooring/ceiling", 969 x: 0.8, 970 y: 3, 971 rotation: -0.1, 972 link: { 973 text: "youtube video", 974 href: "https://youtube.com/shorts/f_Hdu86c0r8" 975 } 976 }), 977 POSTIT({ 978 text: "It was mounted in 2 days, first the screen, then the mirrors room.", 979 url: "/maps/postit/arrow-bottom-left.png", 980 color: COLORS.WHITE, 981 x: -0.3, 982 y: 4.1, 983 rotation: 0.2 984 }), 985 POLAROID({ 986 url: "/projects/mazarine-takeover/photo-4.png", 987 title: "Building the giant", 988 x: -1.2, 989 y: 5, 990 rotation: 0.5, 991 link: { 992 text: "youtube video", 993 href: "https://youtube.com/shorts/7OLGAjmaCn8" 994 } 995 }), 996 POLAROID({ 997 url: "/projects/mazarine-takeover/photo-2.png", 998 title: "Inside the beast", 999 x: -2.5, 1000 y: 3.2, 1001 rotation: 0.2, 1002 link: { 1003 text: "youtube video", 1004 href: "https://youtube.com/shorts/r0TARHGMtO0" 1005 } 1006 }), 1007 POSTIT({ 1008 text: "We had fun and that prize was cool on the desk! Whoop whoop!", 1009 url: "/maps/postit/arrow-top-left.png", 1010 color: COLORS.YELLOW, 1011 x: 2.9, 1012 y: 2.6, 1013 rotation: -0.1 1014 }), 1015 MODEL({ 1016 url: "/personal/daft-punk-cd.glb", 1017 position: { x: 2, y: 3.5, z: 0.04 }, 1018 rotation: { x: Math.PI * 0.5, y: 0, z: 0.3 }, 1019 animate: false 1020 }) 1021 ] 1022 }, 1023 // END 1024 { 1025 title: "End", 1026 objects: [ 1027 EXTRUDED_TEXT({ 1028 text: "You've reached the end", 1029 fontSize: 0.3, 1030 fontDepth: 0.25, 1031 letterSpacing: 0.05, 1032 wordSpacing: 0.2, 1033 x: -1.9, 1034 y: 2, 1035 z: -0.1, 1036 color: COLORS.WHITE, 1037 animate: false 1038 }), 1039 EXTRUDED_TEXT({ 1040 text: "Thanks for watching", 1041 fontSize: 0.1, 1042 fontDepth: 0.3, 1043 letterSpacing: 0.086, 1044 wordSpacing: 1.5, 1045 x: -1.15, 1046 y: 2.2, 1047 z: -0.29, 1048 color: COLORS.GOLD, 1049 roughness: 0, 1050 metalness: 1, 1051 animate: false 1052 }), 1053 POSTIT({ 1054 text: "I am freelancer, \r\n feel free to contact me on linkedin for any type of work!", 1055 color: COLORS.YELLOW, 1056 x: 0.5, 1057 y: 3, 1058 rotation: -0.15, 1059 link: { 1060 text: "contact me", 1061 href: "https://www.linkedin.com/in/jordandelcros/" 1062 } 1063 }) 1064 ] 1065 } 1066 ], 1067 loadingMessages: [ 1068 "Collecting unicorn dust", 1069 "Waking up hamsters to power the server", 1070 "Reticulating splines⦠whatever that means", 1071 "Whispering sweet nothings to the server", 1072 "Summoning good vibes", 1073 "Performing a tiny loading dance", 1074 "Calculating the meaning of life", 1075 "42", 1076 "Chasing stray electrons", 1077 "Bribing the server with cookies", 1078 "Distracting bugs with shiny objects", 1079 "Syncing with parallel universes", 1080 "Feeding imaginary dragons", 1081 "Refreshing progress bar by hand", 1082 "Making pixels fall into place", 1083 "Reading the terms and conditions", 1084 "Assembling code from spare parts", 1085 "Charging our loading beam", 1086 "Testing your patience", 1087 "Meditating with data monks", 1088 "Brewing digital coffee", 1089 "Teleporting data through wormholes", 1090 "Convincing electrons to move faster", 1091 "Simulating speed", 1092 "Loading but make it fashion", 1093 "Warming up the loading llamas", 1094 "Decoding user satisfaction levels", 1095 "Spinning the wheel of fortune", 1096 "Dusting off the database", 1097 "Counting to infinity (just a bit)", 1098 "Spooling spaghetti code", 1099 "Preparing unnecessary animations", 1100 "Knitting the web together", 1101 "Making the cloud fluffier", 1102 "Taming wild if-statements", 1103 "Turning caffeine into progress", 1104 "Looking busy", 1105 "Hacking the mainframe (not really)", 1106 "Converting sarcasm into speed", 1107 "Letting AI overthink things", 1108 "Blending ones and zeroes", 1109 "Holding a loading intervention", 1110 "Sorting the alphabet", 1111 "Uploading good karma", 1112 "Petting the digital doggo", 1113 "Blinking twice to load faster", 1114 "Baking cookies in cyberspace", 1115 "Imagining we're done already", 1116 "Caching bad jokes", 1117 "Downloading more download", 1118 "Avoiding unnecessary metaphors", 1119 "Pretending itâs almost ready", 1120 "Recycling old bytes", 1121 "Smoothing out digital wrinkles", 1122 "Juggling server requests", 1123 "Herding virtual cats", 1124 "Searching for the last semicolon", 1125 "Distracting you from waiting", 1126 "Rebooting reality", 1127 "Taking a quantum nap", 1128 "Checking if the chicken came first", 1129 "Poking servers with a stick", 1130 "Offering snacks to the data gods", 1131 "Debugging in interpretive dance", 1132 "Trying to remember the password", 1133 "Filtering unnecessary seriousness", 1134 "Donât worry it will end", 1135 "Distracted by a squirrel", 1136 "Defragmenting imagination", 1137 "Aligning the stars", 1138 "Performing ritual loading chant", 1139 "Maybe consider a better connexion", 1140 "Applying sunscreen to the UI", 1141 "Inventing reasons to take longer", 1142 "Polishing our loading smile", 1143 "Vacuuming digital dust bunnies", 1144 "Reading unread emails (help)", 1145 "Double-checking if weâre sure", 1146 "Building suspense", 1147 "Fixing things that werenât broken", 1148 "Upgrading the upgrade", 1149 "Pouring more RAM into the engine", 1150 "Stretching out the ones and zeroes", 1151 "Playing hide and seek with data", 1152 "Counting backwards from Ï", 1153 "Beating level 99 of the loading boss", 1154 "Remapping the route to success", 1155 "Casting spells on CSS", 1156 "Doodling in the margins of code", 1157 "Waiting for inspiration", 1158 "Pretending this is productive", 1159 "Moonwalking through JavaScript", 1160 "Encrypting cat videos", 1161 "Kicking CLU's ass", 1162 "Rewriting history (briefly)", 1163 "Distracting you from noticing the delay", 1164 "Making sure everything is maybe okay", 1165 "Dusting off our best code jokes", 1166 "Do you want a coffee⦠script", 1167 "Done pretending weâre not done" 1168 ] 1169}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.