192 lines
9.8 KiB
HTML
192 lines
9.8 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% load static %}
|
||
|
|
|
||
|
|
{% block title %}{{ config.seo.site_title }}{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
|
||
|
|
<!-- ─── Hero Section ─────────────────────────────────────────────────────── -->
|
||
|
|
<section class="hero">
|
||
|
|
<div class="hero-container">
|
||
|
|
<div class="hero-content">
|
||
|
|
{% if config.profile.available %}
|
||
|
|
<div class="hero-badge">{{ config.profile.available_label }}</div>
|
||
|
|
{% endif %}
|
||
|
|
<h1 class="hero-title">
|
||
|
|
{{ config.hero.greeting }}
|
||
|
|
<span class="gradient-text">{{ config.profile.first_name }}</span>
|
||
|
|
</h1>
|
||
|
|
<p class="hero-subtitle">{{ config.profile.subtitle }}</p>
|
||
|
|
<div class="hero-actions">
|
||
|
|
<a href="{% url 'projects:list' %}" class="btn btn-primary">
|
||
|
|
{{ config.hero.cta_primary_label }}
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
|
|
</a>
|
||
|
|
<a href="#contact" class="btn btn-outline">{{ config.hero.cta_secondary_label }}</a>
|
||
|
|
<a href="{% url 'projects:cv' %}" class="btn btn-cv">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||
|
|
Mon CV
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="hero-stats">
|
||
|
|
{% for stat in config.about.stats %}
|
||
|
|
<div class="stat">
|
||
|
|
<span class="stat-number">{{ stat.value }}</span>
|
||
|
|
<span class="stat-label">{{ stat.label }}</span>
|
||
|
|
</div>
|
||
|
|
{% if not forloop.last %}<div class="stat-divider"></div>{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="hero-visual">
|
||
|
|
<div class="code-window">
|
||
|
|
<div class="code-header">
|
||
|
|
<span class="dot red"></span>
|
||
|
|
<span class="dot yellow"></span>
|
||
|
|
<span class="dot green"></span>
|
||
|
|
<span class="code-filename">{{ config.hero.code_window.filename }}</span>
|
||
|
|
</div>
|
||
|
|
<pre class="code-content"><code><span class="code-keyword">class</span> <span class="code-class">{{ config.profile.first_name }}</span>:
|
||
|
|
<span class="code-keyword">def</span> <span class="code-func">__init__</span>(self):
|
||
|
|
self.role = <span class="code-str">"{{ config.profile.title }}"</span>{% for group in config.skills.groups %}
|
||
|
|
self.{{ group.key }} = [{% for item in group.items|slice:":4" %}<span class="code-str">"{{ item }}"</span>{% if not forloop.last %}, {% endif %}{% endfor %}{% if group.items|length > 4 %}, <span class="code-comment">...</span>{% endif %}]{% endfor %}
|
||
|
|
self.email = <span class="code-str">"{{ config.profile.email }}"</span></code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ─── Compétences ──────────────────────────────────────────────────────── -->
|
||
|
|
<section class="section" id="competences">
|
||
|
|
<div class="section-container">
|
||
|
|
<div class="section-header">
|
||
|
|
<span class="section-tag">{{ config.skills.section_tag }}</span>
|
||
|
|
<h2 class="section-title">{{ config.skills.section_title }}</h2>
|
||
|
|
<p class="section-sub">{{ config.skills.section_subtitle }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="skills-groups">
|
||
|
|
{% for group in config.skills.groups %}
|
||
|
|
<div class="skill-group">
|
||
|
|
<h3 class="skill-group-label">{{ group.label }}</h3>
|
||
|
|
<div class="tech-grid">
|
||
|
|
{% for item in group.items %}
|
||
|
|
<div class="tech-badge">
|
||
|
|
<span class="tech-dot"></span>
|
||
|
|
{{ item }}
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ─── Expériences ──────────────────────────────────────────────────────── -->
|
||
|
|
{% if config.experience.items %}
|
||
|
|
<section class="section section-dark" id="experience">
|
||
|
|
<div class="section-container">
|
||
|
|
<div class="section-header">
|
||
|
|
<span class="section-tag">{{ config.experience.section_tag }}</span>
|
||
|
|
<h2 class="section-title">{{ config.experience.section_title }}</h2>
|
||
|
|
<p class="section-sub">{{ config.experience.section_subtitle }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="experience-list">
|
||
|
|
{% for exp in config.experience.items %}
|
||
|
|
<div class="experience-card">
|
||
|
|
<div class="exp-header">
|
||
|
|
<div>
|
||
|
|
<h3 class="exp-company">{{ exp.company }}</h3>
|
||
|
|
<p class="exp-role">{{ exp.role }}</p>
|
||
|
|
</div>
|
||
|
|
<span class="exp-period">{{ exp.period }}</span>
|
||
|
|
</div>
|
||
|
|
<p class="exp-description">{{ exp.description }}</p>
|
||
|
|
<div class="exp-tags">
|
||
|
|
{% for tag in exp.tags %}
|
||
|
|
<span class="tech-tag">{{ tag }}</span>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<!-- ─── Projets en vedette ───────────────────────────────────────────────── -->
|
||
|
|
<section class="section" id="projets">
|
||
|
|
<div class="section-container">
|
||
|
|
<div class="section-header">
|
||
|
|
<span class="section-tag">Réalisations</span>
|
||
|
|
<h2 class="section-title">Projets sélectionnés</h2>
|
||
|
|
<p class="section-sub">Mes projets les plus représentatifs</p>
|
||
|
|
</div>
|
||
|
|
<div class="projects-grid">
|
||
|
|
{% for project in featured_projects %}
|
||
|
|
<div class="project-card" data-category="{{ project.category }}">
|
||
|
|
<div class="card-image-wrapper">
|
||
|
|
{% if project.images %}
|
||
|
|
<img src="{{ project.images.0 }}" alt="{{ project.title }}" class="card-image" onerror="this.parentElement.classList.add('no-image')">
|
||
|
|
{% else %}
|
||
|
|
<div class="card-image-placeholder">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
<div class="card-category-badge">{{ project.category }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h3 class="card-title">{{ project.title }}</h3>
|
||
|
|
<p class="card-desc">{{ project.short_description }}</p>
|
||
|
|
<div class="card-techs">
|
||
|
|
{% for tech in project.technologies|slice:":4" %}
|
||
|
|
<span class="tech-tag">{{ tech }}</span>
|
||
|
|
{% endfor %}
|
||
|
|
{% if project.technologies|length > 4 %}
|
||
|
|
<span class="tech-tag tech-tag-more">+{{ project.technologies|length|add:"-4" }}</span>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
<a href="{% url 'projects:detail' project.slug %}" class="card-link">
|
||
|
|
Voir le projet
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% empty %}
|
||
|
|
<p class="empty-state">Aucun projet disponible. Ajoutez vos projets dans <code>data/projects.json</code>.</p>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
{% if total_projects > 3 %}
|
||
|
|
<div class="section-footer">
|
||
|
|
<a href="{% url 'projects:list' %}" class="btn btn-outline">
|
||
|
|
Voir tous les projets ({{ total_projects }})
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ─── Contact ─────────────────────────────────────────────────────────── -->
|
||
|
|
<section class="section section-dark" id="contact">
|
||
|
|
<div class="section-container">
|
||
|
|
<div class="section-header">
|
||
|
|
<span class="section-tag">{{ config.contact.section_tag }}</span>
|
||
|
|
<h2 class="section-title">{{ config.contact.section_title }}</h2>
|
||
|
|
<p class="section-sub">{{ config.contact.section_subtitle }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="contact-grid">
|
||
|
|
{% for item in config.contact.items %}
|
||
|
|
<a href="{{ item.url }}" {% if 'http' in item.url %}target="_blank"{% endif %} class="contact-card">
|
||
|
|
<div class="contact-icon">{{ item.icon }}</div>
|
||
|
|
<div>
|
||
|
|
<div class="contact-label">{{ item.label }}</div>
|
||
|
|
<div class="contact-value">{{ item.value }}</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{% endblock %}
|