felden.r@grenoble.archi.fr
739 lines
32 KiB
HTML
739 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Projets de Roman Felden - Homelab, Android, Minecraft modding">
|
|
<title>Projets - Roman Felden</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--color-primary: #4f46e5;
|
|
--color-primary-light: #818cf8;
|
|
--color-primary-dark: #3730a3;
|
|
--color-secondary: #0ea5e9;
|
|
--color-accent: #f59e0b;
|
|
--color-text: #0f172a;
|
|
--color-text-muted: #64748b;
|
|
--color-text-light: #94a3b8;
|
|
--color-bg: #ffffff;
|
|
--color-bg-alt: #f8fafc;
|
|
--color-bg-card: #ffffff;
|
|
--color-border: #e2e8f0;
|
|
--color-border-light: #f1f5f9;
|
|
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
--radius-sm: 6px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 28px;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
line-height: 1.7;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-alt);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Navigation */
|
|
.navbar {
|
|
background: var(--color-bg);
|
|
box-shadow: var(--shadow-md);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
padding: 1rem 2rem;
|
|
}
|
|
|
|
.navbar-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.navbar-brand span {
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.navbar-menu {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.navbar-menu a {
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--radius-sm);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.navbar-menu a:hover,
|
|
.navbar-menu a.active {
|
|
color: var(--color-primary);
|
|
background: var(--color-bg-alt);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 3rem 2rem;
|
|
}
|
|
|
|
/* Header */
|
|
.page-header {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.page-header p {
|
|
font-size: 1.2rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* Project Section */
|
|
.project-section {
|
|
background: var(--color-bg);
|
|
border-radius: var(--radius-xl);
|
|
padding: 3rem;
|
|
margin-bottom: 3rem;
|
|
box-shadow: var(--shadow-lg);
|
|
scroll-margin-top: 100px;
|
|
}
|
|
|
|
.project-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.project-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.project-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.project-icon svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
color: white;
|
|
}
|
|
|
|
.project-title h2 {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
color: var(--color-text);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.project-subtitle {
|
|
font-size: 1.1rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.project-badges {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
background: var(--color-bg-alt);
|
|
color: var(--color-text);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 50px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
border: 2px solid var(--color-border-light);
|
|
}
|
|
|
|
.badge-primary {
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.project-description {
|
|
font-size: 1.05rem;
|
|
color: var(--color-text-muted);
|
|
line-height: 1.8;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.project-features {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.feature-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
padding: 1.25rem;
|
|
background: var(--color-bg-alt);
|
|
border-radius: var(--radius-md);
|
|
border-left: 4px solid var(--color-primary);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--color-primary);
|
|
flex-shrink: 0;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.feature-content h4 {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.feature-content p {
|
|
font-size: 0.95rem;
|
|
color: var(--color-text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.tech-stack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 2rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--color-border-light);
|
|
}
|
|
|
|
.tech-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: var(--color-bg-alt);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.tech-item::before {
|
|
content: '';
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--color-secondary);
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background: var(--color-text);
|
|
color: white;
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.footer p {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.footer-heart {
|
|
color: #ef4444;
|
|
animation: heartbeat 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.navbar-menu {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.navbar-menu a {
|
|
padding: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.project-section {
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.project-header {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.project-title h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar">
|
|
<div class="navbar-container">
|
|
<a href="index.html" class="navbar-brand">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
|
</svg>
|
|
<span>RF</span>
|
|
</a>
|
|
<ul class="navbar-menu">
|
|
<li><a href="index.html">Accueil</a></li>
|
|
<li><a href="cv.html">CV</a></li>
|
|
<li><a href="projets.html" class="active">Projets</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<!-- Page Header -->
|
|
<div class="page-header">
|
|
<h1>Mes Projets</h1>
|
|
<p>Découvrez mes réalisations personnelles dans le domaine de l'infrastructure, du développement et du modding</p>
|
|
</div>
|
|
|
|
<!-- Homelab Proxmox -->
|
|
<section id="homelab" class="project-section">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
|
</svg>
|
|
</div>
|
|
<div class="project-title">
|
|
<h2>Homelab Proxmox</h2>
|
|
<p class="project-subtitle">Infrastructure de virtualisation complète</p>
|
|
</div>
|
|
</div>
|
|
<div class="project-badges">
|
|
<span class="badge badge-primary">Infrastructure</span>
|
|
<span class="badge">Virtualisation</span>
|
|
<span class="badge">Réseaux</span>
|
|
<span class="badge">Sécurité</span>
|
|
</div>
|
|
<div class="project-description">
|
|
<p>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.</p>
|
|
</div>
|
|
<div class="project-features">
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Virtualisation avancée</h4>
|
|
<p>Gestion de machines virtuelles Linux et Windows avec Proxmox VE</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Conteneurisation</h4>
|
|
<p>Déploiement de services avec LXC et Docker pour une isolation légère</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Réseautage complexe</h4>
|
|
<p>VLANs, bridges, et configuration réseau avancée</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Stockage et backup</h4>
|
|
<p>ZFS pour la gestion du stockage avec snapshots et réplications</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Services auto-hébergés</h4>
|
|
<p>DNS, surveillance, stockage cloud, bases de données, etc.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tech-stack">
|
|
<span class="tech-item">Proxmox VE</span>
|
|
<span class="tech-item">Linux</span>
|
|
<span class="tech-item">Docker</span>
|
|
<span class="tech-item">LXC</span>
|
|
<span class="tech-item">ZFS</span>
|
|
<span class="tech-item">VLAN</span>
|
|
<span class="tech-item">Networking</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Boidelo -->
|
|
<section id="boidelo" class="project-section">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="project-title">
|
|
<h2>Boidelo</h2>
|
|
<p class="project-subtitle">Application Android de jeu d'alcool</p>
|
|
</div>
|
|
</div>
|
|
<div class="project-badges">
|
|
<span class="badge badge-primary">Android</span>
|
|
<span class="badge">Java</span>
|
|
<span class="badge">Material Design</span>
|
|
<span class="badge">Jeu</span>
|
|
</div>
|
|
<div class="project-description">
|
|
<p>Boidelo est une application Android de jeu d'alcool similaire à "King's Cup" ou "Never Have I Ever". L'application permet à un groupe de joueurs de répondre à des questions aléatoires avec des consommations de boissons associées. Elle inclut 150 questions préchargées, une interface Material Design 3, et des paramètres personnalisables.</p>
|
|
</div>
|
|
<div class="project-features">
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Jeu multijoueur</h4>
|
|
<p>Support de 3 à illimité de joueurs avec saisie dynamique des noms</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>150 questions préchargées</h4>
|
|
<p>Questions variées depuis un fichier JSON avec système de variantes</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Défis multi-manches</h4>
|
|
<p>Système de défis avec compte à rebours et gestion optimisée</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Paramètres personnalisables</h4>
|
|
<p>Nombre de questions, ajout de gorgées, durée des défis, ratio BDD/OpenAI</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Interface Material Design 3</h4>
|
|
<p>Design moderne avec animations fluides et support du mode sombre</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tech-stack">
|
|
<span class="tech-item">Android SDK</span>
|
|
<span class="tech-item">Java 17</span>
|
|
<span class="tech-item">Material Design 3</span>
|
|
<span class="tech-item">Gradle</span>
|
|
<span class="tech-item">JSON</span>
|
|
<span class="tech-item">PostgreSQL</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Custom Ore Gen -->
|
|
<section id="custom-ore-gen" class="project-section">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="project-title">
|
|
<h2>Custom Ore Gen</h2>
|
|
<p class="project-subtitle">Mod Minecraft 1.20.1 - Forge</p>
|
|
</div>
|
|
</div>
|
|
<div class="project-badges">
|
|
<span class="badge badge-primary">Minecraft</span>
|
|
<span class="badge">Forge</span>
|
|
<span class="badge">MCreator</span>
|
|
<span class="badge">Java</span>
|
|
</div>
|
|
<div class="project-description">
|
|
<p>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.</p>
|
|
</div>
|
|
<div class="project-features">
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>16 nouveaux minerais</h4>
|
|
<p>Variantes de diamant, or, charbon, fer, émeraude, redstone, lapis et cuivre</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Distribution par biome</h4>
|
|
<p>Génération basée sur la température (froid, chaud, tempéré, montagneux, rare)</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Diamond Shards</h4>
|
|
<p>Nouveau resource pour outils et armure intermédiaires (9 shards = 1 diamant)</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Outils en Diamond Shard</h4>
|
|
<p>Pioche, pelle, hache et Paxel (outil combiné pioche+pelle+hache)</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Armure intermédiaire</h4>
|
|
<p>17 protection, 1060 durabilité (entre fer et diamant)</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Ore Biome Finder</h4>
|
|
<p>Utilitaire pour identifier les minerais présents dans le biome actuel</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Support Biomes O' Plenty</h4>
|
|
<p>69 biomes BOP supplémentaires classés par température</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tech-stack">
|
|
<span class="tech-item">Minecraft 1.20.1</span>
|
|
<span class="tech-item">Forge 47.3.0</span>
|
|
<span class="tech-item">MCreator</span>
|
|
<span class="tech-item">Java 17</span>
|
|
<span class="tech-item">KubeJS</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- GeoRealmCraft -->
|
|
<section id="georealmcraft" class="project-section">
|
|
<div class="project-header">
|
|
<div class="project-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="project-title">
|
|
<h2>GeoRealmCraft</h2>
|
|
<p class="project-subtitle">Modpack Minecraft moddé</p>
|
|
</div>
|
|
</div>
|
|
<div class="project-badges">
|
|
<span class="badge badge-primary">Minecraft</span>
|
|
<span class="badge">Modpack</span>
|
|
<span class="badge">345 Mods</span>
|
|
<span class="badge">Serveur</span>
|
|
</div>
|
|
<div class="project-description">
|
|
<p>GeoRealmCraft est un modpack Minecraft révolutionnaire avec 345 mods qui transforme l'expérience de jeu. Le modpack offre une génération de monde épique avec une répartition réaliste des ressources, des graphismes retravaillés, et des fonctionnalités avancées comme les colonies, les machineries Create, et les véhicules.</p>
|
|
</div>
|
|
<div class="project-features">
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Génération de monde épique</h4>
|
|
<p>Immensité des biomes, verticalité des massifs, répartition réaliste des ressources</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>345 mods</h4>
|
|
<p>Graphisme, audio, animation retravaillés avec des mods d'ambiance</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Système de colonies</h4>
|
|
<p>Colonies évolutives avec Minecolonies pour gérer des NPC</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Machineries Create 6.0</h4>
|
|
<p>Système d'automation avancé avec Create pour créer des usines complexes</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Véhicules</h4>
|
|
<p>Trains, avions, voitures, bateaux pour explorer le monde</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Nourriture stratégique</h4>
|
|
<p>Système de nutrition nécessitant une alimentation variée et équilibrée</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Combat tactique</h4>
|
|
<p>Refonte complète du système de combat avec styles d'attaques</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div class="feature-content">
|
|
<h4>Économie dynamique</h4>
|
|
<p>Marché basé sur les joueurs avec monnaie non duplicable</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tech-stack">
|
|
<span class="tech-item">Minecraft</span>
|
|
<span class="tech-item">Forge</span>
|
|
<span class="tech-item">Create</span>
|
|
<span class="tech-item">Minecolonies</span>
|
|
<span class="tech-item">Biomes O' Plenty</span>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>© 2025 Roman Felden · Fait avec <span class="footer-heart">❤</span> à Grenoble, France</p>
|
|
<p style="margin-top: 0.5rem; font-size: 0.9rem; opacity: 0.8;">
|
|
<a href="index.html" style="color: white; text-decoration: none; opacity: 0.8;">Retour à l'accueil</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|