321 lines
16 KiB
HTML
321 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Portfolio Details</title>
|
|
<meta name="description" content="">
|
|
<meta name="keywords" content="">
|
|
|
|
<!-- Favicons -->
|
|
<link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons.ico/">
|
|
<link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons.ico/apple-icon-60x60.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons.ico/apple-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons.ico/apple-icon-76x76.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons.ico/apple-icon-114x114.png">
|
|
<link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons.ico/apple-icon-120x120.png">
|
|
<link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons.ico/apple-icon-144x144.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons.ico/apple-icon-152x152.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons.ico/apple-icon-180x180.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="assets/img/favicons.ico/android-icon-192x192.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons.ico/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons.ico/favicon-96x96.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons.ico/favicon-16x16.png">
|
|
<link rel="manifest" href="assets/img/favicons.ico/manifest.json">
|
|
<meta name="msapplication-TileColor" content="#ffffff">
|
|
<meta name="msapplication-TileImage" content="assets/img/favicons.ico/ms-icon-144x144.png">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect">
|
|
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
|
|
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
|
|
|
|
<!-- Main CSS File -->
|
|
<link href="assets/css/main.css" rel="stylesheet">
|
|
|
|
<!-- =======================================================
|
|
* Template Name: FolioOne
|
|
* Template URL: https://bootstrapmade.com/folioone-bootstrap-portfolio-website-template/
|
|
* Updated: Aug 23 2025 with Bootstrap v5.3.7
|
|
* Author: BootstrapMade.com
|
|
* License: https://bootstrapmade.com/license/
|
|
======================================================== -->
|
|
</head>
|
|
|
|
<body class="portfolio-details-page">
|
|
|
|
<header id="header" class="header d-flex align-items-center light-background sticky-top">
|
|
<canvas class="matrix-bg-header" aria-hidden="true"></canvas>
|
|
<div class="container position-relative d-flex align-items-center justify-content-between">
|
|
|
|
<!-- <a href="index.html" class="logo d-flex align-items-center me-auto me-xl-0">
|
|
<img src="assets/img/logo.webp" alt="">
|
|
<h1 class="sitename">FolioOne</h1>
|
|
</a> -->
|
|
|
|
<nav id="navmenu" class="navmenu">
|
|
<ul>
|
|
<li><a href="index.html">Accueil</a></li>
|
|
<li><a href="about.html">À propos de moi</a></li>
|
|
<li><a href="portfolio.html" class="active">Projets</a></li>
|
|
<li><a href="formation.html">Formation</a></li>
|
|
<li><a href="resume.html">Mon CV</a></li>
|
|
<li><a href="services.html">Mes services</a></li>
|
|
<li><a href="contact.html">Contact</a></li>
|
|
</ul>
|
|
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
|
|
</nav>
|
|
|
|
<div class="header-social-links">
|
|
<a href="https://www.linkedin.com/in/ewen-gadonnaud-b17491283" class="linkedin" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
|
|
<a href="https://github.com/Azuneer" class="github" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><i class="bi bi-github"></i></a>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
|
|
<!-- Portfolio Details Section -->
|
|
<section id="portfolio-details" class="portfolio-details section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Portfolio Details</h2>
|
|
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row gy-4">
|
|
<div class="col-lg-6" data-aos="fade-right">
|
|
<div class="portfolio-details-media">
|
|
<div class="main-image">
|
|
<div class="portfolio-details-slider swiper init-swiper" data-aos="zoom-in">
|
|
<script type="application/json" class="swiper-config">
|
|
{
|
|
"loop": true,
|
|
"speed": 1000,
|
|
"autoplay": {
|
|
"delay": 6000
|
|
},
|
|
"effect": "creative",
|
|
"creativeEffect": {
|
|
"prev": {
|
|
"shadow": true,
|
|
"translate": [0, 0, -400]
|
|
},
|
|
"next": {
|
|
"translate": ["100%", 0, 0]
|
|
}
|
|
},
|
|
"slidesPerView": 1,
|
|
"navigation": {
|
|
"nextEl": ".swiper-button-next",
|
|
"prevEl": ".swiper-button-prev"
|
|
}
|
|
}
|
|
</script>
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<img src="assets/img/portfolio/portfolio-5.webp" alt="Portfolio Image" class="img-fluid">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="assets/img/portfolio/portfolio-7.webp" alt="Portfolio Image" class="img-fluid">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="assets/img/portfolio/portfolio-8.webp" alt="Portfolio Image" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="thumbnail-grid" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="row g-2 mt-3">
|
|
<div class="col-3">
|
|
<img src="assets/img/portfolio/portfolio-4.webp" alt="Gallery Image" class="img-fluid glightbox">
|
|
</div>
|
|
<div class="col-3">
|
|
<img src="assets/img/portfolio/portfolio-6.webp" alt="Gallery Image" class="img-fluid glightbox">
|
|
</div>
|
|
<div class="col-3">
|
|
<img src="assets/img/portfolio/portfolio-11.webp" alt="Gallery Image" class="img-fluid glightbox">
|
|
</div>
|
|
<div class="col-3">
|
|
<img src="assets/img/portfolio/portfolio-12.webp" alt="Gallery Image" class="img-fluid glightbox">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-stack-badges" data-aos="fade-up" data-aos-delay="300">
|
|
<span>Angular</span>
|
|
<span>Express.js</span>
|
|
<span>PostgreSQL</span>
|
|
<span>GraphQL</span>
|
|
<span>Firebase</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6" data-aos="fade-left">
|
|
<div class="portfolio-details-content">
|
|
<div class="project-meta">
|
|
<div class="badge-wrapper">
|
|
<span class="project-badge">UX/UI Design</span>
|
|
</div>
|
|
<div class="date-client">
|
|
<div class="meta-item">
|
|
<i class="bi bi-calendar-check"></i>
|
|
<span>September 2024</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<i class="bi bi-buildings"></i>
|
|
<span>DigitalCraft Solutions</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="project-title">Innovative Financial Dashboard App</h2>
|
|
|
|
<div class="project-website">
|
|
<i class="bi bi-link-45deg"></i>
|
|
<a href="#" target="_blank">projectwebsite.example.com</a>
|
|
</div>
|
|
|
|
<div class="project-overview">
|
|
<p class="lead">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
|
|
</p>
|
|
|
|
<div class="accordion project-accordion" id="portfolio-details-projectAccordion">
|
|
<div class="accordion-item" data-aos="fade-up">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#portfolio-details-collapse-1" aria-expanded="true" aria-controls="collapseOne">
|
|
<i class="bi bi-clipboard-data me-2"></i> Project Overview
|
|
</button>
|
|
</h2>
|
|
<div id="portfolio-details-collapse-1" class="accordion-collapse collapse show" data-bs-parent="#portfolio-details-projectAccordion">
|
|
<div class="accordion-body">
|
|
<p>Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item" data-aos="fade-up" data-aos-delay="100">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#portfolio-details-collapse-2" aria-expanded="false" aria-controls="collapseTwo">
|
|
<i class="bi bi-exclamation-diamond me-2"></i> The Challenge
|
|
</button>
|
|
</h2>
|
|
<div id="portfolio-details-collapse-2" class="accordion-collapse collapse" data-bs-parent="#portfolio-details-projectAccordion">
|
|
<div class="accordion-body">
|
|
<p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item" data-aos="fade-up" data-aos-delay="200">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#portfolio-details-collapse-3" aria-expanded="false" aria-controls="collapseThree">
|
|
<i class="bi bi-award me-2"></i> The Solution
|
|
</button>
|
|
</h2>
|
|
<div id="portfolio-details-collapse-3" class="accordion-collapse collapse" data-bs-parent="#portfolio-details-projectAccordion">
|
|
<div class="accordion-body">
|
|
<p>Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-features" data-aos="fade-up" data-aos-delay="300">
|
|
<h3><i class="bi bi-stars"></i> Key Features</h3>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<ul class="feature-list">
|
|
<li><i class="bi bi-check2-circle"></i> Real-time Data Visualization</li>
|
|
<li><i class="bi bi-check2-circle"></i> User Role Management</li>
|
|
<li><i class="bi bi-check2-circle"></i> Secure Authentication</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<ul class="feature-list">
|
|
<li><i class="bi bi-check2-circle"></i> Customizable Dashboards</li>
|
|
<li><i class="bi bi-check2-circle"></i> Data Export Options</li>
|
|
<li><i class="bi bi-check2-circle"></i> Multi-device Support</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cta-buttons" data-aos="fade-up" data-aos-delay="400">
|
|
<a href="#" class="btn-view-project">View Live Project</a>
|
|
<a href="#" class="btn-next-project">Next Project <i class="bi bi-arrow-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Portfolio Details Section -->
|
|
|
|
</main>
|
|
|
|
<footer id="footer" class="footer">
|
|
|
|
<div class="container">
|
|
<div class="copyright text-center ">
|
|
<p>© <span>Copyright</span> <strong class="px-1 sitename">GADONNAUD Ewen</strong> <span>Tout droits réservés<br></span></p>
|
|
</div>
|
|
<div class="social-links d-flex justify-content-center">
|
|
<a href="https://www.linkedin.com/in/ewen-gadonnaud-b17491283" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
|
|
<a href="https://github.com/Azuneer" aria-label="GitHub"><i class="bi bi-github"></i></a>
|
|
</div>
|
|
<div class="credits">
|
|
<!-- All the links in the footer should remain intact. -->
|
|
<!-- You can delete the links only if you've purchased the pro version. -->
|
|
<!-- Licensing information: https://bootstrapmade.com/license/ -->
|
|
<!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
|
|
Designé avec <a href="https://bootstrapmade.com/">BootstrapMade</a>
|
|
</div>
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
<!-- Scroll Top -->
|
|
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
|
|
|
<!-- Preloader -->
|
|
<div id="preloader"></div>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/vendor/php-email-form/validate.js"></script>
|
|
<script src="assets/vendor/aos/aos.js"></script>
|
|
<script src="assets/vendor/typed.js/typed.umd.js"></script>
|
|
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
|
|
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
|
|
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
|
|
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
|
|
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
|
|
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
|
|
|
|
<!-- Main JS File -->
|
|
<script src="assets/js/main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |