|
|
<!DOCTYPE html>
|
|
|
<html lang="fr">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
|
|
|
integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMy41vXnxzOZ2La/PoLjYgKjS6Kr/8mVsbQ1zB0" crossorigin="anonymous">
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
|
crossorigin="anonymous"></script>
|
|
|
<title>Portfolio</title>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!-- Header -->
|
|
|
<div class="container" id="home">
|
|
|
<header class="d-flex flex-wrap justify-content-center border-bottom py-1">
|
|
|
<a href="#" class="d-flex align-items-center mb-md-0 me-md-auto">
|
|
|
<img src="./assets/logo-b&w.png" alt="logo" width="50" height="50">
|
|
|
</a>
|
|
|
|
|
|
<ul class="nav nav-pills d-flex align-items-center">
|
|
|
<li class="nav-item"><a href="#home" class="nav-link text-dark" aria-current="page">Accueil</a></li>
|
|
|
<li class="nav-item"><a href="#aboutus" class="nav-link text-dark">A propos</a></li>
|
|
|
<li class="nav-item"><a href="#projects" class="nav-link text-dark">Projets</a></li>
|
|
|
<li class="nav-item"><a href="#services" class="nav-link text-dark">Savoir-faire</a></li>
|
|
|
<li class="nav-item"><a href="#contactus" class="nav-link text-dark">Me contacter</a></li>
|
|
|
</ul>
|
|
|
</header>
|
|
|
</div>
|
|
|
|
|
|
<!-- Main -->
|
|
|
<div class="container gradient-start">
|
|
|
<div class="row gx-5">
|
|
|
<div class="col-sm-5">
|
|
|
<h1 class="main-h1" style="padding-bottom: 1rem;">Salut, moi c'est Alexis <br>
|
|
|
Étudiant en développement web</h1>
|
|
|
<div class="col">
|
|
|
<div class="my-1">
|
|
|
<button class="btn btn-dark rounded-0">Télécharger mon CV</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="col-sm-7">
|
|
|
<img loading="lazy" class="profile-pic" src="./assets/alexis-b&w.png" alt="profile-pic">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Overflow Icon -->
|
|
|
<div class="outer-img1">
|
|
|
<i class="fa-10x fa-solid fa-star-of-life icon-color inner-img1 animation1"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Experience -->
|
|
|
<div id="aboutus" class="container">
|
|
|
<div class="text-center py-4">
|
|
|
<h2 class="text-decoration-underline">A propos</h2>
|
|
|
</div>
|
|
|
<div class="d-flex flex-column">
|
|
|
<div class="col-lg-5 col-md-12">
|
|
|
<h2>Alexis <i class="fa-2xs fa-solid fa-star-of-life icon-color"></i> CARREAU,</h2>
|
|
|
<h4>Développeur web en devenir</h4>
|
|
|
</div>
|
|
|
<div class="d-flex flex-column justify-content-center align-items-center">
|
|
|
<p>
|
|
|
Passionné d'informatique depuis plusieurs années, j'ai pu découvrir ce domaine durant le lycée, grâce au parcours N.S.I. En effet, j'ai pu y découvrir de nombreux secteurs du développement informatique.
|
|
|
</br></br>
|
|
|
J'ai beaucoup apprécié cette spécialité, car elle m'a permis de me donner un ordre d'idée du secteur dans lequel je pourrai m'orienter durant mes études supérieures. Je me suis donc orienté dans un BUT Informatique à l'IUT de Clermont-Ferrand. Puis pendant deux années supplémentaires en Mastère informatique à l'école Hexagone situé également à Clermont-Ferrand. Cette fois-ci, je me spécialise un peu en me tournant vers la filière "Architecture des Systèmes d'information".
|
|
|
</br></br>
|
|
|
Pour ce qui est de mes hobbies et de mes passions, j'aime beaucoup le sport. Notamment, la musculation en salle de sport et la boxe thaïlandaise. Je m'intéresse également de plus en plus à l'automobile.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Work -->
|
|
|
<div class="container">
|
|
|
<div class="row border border-secondary text-center">
|
|
|
<div class="col-4 bg-light p-4">
|
|
|
<h2>1+</h2>
|
|
|
<p>année d'expérience</p>
|
|
|
</div>
|
|
|
<div class="col-4 p-4 bg-dark text-white">
|
|
|
<h2>20+</h2>
|
|
|
<p>projets web terminé</p>
|
|
|
</div>
|
|
|
<div class="col-4 bg-light p-4">
|
|
|
<h2>3+</h2>
|
|
|
<p>années d'études</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Project -->
|
|
|
<div id="projects" class="container">
|
|
|
<div class="text-center py-4">
|
|
|
<h2 class="text-decoration-underline">Projets</h2>
|
|
|
</div>
|
|
|
|
|
|
<div class="column">
|
|
|
<div class="border border-secondary p-5 my-4 demo-effect">
|
|
|
<div class="row">
|
|
|
<div class="col-8">
|
|
|
<h3>SAÉ (projet de groupe)</h3>
|
|
|
<p style="margin-bottom: -16px;">Jeu de quiz</p>
|
|
|
</div>
|
|
|
<div class="col-4">
|
|
|
<p style="padding-top: 16px; float: right;">Product Deign 2022</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="border border-secondary p-5 my-4 demo-effect">
|
|
|
<div class="row">
|
|
|
<div class="col-8">
|
|
|
<h3>02. Webflow Awwwards Team</h3>
|
|
|
<p style="margin-bottom: -16px;">Runner Up - Webflow Expert Design</p>
|
|
|
</div>
|
|
|
<div class="col-4">
|
|
|
<p style="padding-top: 16px; float: right;">Development 2021</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="border border-secondary p-5 my-4 demo-effect">
|
|
|
<div class="row">
|
|
|
<div class="col-8">
|
|
|
<h3>03. Webflow Awwwards Team</h3>
|
|
|
<p style="margin-bottom: -16px;">Runner Up - Webflow Expert Design</p>
|
|
|
</div>
|
|
|
<div class="col-4">
|
|
|
<p style="padding-top: 16px; float: right;">Branding 2021</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="border border-secondary p-5 my-4 demo-effect">
|
|
|
<div class="row">
|
|
|
<div class="col-8">
|
|
|
<h3>04. Webflow Awwwards Team</h3>
|
|
|
<p style="margin-bottom: -16px;">Runner Up - Webflow Expert Design</p>
|
|
|
</div>
|
|
|
<div class="col-4">
|
|
|
<p style="padding-top: 16px; float: right;">Graphic Design 2019</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Overflow Icon -->
|
|
|
<div class="outer-img2">
|
|
|
<i class="fa-10x fa-solid fa-star-of-life icon-color inner-img2 animation1"></i>
|
|
|
</div>
|
|
|
|
|
|
<!-- Services -->
|
|
|
<div id="services" class="container" style="margin: 5rem 0 8rem;">
|
|
|
|
|
|
<div class="text-center">
|
|
|
<h2 class="py-4 text-decoration-underline">Savoir-faire</h2>
|
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="row gx-5 my-4">
|
|
|
<div class="col-6">
|
|
|
<div class="row border border-secondary p-4 demo-effect">
|
|
|
<h3>Web Design</h3>
|
|
|
<p>Every single project is a challenge that we accept eagerly. Let’s implement innovative
|
|
|
ideas together!</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-6">
|
|
|
<div class="row border border-secondary p-4 demo-effect">
|
|
|
<h3>Product Design</h3>
|
|
|
<p>Every single project is a challenge that we accept eagerly. Let’s implement innovative
|
|
|
ideas together!</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="row gx-5 my-4">
|
|
|
<div class="col-6">
|
|
|
<div class="row border border-secondary p-4 demo-effect">
|
|
|
<h3>UI/UX Design</h3>
|
|
|
<p>Every single project is a challenge that we accept eagerly. Let’s implement innovative
|
|
|
ideas together!</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-6">
|
|
|
<div class="row border border-secondary p-4 demo-effect">
|
|
|
<h3>Art Direction</h3>
|
|
|
<p>Every single project is a challenge that we accept eagerly. Let’s implement innovative
|
|
|
ideas together!</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Get in touch -->
|
|
|
<div id="contactus" class="container-fluid bg-white">
|
|
|
|
|
|
<div class="text-center">
|
|
|
<h2 class="py-3 text-decoration-underline">Me contacter</h2>
|
|
|
</div>
|
|
|
|
|
|
<div class="container my-5 git-container">
|
|
|
<div class="col">
|
|
|
<form class="needs-validation">
|
|
|
|
|
|
<div class="row g-3">
|
|
|
<div class="col-sm-6">
|
|
|
<label for="firstName" class="form-label">
|
|
|
<p style="font-weight: 600; margin-bottom: 0;">Prénom</p>
|
|
|
</label>
|
|
|
<input type="text" class="form-control border-secondary rounded-0" id="firstName" placeholder=""
|
|
|
value="" required>
|
|
|
</div>
|
|
|
|
|
|
<div class="col-sm-6">
|
|
|
<label for="lastName" class="form-label">
|
|
|
<p style="font-weight: 600; margin-bottom: 0;">Nom</p>
|
|
|
</label>
|
|
|
<input type="text" class="form-control border-secondary rounded-0" id="lastName" placeholder=""
|
|
|
value="" required>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12">
|
|
|
<label for="email" class="form-label">
|
|
|
<p style="font-weight: 600; margin-bottom: 0;">Email</p>
|
|
|
</label>
|
|
|
<input type="email" class="form-control border-secondary rounded-0" id="email">
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12">
|
|
|
<label for="address2" class="form-label">
|
|
|
<p style="font-weight: 600; margin-bottom: 0;">Objet<span class="text-muted">
|
|
|
(Optional)</span></p>
|
|
|
</label>
|
|
|
<input type="textarea" class="form-control border-secondary rounded-0" id="address2">
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12">
|
|
|
<label for="address2" class="form-label">
|
|
|
<p style="font-weight: 600; margin-bottom: 0;">Message</p>
|
|
|
</label>
|
|
|
<textarea class="form-control border-secondary rounded-0 textarea" id="address2" rows="4"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<button class="w-100 btn btn-color btn-lg my-4 rounded-0" type="submit">
|
|
|
Continue to checkout
|
|
|
</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Footer -->
|
|
|
|
|
|
<div class="container-fluid footer p-5">
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="footer-icon">
|
|
|
<i class="fa-brands fa-linkedin-in social-icon float-end"></i>
|
|
|
<i class="fa-brands fa-twitter social-icon float-end"></i>
|
|
|
<i class="fa-solid fa-user social-icon float-end"></i>
|
|
|
<i class="fa-brands fa-youtube social-icon float-end"></i>
|
|
|
</div>
|
|
|
<p class="copy-tag">© Made by Alexis CARREAU</p>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html> |
