diff --git a/lanro.eu/components.js b/lanro.eu/components.js new file mode 100644 index 0000000..b882575 --- /dev/null +++ b/lanro.eu/components.js @@ -0,0 +1,105 @@ +/* ============================================================ + Roman Felden — Composants partagés + Navbar, footer, toggle thème, animations au scroll + ============================================================ */ + +const navbarHTML = ` + +`; + +const footerHTML = ` + +`; + +document.addEventListener("DOMContentLoaded", () => { + const body = document.body; + body.insertAdjacentHTML("afterbegin", navbarHTML); + body.insertAdjacentHTML("beforeend", footerHTML); + + /* ---------- Lien actif ---------- */ + const page = window.location.pathname.split("/").pop(); + const activeMap = { + "": "nav-index", + "index.html": "nav-index", + "cv.html": "nav-cv", + "cv-roman-felden.html": "nav-cv", + "projets.html": "nav-projets", + }; + const activeId = activeMap[page]; + if (activeId) document.getElementById(activeId)?.classList.add("active"); + + /* ---------- Thème ---------- */ + const toggleBtn = document.getElementById("theme-toggle"); + const sunIcon = document.getElementById("theme-icon-sun"); + const moonIcon = document.getElementById("theme-icon-moon"); + + const applyTheme = (theme) => { + document.documentElement.setAttribute("data-theme", theme); + sunIcon.style.display = theme === "dark" ? "block" : "none"; + moonIcon.style.display = theme === "dark" ? "none" : "block"; + }; + + const saved = localStorage.getItem("theme"); + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + applyTheme(saved || (prefersDark ? "dark" : "light")); + + toggleBtn.addEventListener("click", () => { + const current = document.documentElement.getAttribute("data-theme"); + const next = current === "dark" ? "light" : "dark"; + localStorage.setItem("theme", next); + applyTheme(next); + }); + + /* ---------- Apparition au scroll ---------- */ + const revealEls = document.querySelectorAll(".reveal"); + if ("IntersectionObserver" in window && revealEls.length) { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("is-visible"); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.08, rootMargin: "0px 0px -40px 0px" } + ); + revealEls.forEach((el) => observer.observe(el)); + } else { + revealEls.forEach((el) => el.classList.add("is-visible")); + } +}); diff --git a/lanro.eu/cv-roman-felden.html b/lanro.eu/cv-roman-felden.html index ebea840..b93dad6 100644 --- a/lanro.eu/cv-roman-felden.html +++ b/lanro.eu/cv-roman-felden.html @@ -4,1248 +4,213 @@ - - - - - - - - - - - - - - - - - CV - Roman Felden | Coordinateur Sécurité & Systèmes + CV — Roman Felden - - + + + +
+
+
+ + Curriculum Vitæ — Mis à jour 2026 +
+

Roman Felden

+

+ Coordinateur Sécurité & Systèmes Informatique — j'administre des parcs, + je sécurise des infrastructures et je coordonne des équipes techniques. +

+
+
+
-
- -
-
-
-
RF
-
-

Roman FELDEN

-

Coordinateur Sécurité & Systèmes Informatique

-
- Master RIE - Sécurité - Réseaux - Systèmes -
-
-
-
- - - - - +
+ + +
-
- -
-
-
- - - -
-

Expériences Professionnelles

+
+ Langues +
FrançaisNatif
+
AnglaisTechnique
+
+ +
+ Centres d'intérêt +
+ Photographie & Vidéo + Ski + Moto + Randonnée + Veille techno
+
+ -
-
-
-

Coordinateur Sécurité et Système

-

ENSAG - Ecole Nationale Supérieure d'Architecture de Grenoble

-

- - - - - Grenoble, Auvergne-Rhône-Alpes -

+ +
+ + +
+
+ 01 +

Expériences professionnelles

+
+
+
+
+

Coordinateur Sécurité et Système

+ Sept. 2024 — Présent
- - - - - Sept. 2024 - Présent · 1 an 4 mois - -
-
-
    -
  • Administration système Linux et gestion de parc informatique
    • +

    ENSAG — École Nationale Supérieure d'Architecture de Grenoble

    +

    Grenoble, Auvergne-Rhône-Alpes

    +
      +
    • Administration système Linux et gestion de parc informatique Windows (~120 postes)
    • Supervision de la sécurité informatique et des politiques de sécurité
      • -
    • Maintenance préventive et évolutive des infrastructures
      • +
    • Coordination d'équipe informatique (3 personnes)
    -
-
- -
-
-
-

Administrateur Réseau et Systèmes en alternance

-

Administration Réseau et Systèmes en alternance

-

- - - - - Hybrid -

+ +
+
+

Administrateur Réseau et Systèmes

+ Sept. 2022 — Sept. 2024
- - - - - Sept. 2022 - Présent · 3 ans 4 mois - -
-
-
    +

    ENSAG — École Nationale Supérieure d'Architecture de Grenoble

    +

    Grenoble, Auvergne-Rhône-Alpes · Alternance

    +
    • Gestion complète du matériel informatique et des infrastructures
      • -
    • Administration réseau (switchs, routeurs, firewall) et systèmes
      • -
    • Maintenance, support technique et résolution de incidents
      • +
    • Administration réseau — switchs Alcatel, routeurs Cisco, firewall Stormshield
      • +
    • Maintenance, support technique et résolution d'incidents (~1000 utilisateurs)
    -
-
- -
-
-
-

Administrateur Système en alternance

-

Préfecture du Département de l'Ardèche

-

- - - - - Privas, Auvergne-Rhône-Alpes -

+ +
+
+

Administrateur Système

+ Sept. 2021 — Sept. 2022
- - - - - Sept. 2021 - Sept. 2022 · 1 an 1 mois - -
-
-
    -
  • Contrat en alternance - Administration système
    • -
  • Gestion des serveurs et des postes de travail
    • +

    Préfecture du Département de l'Ardèche

    +

    Privas, Auvergne-Rhône-Alpes · Alternance

    +
      +
    • Administration système et gestion des serveurs
    • Support technique aux utilisateurs et maintenance
    -
-
- -
-
-
-

Stagiaire Projet

-

CONDUENT

-

- - - - - Guilherand-Granges -

+ +
+
+

Stagiaire Projet

