diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/public/fonts/CSCalebMono-Regular.otf b/public/fonts/CSCalebMono-Regular.otf new file mode 100644 index 0000000..33f0bba Binary files /dev/null and b/public/fonts/CSCalebMono-Regular.otf differ diff --git a/public/fonts/CSMaisy-Regular.otf b/public/fonts/CSMaisy-Regular.otf new file mode 100644 index 0000000..2c7651e Binary files /dev/null and b/public/fonts/CSMaisy-Regular.otf differ diff --git a/public/fonts/Humane-Bold.otf b/public/fonts/Humane-Bold.otf new file mode 100644 index 0000000..b8e9443 Binary files /dev/null and b/public/fonts/Humane-Bold.otf differ diff --git a/public/fonts/Humane-Light.otf b/public/fonts/Humane-Light.otf new file mode 100644 index 0000000..126fbbd Binary files /dev/null and b/public/fonts/Humane-Light.otf differ diff --git a/public/fonts/Humane-Medium.otf b/public/fonts/Humane-Medium.otf new file mode 100644 index 0000000..fb209f9 Binary files /dev/null and b/public/fonts/Humane-Medium.otf differ diff --git a/public/fonts/What-a-bloat_Bold.otf b/public/fonts/What-a-bloat_Bold.otf new file mode 100644 index 0000000..ec32b0c Binary files /dev/null and b/public/fonts/What-a-bloat_Bold.otf differ diff --git a/public/media/barcode_sticker.png b/public/media/barcode_sticker.png new file mode 100644 index 0000000..8397928 Binary files /dev/null and b/public/media/barcode_sticker.png differ diff --git a/public/media/scanned_paper_texture.jpg b/public/media/scanned_paper_texture.jpg new file mode 100644 index 0000000..366f248 Binary files /dev/null and b/public/media/scanned_paper_texture.jpg differ diff --git a/public/media/scanned_paper_texture.png b/public/media/scanned_paper_texture.png new file mode 100644 index 0000000..622e4a2 Binary files /dev/null and b/public/media/scanned_paper_texture.png differ diff --git a/src/404.html b/src/404.html new file mode 100644 index 0000000..e69de29 diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..864dd29 --- /dev/null +++ b/src/index.html @@ -0,0 +1,59 @@ + + + + + + Lucas Cizeron + + + + + + + + + + + + + + + + + + + +
+ +
+
+

LUCAS

+

CIZERON

+

+
+ + + + \ No newline at end of file diff --git a/src/js/javascript_i18n.js b/src/js/javascript_i18n.js new file mode 100644 index 0000000..6b34479 --- /dev/null +++ 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'); + } + }); +}); \ No newline at end of file diff --git a/src/js/javascript_main.js b/src/js/javascript_main.js new file mode 100644 index 0000000..c84eea3 --- /dev/null +++ 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 new file mode 100644 index 0000000..38c55da --- /dev/null +++ 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); + }); + }); +}); \ No newline at end of file diff --git a/src/style/style_main.css b/src/style/style_main.css new file mode 100644 index 0000000..fee9902 --- /dev/null +++ b/src/style/style_main.css @@ -0,0 +1,188 @@ +@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&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 */ +}