Professional website improvements
- Boidelo: Replaced "alcool" with "jeu de société" throughout - GeoRealmCraft: Reframed as public server infrastructure project with focus on system administration and community management - Removed incomplete "Recherche" section from CVs - Added CurseForge link to Custom Ore Gen mod - Added CLAUDE.md documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
felden.r@grenoble.archi.fr
@@ -0,0 +1,79 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Project Overview
|
||||
|
||||
This is a personal portfolio website for Roman Felden, a French IT security and systems coordinator based in Grenoble. The site is a static website built with plain HTML and inline CSS - no build tools, frameworks, or external dependencies (other than Google Fonts and inline SVG icons).
|
||||
|
||||
## Site Structure
|
||||
|
||||
The website consists of 4 pages:
|
||||
|
||||
- **index.html** - Landing page with hero section, about info, key skills, and project previews
|
||||
- **cv.html** - Full resume/CV page with professional experience, education, skills, languages, and interests
|
||||
- **cv-roman-felden.html** - Alternate standalone CV version with a different visual style (gradient background, no navbar)
|
||||
- **projets.html** - Detailed project pages (Homelab Proxmox, Boidelo Android app, Custom Ore Gen Minecraft mod, GeoRealmCraft modpack)
|
||||
|
||||
All pages are self-contained with embedded CSS in `<style>` tags.
|
||||
|
||||
## Design System
|
||||
|
||||
The site uses a consistent design system with CSS custom properties defined in `:root`:
|
||||
|
||||
- **Primary color**: `#4f46e5` (indigo)
|
||||
- **Secondary color**: `#0ea5e9` (sky blue)
|
||||
- **Accent color**: `#f59e0b` (amber)
|
||||
- **Typography**: Plus Jakarta Sans (Google Fonts), falling back to system fonts
|
||||
- **Border radius**: Variable (6px/12px/20px/28px depending on element)
|
||||
- **Shadows**: 4 levels (sm/md/lg/xl)
|
||||
|
||||
Key visual patterns:
|
||||
- Gradient backgrounds for hero sections
|
||||
- Card-based layouts with hover lift effects
|
||||
- Inline SVG icons (Heroicons style)
|
||||
- Consistent navbar with brand logo "RF"
|
||||
- Responsive design with mobile breakpoints at 768px
|
||||
|
||||
## Common Editing Tasks
|
||||
|
||||
When modifying this site:
|
||||
|
||||
1. **Update content** - All content is directly in HTML. Text is in French throughout.
|
||||
2. **Add new projects** - Copy an existing `.project-section` block in projets.html and add a corresponding preview card in index.html
|
||||
3. **Update CV** - Edit experience items in cv.html. Each job has an `.experience-item` with header, company, location, date badge, and description list.
|
||||
4. **Modify colors** - Change CSS custom properties in `:root` of any page
|
||||
5. **Add pages** - Follow the existing structure: navbar, main container, footer
|
||||
|
||||
## Navigation Structure
|
||||
|
||||
The navbar is consistent across main pages (index, cv, projets) with:
|
||||
- Brand link to index.html
|
||||
- Three menu items: Accueil, CV, Projets
|
||||
- Active state highlighting for current page
|
||||
|
||||
## Language & Content
|
||||
|
||||
- **Primary language**: French (fr)
|
||||
- **Target audience**: Recruiters and professional contacts in France
|
||||
- **Tone**: Professional, showcasing technical skills and projects
|
||||
|
||||
## File Organization
|
||||
|
||||
```
|
||||
lanro.eu/
|
||||
├── index.html # Homepage
|
||||
├── cv.html # Main CV with navbar
|
||||
├── cv-roman-felden.html # Standalone CV (no navbar, different style)
|
||||
├── projets.html # Projects detail page
|
||||
└── CLAUDE.md # This file
|
||||
```
|
||||
|
||||
## Important Notes
|
||||
|
||||
- All CSS is inline in `<style>` tags - no external stylesheets
|
||||
- No JavaScript required (site is fully static)
|
||||
- Icons are inline SVGs from Heroicons
|
||||
- Font loaded from Google Fonts (Plus Jakarta Sans)
|
||||
- Site is designed to work without a server - can be opened directly in browser
|
||||
- cv-roman-felden.html is a standalone version meant to be shared/downloaded separately
|
||||
File diff suppressed because it is too large
Load Diff
+1157
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,571 @@
|
||||
<!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="Site personnel de Roman Felden - Coordinateur Sécurité & Systèmes Informatique à Grenoble">
|
||||
<title>Roman Felden - Portfolio</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: 0 2rem;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 8rem 2rem 6rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: -5%;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 4rem;
|
||||
font-weight: 800;
|
||||
border: 5px solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.5rem;
|
||||
opacity: 0.95;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: white;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: white;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.section {
|
||||
padding: 6rem 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-muted);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Cards Grid */
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--color-border-light);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
margin-top: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
color: var(--color-primary-dark);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: var(--color-text);
|
||||
color: white;
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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) {
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.navbar-menu a {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</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" class="active">Accueil</a></li>
|
||||
<li><a href="cv.html">CV</a></li>
|
||||
<li><a href="projets.html">Projets</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-avatar">RF</div>
|
||||
<h1>Roman Felden</h1>
|
||||
<p>Coordinateur Sécurité & Systèmes Informatique</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="cv.html" class="btn btn-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
Voir mon CV
|
||||
</a>
|
||||
<a href="projets.html" class="btn btn-outline">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
|
||||
Mes Projets
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- A Propos -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>À Propos</h2>
|
||||
<p>Passionné par les systèmes, réseaux et sécurité informatique</p>
|
||||
</div>
|
||||
<div class="cards-grid">
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Expérience</h3>
|
||||
<p>Plus de 5 ans d'expérience dans l'administration système et réseau, avec une spécialisation en sécurité informatique.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Formation</h3>
|
||||
<p>Master RIE (Réseau Informatique en Entreprise) de Grenoble INP - Ensimag, avec une spécialisation en systèmes et réseaux.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Localisation</h3>
|
||||
<p>Basé à Grenoble, France. Disponible pour des opportunités professionnelles dans la région ou en télétravail.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Compétences Clés -->
|
||||
<section class="section" style="background: var(--color-bg);">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Compétences Clés</h2>
|
||||
<p>Domaines d'expertise technique</p>
|
||||
</div>
|
||||
<div class="cards-grid">
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<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>
|
||||
<h3>Systèmes & Réseaux</h3>
|
||||
<p>Administration Linux, Windows Server, Active Directory, Switch, Routeur, Firewall</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Sécurité</h3>
|
||||
<p>Supervision de la sécurité informatique, politiques de sécurité, gestion des incidents</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Virtualisation</h3>
|
||||
<p>Proxmox, gestion de serveurs virtuels, déploiement d'infrastructures virtualisées</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Développement</h3>
|
||||
<p>Python, Bash, scripting, développement Android (Java)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projets -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Mes Projets</h2>
|
||||
<p>Découvrez mes réalisations personnelles et professionnelles</p>
|
||||
</div>
|
||||
<div class="cards-grid">
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<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>
|
||||
<h3>Homelab Proxmox</h3>
|
||||
<p>Infrastructure de virtualisation complète avec Proxmox pour héberger divers services et expérimentations techniques.</p>
|
||||
<a href="projets.html#homelab" class="card-link">
|
||||
En savoir plus
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<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>
|
||||
<h3>Boidelo</h3>
|
||||
<p>Application Android de jeu de société multijoueur avec 150 questions, interface Material Design 3 et paramètres personnalisables.</p>
|
||||
<a href="projets.html#boidelo" class="card-link">
|
||||
En savoir plus
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<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>
|
||||
<h3>Custom Ore Gen</h3>
|
||||
<p>Mod Minecraft 1.20.1 modifiant la distribution des ressources avec nouveaux minerais, outils et armures intermédiaires.</p>
|
||||
<a href="projets.html#custom-ore-gen" class="card-link">
|
||||
En savoir plus
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<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>
|
||||
<h3>GeoRealmCraft</h3>
|
||||
<p>Serveur Minecraft public avec infrastructure scalable, gestion de communauté et maintenance de modpack technique.</p>
|
||||
<a href="projets.html#georealmcraft" class="card-link">
|
||||
En savoir plus
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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;">
|
||||
<a href="https://lanro.eu" target="_blank" style="color: white; opacity: 0.8; text-decoration: none;">lanro.eu</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,708 @@
|
||||
<!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 de société</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 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.</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>
|
||||
<a href="https://www.curseforge.com/minecraft/mc-mods/custom-ore-gen" target="_blank" rel="noopener" class="tech-item" style="text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: white; border-color: transparent;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
CurseForge
|
||||
</a>
|
||||
</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">Serveur Minecraft public & Infrastructure</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-badges">
|
||||
<span class="badge badge-primary">Infrastructure</span>
|
||||
<span class="badge">Serveur Public</span>
|
||||
<span class="badge">Administration</span>
|
||||
<span class="badge">Minecraft</span>
|
||||
</div>
|
||||
<div class="project-description">
|
||||
<p>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.</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>Administration serveur</h4>
|
||||
<p>Gestion complète de serveur, configuration, maintenance et mise à jour</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>Gestion de communauté</h4>
|
||||
<p>Moderation, support utilisateur, gestion des conflits et animation</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>Infrastructure scalable</h4>
|
||||
<p>Configuration technique optimisée, performance et gestion de la charge</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>Maintenance & monitoring</h4>
|
||||
<p>Sauvegardes automatisées, surveillance des performances et résolution d'incidents</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-item">Administration Système</span>
|
||||
<span class="tech-item">Gestion de Communauté</span>
|
||||
<span class="tech-item">Monitoring</span>
|
||||
<span class="tech-item">Maintenance</span>
|
||||
<span class="tech-item">Backup</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>
|
||||
Reference in New Issue
Block a user