+ Mai 2020 — Juil. 2020
- - - - - Mai 2020 - Juil. 2020 · 3 mois - -
-
-
    -
  • Tests et comparatifs de routeurs et switchs pour équipement des bus de Lyon
    • +

    CONDUENT

    +

    Guilherand-Granges

    +
      +
    • Tests et comparatifs de routeurs et switchs pour équiper les bus de Lyon
    • Mise en place de tableaux comparatifs et protocoles de tests
      • -
    • Rédaction de documentations techniques pour décision d'équipement
      • +
    • Rédaction de documentations techniques
    -
-
- -
-
-
-

Stagiaire Technicien Informatique

-

Bimp

-

- - - - - Région de Valence -

-
- - - - - Janv. 2017 - Mars 2017 · 3 mois - -
-
-
    -
  • Réparation de matériel Apple (MacBook Pro, iMac, Mac Mini) - logiciel et hardware
    • -
  • Mise en place de serveur Net-Install pour déploiement
    • -
  • Réparation de devices mobiles (iPhone, iPad)
    • -
-
-
- -
-
-
-

Stage de Découverte

-

QUICOM

-

- - - - - Etoile-sur-Rhône -

-
- - - - - Janv. 2016 - Févr. 2016 · 2 mois - -
-
-
    -
  • Découverte du milieu professionnel et de l'environnement informatique
    • -
-
+
-
-
-
- - - - - -
-

Formation

+
+
+ 02 +

Formation

- -
-
-
-
-

Grenoble INP - Ensimag

-

Master Réseau Informatique en Entreprise

-
- 2022 - 2024 -
+
+
+

Grenoble INP — Ensimag

+

Master Réseau Informatique en Entreprise

+ 2022 — 2024
- -
-
-
-

Grenoble INP - Ensimag

-

Master 1 (M1) RIE

-
- 2022 - 2023 -
+
+

UGA IUT1

+

Licence Professionnelle Réseaux & Télécommunications

+ 2021 — 2022
- -
-
-
-

UGA IUT1

-

Licence Professionnel Réseaux & Télécommunications

-
- 2021 - 2022 -
-
- -
-
-
-

UGA IUT1

-

L2 Informatique

-
- 2020 - 2021 -
-
- -
-
-
-

UGA IUT1

-

DUT Réseaux & Télécommunications

-
- 2018 - 2020 -
+
+

UGA IUT1

+

DUT Réseaux & Télécommunications

+ 2018 — 2020
-
-
-
- - - -
-

Compétences

+
+
+ 03 +

Compétences

- -
-
-
-
- - - -
-

Systèmes & Réseaux

-
-
- Linux - Windows Server - Active Directory - Administration Réseau - Sécurité - Virtualisation +
+
+

Systèmes & Réseaux

+
+ Linux — Fedora, RHEL, Ubuntu, Debian + Windows Server — AD, DNS, DHCP + Virtualisation — Proxmox, VMware + Cyber-sécurité — phishing, hardening + Inférence IA — LMStudio, llama.cpp, Ollama + Gestion de projets — Kanban, Gantt
- -
-
-
- - - -
-

Infrastructure

-
-
- Switch - Routeur - Firewall - Hardware PC - Mac +
+

Infrastructure

+
+ Switch Cisco, Alcatel + Routeur Cisco + Firewall Stormshield + Hardware PC + Mac
- -
-
-
- - - -
-

Protocoles & Outils

-
-
- DNS - TCP/IP - Routing - Python - Bash -
-
- -
-
-
- - -
-
-
- - - -
-

Langues

-
- -
-
-
🇫🇷
-
- Français - Natif -
-
-
-
🇬🇧
-
- Anglais - Technique +
+

Protocoles & Outils

+
+ DNS + TCP/IP + Routage + Python + Bash
- -
-
-
- - - -
-

Centres d'Intérêt

-
- -
-
-
- - - - -
- Photographie & Vidéo -
- -
-
- - - -
- Hardware & Composants -
-
-
- - - -
- Moto -
-
-
-
- - - -
+ +
+ + - \ No newline at end of file + diff --git a/lanro.eu/cv.html b/lanro.eu/cv.html index 0fafdc3..b93dad6 100644 --- a/lanro.eu/cv.html +++ b/lanro.eu/cv.html @@ -4,1424 +4,213 @@ - - - - - - - - - - - - - - - - - - - - CV - Roman Felden | Coordinateur Sécurité & Systèmes + CV — Roman Felden - - + - - +
-
- -
-
-
-
RF
-
-

Roman FELDEN

-

Coordinateur Sécurité & Systèmes Informatique

-
- Master RIE - Sécurité - Réseaux - Systèmes -
-
-
-
- - - - - +
+ + +
-
- -
-
-
- - - -
-

Expériences Professionnelles

+
+ Langues +
FrançaisNatif
+
AnglaisTechnique
+
+ +
+ Centres d'intérêt +
+ Photographie & Vidéo + Ski + Moto + Randonnée + Veille techno
+
+ -
-
-
-

Coordinateur Sécurité et Système

-

ENSAG - Ecole Nationale Supérieure d'Architecture de Grenoble

-

- - - - - Grenoble, Auvergne-Rhône-Alpes -

+ +
+ + +
+
+ 01 +

Expériences professionnelles

+
+
+
+
+

Coordinateur Sécurité et Système

+ Sept. 2024 — Présent
- - - - - Sept. 2024 - Présent - -
-
-
    -
  • Administration système Linux et gestion de parc informatique
    • +

    ENSAG — École Nationale Supérieure d'Architecture de Grenoble

    +

    Grenoble, Auvergne-Rhône-Alpes

    +
      +
    • Administration système Linux et gestion de parc informatique Windows (~120 postes)
    • Supervision de la sécurité informatique et des politiques de sécurité
      • -
    • Maintenance préventive et évolutive des infrastructures
      • +
    • Coordination d'équipe informatique (3 personnes)
    -
-
- -
-
-
-

Administrateur Réseau et Systèmes en alternance

-

Administration Réseau et Systèmes en alternance

-

- - - - - Hybrid -

+ +
+
+

Administrateur Réseau et Systèmes

+ Sept. 2022 — Sept. 2024
- - - - - Sept. 2022 - Présent - -
-
-
    +

    ENSAG — École Nationale Supérieure d'Architecture de Grenoble

    +

    Grenoble, Auvergne-Rhône-Alpes · Alternance

    +
    • Gestion complète du matériel informatique et des infrastructures
      • -
    • Administration réseau (switchs, routeurs, firewall) et systèmes
      • -
    • Maintenance, support technique et résolution de incidents
      • +
    • Administration réseau — switchs Alcatel, routeurs Cisco, firewall Stormshield
      • +
    • Maintenance, support technique et résolution d'incidents (~1000 utilisateurs)
    -
