Spaces:

sebastien-burel
/

Profile

Running

App Files Files Community

Profile / index.html

sebastien-burel

Update index.html

c833727 verified 4 months ago

Raw

History Blame Contribute Delete

22.3 kB

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sébastien Burel — IA Générative, Web & Cloud</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
	color: #1a1a1a;
	line-height: 1.6;
	background: white;
	}

	html {
	scroll-behavior: smooth;
	}

	a {
	color: #1a1a1a;
	text-decoration: none;
	}

	a:hover {
	text-decoration: underline;
	}

	/* ===== HEADER ===== */
	header {
	padding: 80px 40px;
	text-align: center;
	background: white;
	border-bottom: 1px solid #e5e5e5;
	}

	header h1 {
	font-size: 2.8em;
	font-weight: 600;
	margin-bottom: 15px;
	letter-spacing: -0.5px;
	}

	header p {
	font-size: 1.2em;
	color: #555;
	font-weight: 400;
	margin: 10px 0;
	}

	header .location {
	color: #888;
	font-size: 0.95em;
	margin-top: 20px;
	}

	/* ===== NAVIGATION ===== */
	nav {
	position: sticky;
	top: 0;
	background: white;
	border-bottom: 1px solid #e5e5e5;
	padding: 15px 40px;
	z-index: 100;
	}

	.nav-links {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	gap: 60px;
	flex-wrap: wrap;
	}

	.nav-links a {
	font-size: 0.9em;
	color: #555;
	transition: color 0.2s;
	position: relative;
	padding-bottom: 5px;
	}

	.nav-links a:hover {
	color: #1a1a1a;
	text-decoration: none;
	}

	/* ===== MAIN CONTAINER ===== */
	.container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 40px;
	}

	section {
	padding: 60px 0;
	border-bottom: 1px solid #e5e5e5;
	}

	section:last-child {
	border-bottom: none;
	}

	h2 {
	font-size: 2em;
	font-weight: 600;
	margin-bottom: 40px;
	}

	h3 {
	font-size: 1.3em;
	font-weight: 600;
	margin: 30px 0 15px 0;
	}

	p {
	color: #555;
	margin-bottom: 15px;
	line-height: 1.8;
	}

	strong {
	color: #1a1a1a;
	font-weight: 600;
	}

	/* ===== ABOUT SECTION ===== */
	#about p {
	font-size: 1.05em;
	}

	.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 30px;
	margin-top: 40px;
	}

	.stat {
	background: #f9f9f9;
	padding: 25px;
	border: 1px solid #e5e5e5;
	}

	.stat-number {
	font-size: 1.8em;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 10px;
	}

	.stat-label {
	color: #888;
	font-size: 0.9em;
	}

	/* ===== ACHIEVEMENTS ===== */
	.projects {
	display: grid;
	gap: 40px;
	}

	.project {
	border: 1px solid #e5e5e5;
	padding: 30px;
	background: #f9f9f9;
	transition: all 0.3s;
	}

	.project:hover {
	background: white;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	border-color: #1a1a1a;
	}

	.project h3 {
	margin-top: 0;
	margin-bottom: 10px;
	}

	.project-tags {
	display: flex;
	gap: 10px;
	margin: 15px 0;
	flex-wrap: wrap;
	}

	.tag {
	font-size: 0.8em;
	color: #888;
	background: white;
	padding: 4px 10px;
	border: 1px solid #ddd;
	border-radius: 3px;
	}

	/* ===== EXPERTISE ===== */
	.expertise-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	}

	.expertise-item {
	background: #f9f9f9;
	padding: 25px;
	border: 1px solid #e5e5e5;
	}

	.expertise-item h4 {
	font-size: 1em;
	font-weight: 600;
	margin-bottom: 15px;
	color: #1a1a1a;
	}

	.expertise-item ul {
	list-style: none;
	}

	.expertise-item li {
	color: #555;
	padding: 5px 0;
	font-size: 0.95em;
	line-height: 1.5;
	}

	.expertise-item li:before {
	content: "• ";
	color: #888;
	margin-right: 8px;
	}

	/* ===== TECH STACK ===== */
	.tech-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	}

	.tech-category {
	background: #f9f9f9;
	padding: 20px;
	border: 1px solid #e5e5e5;
	}

	.tech-category h4 {
	font-size: 0.95em;
	font-weight: 600;
	margin-bottom: 12px;
	color: #1a1a1a;
	}

	.tech-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	}

	.tech-tag {
	background: white;
	border: 1px solid #ddd;
	padding: 4px 10px;
	font-size: 0.8em;
	color: #555;
	border-radius: 3px;
	}

	/* ===== OPEN TO ===== */
	.open-to-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 25px;
	}

	.open-to-item {
	background: #f9f9f9;
	padding: 25px;
	border: 1px solid #e5e5e5;
	text-align: center;
	}

	.open-to-item h4 {
	font-size: 1.1em;
	font-weight: 600;
	margin: 15px 0;
	color: #1a1a1a;
	}

	.open-to-item p {
	color: #555;
	font-size: 0.95em;
	}

	.emoji {
	font-size: 2em;
	}

	/* ===== CONTACT ===== */
	#contact {
	background: #f9f9f9;
	padding: 60px 0;
	}

	#contact .container {
	text-align: center;
	}

	.contact-links {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 40px 0;
	flex-wrap: wrap;
	}

	.contact-btn {
	background: white;
	border: 1px solid #1a1a1a;
	padding: 12px 25px;
	font-size: 0.9em;
	font-weight: 500;
	transition: all 0.2s;
	cursor: pointer;
	color: #1a1a1a;
	}

	.contact-btn:hover {
	background: #1a1a1a;
	color: white;
	text-decoration: none;
	}

	/* ===== FOOTER ===== */
	footer {
	background: #1a1a1a;
	color: white;
	padding: 40px;
	text-align: center;
	font-size: 0.9em;
	}

	footer a {
	color: white;
	}

	footer a:hover {
	text-decoration: underline;
	}

	/* ===== RESPONSIVE ===== */
	@media (max-width: 768px) {
	header {
	padding: 50px 20px;
	}

	header h1 {
	font-size: 2em;
	}

	header p {
	font-size: 1em;
	}

	.container {
	padding: 0 20px;
	}

	nav, .nav-links {
	padding: 15px 20px;
	gap: 30px;
	}

	section {
	padding: 40px 0;
	}

	h2 {
	font-size: 1.5em;
	}

	.stats-grid {
	grid-template-columns: 1fr;
	}

	.contact-links {
	flex-direction: column;
	}

	.contact-btn {
	width: 100%;
	}
	}
	</style>
	</head>
	<body>
	<!-- Navigation -->
	<nav>
	<div class="nav-links">
	<a href="#about">À Propos</a>
	<a href="#achievements">Réalisations</a>
	<a href="#expertise">Expertise</a>
	<a href="#tech">Tech Stack</a>
	<a href="#open">À l'écoute</a>
	<a href="#contact">Contact</a>
	</div>
	</nav>

	<!-- Header -->
	<header>
	<h1>Sébastien Burel</h1>
	<p>CEO & Founder @ Haruni</p>
	<p>IA Générative, Web, Mobile & Cloud</p>
	<p class="location">📍 Rennes, Bretagne, France</p>
	</header>

	<!-- About Section -->
	<section id="about">
	<div class="container">
	<h2>À Propos</h2>
	<p>
	Ingénieur informatique diplômé de l'EPITA, je développe des produits digitaux innovants depuis <strong>plus de 20 ans</strong> à travers haruni.net.
	</p>
	<p>
	Avec mes clients, je transforme l'idée initiale en <strong>produit en production</strong> : applications mobiles (iOS, Android), architectures cloud scalables, et solutions d'<strong>IA générative</strong>.
	</p>
	<p>
	Aujourd'hui, mon focus principal est l'<strong>orchestration de systèmes multi-modèles LLM</strong> (OpenAI, Gemini, Llama, Anthropic, Mistral, AWS Bedrock) pour construire des applications intelligentes et performantes.
	</p>
	<p>
	Basé à Rennes, j'interviens en remote pour des clients en France et à l'international.
	</p>

	<div class="stats-grid">
	<div class="stat">
	<div class="stat-number">20+</div>
	<div class="stat-label">Ans d'expérience</div>
	</div>
	<div class="stat">
	<div class="stat-number">3M</div>
	<div class="stat-label">Téléchargements (Frigo Magic)</div>
	</div>
	<div class="stat">
	<div class="stat-number">10M</div>
	<div class="stat-label">Repas économisés/an</div>
	</div>
	<div class="stat">
	<div class="stat-number">5</div>
	<div class="stat-label">Modèles LLM maîtrisés</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Achievements Section -->
	<section id="achievements">
	<div class="container">
	<h2>Réalisations</h2>

	<div class="projects">
	<div class="project">
	<h3>🍽️ Frigo Magic</h3>
	<p>Application mobile de recettes anti-gaspi basée sur les ingrédients disponibles chez l'utilisateur.</p>
	<div class="project-tags">
	<span class="tag">iOS</span>
	<span class="tag">Android</span>
	<span class="tag">Cloud</span>
	</div>
	<p><strong>Impact:</strong> 3 millions de téléchargements, 10 millions de repas économisés par an</p>
	</div>

	<div class="project">
	<h3>📰 CornerNews</h3>
	<p>Application iOS de partage de photos d'actualité en temps réel. Les utilisateurs deviennent reporters citoyens en postant du contenu géolocalisé.</p>
	<div class="project-tags">
	<span class="tag">iOS</span>
	<span class="tag">Real-time</span>
	<span class="tag">UGC</span>
	</div>
	</div>

	<div class="project">
	<h3>🏖️ Simpki</h3>
	<p>Plateforme de planification de voyages intégrant les APIs de transport et d'hébergement.</p>
	<div class="project-tags">
	<span class="tag">Cloud AWS</span>
	<span class="tag">Mobile</span>
	<span class="tag">Backend</span>
	</div>
	</div>

	<div class="project">
	<h3>🎯 Sony, Bordas</h3>
	<p>Solutions logicielles sur-mesure pour grands comptes. Architectures complexes et haute disponibilité.</p>
	<div class="project-tags">
	<span class="tag">Architecture</span>
	<span class="tag">Scalabilité</span>
	<span class="tag">Enterprise</span>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Expertise Section -->
	<section id="expertise">
	<div class="container">
	<h2>Domaines d'Expertise</h2>

	<div class="expertise-grid">
	<div class="expertise-item">
	<h4>🤖 IA Générative & LLM</h4>
	<ul>
	<li>Orchestration multi-modèles</li>
	<li>RAG & agents autonomes</li>
	<li>Fine-tuning</li>
	<li>OpenAI, Gemini, Mistral, Claude</li>
	<li>AWS Bedrock</li>
	</ul>
	</div>

	<div class="expertise-item">
	<h4>☁️ Cloud AWS</h4>
	<ul>
	<li>Architecture & design</li>
	<li>EC2, Lambda, RDS</li>
	<li>DynamoDB, S3, CloudFront</li>
	<li>Scalabilité & haute disponibilité</li>
	<li>Infrastructure as Code</li>
	</ul>
	</div>

	<div class="expertise-item">
	<h4>📱 Mobile & Web</h4>
	<ul>
	<li>iOS (Swift)</li>
	<li>Android (Kotlin)</li>
	<li>React, Next.js</li>
	<li>Node.js, Python</li>
	<li>Du MVP au produit en production</li>
	</ul>
	</div>

	<div class="expertise-item">
	<h4>🗄️ Bases de Données</h4>
	<ul>
	<li>MySQL, PostgreSQL</li>
	<li>MongoDB, DynamoDB</li>
	<li>Redis</li>
	<li>Optimisation & performance</li>
	<li>Data consistency</li>
	</ul>
	</div>

	<div class="expertise-item">
	<h4>📊 Data & ML</h4>
	<ul>
	<li>Time series forecasting</li>
	<li>Data pipelines & ETL</li>
	<li>Modèles prédictifs</li>
	<li>PyTorch, TensorFlow</li>
	<li>Hugging Face</li>
	</ul>
	</div>

	<div class="expertise-item">
	<h4>🚀 DevOps</h4>
	<ul>
	<li>Docker & Kubernetes</li>
	<li>CI/CD & GitHub Actions</li>
	<li>Terraform</li>
	<li>Monitoring & logging</li>
	<li>Deployments en production</li>
	</ul>
	</div>
	</div>
	</div>
	</section>

	<!-- Tech Stack Section -->
	<section id="tech">
	<div class="container">
	<h2>Tech Stack</h2>

	<div class="tech-grid">
	<div class="tech-category">
	<h4>Langages</h4>
	<div class="tech-tags">
	<span class="tech-tag">JavaScript</span>
	<span class="tech-tag">Python</span>
	<span class="tech-tag">Java</span>
	<span class="tech-tag">Swift</span>
	<span class="tech-tag">Kotlin</span>
	</div>
	</div>

	<div class="tech-category">
	<h4>Frontend</h4>
	<div class="tech-tags">
	<span class="tech-tag">React</span>
	<span class="tech-tag">Next.js</span>
	<span class="tech-tag">TypeScript</span>
	<span class="tech-tag">React Native</span>
	<span class="tech-tag">Tailwind</span>
	</div>
	</div>

	<div class="tech-category">
	<h4>Backend</h4>
	<div class="tech-tags">
	<span class="tech-tag">Node.js</span>
	<span class="tech-tag">FastAPI</span>
	<span class="tech-tag">Django</span>
	<span class="tech-tag">GraphQL</span>
	<span class="tech-tag">REST</span>
	</div>
	</div>

	<div class="tech-category">
	<h4>Databases</h4>
	<div class="tech-tags">
	<span class="tech-tag">PostgreSQL</span>
	<span class="tech-tag">MySQL</span>
	<span class="tech-tag">MongoDB</span>
	<span class="tech-tag">DynamoDB</span>
	<span class="tech-tag">Redis</span>
	</div>
	</div>

	<div class="tech-category">
	<h4>Cloud & DevOps</h4>
	<div class="tech-tags">
	<span class="tech-tag">AWS</span>
	<span class="tech-tag">Docker</span>
	<span class="tech-tag">Kubernetes</span>
	<span class="tech-tag">Terraform</span>
	<span class="tech-tag">GitHub Actions</span>
	</div>
	</div>

	<div class="tech-category">
	<h4>AI & ML</h4>
	<div class="tech-tags">
	<span class="tech-tag">PyTorch</span>
	<span class="tech-tag">TensorFlow</span>
	<span class="tech-tag">LangChain</span>
	<span class="tech-tag">OpenAI</span>
	<span class="tech-tag">HuggingFace</span>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Open To Section -->
	<section id="open">
	<div class="container">
	<h2>À l'Écoute De</h2>

	<div class="open-to-grid">
	<div class="open-to-item">
	<div class="emoji">👔</div>
	<h4>Mandats CTO</h4>
	<p>Pilotage technique et leadership pour entreprises en croissance</p>
	</div>

	<div class="open-to-item">
	<div class="emoji">🤝</div>
	<h4>Partenariats Tech</h4>
	<p>Collaborations et projets innovants</p>
	</div>

	<div class="open-to-item">
	<div class="emoji">🚀</div>
	<h4>Projets Ambitieux</h4>
	<p>Construire des solutions impactantes avec des entrepreneurs passionnés</p>
	</div>

	<div class="open-to-item">
	<div class="emoji">💡</div>
	<h4>Consulting IA</h4>
	<p>Aider les entreprises à intégrer l'IA efficacement</p>
	</div>

	<div class="open-to-item">
	<div class="emoji">🎓</div>
	<h4>Mentoring</h4>
	<p>Partager l'expérience avec la prochaine génération</p>
	</div>

	<div class="open-to-item">
	<div class="emoji">🎤</div>
	<h4>Conférences</h4>
	<p>Présentations et keynotes sur l'IA et le tech</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section id="contact">
	<div class="container">
	<h2>Parlons de Votre Projet</h2>
	<p>Vous avez un projet IA, Web ou Mobile ? Je suis disponible pour des missions en remote.</p>

	<div class="contact-links">
	<a href="https://www.haruni.net" class="contact-btn" target="_blank">🌐 Website</a>
	<a href="mailto:contact@haruni.net" class="contact-btn">📧 Email</a>
	<a href="https://linkedin.com/in/sebastienburel" class="contact-btn" target="_blank">💼 LinkedIn</a>
	<a href="https://github.com/sebastien-burel" class="contact-btn" target="_blank">💻 GitHub</a>
	</div>

	<p style="margin-top: 30px; color: #888;">
	contact@haruni.net • Rennes, France (remote)
	</p>
	</div>
	</section>

	<!-- Footer -->
	<footer>
	<p>© 2024 Sébastien Burel. Tous droits réservés. \| <a href="https://www.haruni.net">haruni.net</a></p>
	</footer>
	</body>
	</html>