main landing page done, main visual mechanics done. Select color rema…

…ining and content
DonLulu · Jan 16, 2025 · 7f95330 · 7f95330
1 parent 315a33a
commit 7f95330
Show file tree

Hide file tree

Showing 17 changed files with 377 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.md b/README.md
diff --git a/public/fonts/CSCalebMono-Regular.otf b/public/fonts/CSCalebMono-Regular.otf
diff --git a/public/fonts/CSMaisy-Regular.otf b/public/fonts/CSMaisy-Regular.otf
diff --git a/public/fonts/Humane-Bold.otf b/public/fonts/Humane-Bold.otf
diff --git a/public/fonts/Humane-Light.otf b/public/fonts/Humane-Light.otf
diff --git a/public/fonts/Humane-Medium.otf b/public/fonts/Humane-Medium.otf
diff --git a/public/fonts/What-a-bloat_Bold.otf b/public/fonts/What-a-bloat_Bold.otf
diff --git a/public/media/barcode_sticker.png b/public/media/barcode_sticker.png
diff --git a/public/media/scanned_paper_texture.jpg b/public/media/scanned_paper_texture.jpg
diff --git a/public/media/scanned_paper_texture.png b/public/media/scanned_paper_texture.png
diff --git a/src/404.html b/src/404.html
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lucas Cizeron</title>
+
+    <!-- ------------------CSS imports------------------ -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+
+    <link rel="stylesheet" href="./style/style_main.css">
+
+    <!-- ------------------JS imports------------------ -->
+    <script src="./js/javascript_main.js"></script>
+    <script src="./js/javascript_i18n.js"></script>
+    <script src="./js/javascript_text_effect.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+
+</head>
+<body>
+    <!-- NAVBAR -->
+    <nav class="navbar fixed-top">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">LUCAS CIZERON</a>
+            <div class="d-flex">
+                <button class="roll-hover" onclick="window.location.href='https\://github.com/DonLulu'">
+                    <span class="roll-hover-element-one"><i class="fab fa-github roll-hover-element-one"></i></span>
+                    <span class="roll-hover-element-two"><i class="fab fa-github roll-hover-element-two"></i></span>
+                </button>
+                <button class="roll-hover" onclick="window.location.href='mailto:[email protected]'">
+                    <span class="roll-hover-element-one"><i class="fas fa-envelope roll-hover-element-one"></i></span>
+                    <span class="roll-hover-element-two"><i class="fas fa-envelope roll-hover-element-two"></i></span>
+                </button>
+                <button class="roll-hover" onclick="window.location.href='https\://www.linkedin.com/in/cizeron-lucas/'">
+                    <span class="roll-hover-element-one"><i class="fab fa-linkedin roll-hover-element-one"></i></span>
+                    <span class="roll-hover-element-two"><i class="fab fa-linkedin roll-hover-element-two"></i></span>
+                </button>
+                <button class="roll-hover">
+                    <span class="roll-hover-element-one" data-i18n="languageSwitch" data-text="EN"></span>
+                    <span id="language-switch" class="roll-hover-element-two" data-i18n="languageSwitch" data-text="EN"></span>
+                </button>
+            </div>
+        </div>
+    </nav>
+
+    <div class="p-4">
+        <!-- Removed the old language switch button -->
+    </div>
+    <div class="titleContainer" style="position: relative;">
+        <h1 id="mainTitleColor" class="font-bold mainTitle color-change">LUCAS</h1>
+        <h1 class="font-bold mainTitle mainTitleWhite">CIZERON</h1>
+        <h2 class="overlapTitle" data-i18n="epitaStudent"></h2>
+    </div>
+
+
+</body>
+</html>
diff --git a/src/js/javascript_i18n.js b/src/js/javascript_i18n.js
@@ -0,0 +1,40 @@
+function switchLanguage(lang) {
+    console.log('Switching to language:', lang);
+    document.documentElement.lang = lang;
+    const elements = document.querySelectorAll('[data-i18n]');
+    elements.forEach(element => {
+        element.textContent = translations[lang][element.getAttribute('data-i18n')];
+    });
+}
+
+const translations = {
+    en: {
+        welcome: "Welcome to my portfolio",
+        about: "About Me",
+        contact: "Contact",
+        languageSwitch: "FR",
+        epitaStudent: "Epita student",
+    },
+    fr: {
+        welcome: "Bienvenue sur mon portfolio",
+        about: "À propos de moi",
+        contact: "Contact",
+        languageSwitch: "EN",
+        epitaStudent: "Etudiant à epita",
+    }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    switchLanguage('fr'); // Default language
+    let currentLanguage = 'FR';
+    const languageSwitch = document.getElementById('language-switch');
+    languageSwitch.addEventListener('click', () => {
+        if (currentLanguage === 'FR') {
+            currentLanguage = 'EN';
+            switchLanguage('en');
+        } else {
+            currentLanguage = 'FR';
+            switchLanguage('fr');
+        }
+    });
+});
diff --git a/src/js/javascript_main.js b/src/js/javascript_main.js
@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Create the blob element
+    const blob = document.createElement('div');
+    blob.classList.add('blob');
+    document.body.appendChild(blob);
+
+    let mouseX = 0, mouseY = 0;
+    let blobX = 0, blobY = 0;
+    const speed = 0.78; // Adjust the speed for latency effect
+    let isHovering = false;
+
+    // Update the mouse position on mouse move
+    document.addEventListener('mousemove', (event) => {
+        if (!isHovering) {
+            mouseX = event.clientX;
+            mouseY = event.clientY;
+        }
+    });
+
+    // Animate the blob to follow the mouse with latency
+    function animateBlob() {
+        if (!isHovering) {
+            blobX += (mouseX - blobX) * speed;
+            blobY += (mouseY - blobY) * speed;
+
+            blob.style.left = `${blobX}px`;
+            blob.style.top = `${blobY}px`;
+        }
+
+        requestAnimationFrame(animateBlob);
+    }
+
+    animateBlob();
+
+    // Handle size transition on hover over clickable elements
+    const clickableElements = document.querySelectorAll('a, button, .clickable');
+    clickableElements.forEach(element => {
+        element.addEventListener('mouseenter', () => {
+            isHovering = true;
+            const rect = element.getBoundingClientRect();
+            const maxDimension = Math.max(rect.width, rect.height) + 10;
+            blob.style.width = `${maxDimension}px`;
+            blob.style.height = `${maxDimension}px`;
+            blob.style.left = `${rect.left + rect.width / 2}px`;
+            blob.style.top = `${rect.top + rect.height / 2}px`;
+            blob.classList.add('transition');
+        });
+        element.addEventListener('mouseleave', () => {
+            isHovering = false;
+            blob.style.width = '30px'; // Revert to initial small size
+            blob.style.height = '30px'; // Revert to initial small size
+            blob.classList.remove('transition');
+        });
+    });
+});
diff --git a/src/js/javascript_text_effect.js b/src/js/javascript_text_effect.js
@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const elements = document.querySelectorAll('.color-change');
+    const colors = ['#ff6f85', '#fca85f', '#8080fe', '#fef178', '#fc95fc', '#c26ffd', '#96ff9e', '#6ffde5'];
+
+    elements.forEach(element => {
+        const letters = element.textContent.split('');
+        element.innerHTML = '';
+
+        letters.forEach((letter) => {
+            const span = document.createElement('span');
+            span.textContent = letter;
+            span.style.transition = 'color 0.5s ease'; // Add transition for smooth color change
+            element.appendChild(span);
+        });
+
+        function changeColor(span) {
+            const usedColors = new Set(Array.from(element.querySelectorAll('span')).map(span => span.style.color));
+            let color;
+            do {
+                color = colors[Math.floor(Math.random() * colors.length)];
+            } while (usedColors.has(color));
+            span.style.color = color;
+
+            // Schedule the next color change
+            const randomDelay = Math.random() * (1000 - 200) + 200; // Random delay between 0.2s and 1s
+            setTimeout(() => changeColor(span), randomDelay);
+        }
+
+        // Initialize color changes for each letter
+        element.querySelectorAll('span').forEach(span => {
+            changeColor(span);
+        });
+    });
+});
diff --git a/src/style/style_main.css b/src/style/style_main.css
@@ -0,0 +1,188 @@
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&family=Mrs+Saint+Delafield&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+/* Fonts */
+
+@font-face {
+    font-family: 'Humane';
+    src: url('../../public/fonts/Humane-Bold.otf') format('opentype');
+    font-weight: bolder;
+}
+
+@font-face {
+    font-family: 'Humane';
+    src: url('../../public/fonts/Humane-Regular.otf') format('opentype');
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: 'Humane';
+    src: url('../../public/fonts/Humane-Light.otf') format('opentype');
+    font-weight: lighter;
+}
+
+@font-face {
+    font-family: 'Maisy';
+    src: url('../../public/fonts/CSMaisy-Regular.otf') format('opentype');
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: 'Caleb';
+    src: url('../../public/fonts/CSCalebMono-Regular.otf') format('opentype');
+    font-weight: bold;
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: #000;
+    font-family: 'Poppins', sans-serif;
+    position: relative;
+    width: 100%;
+    cursor: cell;
+    font-size: 2em;
+    color: #d8d6ce;
+    letter-spacing: 0.05em; 
+    overflow-x: hidden;
+}
+
+body::before {
+    content: "";
+    background-image: url("../../public/media/scanned_paper_texture.jpg");
+    opacity: 0.3;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
+/* Navbar */
+
+.navbar{
+    display: flex;
+    padding: 0px;
+    background-color: #00000000;
+    align-items: center;
+    justify-content: center;
+}
+
+.navbar-brand {
+    font-family: 'Humane', sans-serif;
+    font-size: 1.7em;
+    font-weight: bolder;
+    color: #d8d6ce;
+    transform: scaleY(0.9);
+}
+
+.navbar-brand:hover {
+    color: #d8d6ce;
+}
+
+/* Titles and paragraphs */
+
+/* Main title */
+
+.mainTitle {
+    margin-top: 0vh;
+    font-family: 'Humane', sans-serif;
+    font-size: 30vw;
+    font-weight: bolder;
+    text-align: center;
+    letter-spacing: 0.02em;
+    line-height: 30vw;
+    transform: scaleY(0.8); 
+}
+
+.mainTitleWhite {
+    font-size: 30vw;
+    transform: scaleY(0.8);
+    font-family: 'Humane', sans-serif;
+    font-weight: bolder;
+    text-align: center;
+    letter-spacing: 0.02em;
+    line-height: 5vw;
+    transform: scaleY(0.8);
+}
+
+.overlapTitle {
+    font-family: 'Mrs Saint Delafield', sans-serif;
+    color: #866aff;
+    font-size: 6vw;
+    font-weight: bolder;
+    text-align: center;
+    z-index: 10;
+    position: absolute;
+    top: 115%;
+    left: 60%;
+    transform: translate(-50%, -50%) rotate(-10deg);
+    white-space: nowrap;
+}
+
+
+
+
+/* Roll Animation */ 
+.roll-hover {
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.roll-hover-element-one {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    transition: top 0.3s;
+    pointer-events: auto; 
+}
+
+.roll-hover-element-two {
+    position: absolute;
+    width: 100%;
+    top: 150%;
+    left: 0;
+    transform: translateY(-50%);
+    transition: top 0.3s;
+    pointer-events: none; 
+}
+
+.roll-hover:hover .roll-hover-element-one {
+    top: -100%;
+    pointer-events: none;
+}
+
+.roll-hover:hover .roll-hover-element-two {
+    top: 50%;
+    pointer-events: auto; 
+}
+
+.blob {
+    position: fixed;
+    width: 30px; /* Initial small size */
+    height: 30px; /* Initial small size */
+    background-color: #d8d6ce;
+    border-radius: 50%;
+    pointer-events: none;
+    mix-blend-mode: difference;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease, left 0.1s ease, top 0.1s ease; /* Transition for size and position change */
+}
+
+.blob.transition {
+    transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease, left 0.3s ease, top 0.3s ease; /* Transition for size and position change */
+}
+
+.blob.large {
+    width: 100px; /* Larger size on hover */
+    height: 100px; /* Larger size on hover */
+}