-
- -
-
-
-

Administrateur Système en alternance

-

Préfecture du Département de l'Ardèche

-

- - - - - Privas, Auvergne-Rhône-Alpes -

+ +
+
+

Administrateur Système

+ Sept. 2021 — Sept. 2022
- - - - - Sept. 2021 - Sept. 2022 - -
-
-
    -
  • Contrat en alternance - Administration système
    • -
  • Gestion des serveurs et des postes de travail
    • +

    Préfecture du Département de l'Ardèche

    +

    Privas, Auvergne-Rhône-Alpes · Alternance

    +
      +
    • Administration système et gestion des serveurs
    • Support technique aux utilisateurs et maintenance
    -
-
- -
-
-
-

Stagiaire Projet

-

CONDUENT

-

- - - - - Guilherand-Granges -

+ +
+
+

Stagiaire Projet

+ Mai 2020 — Juil. 2020
- - - - - Mai 2020 - Juil. 2020 - -
-
-
    -
  • Tests et comparatifs de routeurs et switchs pour équipement des bus de Lyon
    • +

    CONDUENT

    +

    Guilherand-Granges

    +
      +
    • Tests et comparatifs de routeurs et switchs pour équiper les bus de Lyon
    • Mise en place de tableaux comparatifs et protocoles de tests
      • -
    • Rédaction de documentations techniques pour décision d'équipement
      • +
    • Rédaction de documentations techniques
    -
+
-
-
-
- - - - - -
-

Formation

+
+
+ 02 +

Formation

- -
-
-
-
-

Grenoble INP - Ensimag

-

Master Réseau Informatique en Entreprise

-
- 2022 - 2024 -
+
+
+

Grenoble INP — Ensimag

+

Master Réseau Informatique en Entreprise

+ 2022 — 2024
- -
-
-
-

Grenoble INP - Ensimag

-

Master 1 (M1) RIE

-
- 2022 - 2023 -
+
+

UGA IUT1

+

Licence Professionnelle Réseaux & Télécommunications

+ 2021 — 2022
- -
-
-
-

UGA IUT1

-

Licence Professionnel Réseaux & Télécommunications

-
- 2021 - 2022 -
-
- -
-
-
-

UGA IUT1

-

DUT Réseaux & Télécommunications

-
- 2018 - 2020 -
+
+

UGA IUT1

+

DUT Réseaux & Télécommunications

+ 2018 — 2020
-
-
-
- - - -
-

Compétences

+
+
+ 03 +

Compétences

- -
-
-
-
- - - -
-

Systèmes & Réseaux

-
-
- Linux - Windows Server - Active Directory - Administration Réseau - Sécurité - Virtualisation +
+
+

Systèmes & Réseaux

+
+ Linux — Fedora, RHEL, Ubuntu, Debian + Windows Server — AD, DNS, DHCP + Virtualisation — Proxmox, VMware + Cyber-sécurité — phishing, hardening + Inférence IA — LMStudio, llama.cpp, Ollama + Gestion de projets — Kanban, Gantt
- -
-
-
- - - -
-

Infrastructure

-
-
- Switch - Routeur - Firewall - Hardware PC - Mac +
+

Infrastructure

+
+ Switch Cisco, Alcatel + Routeur Cisco + Firewall Stormshield + Hardware PC + Mac
- -
-
-
- - - -
-

Protocoles & Outils

-
-
- DNS - TCP/IP - Routing - Python - Bash +
+

Protocoles & Outils

+
+ DNS + TCP/IP + Routage + Python + Bash
- -
-
-
- - - -
-

Langues

-
- -
-
-
🇫🇷
-
- Français - Natif -
-
-
-
🇬🇧
-
- Anglais - Technique -
-
-
-
- - -
-
-
- - - -
-

Centres d'Intérêt

-
- -
-
-
- - - - -
- Photographie & Vidéo -
- -
-
- - - -
- Hardware & Composants -
- -
-
- - - -
- Moto -
-
-
-
- - - -
+ +
- + diff --git a/lanro.eu/index.html b/lanro.eu/index.html index d0d974f..b1be72c 100644 --- a/lanro.eu/index.html +++ b/lanro.eu/index.html @@ -4,889 +4,221 @@ - - - - - - - - - - - - - - - - - - - - Roman Felden - Portfolio + Roman Felden — Coordinateur Sécurité & Systèmes - - + - - - -
-
-
RF
-

Roman Felden

-

Coordinateur Sécurité & Systèmes Informatique

-
- - - - - Voir mon CV - - - - - - Mes Projets - + +
+
+
+
+ + Portfolio — Grenoble, France +
+

Roman
Felden.

+

Coordinateur Sécurité & Systèmes Informatique

+

+ J'administre des infrastructures, je sécurise des systèmes et je coordonne + des équipes — avec un faible pour l'auto-hébergement et les réseaux bien propres. +

+
+ + Voir mon CV + + + + + + Mes projets + + + + +
+
+ Disponible pour opportunités + Master RIE — Grenoble INP +
-
+ - +
-
-

À Propos

-

Passionné par les systèmes, réseaux et sécurité informatique

+
+ 01 +

À propos

+

Passionné par les systèmes, les réseaux et la sécurité informatique.

-
-
-
- - - -
-

Expérience

-

Plus de 5 ans d'expérience dans l'administration système et réseau, avec une spécialisation en sécurité informatique.

+
+
+ Expérience +

5+ années

+

Administration système et réseau, avec une spécialisation en sécurité informatique et une coordination d'équipe.

-
-
- - - -
-

Formation

-

Master RIE (Réseau Informatique en Entreprise) de Grenoble INP - Ensimag, avec une spécialisation en systèmes et réseaux.

+
+ Formation +

Master RIE

+

Réseau Informatique en Entreprise à Grenoble INP — Ensimag, spécialisation systèmes et réseaux.

-
-
- - - - -
-

Localisation

-

Basé à Grenoble, France. Disponible pour des opportunités professionnelles dans la région ou en télétravail.

+
+ Localisation +

Grenoble

+

