apon2/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
dd5f1582898fcd6058433510e73fdc0ffe5dde0e
Portfolio/index.html
apon dd5f158289 finis
2025-11-28 18:19:08 +01:00

403 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Apon</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top shadow-sm">
<div class="container">
<a class="navbar-brand fw-bold" href="#hero">
<i class="fas fa-code me-2"></i>Apon
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav text-center">
<li class="nav-item"><a class="nav-link" href="#hero">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#about">À propos</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">Compétences</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projets</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<section id="hero" class="d-flex align-items-center justify-content-center text-center">
<div class="floating-elements">
<div class="floating-element el-1"><i class="fas fa-code"></i></div>
<div class="floating-element el-2"><i class="fas fa-laptop"></i></div>
<div class="floating-element el-3"><i class="fas fa-mobile-alt"></i></div>
<div class="floating-element el-4"><i class="fas fa-database"></i></div>
</div>
<div class="hero-content">
<h1 class="mb-4" data-aos="fade-down" data-aos-delay="200">Bonjour, je suis <span class="typing-text"></span></h1>
<p class="lead mb-4" data-aos="fade-up" data-aos-delay="400">Étudiant en BTS CIEL • Passionné par le numérique</p>
<div data-aos="zoom-in" data-aos-delay="600">
<a href="#contact" class="btn btn-custom me-3">Me contacter</a>
<a href="#projects" class="btn btn-outline-custom">Mes projets</a>
</div>
</div>
</section>
<section id="about">
<div class="container text-center">
<h2 class="section-title" data-aos="fade-down">À propos</h2>
<div class="row justify-content-center">
<div class="col-md-8" data-aos="fade-up">
<p>Je m'appelle Apon, j'ai 21 ans. Étudiant en BTS CIEL après un bac général. Passionné par le badminton, les films et séries. J'aime créer et apprendre de nouvelles compétences numériques.</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-4" data-aos="fade-right" data-aos-delay="200">
<div class="about-item">
<div class="icon-wrapper">
<i class="fas fa-graduation-cap fa-3x mb-3 text-primary"></i>
</div>
<h5>Formation</h5>
<p>BTS CIEL (Cybersécurité, Informatique et réseaux, Electronique)</p>
<div class="timeline">
<div class="timeline-item">
<span class="year">2023-2025</span>
<span class="event">BTS CIEL</span>
</div>
<div class="timeline-item">
<span class="year">2022</span>
<span class="event">Bac Général</span>
</div>
</div>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
<div class="about-item">
<div class="icon-wrapper">
<i class="fas fa-laptop-code fa-3x mb-3 text-primary"></i>
</div>
<h5>Passion</h5>
<p>Développement web, programmation et nouvelles technologies</p>
<div class="hobbies">
<span class="hobby-tag">Coding</span>
<span class="hobby-tag">Design</span>
<span class="hobby-tag">Innovation</span>
</div>
</div>
</div>
<div class="col-md-4" data-aos="fade-left" data-aos-delay="400">
<div class="about-item">
<div class="icon-wrapper">
<i class="fas fa-running fa-3x mb-3 text-primary"></i>
</div>
<h5>Loisirs</h5>
<p>Badminton, cinéma et séries</p>
<div class="hobbies">
<span class="hobby-tag">Badminton</span>
<span class="hobby-tag">Cinéma</span>
<span class="hobby-tag">Séries</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="skills">
<div class="container text-center">
<h2 class="section-title" data-aos="fade-down">Mes Compétences</h2>
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="row g-4">
<div class="col-md-6" data-aos="fade-right">
<div class="skill-category">
<h4 class="mb-4"><i class="fas fa-code me-2"></i>Développement Web</h4>
<div class="skill-item">
<div class="skill-name">
<span>HTML/CSS</span>
<span class="skill-level">Intermédiaire</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>JavaScript</span>
<span class="skill-level">Bases</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>Bootstrap</span>
<span class="skill-level">Intermédiaire</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 70%"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-left">
<div class="skill-category">
<h4 class="mb-4"><i class="fas fa-desktop me-2"></i>Informatique</h4>
<div class="skill-item">
<div class="skill-name">
<span>Suite Office</span>
<span class="skill-level">Avancé</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 85%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>Montage PC</span>
<span class="skill-level">Intermédiaire</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 70%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>Résolution de problèmes</span>
<span class="skill-level">Intermédiaire</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-right" data-aos-delay="200">
<div class="skill-category">
<h4 class="mb-4"><i class="fas fa-users me-2"></i>Soft Skills</h4>
<div class="skill-item">
<div class="skill-name">
<span>Travail d'équipe</span>
<span class="skill-level">Avancé</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>Communication</span>
<span class="skill-level">Intermédiaire</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 70%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>Organisation</span>
<span class="skill-level">Intermédiaire</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-left" data-aos-delay="200">
<div class="skill-category">
<h4 class="mb-4"><i class="fas fa-language me-2"></i>Langues</h4>
<div class="skill-item">
<div class="skill-name">
<span>Français</span>
<span class="skill-level">Courant</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 90%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>Anglais</span>
<span class="skill-level">Intermédiaire</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 65%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="projects">
<div class="container text-center">
<h2 class="section-title" data-aos="fade-down">Mes Projets</h2>
<div class="row g-4 justify-content-center">
<div class="col-md-4" data-aos="flip-left" data-aos-delay="200">
<div class="card project-card h-100 shadow-sm">
<div class="card-body">
<div class="project-icon">
<i class="fas fa-cogs"></i>
</div>
<h5 class="card-title">CMS Simplifié</h5>
<p class="card-text">Système de gestion de contenu développé en PHP/MySQL avec zone d'administration et CRUD complet.</p>
<div class="project-tags">
<span class="badge bg-primary">PHP</span>
<span class="badge bg-secondary">MySQL</span>
<span class="badge bg-info">HTML/CSS</span>
</div>
<a href="https://gitea.lasallesaintdenis.com/apon2/projet-cms" target="_blank" class="btn-project mt-3">Voir le projet</a>
</div>
</div>
</div>
<div class="col-md-4" data-aos="flip-left" data-aos-delay="300">
<div class="card project-card h-100 shadow-sm">
<div class="card-body">
<div class="project-icon">
<i class="fas fa-school"></i>
</div>
<h5 class="card-title">Site Web Lycée</h5>
<p class="card-text">Création d'un site web pour le lycée avec interface moderne et responsive.</p>
<div class="project-tags">
<span class="badge bg-primary">HTML/CSS</span>
<span class="badge bg-success">JavaScript</span>
<span class="badge bg-info">Responsive</span>
</div>
<button class="btn-project mt-3">Voir le projet</button>
</div>
</div>
</div>
<div class="col-md-4" data-aos="flip-left" data-aos-delay="400">
<div class="card project-card h-100 shadow-sm">
<div class="card-body">
<div class="project-icon">
<i class="fas fa-gamepad"></i>
</div>
<h5 class="card-title">Site avec Mini-Jeux</h5>
<p class="card-text">Développement d'un site web avec 4 mini-jeux intégrés pour pratiquer mes compétences.</p>
<div class="project-tags">
<span class="badge bg-success">JavaScript</span>
<span class="badge bg-primary">HTML/CSS</span>
<span class="badge bg-warning">Animation CSS</span>
</div>
<button class="btn-project mt-3">Voir le projet</button>
<h5 class="card-title">Projet 3</h5>
<p class="card-text">Mini-Projet CMS </p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container text-center">
<h2 class="section-title" data-aos="fade-down">Contact</h2>
<div class="row g-4 justify-content-center">
<div class="col-md-3" data-aos="zoom-in" data-aos-delay="200">
<a href="mailto:aponbarua14@gmail.com" class="text-decoration-none">
<div class="card contact-card shadow-sm p-3">
<div class="contact-icon">
<i class="fas fa-envelope fa-2x mb-2 text-primary"></i>
</div>
<h5>Email</h5>
<p>aponbarua14@gmail.com</p>
</div>
</a>
</div>
<div class="col-md-3" data-aos="zoom-in" data-aos-delay="300">
<div class="card contact-card shadow-sm p-3">
<div class="contact-icon">
<i class="fas fa-phone fa-2x mb-2 text-success"></i>
</div>
<h5>Téléphone</h5>
<p>+33 7 54 58 73 06</p>
</div>
</div>
<div class="col-md-3" data-aos="zoom-in" data-aos-delay="400">
<a href="https://www.linkedin.com/in/apon-barua-3506a0330/" target="_blank" class="text-decoration-none">
<div class="card contact-card shadow-sm p-3">
<div class="contact-icon">
<i class="fab fa-linkedin fa-2x mb-2 text-info"></i>
</div>
<h5>LinkedIn</h5>
<p>Apon Barua</p>
</div>
</a>
</div>
<div class="col-md-3" data-aos="zoom-in" data-aos-delay="500">
<a href="https://github.com" target="_blank" class="text-decoration-none">
<div class="card contact-card shadow-sm p-3">
<div class="contact-icon">
<i class="fab fa-github fa-2x mb-2 text-dark"></i>
</div>
<h5>GitHub</h5>
<p>Mes projets</p>
</div>
</a>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-md-8" data-aos="fade-up">
<div class="card contact-form-card shadow-sm">
<div class="card-body p-4">
<h4 class="mb-4">Envoyez-moi un message</h4>
<form id="contactForm">
<div class="row">
<div class="col-md-6 mb-3">
<input type="text" class="form-control" placeholder="Votre nom" required>
</div>
<div class="col-md-6 mb-3">
<input type="email" class="form-control" placeholder="Votre email" required>
</div>
</div>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Sujet" required>
</div>
<div class="mb-3">
<textarea class="form-control" rows="5" placeholder="Votre message" required></textarea>
</div>
<button type="submit" class="btn btn-custom">Envoyer</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-dark text-light py-4 text-center">
<div class="container">
<div class="row">
<div class="col-md-6 text-md-start">
<p>&copy; 2024 Apon Portfolio. Tous droits réservés.</p>
</div>
<div class="col-md-6 text-md-end">
</div>
</div>
</div>
</footer>
<button id="backToTop" class="back-to-top">
<i class="fas fa-arrow-up"></i>
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink