({
+ about: false,
+ skills: false,
+ projects: false,
+ });
+
+ const closeSection = (key: keyof MenuState) => {
+ setState(prev => ({ ...prev, [key]: false }));
+ };
+
+ const isOpen = Object.values(state).some(value => value === true);
+
+ return (
+
+
+
+ <Navbar state={state} setState={setState} isOpen={isOpen} />
+ <About id="about" open={state.about} onClose={() => closeSection("about")} />
+ <Skills id="skills" open={state.skills} onClose={() => closeSection("skills")} />
+ <Projects id="projects" open={state.projects} onClose={() => closeSection("projects")} />
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/src/Main.tsx b/src/Main.tsx
new file mode 100644
index 0000000..f4120bf
--- /dev/null
+++ b/src/Main.tsx
@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render( <App /> );
\ No newline at end of file
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..344a9d8
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+
+type ButtonProps = {
+ children: ReactNode;
+ onClick?: () => void;
+ label: string;
+ variant?: "icon" | "text";
+ className?: string;
+};
+
+export default function Button({ children, onClick, label, variant = "icon", className = "" }: ButtonProps) {
+ const BASECLASS = "cursor-pointer flex items-center justify-center backdrop-blur-sm \
+ bg-black/17 shadow-md text-white transition-all duration-200 ease-out \
+ hover:bg-white/15 active:scale-95 shadow-lg shadow-black/50 \
+ pointer-events-auto hover:shadow-black/0";
+
+
+ // dictionary to choose if it's a icon or text button
+ const variants: Record<typeof variant, string> = {
+ icon: "rounded-full w-12 h-12 md:w-14 md:h-14 hover:scale-110",
+ text: "rounded-3xl px-4 h-12 md:h-14 md:px-6 max-w-max hover:scale-105",
+ };
+
+ return (
+ <div className="relative group">
+ <button onClick={onClick} aria-label={label} className={`${BASECLASS} ${variants[variant]}`}>
+ {children}
+ </button>
+ {label && (
+ <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1
+ rounded-md text-xs text-white bg-black/80 opacity-0
+ group-hover:opacity-100 transition-opacity whitespace-nowrap">
+ {label}
+ </span>
+ )}
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/src/components/Lang.tsx b/src/components/Lang.tsx
new file mode 100644
index 0000000..c51cf54
--- /dev/null
+++ b/src/components/Lang.tsx
@@ -0,0 +1,22 @@
+import Button from './Button';
+
+import i18n from "../utils/translation";
+
+export default function Lang() {
+ const toggleLanguage = () => {
+ const newLang = i18n.language === "fr" ? "en" : "fr";
+ i18n.changeLanguage(newLang);
+ };
+
+ const nextLangLabel = i18n.language === "fr" ? "EN" : "FR";
+
+ return (
+ <Button
+ onClick={toggleLanguage}
+ label={`Lang: ${nextLangLabel}`}
+ variant="icon"
+ >
+ {nextLangLabel}
+ </Button>
+ )
+}
\ No newline at end of file
diff --git a/src/components/Section.tsx b/src/components/Section.tsx
new file mode 100644
index 0000000..18a6764
--- /dev/null
+++ b/src/components/Section.tsx
@@ -0,0 +1,24 @@
+import React, { JSX } from "react";
+
+type SectionProps = {
+ children: JSX.Element;
+ title: string;
+ id: string
+};
+
+export default function Section({ children, title, id }: SectionProps) {
+ return (
+ <section
+ id={id}
+ className="my-3 relative max-w-5xl mx-auto mt-5 rounded-2xl flex flex-col gap-8 text-gray-100"
+ >
+ <h2
+ className="text-3xl sm:text-5xl font-extrabold bg-clip-text text-transparent
+ bg-gradient-to-r from-green-200 via-emerald-600 to-green-800"
+ >
+ {title}
+ </h2>
+ {children}
+ </section>
+ );
+};
\ No newline at end of file
diff --git a/src/components/Window.tsx b/src/components/Window.tsx
new file mode 100644
index 0000000..b43d8ee
--- /dev/null
+++ b/src/components/Window.tsx
@@ -0,0 +1,43 @@
+import React, { ReactNode, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface SectionProps {
+ open: boolean;
+ onClose: () => void;
+ children: ReactNode;
+}
+
+export default function Window ({ open, onClose, children }: SectionProps) {
+ useEffect(() => {
+ if (open) document.body.style.overflow = "hidden";
+ else document.body.style.overflow = "";
+ }, [open]);
+
+ return (
+ <AnimatePresence>
+ {open && (
+ <motion.div
+ className="fixed inset-0 z-10 bg-black/30 backdrop-blur-sm"
+ initial={{ opacity: 0 }}
+ animate={{ opacity: 1 }}
+ exit={{ opacity: 0 }}
+ transition={{
+ duration: 0.3
+ }}
+ >
+ <div className="h-full overflow-y-auto text-white">
+ <motion.div
+ initial={{ opacity: 0, y: 40 }}
+ animate={{ opacity: 1, y: 0 }}
+ exit={{ opacity: 0, y: 40 }}
+ transition={{ duration: 0.3 }}
+ className="flex flex-col md:flex-row items-center justify-center gap-10 px-6 md:px-24 py-20 md:py-32"
+ >
+ {children}
+ </motion.div>
+ </div>
+ </motion.div>
+ )}
+ </AnimatePresence>
+ );
+};
\ No newline at end of file
diff --git a/src/json/assets.json b/src/json/assets.json
new file mode 100644
index 0000000..b87c057
--- /dev/null
+++ b/src/json/assets.json
@@ -0,0 +1,13 @@
+{
+ "model": "BASEmodel.glb",
+ "idle_animation": "idle.glb",
+ "welcome_animation": "waving.glb",
+ "animations": [
+ "StandingW_BriefcaseIdle.glb",
+ "Acknowledging.glb",
+ "ArmStretching.glb",
+ "OffensiveIdle.glb",
+ "ThoughtfulHeadShake.glb",
+ "DwarfIdle.glb"
+ ]
+}
\ No newline at end of file
diff --git a/src/json/content.json b/src/json/content.json
new file mode 100644
index 0000000..e6a4ce9
--- /dev/null
+++ b/src/json/content.json
@@ -0,0 +1,139 @@
+{
+ "name": "GUEZO Loïc",
+ "career": "me.career",
+ "profile_image": "https://guezoloic.com/data/guezoloic.png",
+ "navbar": {
+ "buttons": [
+ {
+ "label": "about.label",
+ "action": "about",
+ "icon": ""
+ },
+ {
+ "label": "skills.label",
+ "action": "skills",
+ "icon": "CodeBracketIcon"
+ },
+ {
+ "label": "projects.label",
+ "action": "projects",
+ "icon": "ServerIcon"
+ }
+ ]
+ },
+ "about": [
+ {
+ "icon": "LightBulbIcon",
+ "text": "about.content.0"
+ },
+ {
+ "icon": "CodeBracketIcon",
+ "text": "about.content.1"
+ },
+ {
+ "icon": "CpuChipIcon",
+ "text": "about.content.2"
+ },
+ {
+ "icon": "PuzzlePieceIcon",
+ "text": "about.content.3"
+ },
+ {
+ "icon": "Cog6ToothIcon",
+ "text": "about.content.4"
+ },
+ {
+ "icon": "RocketLaunchIcon",
+ "text": "about.content.5"
+ },
+ {
+ "icon": "ServerStackIcon",
+ "text": "about.content.6"
+ }
+ ],
+ "skills": [
+ {
+ "title": "skills.content.0",
+ "tags": [
+ {
+ "name": "C",
+ "icon": "SiC"
+ },
+ {
+ "name": "C++",
+ "icon": "SiCplusplus"
+ },
+ {
+ "name": "Rust",
+ "icon": "SiRust"
+ },
+ {
+ "name": "Python",
+ "icon": "SiPython"
+ },
+ {
+ "name": "Java",
+ "icon": "SiJava"
+ },
+ {
+ "name": "Bash",
+ "icon": "SiGnubash"
+ },
+ {
+ "name": "HTML/CSS/JS/TS",
+ "icon": "SiHtml5"
+ },
+ {
+ "name": "React",
+ "icon": "SiReact"
+ }
+ ]
+ },
+ {
+ "title": "skills.content.1",
+ "tags": [
+ {
+ "name": "Git",
+ "icon": "SiGit"
+ },
+ {
+ "name": "Docker",
+ "icon": "SiDocker"
+ },
+ {
+ "name": "Android Studio",
+ "icon": "SiAndroid"
+ }
+ ]
+ },
+ {
+ "title": "skills.content.2",
+ "tags": [
+ {
+ "name": "Linux/Linux Server",
+ "icon": "SiLinux"
+ },
+ {
+ "name": "Proxmox",
+ "icon": "SiProxmox"
+ },
+ {
+ "name": "Jetson Nano",
+ "icon": "SiNvidia"
+ },
+ {
+ "name": "Raspberry Pi",
+ "icon": "SiRaspberrypi"
+ },
+ {
+ "name": "Arduino",
+ "icon": "SiArduino"
+ },
+ {
+ "name": "ESP32",
+ "icon": "SiEspressif"
+ }
+ ]
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 0000000..a2ca662
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,44 @@
+{
+ "me": {
+ "title": "Hello There! 👋",
+ "subTitle": "I'm glad you're here",
+ "career": "IT Student"
+ },
+ "about": {
+ "label": "About",
+ "title": "Hi, I'm Loïc! 👋",
+ "content": [
+ "Curious by nature, I like to explore what happens under all the layers of a computer system.",
+ "I started with simple Python programs, then I gradually discovered a fascination for low-level programming.",
+ "By learning the basics of Intel x86_64 assembly in my degree and touching electronics, I realized that I love learning and designing at a fundamental level.",
+ "Over time, I got closer and closer to low-level programming and completed a few small projects.",
+ "These projects allowed me to manipulate and experiment with the functioning of different hardware.",
+ "I am also interested in various projects, such as creating a small AI or a graphical engine on a terminal.",
+ "Computer tools and hardware have given me a complete vision of embedded systems, and I want to continue learning in this field.",
+ "I aim to combine software and hardware to design complex and efficient systems."
+ ]
+ },
+ "skills": {
+ "label": "Skills",
+ "title": "My Skills",
+ "content": [
+ "Programming Languages",
+ "Tools",
+ "Hardware & Embedded Systems"
+ ]
+ },
+ "projects": {
+ "label": "Projects",
+ "title": "My Projects"
+ },
+ "links": {
+ "label": "Links",
+ "title": "Links",
+ "descriptions": [
+ "",
+ "",
+ "",
+ ""
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/locales/fr.json b/src/locales/fr.json
new file mode 100644
index 0000000..8b3f2b4
--- /dev/null
+++ b/src/locales/fr.json
@@ -0,0 +1,44 @@
+{
+ "me": {
+ "title": "Bienvenue ! 👋",
+ "subTitle": "Ravi·e de vous voir ici",
+ "career": "Étudiant info"
+ },
+ "about": {
+ "label": "À propos",
+ "title": "Bonjour, je suis Loïc ! 👋",
+ "content": [
+ "Curieux de nature, j'aime explorer ce qui se passe sous toutes les couches d'un système informatique.",
+ "J'ai commencé par de simples programmes en Python, puis j'ai progressivement découvert une fascination pour le bas niveau.",
+ "En apprenant les bases de l'assembleur Intel x86_64 en licence et en touchant à l'électronique, j'ai compris que j'adore apprendre et concevoir à un niveau fondamental.",
+ "Au fil du temps, je me suis rapproché de la programmation bas niveau et réalisé quelques petits projets.",
+ "Ces projets m'ont permis de manipuler et d'expérimenter le fonctionnement de différents matériels.",
+ "Je m'intéresse aussi à des projets variés, comme créer une petite IA ou un moteur graphique sur terminal.",
+ "Les outils informatique et matériels m'ont donné une vision complète des systèmes embarqués et je souhaite continuer à apprendre dans cette voie.",
+ "Je cherche à combiner logiciel et matériel pour concevoir des systèmes complexes et efficaces."
+ ]
+ },
+ "skills": {
+ "label": "Compétences",
+ "title": "Mes Compétences",
+ "content": [
+ "Langages Informatique",
+ "Outils",
+ "Matériel & Systèmes embarqués"
+ ]
+ },
+ "projects": {
+ "label": "Projets",
+ "title": "Mes Projets"
+ },
+ "links": {
+ "label": "Liens",
+ "title": "Liens",
+ "descriptions": [
+ "",
+ "",
+ "",
+ ""
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..55d78a5
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,53 @@
+import React, { JSX } from "react";
+import { motion } from "framer-motion";
+import * as SOLID from "@heroicons/react/24/solid";
+import { useTranslation } from 'react-i18next';
+import Section from "../components/Section";
+
+import content from "../json/content.json"
+import Window from "../components/Window";
+
+type AboutProps = {
+ id: string;
+ open: boolean;
+ onClose: () => void;
+};
+
+export default function About({ id, open, onClose }: AboutProps) {
+ const { t } = useTranslation();
+
+ const paragraphs = content.about;
+
+ return (
+ <Window open={open} onClose={onClose}>
+ <div className="flex justify-center items-center h-full w-full md:px-6">
+ <div className="max-w-3xl w-full bg-black/21 rounded-2xl p-8 space-y-4 shadow-lg">
+ <Section id={id} title={t('about.title')}>
+ <div className="flex flex-col gap-1">
+ {paragraphs.map((paragraph, i) => {
+ const Icon = (SOLID as Record<string, React.ElementType>)[paragraph.icon];
+ return (
+ <motion.div
+ key={i}
+ className="flex items-start gap-3 p-4 rounded-xl hover:bg-black/30 transition-colors"
+ initial={{ opacity: 0, y: 15 }}
+ whileInView={{ opacity: 1, y: 0 }}
+ viewport={{ once: false, amount: 0 }}
+ transition={{ duration: 0.6, delay: i * 0.08 }}
+ >
+ <span className="mt-1 text-emerald-400">
+ <Icon className="w-6 h-6" />
+ </span>
+ <p className="text-sm md:text-base leading-relaxed text-white">
+ {t(paragraph.text)}
+ </p>
+ </motion.div>
+ )
+ })}
+ </div>
+ </Section>
+ </div>
+ </div>
+ </Window>
+ );
+};
\ No newline at end of file
diff --git a/src/pages/Navbar.tsx b/src/pages/Navbar.tsx
new file mode 100644
index 0000000..e5f3be3
--- /dev/null
+++ b/src/pages/Navbar.tsx
@@ -0,0 +1,112 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { useTranslation } from "react-i18next";
+import { motion, AnimatePresence, Variants } from "framer-motion";
+import * as SOLID from "@heroicons/react/24/solid";
+
+import Button from "../components/Button";
+import content from "../json/content.json";
+import { MenuState } from "../App";
+import Lang from "../components/Lang"
+
+type NavbarProps = {
+ state: MenuState;
+ setState: Dispatch<SetStateAction<MenuState>>;
+ isOpen: boolean;
+};
+
+const navVariants: Variants = {
+ initial: { scaleY: 0.8, scaleX: 0.1, opacity: 0.7 },
+ animate: { scaleY: 1, scaleX: 1, opacity: 1, transition: { duration: 0.3, ease: [0.42, 0, 0.58, 1] } },
+};
+
+const exitVariants: Variants = {
+ initial: { scaleY: 1, scaleX: 5, opacity: 0.7 },
+ animate: { scaleY: 1, scaleX: 1, opacity: 1, transition: { duration: 0.3, ease: [0.42, 0.66, 0.58, 1] } },
+};
+
+
+export default function Navbar({ state, setState, isOpen }: NavbarProps) {
+ const { t } = useTranslation();
+
+
+ const handleClick = (key: keyof MenuState) => {
+ setState(prev => ({ ...prev, [key]: true }));
+ };
+
+ const closeWindows = () => {
+ setState(prev => {
+ const newState: MenuState = {} as MenuState;
+ for (const key in prev) newState[key as keyof MenuState] = false;
+ return newState;
+ });
+ };
+
+ const mainButton = content.navbar.buttons[0];
+
+ return (
+ <AnimatePresence>
+ {isOpen ? (
+ <motion.div
+ key="close"
+ className="fixed bottom-4 left-1/2 transform -translate-x-1/2 flex justify-center z-50"
+ variants={exitVariants}
+ initial="initial"
+ animate="animate"
+ exit="exit"
+ >
+ <Button
+ onClick={closeWindows}
+ label="exit"
+ variant="icon"
+ >
+ <SOLID.XMarkIcon className="w-8 h-8 text-white" />
+ </Button>
+ </motion.div>
+ ) : (
+ <motion.div
+ key="menu"
+ className="fixed bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-2 z-50"
+ variants={navVariants}
+ initial="initial"
+ animate="animate"
+ exit="exit"
+ >
+ <Button
+ onClick={() => handleClick(mainButton.action as keyof MenuState)}
+ label={t(mainButton.label)}
+ variant="text"
+ >
+ <div className="flex flex-col items-center justify-center whitespace-nowrap">
+ <span className="text-base md:text-lg font-bold text-white drop-shadow-lg">
+ {content.name}
+ </span>
+ <span className="text-xs md:text-sm text-gray-300 font-light">
+ {t(content.career)}
+ </span>
+ </div>
+ </Button>
+
+ {content.navbar.buttons.slice(1).map((btn, i) => {
+ const Icon = (SOLID as Record<string, React.ElementType>)[btn.icon];
+ return (
+ <div className="relative group" key={i}>
+ <Button
+ onClick={() => handleClick(btn.action as keyof MenuState)}
+ label={t(btn.label)}
+ variant="icon"
+ >
+ {Icon && <Icon className="w-6 h-6 text-white" />}
+ </Button>
+ <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 rounded-md text-xs text-white bg-black/80 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
+ {t(btn.label)}
+ </span>
+ </div>
+
+ );
+ })}
+ <Lang />
+ </motion.div>
+ )}
+ </AnimatePresence>
+ );
+}
\ No newline at end of file
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
new file mode 100644
index 0000000..66cf14d
--- /dev/null
+++ b/src/pages/Projects.tsx
@@ -0,0 +1,82 @@
+import { motion } from "framer-motion";
+import React, { useEffect, useState } from "react";
+import Section from "../components/Section";
+import { useTranslation } from "react-i18next";
+import Window from "../components/Window";
+
+interface ProjectProps {
+ name: string;
+ description: string;
+ html_url: string;
+ language: string | null;
+}
+
+type ProjectsProps = {
+ id: string;
+ open: boolean;
+ onClose: () => void;
+};
+
+export default function Projects({ id, open, onClose }: ProjectsProps) {
+ const [repos, setRepos] = useState<ProjectProps[]>([]);
+
+ useEffect(() => {
+ const fetchRepos = async () => {
+ try {
+ const res = await fetch(`https://api.github.com/users/guezoloic/repos?per_page=100`);
+ const data = await res.json();
+
+ const sorted = data
+ .filter((repo: any) => !repo.fork)
+ .sort((a: any, b: any) => b.stargazers_count - a.stargazers_count)
+ .slice(0, 6)
+ .map((repo: any) => ({
+ name: repo.name,
+ description: repo.description,
+ html_url: repo.html_url,
+ language: repo.language,
+ }));
+
+ setRepos(sorted);
+ } catch (err) {
+ console.error("Error while loading repos", err);
+ }
+ };
+
+ fetchRepos();
+ }, []);
+
+ const { t } = useTranslation();
+
+ return (
+ <Window open={open} onClose={onClose}>
+ <Section id={id} title={t("projects.title")}>
+ <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+ {repos.map((repo, i) => (
+ <motion.a
+ key={repo.name}
+ href={repo.html_url}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="bg-black/30 p-6 rounded-2xl shadow-lg hover:scale-105 transition-transform duration-300 flex flex-col gap-3"
+ initial={{ opacity: 0, y: 20 }}
+ whileInView={{ opacity: 1, y: 0 }}
+ viewport={{ once: false, amount: 0.6 }}
+ transition={{ duration: 0.4, delay: i * 0.1 }}
+ >
+ <h3 className="text-xl font-semibold text-white">{repo.name}</h3>
+ <p className="text-gray-200 text-sm">
+ {repo.description || "No description"}
+ </p>
+ {repo.language && (
+ <span className="text-sm font-medium text-emerald-400">
+ {repo.language}
+ </span>
+ )}
+ </motion.a>
+ ))}
+ </div>
+ </Section>
+ </Window>
+ );
+};
\ No newline at end of file
diff --git a/src/pages/Skills.tsx b/src/pages/Skills.tsx
new file mode 100644
index 0000000..9fb5f58
--- /dev/null
+++ b/src/pages/Skills.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { motion } from "framer-motion";
+import * as SiIcons from "react-icons/si";
+import Section from "../components/Section";
+import { useTranslation } from "react-i18next";
+
+import content from "../json/content.json"
+import Window from "../components/Window";
+
+type SkillsProps = {
+ id: string;
+ open: boolean;
+ onClose: () => void;
+};
+
+export default function Skills({ id, open, onClose }: SkillsProps) {
+ const { t } = useTranslation();
+
+ const skillsData = content.skills;
+ return (
+ <Window open={open} onClose={onClose}>
+ <Section id={id} title={t("skills.title")}>
+ {skillsData.map((section, i) => (
+ <div key={i} className="flex flex-col gap-2">
+ <div className="flex flex-col gap-2 max-w-3xl w-full bg-black/20 rounded-2xl p-8 space-y-4 shadow-lg">
+ <h2 className="text-xl font-semibold font-extrabold bg-clip-text text-transparent
+ bg-gradient-to-r from-green-200 via-emerald-600 to-green-800">{t(section.title)}:</h2>
+ <div className="flex flex-wrap gap-2">
+ {section.tags.map((tag, j) => {
+ const Icon = (SiIcons as Record<string, React.ElementType>)[tag.icon];
+ return (
+ <motion.div
+ key={j}
+ className="flex items-center gap-2 p-2"
+ initial={{ opacity: 0, y: 15 }}
+ whileInView={{ opacity: 1, y: 0 }}
+ viewport={{ once: false, amount: 0 }}
+ transition={{ duration: 0.5, delay: j * 0.08 }}
+ >
+ <div className="flex items-center gap-2 p-1.5">
+ {Icon && <Icon className="w-5 h-5 text-emerald-400 mt-1" />}
+ <span className="text-sm md:text-base">{tag.name}</span>
+ </div>
+ </motion.div>
+ );
+ })}
+ </div>
+ </div>
+ </div>
+ ))}
+ </Section>
+ </Window>
+ );
+};
\ No newline at end of file
diff --git a/src/pages/Three.tsx b/src/pages/Three.tsx
new file mode 100644
index 0000000..f0bfbbb
--- /dev/null
+++ b/src/pages/Three.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import Main from "../three/main";
+
+export default function Three() {
+ const mountRef = useRef<HTMLDivElement>(null); // Parent canva element
+ const [loading, setLoading] = useState(true); // Loading boolean element
+ useEffect(() => {
+ if (!window.WebGL2RenderingContext) return;
+
+ const loadingManager = new THREE.LoadingManager(() => setLoading(false));
+ new Main(mountRef.current!, loadingManager);
+ }, []);
+
+ // canva must exist before loading so that Main doesn't crash
+ return (
+ <div className="fixed w-full h-full inset-0 z-0 overflow-hidden">
+ {window.WebGL2RenderingContext ?
+ <>
+ <div ref={mountRef} className="top-0 left-0 w-full h-full" />
+ {loading && (
+ <div className="absolute top-1/2 left-1/2 w-16 h-16 -translate-x-1/2 -translate-y-1/2 border-4 border-white border-t-transparent rounded-full animate-spin" />
+ )}
+ </>
+ :
+ <div className="text-white text-center mt-10">
+ WebGL2 is not supported.
+ </div>
+ }
+ </div>
+ );
+};
\ No newline at end of file
diff --git a/src/pages/Title.tsx b/src/pages/Title.tsx
new file mode 100644
index 0000000..23a9333
--- /dev/null
+++ b/src/pages/Title.tsx
@@ -0,0 +1,50 @@
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+
+import content from "../json/content.json"
+
+export default function Title({isOpen}: {isOpen: boolean}) {
+ const { t } = useTranslation();
+
+ return (
+ <motion.section
+ className="flex items-center justify-center"
+ style={isOpen ? { overflow: "hidden" } : undefined}
+ initial={{ opacity: 0, y: 50 }}
+ whileInView={{ opacity: 1, y: 0 }}
+ viewport={{ amount: 0.2, once: false }}
+ transition={{ duration: 0.3, ease: "easeOut" }}
+ >
+ <div className="absolute top-6 bg-transparent px-4 md:px-12 pt-6 md:pt-5 max-w-5xl flex flex-row justify-between items-center gap-15">
+
+ <motion.div
+ className="text-x2l md:text-3xl font-bold text-white leading-tight"
+ initial={{ opacity: 0, x: -50 }}
+ whileInView={{ opacity: 1, x: 0 }}
+ viewport={{ once: false, amount: 0.5 }}
+ transition={{ duration: 0.3 }}
+ >
+ <h3>{t("me.title")}</h3>
+ <p className="text-sm font-medium text-gray-400">{t("me.subTitle")}</p>
+ </motion.div>
+
+ <motion.div
+ initial={{ opacity: 0, x: 25 }}
+ whileInView={{ opacity: 1, x: 0 }}
+ viewport={{ once: false, amount: 0.5 }}
+ transition={{ duration: 0.3 }}
+ >
+ <img
+ src={content.profile_image}
+ alt={content.name}
+ loading="lazy"
+ className="w-auto h-17 md:h-20 rounded-full object-cover shadow-2xl border-4 border-white/20 transform transition-transform duration-500 hover:scale-105 self-start block"
+ width={96}
+ height={96}
+ />
+ </motion.div>
+
+ </div>
+ </motion.section>
+ );
+};
\ No newline at end of file
diff --git a/src/styles/style.css b/src/styles/style.css
new file mode 100644
index 0000000..cb8c872
--- /dev/null
+++ b/src/styles/style.css
@@ -0,0 +1,33 @@
+@import "tailwindcss";
+
+* {
+ scrollbar-width: thin;
+ scrollbar-color: #2f5643 #1e3d2e;
+}
+
+html,
+body {
+ height: 100dvh;
+ margin: 0;
+ padding: 0;
+ background-color: #1e3d2e;
+ font-family: 'Inter', sans-serif;
+}
+
+::-webkit-scrollbar {
+ width: 12px;
+}
+
+::-webkit-scrollbar-track {
+ background: #1e3d2e;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #2f5643;
+ border-radius: 6px;
+ border: 3px solid #1e3d2e;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background-color: #3f6b55;
+}
\ No newline at end of file
diff --git a/src/three/animQueue.ts b/src/three/animQueue.ts
new file mode 100644
index 0000000..872957c
--- /dev/null
+++ b/src/three/animQueue.ts
@@ -0,0 +1,92 @@
+import * as THREE from "three";
+import Animation from "./animation";
+import assets from "../json/assets.json"
+
+const ANIMATION_ASSETS = assets.animations;
+
+export default class AnimationQueue {
+ private animation: Animation;
+ private queue: THREE.AnimationAction[] = [];
+ private currentAction: THREE.AnimationAction | null = null;
+ private mixer: THREE.AnimationMixer;
+ private randomIntervalId: number | null = null;
+
+ constructor(animation: Animation) {
+ this.mixer = animation.getMixer();
+ this.animation = animation;
+ }
+
+ public onqueue(action: THREE.AnimationAction) {
+ this.queue.push(action);
+ this.tryPlayNext();
+ }
+
+ public replaceFirst(action: THREE.AnimationAction) {
+ this.queue.unshift(action);
+ this.tryPlayNext(true);
+ }
+
+ public async tryPlayNext(force: boolean = false) {
+ if (this.currentAction) {
+ if (force) {
+ this.currentAction.fadeOut(this.animation.getFadeout());
+ this.currentAction = null;
+ } else {
+ if ((this.currentAction as any).isBasicClone) {
+ this.currentAction.fadeOut(this.animation.getFadeout());
+ this.currentAction = null;
+ } else {
+ return;
+ }
+ }
+ }
+
+ if (!this.queue.length) this.queue.push(this.animation.getBasicAction());
+
+ const NEXTACTION = this.queue.shift()!;
+ NEXTACTION.reset();
+ NEXTACTION.setLoop(THREE.LoopOnce, 1);
+ NEXTACTION.clampWhenFinished = true;
+ NEXTACTION.fadeIn(this.animation.getFadein()).play();
+
+ const onFinish = (e: any) => {
+ if (e.action === this.currentAction) {
+ if (this.currentAction) this.currentAction.fadeOut(this.animation.getFadeout());
+ this.mixer.removeEventListener("finished", onFinish);
+ this.currentAction = null;
+ return this.tryPlayNext();
+ }
+ };
+
+ this.currentAction = NEXTACTION;
+ this.mixer.addEventListener("finished", onFinish);
+ }
+
+ public startRandom() {
+ if (this.randomIntervalId !== null) return;
+
+ this.randomIntervalId = window.setInterval(async () => {
+ if (!this.mixer) return;
+ const RANDOMINDEX = Math.floor(Math.random() * ANIMATION_ASSETS.length);
+ this.onqueue(await this.animation.loadAnimation(ANIMATION_ASSETS[RANDOMINDEX]));
+ }, 30_000);
+ }
+
+ public stopRandom() {
+ if (this.randomIntervalId !== null) {
+ clearInterval(this.randomIntervalId);
+ this.randomIntervalId = null;
+ }
+ }
+
+ public clearQueue() {
+ this.queue = [];
+ }
+
+ public stop() {
+ this.clearQueue();
+ this.currentAction?.fadeOut(this.animation.getFadeout());
+ this.currentAction = null;
+ this.stopRandom();
+ }
+}
\ No newline at end of file
diff --git a/src/three/animation.ts b/src/three/animation.ts
new file mode 100644
index 0000000..b572a79
--- /dev/null
+++ b/src/three/animation.ts
@@ -0,0 +1,81 @@
+import * as THREE from "three";
+import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+
+export default class Animation {
+ private mixer: THREE.AnimationMixer;
+ private loader: GLTFLoader;
+
+ private actions: Map<string, THREE.AnimationAction> = new Map();
+ private basicAction!: THREE.AnimationAction;
+
+ private fadein: number;
+ private fadeout: number;
+
+ constructor(
+ model: THREE.Object3D,
+ loader: GLTFLoader,
+ basicAction_url: string,
+ fadein: number = 0.5, fadeout: number = 0.8) {
+ this.mixer = new THREE.AnimationMixer(model);
+ this.loader = loader;
+
+ this.fadein = fadein;
+ this.fadeout = fadeout;
+
+ this.setBasicAction(basicAction_url);
+ }
+
+ public loadAnimation(url: string): Promise<THREE.AnimationAction> {
+ url = `https://guezoloic.com/data/${url}`;
+ return new Promise((resolve, reject) => {
+ if (this.actions.has(url)) return resolve(this.actions.get(url)!);
+ this.loader.load(
+ url,
+ (gltf: GLTF) => {
+ if (!gltf.animations.length) return reject(new Error(`${url} has no animations`));
+ let clip = gltf.animations[0];
+
+ if (clip.tracks.some(track => track.name.endsWith('.position'))) {
+ clip = clip.clone();
+ clip.tracks = clip.tracks.filter(track => !track.name.endsWith('.position'));
+ }
+
+ const action = this.mixer.clipAction(clip);
+ action.stop();
+
+ this.actions.set(url, action);
+
+ resolve(action);
+ },
+ undefined,
+ reject
+ );
+ });
+ }
+
+ public setBasicAction(url: string) {
+ this.loadAnimation(url).then(action => {
+ this.basicAction = action;
+ });
+ }
+
+ public getBasicAction(): THREE.AnimationAction {
+ const clipClone = this.basicAction.getClip().clone();
+ const action = this.mixer.clipAction(clipClone);
+ (action as any).isBasicClone = true;
+ return action;
+ }
+
+ public getFadein(): number { return this.fadein; }
+
+ public getFadeout(): number { return this.fadeout; }
+
+ public update(delta: number) {
+ this.mixer?.update(delta);
+ }
+
+ public getMixer(): THREE.AnimationMixer {
+ if (!this.mixer) throw new Error("Mixer not initialized yet!");
+ return this.mixer
+ }
+}
\ No newline at end of file
diff --git a/src/three/camera.ts b/src/three/camera.ts
new file mode 100644
index 0000000..71d1258
--- /dev/null
+++ b/src/three/camera.ts
@@ -0,0 +1,34 @@
+import * as THREE from "three";
+
+export default class Camera {
+ private camera: THREE.PerspectiveCamera;
+
+ private box = new THREE.Box3();
+ private size = new THREE.Vector3();
+ private center = new THREE.Vector3();
+
+ constructor(camera: THREE.PerspectiveCamera, model: THREE.Object3D) {
+ this.camera = camera;
+ this.box = this.box.setFromObject(model);
+ }
+
+ public centerCamera(
+ mouvement: (box: THREE.Box3, size: THREE.Vector3, center: THREE.Vector3) => void
+ ) {
+ this.box.getSize(this.size);
+ this.box.getCenter(this.center);
+
+ mouvement(this.box, this.size, this.center);
+ }
+
+ public positionCamera() {
+ const fov = this.camera.fov * (Math.PI / 180);
+ const distance = this.size.y / (2 * Math.tan(fov / 2));
+ this.camera.position.set(0, 0, distance * 1.2);
+ this.camera.lookAt(0, 0, 0);
+ }
+
+ public getCamera(): THREE.PerspectiveCamera {
+ return this.camera;
+ }
+}
\ No newline at end of file
diff --git a/src/three/main.ts b/src/three/main.ts
new file mode 100644
index 0000000..64582a6
--- /dev/null
+++ b/src/three/main.ts
@@ -0,0 +1,109 @@
+import * as THREE from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+import Model from "./model";
+import Camera from "./camera";
+import Animation from "./animation";
+
+import assets from "../json/assets.json"
+import AnimationQueue from "./animQueue";
+
+export default class Main {
+ private element!: HTMLElement;
+ private loadingManager?: THREE.LoadingManager;
+
+ private scene!: THREE.Scene;
+ private renderer!: THREE.WebGLRenderer;
+ private camera!: THREE.PerspectiveCamera;
+
+ private controls!: OrbitControls;
+ private loader!: GLTFLoader;
+ private clock: THREE.Clock;
+
+ private animation!: Animation;
+
+ constructor(htmlelement: HTMLElement, loadingManager?: THREE.LoadingManager) {
+ this.element = htmlelement;
+ this.loadingManager = loadingManager;
+ this.clock = new THREE.Clock();
+
+ this.init();
+ }
+
+ private async init() {
+ this.scene = new THREE.Scene();
+
+ this.camera = new THREE.PerspectiveCamera(
+ 75, // fov
+ this.element.clientWidth / this.element.clientHeight, // aspect
+ 0.1, 1000 // near, far
+ );
+
+ this.renderer = new THREE.WebGLRenderer({
+ antialias: true,
+ alpha: true
+ });
+ this.renderer.setSize(
+ this.element.clientWidth,
+ this.element.clientHeight
+ );
+ this.element.appendChild(this.renderer.domElement);
+
+ const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
+ this.scene.add(ambientLight);
+
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
+ directionalLight.position.set(5, 5, 5);
+ this.scene.add(directionalLight);
+
+ this.controls = new OrbitControls(this.camera, this.element);
+ this.controls.minPolarAngle = Math.PI / 2;
+ this.controls.maxPolarAngle = Math.PI / 2;
+ this.controls.enableZoom = false;
+ this.controls.enablePan = false;
+
+ this.renderer.domElement.style.touchAction = 'pan-y';
+
+ this.loader = new GLTFLoader(this.loadingManager);
+
+ window.addEventListener("resize", () => {
+ const WIDTH = window.innerWidth;
+ const HEIGHT = window.innerHeight;
+
+ this.camera.aspect = WIDTH / HEIGHT;
+ this.camera.updateProjectionMatrix();
+ this.renderer.setSize(WIDTH, HEIGHT);
+ });
+
+ const MODEL = await (new Model(this.loader)).init(assets.model, this.scene);
+
+ const CAMERA = new Camera(this.camera, MODEL);
+ CAMERA.centerCamera((_box: any, size: any, center: any) => {
+ MODEL.position.sub(center);
+ MODEL.position.y -= size.y * 0.3;
+ });
+ CAMERA.positionCamera();
+
+ // Animation
+ this.animation = new Animation(MODEL, this.loader, assets.idle_animation);
+
+ const ANIMATION_QUEUE = new AnimationQueue(this.animation);
+ ANIMATION_QUEUE.onqueue(await this.animation.loadAnimation(assets.welcome_animation));
+ ANIMATION_QUEUE.startRandom();
+
+ this.animate();
+ }
+
+ // animate must be an arrow key so that "this"
+ // can be pointed to the Main instance
+ private animate = () => {
+ requestAnimationFrame(this.animate);
+
+ const delta = this.clock.getDelta();
+ if (this.animation) this.animation.update(delta);
+
+ this.controls.update();
+ this.renderer.render(this.scene, this.camera);
+ }
+}
\ No newline at end of file
diff --git a/src/three/model.ts b/src/three/model.ts
new file mode 100644
index 0000000..f1ab976
--- /dev/null
+++ b/src/three/model.ts
@@ -0,0 +1,28 @@
+import * as THREE from "three";
+import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+
+export default class Model {
+ private loader: GLTFLoader;
+
+ constructor(loader: GLTFLoader) {
+ this.loader = loader;
+ }
+
+ public async init(model_url: string, scene: THREE.Scene, isVisible: boolean = true): Promise<THREE.Object3D> {
+ const MODEL = await this.loadModel(`https://guezoloic.com/data/${model_url}`);
+ MODEL.visible = isVisible;
+ scene.add(MODEL);
+ return MODEL;
+ }
+
+ public loadModel(model_url: string): Promise<THREE.Object3D> {
+ return new Promise((resolve, reject) => {
+ this.loader.load(
+ model_url,
+ (gltf: GLTF) => resolve(gltf.scene),
+ undefined,
+ reject
+ );
+ });
+ }
+}
\ No newline at end of file
diff --git a/src/utils/translation.ts b/src/utils/translation.ts
new file mode 100644
index 0000000..5a35afb
--- /dev/null
+++ b/src/utils/translation.ts
@@ -0,0 +1,23 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import en from '../locales/en.json';
+import fr from '../locales/fr.json';
+
+const resources = { en: { translation: en }, fr: { translation: fr } };
+
+const userLang = navigator.language.startsWith('fr') ? 'fr' : 'en';
+
+i18n
+ .use(initReactI18next)
+ .init({
+ resources,
+ lng: userLang,
+ fallbackLng: 'en',
+ interpolation: { escapeValue: false },
+ })
+;
+
+document.documentElement.lang = i18n.language;
+
+export default i18n;
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..05bc19a
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [
+ tailwindcss(),
+ react()
+ ],
+})