Basé en Isère, disponible pour des opportunités professionnelles dans la région ou en télétravail.

- -
+ +
-
-

Compétences Clés

-

Domaines d'expertise technique

+
+ 02 +

Compétences clés

+

Domaines d'expertise technique, du pare-feu au script.

-
-
-
- - - +
+
+ a. +

Systèmes & Réseaux

+
+ Linux + Windows Server + Active Directory + DNS / TCP/IP
-

Systèmes & Réseaux

-

Administration Linux, Windows Server, Active Directory, Switch, Routeur, Firewall

-
-
- - - -
+
+ b.

Sécurité

-

Supervision de la sécurité informatique, politiques de sécurité, gestion des incidents

-
-
-
- - - +
+ Supervision + Politiques de sécurité + Hardening + Gestion d'incidents
-

Virtualisation

-

Proxmox, gestion de serveurs virtuels, déploiement d'infrastructures virtualisées

-
-
- - - +
+ c. +

Infrastructure

+
+ Switch Cisco / Alcatel + Routeur Cisco + Firewall Stormshield +
+
+
+ d. +

Virtualisation & Dev

+
+ Proxmox + VMware + Python + Bash
-

Développement

-

Python, Bash, scripting, développement Android (Java)

- +
-
-

Mes Projets

-

Découvrez mes réalisations personnelles et professionnelles

+
+ 03 +

Projets sélectionnés

+

Réalisations personnelles et professionnelles.

-
-
-
- - - +
+
+ 01 +
+

Homelab Proxmox

+

Infrastructure de virtualisation complète pour héberger services et expérimentations techniques.

+
+ Proxmox VE + Docker + ZFS + VLAN +
-

Homelab Proxmox

-

Infrastructure de virtualisation complète avec Proxmox pour héberger divers services et expérimentations techniques.

- - En savoir plus - - - - -
-
-
- - + + + +
+ 02 +
+

Boidelo

+

Application Android de jeu de société multijoueur, 150 questions et interface Material Design 3.

+
+ Android + Java 17 + Material 3 +
-

Boidelo

-

Application Android de jeu de société multijoueur avec 150 questions, interface Material Design 3 et paramètres personnalisables.

- - En savoir plus - - - - -
-
-
- - + + + +
+ 03 +
+

Custom Ore Gen

+

Mod Minecraft 1.20.1 modifiant la distribution des ressources : minerais, outils et armures inédits.

+
+ Minecraft + Forge + Java 17 +
-

Custom Ore Gen

-

Mod Minecraft 1.20.1 modifiant la distribution des ressources avec nouveaux minerais, outils et armures intermédiaires.

- - En savoir plus - - - - -
-
-
- - + + + +
+ 04 +
+

GeoRealmCraft

+

Serveur Minecraft public : infrastructure scalable, gestion de communauté et modpack technique.

+
+ Administration + Communauté + Monitoring +
-

GeoRealmCraft

-

Serveur Minecraft public avec infrastructure scalable, gestion de communauté et maintenance de modpack technique.

- - En savoir plus - - + -
+ + +
- - - - + diff --git a/lanro.eu/projets.html b/lanro.eu/projets.html index 7dc682f..e0774c3 100644 --- a/lanro.eu/projets.html +++ b/lanro.eu/projets.html @@ -3,978 +3,344 @@ - - - - - - - - - - - - - - - - - - Projets - Roman Felden + + Projets — Roman Felden - - + - - -
- -
-

Mes Projets

-

Découvrez mes réalisations personnelles dans le domaine de l'infrastructure, du développement et du modding

-
- - -
-
-
- - - -
-
-

Homelab Proxmox

-

Infrastructure de virtualisation complète

-
-
-
- Infrastructure - Virtualisation - Réseaux - Sécurité -
-
-

Mon Homelab basé sur Proxmox VE est une infrastructure de virtualisation complète qui me permet d'héberger divers services, d'expérimenter de nouvelles technologies et de développer mes compétences en administration système. C'est un environnement d'apprentissage et de test pour les technologies de virtualisation, de conteneurisation et de réseautage.

-
-
-
- - - -
-

Virtualisation avancée

-

Gestion de machines virtuelles Linux et Windows avec Proxmox VE

-
-
-
- - - -
-

Conteneurisation

-

Déploiement de services avec LXC et Docker pour une isolation légère

-
-
-
- - - -
-

Réseautage complexe

-

VLANs, bridges, et configuration réseau avancée

-
-
-
- - - -
-

Stockage et backup

-

ZFS pour la gestion du stockage avec snapshots et réplications

-
-
-
- - - -
-

Services auto-hébergés

-

DNS, surveillance, stockage cloud, bases de données, etc.

-
-
-
-
- Proxmox VE - Linux - Docker - LXC - ZFS - VLAN - Networking -
-
- - -
-
-
- - - -
-
-

Boidelo

-

Application Android de jeu de société

-
-
-
- Android - Java - Material Design - Jeu -
-
-

Boidelo est une application Android de jeu de société multijoueur similaire à "King's Cup" ou "Never Have I Ever". L'application permet à un groupe de joueurs de répondre à des questions aléatoires et de relever des défis. Elle inclut 150 questions préchargées, une interface Material Design 3, et des paramètres personnalisables.

-
-
-
- - - -
-

Jeu multijoueur

-

Support de 3 à illimité de joueurs avec saisie dynamique des noms

-
-
-
- - - -
-

150 questions préchargées

-

Questions variées depuis un fichier JSON avec système de variantes

-
-
-
- - - -
-

Défis multi-manches

-

Système de défis avec compte à rebours et gestion optimisée

-
-
-
- - - -
-

Paramètres personnalisables

-

Nombre de questions, ajout de gorgées, durée des défis, ratio BDD/OpenAI

-
-
-
- - - -
-

Interface Material Design 3

-

Design moderne avec animations fluides et support du mode sombre

-
-
-
-
- Android SDK - Java 17 - Material Design 3 - Gradle - JSON - PostgreSQL -
-
- - -
-
-
- - - -
-
-

Custom Ore Gen

-

Mod Minecraft 1.20.1 - Forge

-
-
-
- Minecraft - Forge - MCreator - Java -
-
-

Custom Ore Gen est un mod Minecraft développé avec MCreator pour Forge 1.20.1. Ce mod modifie la distribution des ressources en ajoutant de nouvelles variantes de minerais avec des drops configurables, des outils personnalisés, et une armure intermédiaire située entre le fer et le diamant. Il est conçu pour être utilisé avec KubeJS et Biomes O' Plenty.

