brunosimon · lucas-mrmco · Feb 1, 2023 · Feb 2, 2023 · Feb 2, 2023 · Mar 13, 2023
diff --git a/license.md b/license.md
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Bruno SIMON
+Copyright (c) 2019 Lucas MORAMARCO
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/readme.md b/readme.md
@@ -1,4 +1,8 @@
-# Folio 2019
+# Portfolio 2023 Mode exploration
+
+Vous voulez visualiser mon portfolio de différentes façons ?
+[Mode Simple / Principale](https://lucasmoramarco.fr)
+[Mode Designer](https://designer.lucasmoramarco.fr)
 
 ## Setup
 Download [Node.js](https://nodejs.org/en/download/).

diff --git a/src/favicon/site.webmanifest b/src/favicon/site.webmanifest
@@ -1,6 +1,6 @@
 {
-    "name": "Bruno Simon",
-    "short_name": "Bruno Simon",
+    "name": "Lucas Moramarco",
+    "short_name": "Lucas Moramarco",
     "icons": [
         {
             "src": "/favicon/android-chrome-192x192.png",
@@ -16,4 +16,4 @@
     "theme_color": "#ffffff",
     "background_color": "#ffffff",
     "display": "standalone"
-}
+}
diff --git a/src/index.html b/src/index.html
@@ -1,27 +1,31 @@
-
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
+
 <head>
     <meta charset="UTF-8">
 
-    <title>Bruno Simon</title>
-    <meta name="description" content="Creative developer living in Paris, freelancer, former lead developer at Immersive Garden, former developer at Uzik and teacher." />
+    <title>Lucas Moramarco - Portfolio Exploration</title>
+    <meta name="description"
+        content="Étudiant au département MMI de Montbéliard et spécialisé en création numérique, je vais devenir chef de projet / directeur artistique dans le domaine du web et de l'innovation." />
 
-    <meta itemprop=name content="Bruno Simon - Creative developer">
-    <meta itemprop="description" content="Creative developer living in Paris, freelancer, former lead developer at Immersive Garden, former developer at Uzik and teacher.">
-    <meta itemprop="image" content=https://bruno-simon.com/social/share-1200x630.png>
+    <meta itemprop=name content="Lucas Moramarco - Portfolio Mode Exploration">
+    <meta itemprop="description"
+        content="Étudiant au département MMI de Montbéliard et spécialisé en création numérique, je vais devenir chef de projet / directeur artistique dans le domaine du web et de l'innovation.">
+    <meta itemprop="image" content=https://lucasmoramarco.fr/wp-content/uploads/2023/03/MODE_explore-1200x600.jpg>
 
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="Bruno Simon - Creative developer">
-    <meta name="twitter:description" content="Creative developer living in Paris, freelancer, former lead developer at Immersive Garden, former developer at Uzik and teacher.">
-    <meta name="twitter:image" content="https://bruno-simon.com/social/share-1200x600.png">
+    <meta name="twitter:title" content="Lucas Moramarco - Webdesigner">
+    <meta name="twitter:description"
+        content="Étudiant au département MMI de Montbéliard et spécialisé en création numérique, je vais devenir chef de projet / directeur artistique dans le domaine du web et de l'innovation.">
 
-    <meta property="og:site_name" content="Bruno Simon - Creative developer">
+
+    <meta property="og:site_name" content="Lucas Moramarco - Webdesigner">
     <meta property="og:type" content="website">
-    <meta property="og:url" content="https://bruno-simon.com">
-    <meta property="og:title" content="Bruno Simon - Creative developer">
-    <meta property="og:description" content="Creative developer living in Paris, freelancer, former lead developer at Immersive Garden, former developer at Uzik and teacher.">
-    <meta property="og:image" content="https://bruno-simon.com/social/share-1200x630.png">
+    <meta property="og:url" content="https://lucasmoramarco.fr">
+    <meta property="og:title" content="Lucas Moramarco - Webdesigner">
+    <meta property="og:description"
+        content="Étudiant au département MMI de Montbéliard et spécialisé en création numérique, je vais devenir chef de projet / directeur artistique dans le domaine du web et de l'innovation. ">
+    <meta property="og:image" content="https://lucasmoramarco.fr/wp-content/uploads/2023/03/MODE_explore-1200x600.jpg">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -30,15 +34,16 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
     <link rel="manifest" href="/favicon/site.webmanifest">
     <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#ff8908">
-    <meta name="apple-mobile-web-app-title" content="Bruno Simon">
-    <meta name="application-name" content="Bruno Simon">
+    <meta name="apple-mobile-web-app-title" content="Lucas Moramarco">
+    <meta name="application-name" content="Lucas Moramarco">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
-    
+
     <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=Comic+Neue:wght@700&display=block" rel="stylesheet">
 </head>
+
 <body>
 
     <canvas class="canvas js-canvas"></canvas>
@@ -54,31 +59,32 @@
                 <div class="variant is-shrugging"></div>
             </div>
             <div class="bubble">
-                <div class="text">Hey! You seem to really enjoy my portfolio.</div>
+                <div class="text">Je vous souhaite la bienvenue et bon visonnage de mon portfolio mode exploration.
+                </div>
                 <div class="tip"></div>
             </div>
         </div>
         <div class="message js-message">
             <div class="bubble">
-                <div class="text">Would you like to learn how to create cool websites like this?</div>
+                <div class="text">Voulez vous visualiser mon portfolio d'une autre façon ? </div>
                 <div class="tip"></div>
             </div>
         </div>
         <div class="message js-message is-answers">
             <a href="#" class="answer is-no js-no">
                 <span class="background"></span>
                 <span class="hover"></span>
-                <span class="label">Nah, I'm good</span>
+                <span class="label">Non, je préfère m'amuser dans cet univers.</span>
             </a>
-            <a href="https://threejs-journey.com?c=p1" target="_blank" rel="noopener" class="answer is-yes js-yes">
+            <a href="https://lucasmoramarco.fr" target="_blank" rel="noopener" class="answer is-yes js-yes">
                 <span class="background"></span>
                 <span class="hover"></span>
-                <span class="label">Yes, teach me!</span>
+                <span class="label">Oui, je veux bien voir ça !</span>
             </a>
         </div>
         <div class="message js-message">
             <div class="bubble">
-                <div class="text">Alright then.<br>Have fun and try not to break my car!</div>
+                <div class="text">Pas de soucis.<br>Amusez vous bien et essayez de ne pas casser ma voiture !</div>
                 <div class="tip"></div>
             </div>
         </div>
@@ -87,10 +93,11 @@
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3966601-5"></script>
     <script>
         window.dataLayer = window.dataLayer || []
-        function gtag(){dataLayer.push(arguments)}
+        function gtag() { dataLayer.push(arguments) }
         gtag('js', new Date())
         gtag('config', 'UA-3966601-5')
     </script>
 
 </body>
-</html>
+
+</html>
diff --git a/src/javascript/Application.js b/src/javascript/Application.js
@@ -14,13 +14,11 @@ import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
 import BlurPass from './Passes/Blur.js'
 import GlowsPass from './Passes/Glows.js'
 
-export default class Application
-{
+export default class Application {
     /**
      * Constructor
      */
-    constructor(_options)
-    {
+    constructor(_options) {
         // Options
         this.$canvas = _options.$canvas
 
@@ -42,15 +40,13 @@ export default class Application
     /**
      * Set config
      */
-    setConfig()
-    {
+    setConfig() {
         this.config = {}
         this.config.debug = window.location.hash === '#debug'
         this.config.cyberTruck = window.location.hash === '#cybertruck'
         this.config.touch = false
 
-        window.addEventListener('touchstart', () =>
-        {
+        window.addEventListener('touchstart', () => {
             this.config.touch = true
             this.world.controls.setTouch()
 
@@ -64,19 +60,16 @@ export default class Application
     /**
      * Set debug
      */
-    setDebug()
-    {
-        if(this.config.debug)
-        {
+    setDebug() {
+        if (this.config.debug) {
             this.debug = new dat.GUI({ width: 420 })
         }
     }
 
     /**
      * Set renderer
      */
-    setRenderer()
-    {
+    setRenderer() {
         // Scene
         this.scene = new THREE.Scene()
 
@@ -96,17 +89,15 @@ export default class Application
         this.renderer.autoClear = false
 
         // Resize event
-        this.sizes.on('resize', () =>
-        {
+        this.sizes.on('resize', () => {
             this.renderer.setSize(this.sizes.viewport.width, this.sizes.viewport.height)
         })
     }
 
     /**
      * Set camera
      */
-    setCamera()
-    {
+    setCamera() {
         this.camera = new Camera({
             time: this.time,
             sizes: this.sizes,
@@ -117,23 +108,19 @@ export default class Application
 
         this.scene.add(this.camera.container)
 
-        this.time.on('tick', () =>
-        {
-            if(this.world && this.world.car)
-            {
+        this.time.on('tick', () => {
+            if (this.world && this.world.car) {
                 this.camera.target.x = this.world.car.chassis.object.position.x
                 this.camera.target.y = this.world.car.chassis.object.position.y
             }
         })
     }
 
-    setPasses()
-    {
+    setPasses() {
         this.passes = {}
 
         // Debug
-        if(this.debug)
-        {
+        if (this.debug) {
             this.passes.debugFolder = this.debug.addFolder('postprocess')
             // this.passes.debugFolder.open()
         }
@@ -154,8 +141,7 @@ export default class Application
         this.passes.verticalBlurPass.material.uniforms.uStrength.value = new THREE.Vector2(0, this.passes.verticalBlurPass.strength)
 
         // Debug
-        if(this.debug)
-        {
+        if (this.debug) {
             const folder = this.passes.debugFolder.addFolder('blur')
             folder.open()
 
@@ -164,23 +150,21 @@ export default class Application
         }
 
         this.passes.glowsPass = new ShaderPass(GlowsPass)
-        this.passes.glowsPass.color = '#ffcfe0'
+        this.passes.glowsPass.color = '#38B7FF'
         this.passes.glowsPass.material.uniforms.uPosition.value = new THREE.Vector2(0, 0.25)
         this.passes.glowsPass.material.uniforms.uRadius.value = 0.7
         this.passes.glowsPass.material.uniforms.uColor.value = new THREE.Color(this.passes.glowsPass.color)
         this.passes.glowsPass.material.uniforms.uAlpha.value = 0.55
 
         // Debug
-        if(this.debug)
-        {
+        if (this.debug) {
             const folder = this.passes.debugFolder.addFolder('glows')
             folder.open()
 
             folder.add(this.passes.glowsPass.material.uniforms.uPosition.value, 'x').step(0.001).min(- 1).max(2).name('positionX')
             folder.add(this.passes.glowsPass.material.uniforms.uPosition.value, 'y').step(0.001).min(- 1).max(2).name('positionY')
             folder.add(this.passes.glowsPass.material.uniforms.uRadius, 'value').step(0.001).min(0).max(2).name('radius')
-            folder.addColor(this.passes.glowsPass, 'color').name('color').onChange(() =>
-            {
+            folder.addColor(this.passes.glowsPass, 'color').name('color').onChange(() => {
                 this.passes.glowsPass.material.uniforms.uColor.value = new THREE.Color(this.passes.glowsPass.color)
             })
             folder.add(this.passes.glowsPass.material.uniforms.uAlpha, 'value').step(0.001).min(0).max(1).name('alpha')
@@ -193,8 +177,7 @@ export default class Application
         this.passes.composer.addPass(this.passes.glowsPass)
 
         // Time tick
-        this.time.on('tick', () =>
-        {
+        this.time.on('tick', () => {
             this.passes.horizontalBlurPass.enabled = this.passes.horizontalBlurPass.material.uniforms.uStrength.value.x > 0
             this.passes.verticalBlurPass.enabled = this.passes.verticalBlurPass.material.uniforms.uStrength.value.y > 0
 
@@ -205,8 +188,7 @@ export default class Application
         })
 
         // Resize event
-        this.sizes.on('resize', () =>
-        {
+        this.sizes.on('resize', () => {
             this.renderer.setSize(this.sizes.viewport.width, this.sizes.viewport.height)
             this.passes.composer.setSize(this.sizes.viewport.width, this.sizes.viewport.height)
             this.passes.horizontalBlurPass.material.uniforms.uResolution.value.x = this.sizes.viewport.width
@@ -219,8 +201,7 @@ export default class Application
     /**
      * Set world
      */
-    setWorld()
-    {
+    setWorld() {
         this.world = new World({
             config: this.config,
             debug: this.debug,
@@ -237,30 +218,25 @@ export default class Application
     /**
      * Set title
      */
-    setTitle()
-    {
+    setTitle() {
         this.title = {}
         this.title.frequency = 300
         this.title.width = 20
         this.title.position = 0
         this.title.$element = document.querySelector('title')
         this.title.absolutePosition = Math.round(this.title.width * 0.25)
 
-        this.time.on('tick', () =>
-        {
-            if(this.world.physics)
-            {
+        this.time.on('tick', () => {
+            if (this.world.physics) {
                 this.title.absolutePosition += this.world.physics.car.forwardSpeed
 
-                if(this.title.absolutePosition < 0)
-                {
+                if (this.title.absolutePosition < 0) {
                     this.title.absolutePosition = 0
                 }
             }
         })
 
-        window.setInterval(() =>
-        {
+        window.setInterval(() => {
             this.title.position = Math.round(this.title.absolutePosition % this.title.width)
 
             document.title = `${'_'.repeat(this.title.width - this.title.position)}🚗${'_'.repeat(this.title.position)}`
@@ -270,8 +246,7 @@ export default class Application
     /**
      * Set Three.js Journey
      */
-    setThreejsJourney()
-    {
+    setThreejsJourney() {
         this.threejsJourney = new ThreejsJourney({
             config: this.config,
             time: this.time,
@@ -282,8 +257,7 @@ export default class Application
     /**
      * Destructor
      */
-    destructor()
-    {
+    destructor() {
         this.time.off('tick')
         this.sizes.off('resize')