generated from Templates_CodeFirst/templateHtmlCss
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
253 lines
9.9 KiB
253 lines
9.9 KiB
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mon Portefolio</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<nav class="topnav">
|
|
<a href="#about">À propos</a>
|
|
<a href="#parcour">Mon parcour</a>
|
|
<a href="#projects">Projets</a>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
<div class="accueil">
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<div class="nine">
|
|
<h1>Pierre Ferreira<span>Développeur</span></h1>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
|
|
<!-- Loader -->
|
|
<div class="loader-container">
|
|
<div class="loader triangle">
|
|
<svg viewBox="0 0 86 80">
|
|
<polygon points="43 8 79 72 7 72"></polygon>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="about" class="section">
|
|
<h2 class="mainTitle">À propos de moi</h2>
|
|
<p>Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.</p>
|
|
<div class="about-deck">
|
|
<div class="about-card-container">
|
|
<div class="about-card">
|
|
<div class="about-front-content">
|
|
<p>Développeur<br/>Web</p>
|
|
</div>
|
|
<div class="about-content">
|
|
<p class="about-heading">Card Hover</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipii
|
|
voluptas ten mollitia pariatur odit, ab
|
|
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
|
necessitatibus dignissimos molestias.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="about-card-container">
|
|
<div class="about-card">
|
|
<div class="about-front-content">
|
|
<p>Développeur<br/>Mobile</p>
|
|
</div>
|
|
<div class="about-content">
|
|
<p class="about-heading">Card Hover</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipii
|
|
voluptas ten mollitia pariatur odit, ab
|
|
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
|
necessitatibus dignissimos molestias.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="about-card-container">
|
|
<div class="about-card">
|
|
<div class="about-front-content">
|
|
<p>Apprenti<br/>Pixel-Artist</p>
|
|
</div>
|
|
<div class="about-content">
|
|
<p class="about-heading">Card Hover</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipii
|
|
voluptas ten mollitia pariatur odit, ab
|
|
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
|
necessitatibus dignissimos molestias.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="parcour" class="section">
|
|
<h1 class="mainTitle">Mon parcours</h2>
|
|
<div class="timeline">
|
|
<div class="timeline-empty"></div>
|
|
<div class="timeline-middle">
|
|
<div class="timeline-circle"></div>
|
|
</div>
|
|
<div class="timeline-component timeline-content">
|
|
<h3>Collège</h3>
|
|
<p>Lorem Ipsum</p>
|
|
</div>
|
|
<div class="timeline-component timeline-content">
|
|
<h3>Lycée</h3>
|
|
<p>Lorem Ipsum</p>
|
|
</div>
|
|
<div class="timeline-middle">
|
|
<div class="timeline-circle"></div>
|
|
</div>
|
|
|
|
<div class="timeline-empty"></div>
|
|
<div class="timeline-empty"></div>
|
|
|
|
<div class="timeline-middle">
|
|
<div class="timeline-circle"></div>
|
|
</div>
|
|
<div class=" timeline-component timeline-content">
|
|
<h3>BUT informatique</h3>
|
|
<p>Lorem Ipsum</p>
|
|
</div>
|
|
<div class="timeline-empty"></div>
|
|
<div class="timeline-middle">
|
|
<!-- Cercle final -->
|
|
<div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section id="projects" class="section">
|
|
<h1 class="mainTitle">Projets</h2>
|
|
<div class="projects-grid">
|
|
<div class="project-card">
|
|
<h3 class="text-title">Art e-Show</h3>
|
|
<p class="text-body"> Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu :
|
|
|
|
<a href="https://codefirst.iut.uca.fr/git/" class="project-card-button">Plus d'infos</a>
|
|
</div>
|
|
<div class="project-card offset">
|
|
<h3 class="text-title">Spelltastic</h3>
|
|
<p class="text-body">Description du projet 2.</p>
|
|
<button class="project-card-button">Plus d'infos</button>
|
|
</div>
|
|
<div class="project-card">
|
|
<h3 class="text-title">Cryptid</h3>
|
|
<p class="text-body">Description du projet 3.</p>
|
|
<button class="project-card-button">Plus d'infos</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="section">
|
|
<h2 class="mainTitle">Contact</h2>
|
|
|
|
<div class="form-container">
|
|
|
|
<div class="AltLinks">
|
|
|
|
<!-- Github -->
|
|
<button class="Btn"> <!-- JS + datautl -->
|
|
<span class="imgContainer">
|
|
<img src="logo/githubLogoW.png" alt="Github" class="imgIcon">
|
|
</span>
|
|
<span class="BG"></span>
|
|
</button>
|
|
|
|
<!-- LinkedIn -->
|
|
<button class="Btn">
|
|
<span class="imgContainer">
|
|
<img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon">
|
|
</span>
|
|
<span class="BG"></span>
|
|
</button>
|
|
|
|
<button class="Btn">
|
|
<span class="imgContainer">
|
|
<img src="logo/BSLogoW.png" alt="BS" class="imgIcon">
|
|
</span>
|
|
<span class="BG"></span>
|
|
</button>
|
|
|
|
<!-- Teams -->
|
|
<button class="Btn">
|
|
<span class="imgContainer">
|
|
<img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon">
|
|
</span>
|
|
<span class="BG"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<form class="form">
|
|
<div class="form__group field">
|
|
<input type="input" class="form__field" placeholder="Name" required="">
|
|
<label for="name" class="form__label">Nom</label>
|
|
</div>
|
|
|
|
<div class="form__group field">
|
|
<input type="input" class="form__field" placeholder="Name" required="">
|
|
<label for="name" class="form__label">Prenom</label>
|
|
</div>
|
|
|
|
<div class="form__group field">
|
|
<input type="input" class="form__field" placeholder="Name" required="">
|
|
<label for="name" class="form__label">E-mail</label>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div class="form-group">
|
|
<label for="textarea"><h3>En quoi puis-je vous aider ?</h3></label>
|
|
<textarea name="textarea" id="textarea" rows="10" cols="50" required=""></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<button class="send-msg">
|
|
<span class="circle" aria-hidden="true">
|
|
<span class="icon arrow"></span>
|
|
</span>
|
|
<span class="button-text">Envoyer</span>
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer>
|
|
<p>© 2024 Mon Portefolio. Tous droits réservés.</p>
|
|
</footer>
|
|
|
|
|
|
<script>
|
|
//Gestion du loader
|
|
window.addEventListener('load', function() {
|
|
document.querySelector('.loader-container').classList.add('hidden');
|
|
});
|
|
|
|
//Simulation d'un chargement de 3 secondes
|
|
|
|
/*window.addEventListener('load', function() {
|
|
setTimeout(function() {
|
|
const loaderContainer = document.querySelector('.loader-container');
|
|
if (loaderContainer) {
|
|
loaderContainer.classList.add('hidden');
|
|
}
|
|
}, 3000); // 3000 ms = 3 seconds
|
|
});*/
|
|
</script>
|
|
</body>
|
|
</html>
|