-
-
-
- - - -
-

16 nouveaux minerais

-

Variantes de diamant, or, charbon, fer, émeraude, redstone, lapis et cuivre

-
-
-
- - - -
-

Distribution par biome

-

Génération basée sur la température (froid, chaud, tempéré, montagneux, rare)

-
-
-
- - - -
-

Diamond Shards

-

Nouveau resource pour outils et armure intermédiaires (9 shards = 1 diamant)

-
-
-
- - - -
-

Outils en Diamond Shard

-

Pioche, pelle, hache et Paxel (outil combiné pioche+pelle+hache)

-
-
-
- - - -
-

Armure intermédiaire

-

17 protection, 1060 durabilité (entre fer et diamant)

-
-
-
- - - -
-

Ore Biome Finder

-

Utilitaire pour identifier les minerais présents dans le biome actuel

-
-
-
- - - -
-

Support Biomes O' Plenty

-

69 biomes BOP supplémentaires classés par température

-
-
-
-
- Minecraft 1.20.1 - Forge 47.3.0 - MCreator - Java 17 - KubeJS - - - - - CurseForge - -
-
- - -
-
-
- - - -
-
-

GeoRealmCraft

-

Serveur Minecraft public & Infrastructure

-
-
-
- Infrastructure - Serveur Public - Administration - Minecraft -
-
-

GeoRealmCraft est un serveur Minecraft public avec infrastructure complète. Projet technique d'administration système et de gestion de communauté, incluant maintenance de serveur, modpack technique, gestion des utilisateurs et monitoring. Expérience concrète en gestion d'infrastructure et de communauté en ligne.

-
-
-
- - - -
-

Administration serveur

-

Gestion complète de serveur, configuration, maintenance et mise à jour

-
-
-
- - - -
-

Gestion de communauté

-

Moderation, support utilisateur, gestion des conflits et animation

-
-
-
- - - -
-

Infrastructure scalable

-

Configuration technique optimisée, performance et gestion de la charge

-
-
-
- - - -
-

Maintenance & monitoring

-

Sauvegardes automatisées, surveillance des performances et résolution d'incidents

-
-
-
-
- Administration Système - Gestion de Communauté - Monitoring - Maintenance - Backup -
-
-
- - - + - + diff --git a/lanro.eu/style.css b/lanro.eu/style.css new file mode 100644 index 0000000..b71432c --- /dev/null +++ b/lanro.eu/style.css @@ -0,0 +1,1202 @@ +/* ============================================================ + Roman Felden — Portfolio + Design : minimalisme éditorial + Serif display (Fraunces) + Sans (Inter) + Mono (IBM Plex Mono) + ============================================================ */ + +/* ---------- Tokens ---------- */ +:root { + --paper: #faf9f5; + --paper-raised: #ffffff; + --ink: #191713; + --ink-soft: #44403a; + --muted: #80796e; + --hairline: #e6e2d8; + --hairline-strong: #d5d0c4; + --accent: #c2481d; + --accent-soft: rgba(194, 72, 29, 0.08); + --selection: rgba(194, 72, 29, 0.18); + + --font-serif: "Fraunces", Georgia, serif; + --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; + --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; + + --container: 68rem; + --gutter: clamp(1.25rem, 4vw, 2.5rem); + --section-gap: clamp(4.5rem, 10vw, 8rem); + + --ease-out: cubic-bezier(0.22, 1, 0.36, 1); + --nav-h: 4.5rem; +} + +[data-theme="dark"] { + --paper: #14120f; + --paper-raised: #1c1a16; + --ink: #ece8e0; + --ink-soft: #c8c2b6; + --muted: #8f887b; + --hairline: #2b2822; + --hairline-strong: #3b372f; + --accent: #e8734a; + --accent-soft: rgba(232, 115, 74, 0.12); + --selection: rgba(232, 115, 74, 0.3); +} + +/* ---------- Reset ---------- */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + scroll-padding-top: calc(var(--nav-h) + 1rem); +} + +body { + font-family: var(--font-sans); + font-size: 1rem; + line-height: 1.65; + color: var(--ink); + background: var(--paper); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + transition: background-color 0.35s ease, color 0.35s ease; +} + +::selection { + background: var(--selection); + color: var(--ink); +} + +img, svg { + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +ul, ol { + list-style: none; +} + +button { + font: inherit; + color: inherit; + background: none; + border: none; + cursor: pointer; +} + +/* ---------- Utilities ---------- */ +.container { + max-width: var(--container); + margin-inline: auto; + padding-inline: var(--gutter); +} + +.mono-label { + font-family: var(--font-mono); + font-size: 0.72rem; + font-weight: 500; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--muted); +} + +.hairline-top { + border-top: 1px solid var(--hairline); +} + +/* Animated underline link */ +.u-link { + position: relative; + color: var(--ink); + background-image: linear-gradient(currentColor, currentColor); + background-size: 0% 1px; + background-position: 0 100%; + background-repeat: no-repeat; + transition: background-size 0.35s var(--ease-out), color 0.2s ease; +} + +.u-link:hover { + background-size: 100% 1px; +} + +.u-link--accent { + color: var(--accent); +} + +/* ---------- Scroll reveal ---------- */ +.reveal { + opacity: 0; + transform: translateY(22px); + transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); + transition-delay: var(--reveal-delay, 0s); +} + +.reveal.is-visible { + opacity: 1; + transform: none; +} + +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + .reveal { + opacity: 1; + transform: none; + transition: none; + } + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.01ms !important; + } +} + +/* ============================================================ + NAVBAR + ============================================================ */ +.navbar { + position: fixed; + inset: 0 0 auto 0; + z-index: 100; + height: var(--nav-h); + background: color-mix(in srgb, var(--paper) 82%, transparent); + -webkit-backdrop-filter: blur(14px); + backdrop-filter: blur(14px); + border-bottom: 1px solid var(--hairline); + transition: background-color 0.35s ease; +} + +.navbar-container { + max-width: var(--container); + height: 100%; + margin-inline: auto; + padding-inline: var(--gutter); + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.navbar-brand { + display: flex; + align-items: baseline; + gap: 0.6rem; +} + +.navbar-brand .brand-name { + font-family: var(--font-serif); + font-size: 1.15rem; + font-weight: 600; + letter-spacing: 0.01em; + white-space: nowrap; +} + +.navbar-brand .brand-dot { + color: var(--accent); +} + +.navbar-brand .brand-tag { + font-family: var(--font-mono); + font-size: 0.66rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--muted); +} + +.navbar-menu { + display: flex; + align-items: center; + gap: clamp(1rem, 3vw, 2rem); +} + +.navbar-menu a { + position: relative; + font-size: 0.92rem; + font-weight: 500; + color: var(--ink-soft); + padding: 0.25rem 0; + transition: color 0.2s ease; +} + +.navbar-menu a::after { + content: ""; + position: absolute; + left: 0; + bottom: -2px; + width: 100%; + height: 1px; + background: var(--accent); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.3s var(--ease-out); +} + +.navbar-menu a:hover, +.navbar-menu a.active { + color: var(--ink); +} + +.navbar-menu a:hover::after, +.navbar-menu a.active::after { + transform: scaleX(1); +} + +.navbar-menu .nav-index { + font-family: var(--font-mono); + font-size: 0.66rem; + color: var(--muted); + margin-right: 0.35rem; +} + +/* Theme toggle */ +.theme-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2.25rem; + border: 1px solid var(--hairline-strong); + border-radius: 50%; + color: var(--ink-soft); + transition: color 0.2s ease, border-color 0.2s ease, transform 0.4s var(--ease-out); +} + +.theme-toggle:hover { + color: var(--accent); + border-color: var(--accent); + transform: rotate(40deg); +} + +.theme-toggle svg { + width: 1.05rem; + height: 1.05rem; +} + +/* ============================================================ + BUTTONS + ============================================================ */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.6rem; + font-size: 0.95rem; + font-weight: 550; + padding: 0.85rem 1.6rem; + border-radius: 999px; + border: 1px solid var(--ink); + transition: all 0.25s var(--ease-out); +} + +.btn svg { + width: 1rem; + height: 1rem; + transition: transform 0.25s var(--ease-out); +} + +.btn-primary { + background: var(--ink); + color: var(--paper); +} + +.btn-primary:hover { + background: var(--accent); + border-color: var(--accent); + color: #fff; +} + +.btn-primary:hover svg { + transform: translateX(3px); +} + +.btn-outline { + background: transparent; + color: var(--ink); + border-color: var(--hairline-strong); +} + +.btn-outline:hover { + border-color: var(--ink); +} + +.btn-outline:hover svg { + transform: translateX(3px); +} + +/* ============================================================ + HERO (index) + ============================================================ */ +.hero { + min-height: 92svh; + display: flex; + align-items: center; + padding-top: var(--nav-h); + position: relative; +} + +.hero-grid { + display: grid; + grid-template-columns: 1fr; + gap: 2.5rem; + width: 100%; +} + +.hero-meta { + display: flex; + align-items: center; + gap: 1rem; +} + +.hero-meta .rule { + flex: 0 0 3rem; + height: 1px; + background: var(--accent); +} + +.hero-name { + font-family: var(--font-serif); + font-size: clamp(3rem, 9vw, 6.5rem); + font-weight: 560; + line-height: 1.02; + letter-spacing: -0.02em; +} + +.hero-name em { + font-style: italic; + font-weight: 400; + color: var(--accent); +} + +.hero-role { + font-family: var(--font-serif); + font-size: clamp(1.25rem, 3vw, 1.9rem); + font-weight: 400; + font-style: italic; + color: var(--ink-soft); + max-width: 34ch; + line-height: 1.35; +} + +.hero-desc { + color: var(--muted); + max-width: 46ch; + font-size: 1.02rem; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 0.9rem; + margin-top: 0.5rem; +} + +.hero-foot { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + margin-top: clamp(2.5rem, 6vw, 4.5rem); + padding-top: 1.25rem; + border-top: 1px solid var(--hairline); +} + +.hero-foot .mono-label { + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.status-dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: #3d9a50; + box-shadow: 0 0 0 3px rgba(61, 154, 80, 0.18); + animation: pulse 2.4s ease-in-out infinite; +} + +@keyframes pulse { + 0%, 100% { box-shadow: 0 0 0 3px rgba(61, 154, 80, 0.18); } + 50% { box-shadow: 0 0 0 6px rgba(61, 154, 80, 0.06); } +} + +/* ============================================================ + SECTIONS (commun) + ============================================================ */ +.section { + padding-block: var(--section-gap); + border-top: 1px solid var(--hairline); +} + +.section-head { + display: grid; + grid-template-columns: auto 1fr; + align-items: baseline; + gap: clamp(1rem, 4vw, 2.5rem); + margin-bottom: clamp(2.5rem, 6vw, 4rem); +} + +.section-number { + font-family: var(--font-mono); + font-size: 0.8rem; + color: var(--accent); + letter-spacing: 0.1em; +} + +.section-title { + font-family: var(--font-serif); + font-size: clamp(2rem, 5vw, 3.25rem); + font-weight: 560; + letter-spacing: -0.015em; + line-height: 1.1; +} + +.section-title em { + font-style: italic; + font-weight: 400; + color: var(--accent); +} + +.section-sub { + grid-column: 2; + color: var(--muted); + max-width: 52ch; + margin-top: -1.5rem; +} + +/* ============================================================ + INDEX — À propos + ============================================================ */ +.about-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + border-top: 1px solid var(--hairline); + border-left: 1px solid var(--hairline); +} + +.about-cell { + padding: clamp(1.5rem, 3.5vw, 2.5rem); + border-right: 1px solid var(--hairline); + border-bottom: 1px solid var(--hairline); + display: flex; + flex-direction: column; + gap: 0.9rem; + transition: background-color 0.3s ease; +} + +.about-cell:hover { + background: var(--accent-soft); +} + +.about-cell .cell-label { + font-family: var(--font-mono); + font-size: 0.68rem; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--accent); +} + +.about-cell h3 { + font-family: var(--font-serif); + font-size: 1.35rem; + font-weight: 560; + letter-spacing: -0.01em; +} + +.about-cell p { + color: var(--muted); + font-size: 0.95rem; +} + +/* ============================================================ + INDEX — Compétences (liste éditoriale) + ============================================================ */ +.skill-rows { + border-top: 1px solid var(--hairline); +} + +.skill-row { + display: grid; + grid-template-columns: 3rem 1fr 2fr; + align-items: baseline; + gap: clamp(1rem, 4vw, 2.5rem); + padding: 1.75rem 0; + border-bottom: 1px solid var(--hairline); + transition: padding-left 0.3s var(--ease-out); +} + +.skill-row:hover { + padding-left: 0.75rem; +} + +.skill-row .row-index { + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--muted); +} + +.skill-row h3 { + font-family: var(--font-serif); + font-size: clamp(1.3rem, 2.5vw, 1.7rem); + font-weight: 560; + letter-spacing: -0.01em; +} + +.skill-row .row-tags { + display: flex; + flex-wrap: wrap; + gap: 0.45rem; +} + +.tag { + font-family: var(--font-mono); + font-size: 0.72rem; + letter-spacing: 0.03em; + color: var(--ink-soft); + border: 1px solid var(--hairline-strong); + border-radius: 999px; + padding: 0.28rem 0.75rem; + white-space: nowrap; + transition: all 0.2s ease; +} + +.tag:hover { + border-color: var(--accent); + color: var(--accent); +} + +/* ============================================================ + INDEX / PROJETS — cartes projet + ============================================================ */ +.project-list { + border-top: 1px solid var(--hairline); +} + +.project-row { + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: clamp(1.25rem, 4vw, 3rem); + padding: clamp(1.75rem, 4vw, 2.75rem) 0; + border-bottom: 1px solid var(--hairline); + position: relative; + transition: padding-left 0.35s var(--ease-out); +} + +.project-row:hover { + padding-left: 1rem; +} + +.project-row .p-index { + font-family: var(--font-serif); + font-size: clamp(1.5rem, 3.5vw, 2.5rem); + font-style: italic; + font-weight: 400; + color: var(--hairline-strong); + transition: color 0.3s ease; + min-width: 3.5rem; +} + +.project-row:hover .p-index { + color: var(--accent); +} + +.project-row .p-body { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.project-row h3 { + font-family: var(--font-serif); + font-size: clamp(1.5rem, 3.5vw, 2.25rem); + font-weight: 560; + letter-spacing: -0.015em; + line-height: 1.15; +} + +.project-row .p-desc { + color: var(--muted); + max-width: 56ch; + font-size: 0.97rem; +} + +.project-row .p-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-top: 0.5rem; +} + +.project-row .p-arrow { + width: 2.75rem; + height: 2.75rem; + border: 1px solid var(--hairline-strong); + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--ink-soft); + transition: all 0.3s var(--ease-out); + flex-shrink: 0; +} + +.project-row .p-arrow svg { + width: 1.1rem; + height: 1.1rem; + transition: transform 0.3s var(--ease-out); +} + +.project-row:hover .p-arrow { + background: var(--accent); + border-color: var(--accent); + color: #fff; +} + +.project-row:hover .p-arrow svg { + transform: rotate(-45deg); +} + +/* Lien étendu sur toute la ligne */ +.project-row a.p-stretch::after { + content: ""; + position: absolute; + inset: 0; +} + +/* ============================================================ + PAGE HEADER (pages internes) + ============================================================ */ +.page-head { + padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)); + padding-bottom: clamp(2.5rem, 6vw, 4rem); +} + +.page-head .hero-meta { + margin-bottom: 1.5rem; +} + +.page-title { + font-family: var(--font-serif); + font-size: clamp(2.75rem, 7vw, 5rem); + font-weight: 560; + letter-spacing: -0.02em; + line-height: 1.04; +} + +.page-title em { + font-style: italic; + font-weight: 400; + color: var(--accent); +} + +.page-sub { + margin-top: 1.25rem; + color: var(--muted); + max-width: 54ch; + font-size: 1.05rem; +} + +/* ============================================================ + CV + ============================================================ */ +.cv-layout { + display: grid; + grid-template-columns: 16rem 1fr; + gap: clamp(2rem, 6vw, 5rem); + padding-bottom: var(--section-gap); +} + +.cv-aside { + display: flex; + flex-direction: column; + gap: 2.25rem; +} + +.cv-aside-block .mono-label { + display: block; + margin-bottom: 0.9rem; + padding-bottom: 0.6rem; + border-bottom: 1px solid var(--hairline); +} + +.cv-contact-list { + display: flex; + flex-direction: column; + gap: 0.55rem; + font-size: 0.92rem; + color: var(--ink-soft); +} + +.cv-contact-list a { + color: var(--ink); +} + +.cv-contact-list .c-key { + font-family: var(--font-mono); + font-size: 0.66rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--muted); + display: block; +} + +.cv-lang { + display: flex; + justify-content: space-between; + align-items: baseline; + padding: 0.45rem 0; + border-bottom: 1px dashed var(--hairline); + font-size: 0.95rem; +} + +.cv-lang span:last-child { + font-family: var(--font-mono); + font-size: 0.72rem; + color: var(--muted); +} + +.cv-interest-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; +} + +.cv-main { + display: flex; + flex-direction: column; + gap: var(--section-gap); +} + +.cv-block-head { + display: flex; + align-items: baseline; + gap: 1rem; + margin-bottom: 2rem; +} + +.cv-block-head .section-number { + flex-shrink: 0; +} + +.cv-block-head h2 { + font-family: var(--font-serif); + font-size: clamp(1.6rem, 3.5vw, 2.2rem); + font-weight: 560; + letter-spacing: -0.015em; +} + +/* Timeline expériences */ +.timeline { + position: relative; + padding-left: 1.75rem; +} + +.timeline::before { + content: ""; + position: absolute; + left: 4px; + top: 8px; + bottom: 8px; + width: 1px; + background: var(--hairline-strong); +} + +.timeline-item { + position: relative; + padding-bottom: 2.5rem; +} + +.timeline-item:last-child { + padding-bottom: 0; +} + +.timeline-item::before { + content: ""; + position: absolute; + left: -1.75rem; + top: 8px; + width: 9px; + height: 9px; + border-radius: 50%; + background: var(--paper); + border: 2px solid var(--hairline-strong); + transition: border-color 0.25s ease, background 0.25s ease; +} + +.timeline-item:hover::before { + border-color: var(--accent); + background: var(--accent); +} + +.timeline-item.current::before { + border-color: var(--accent); + background: var(--accent); +} + +.t-header { + display: flex; + flex-wrap: wrap; + align-items: baseline; + justify-content: space-between; + gap: 0.35rem 1rem; +} + +.t-header h3 { + font-family: var(--font-serif); + font-size: 1.3rem; + font-weight: 560; + letter-spacing: -0.01em; +} + +.t-date { + font-family: var(--font-mono); + font-size: 0.72rem; + letter-spacing: 0.06em; + color: var(--accent); + border: 1px solid var(--accent); + border-radius: 999px; + padding: 0.2rem 0.7rem; + white-space: nowrap; +} + +.t-company { + font-weight: 550; + color: var(--ink-soft); + margin-top: 0.15rem; +} + +.t-location { + font-family: var(--font-mono); + font-size: 0.72rem; + color: var(--muted); + margin-top: 0.1rem; +} + +.t-list { + margin-top: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.4rem; + color: var(--muted); + font-size: 0.95rem; +} + +.t-list li { + position: relative; + padding-left: 1.1rem; +} + +.t-list li::before { + content: "—"; + position: absolute; + left: 0; + color: var(--accent); +} + +/* Formation */ +.edu-list { + border-top: 1px solid var(--hairline); +} + +.edu-item { + display: grid; + grid-template-columns: 1fr auto; + align-items: baseline; + gap: 0.5rem 1.5rem; + padding: 1.35rem 0; + border-bottom: 1px solid var(--hairline); + transition: padding-left 0.3s var(--ease-out); +} + +.edu-item:hover { + padding-left: 0.75rem; +} + +.edu-item h3 { + font-family: var(--font-serif); + font-size: 1.2rem; + font-weight: 560; +} + +.edu-item .edu-degree { + grid-column: 1; + color: var(--muted); + font-size: 0.95rem; +} + +.edu-item .edu-date { + grid-column: 2; + grid-row: 1 / span 2; + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--muted); + white-space: nowrap; + align-self: center; +} + +/* Compétences CV */ +.cv-skills { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: clamp(1.5rem, 4vw, 2.5rem); +} + +.cv-skill-cat h3 { + font-family: var(--font-serif); + font-size: 1.15rem; + font-weight: 560; + padding-bottom: 0.6rem; + margin-bottom: 0.9rem; + border-bottom: 1px solid var(--hairline); +} + +.cv-skill-cat .row-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; +} + +/* ============================================================ + PROJETS — détail + ============================================================ */ +.project-detail { + padding-block: var(--section-gap); + border-top: 1px solid var(--hairline); +} + +.project-detail-grid { + display: grid; + grid-template-columns: 1fr 1.6fr; + gap: clamp(2rem, 6vw, 5rem); +} + +.pd-sticky { + position: sticky; + top: calc(var(--nav-h) + 2rem); + align-self: start; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.pd-index { + font-family: var(--font-mono); + font-size: 0.8rem; + color: var(--accent); + letter-spacing: 0.1em; +} + +.pd-title { + font-family: var(--font-serif); + font-size: clamp(2rem, 4.5vw, 3rem); + font-weight: 560; + letter-spacing: -0.02em; + line-height: 1.08; +} + +.pd-subtitle { + font-family: var(--font-serif); + font-style: italic; + color: var(--muted); + font-size: 1.1rem; +} + +.pd-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-top: 0.5rem; +} + +.pd-body > p { + color: var(--ink-soft); + font-size: 1.02rem; + max-width: 60ch; + margin-bottom: 2.5rem; +} + +.pd-features { + display: flex; + flex-direction: column; + border-top: 1px solid var(--hairline); +} + +.pd-feature { + display: grid; + grid-template-columns: auto 1fr; + gap: 1.25rem; + padding: 1.4rem 0; + border-bottom: 1px solid var(--hairline); +} + +.pd-feature .f-num { + font-family: var(--font-mono); + font-size: 0.72rem; + color: var(--muted); + padding-top: 0.3rem; +} + +.pd-feature h4 { + font-family: var(--font-serif); + font-size: 1.15rem; + font-weight: 560; + margin-bottom: 0.25rem; +} + +.pd-feature p { + color: var(--muted); + font-size: 0.95rem; +} + +.pd-stack { + margin-top: 2.25rem; +} + +.pd-stack .mono-label { + display: block; + margin-bottom: 0.85rem; +} + +.pd-stack .row-tags { + display: flex; + flex-wrap: wrap; + gap: 0.45rem; +} + +/* ============================================================ + FOOTER + ============================================================ */ +.footer { + border-top: 1px solid var(--hairline); + padding: 3rem 0 2.5rem; +} + +.footer-grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 1.25rem; +} + +.footer .footer-name { + font-family: var(--font-serif); + font-size: 1.05rem; + font-weight: 560; +} + +.footer .footer-name .brand-dot { + color: var(--accent); +} + +.footer-links { + display: flex; + gap: 1.5rem; + font-size: 0.9rem; + color: var(--muted); +} + +.footer-links a:hover { + color: var(--accent); +} + +.footer-bottom { + margin-top: 2rem; + padding-top: 1.25rem; + border-top: 1px dashed var(--hairline); + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 0.75rem; + font-family: var(--font-mono); + font-size: 0.7rem; + letter-spacing: 0.08em; + color: var(--muted); +} + +/* ============================================================ + RESPONSIVE + ============================================================ */ +@media (max-width: 900px) { + .about-grid { + grid-template-columns: 1fr; + } + + .skill-row { + grid-template-columns: 2rem 1fr; + } + + .skill-row .row-tags { + grid-column: 2; + margin-top: 0.6rem; + } + + .cv-layout { + grid-template-columns: 1fr; + } + + .cv-aside { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); + gap: 2rem; + padding-bottom: 2rem; + border-bottom: 1px solid var(--hairline); + } + + .cv-skills { + grid-template-columns: 1fr; + } + + .project-detail-grid { + grid-template-columns: 1fr; + } + + .pd-sticky { + position: static; + } +} + +@media (max-width: 640px) { + .navbar-menu { + gap: 0.9rem; + } + + .navbar-menu .nav-index { + display: none; + } + + .navbar-brand .brand-tag { + display: none; + } + + .project-row { + grid-template-columns: auto 1fr; + } + + .project-row .p-arrow { + display: none; + } + + .hero-foot { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .section-head { + grid-template-columns: 1fr; + gap: 0.5rem; + } + + .section-sub { + grid-column: 1; + margin-top: 0; + } +}