Scribd
Upload
30 views16 pages

Portfolio

Uploaded by

Gil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views16 pages

Portfolio

Uploaded by

Gil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Merci pour cette description détaillée du projet de portfolio interactif.

Je comprends que vous souhaitez


que je crée le code source complet pour ce site, en utilisant mes compétences en HTML, CSS, JavaScript,
Bootstrap et jQuery, tout en intégrant un design web attrayant et des animations élégantes.

Voici une structure de base pour démarrer le projet. Notez que ceci est un point de départ et
nécessiterait plus de développement pour un site complet, mais cela vous donnera une bonne base pour
construire votre portfolio interactif :

index.html

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mon Portfolio Interactif</title>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
rel="stylesheet">

<link href="style.css" rel="stylesheet">

</head>

<body>

<!-- Navigation -->

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

<div class="container">

<a class="navbar-brand" href="#home">Mon Portfolio</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"


aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav ml-auto">

<li class="nav-item">

<a class="nav-link" href="#home">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="#projects">Projets</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#testimonials">Témoignages</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</div>

</nav>

<!-- Home Section -->


<section id="home" class="parallax-section">

<div class="container h-100">

<div class="row h-100 align-items-center">

<div class="col-12 text-center">

<h1 class="animated-title">John Doe</h1>

<h2 class="animated-subtitle">Développeur Web Créatif</h2>

</div>

</div>

</div>

</section>

<!-- About Section -->

<section id="about" class="py-5">

<div class="container">

<h2 class="text-center mb-5">À Propos de Moi</h2>

<div class="row">

<div class="col-md-4">

<img src="profile.jpg" alt="John Doe" class="img-fluid rounded-circle hover-effect">

</div>

<div class="col-md-8">

<p>Je suis un développeur web passionné par la création d'expériences utilisateur uniques et
engageantes. Avec une solide expertise en HTML, CSS, JavaScript et diverses frameworks modernes, je
m'efforce de repousser les limites du design web et de l'interactivité.</p>

<h3>Mes Compétences</h3>

<div class="skills">

<div class="skill">
<span>HTML</span>

<div class="progress">

<div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90"


aria-valuemin="0" aria-valuemax="100"></div>

</div>

</div>

<div class="skill">

<span>CSS</span>

<div class="progress">

<div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85"


aria-valuemin="0" aria-valuemax="100"></div>

</div>

</div>

<div class="skill">

<span>JavaScript</span>

<div class="progress">

<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80"


aria-valuemin="0" aria-valuemax="100"></div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- Projects Section -->


<section id="projects" class="py-5 bg-light">

<div class="container">

<h2 class="text-center mb-5">Mes Projets</h2>

<div class="project-filters text-center mb-4">

<button class="btn btn-outline-primary active" data-filter="all">Tous</button>

<button class="btn btn-outline-primary" data-filter="frontend">Frontend</button>

<button class="btn btn-outline-primary" data-filter="backend">Backend</button>

</div>

<div class="row project-gallery">

<div class="col-md-4 mb-4 project-item" data-category="frontend">

<div class="card">

<img src="project1.jpg" class="card-img-top" alt="Projet 1">

<div class="card-body">

<h5 class="card-title">Projet 1</h5>

<p class="card-text">Un site web responsive pour une startup innovante.</p>

<a href="#" class="btn btn-primary project-details">Voir les détails</a>

</div>

</div>

</div>

<!-- Ajoutez plus de projets ici -->

</div>

</div>

</section>

<!-- Testimonials Section -->


<section id="testimonials" class="py-5">

<div class="container">

<h2 class="text-center mb-5">Témoignages</h2>

<div id="testimonialCarousel" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">

<div class="carousel-item active">

<div class="testimonial-content text-center">

<img src="client1.jpg" alt="Client 1" class="rounded-circle mb-3">

<p>"John a fait un travail exceptionnel sur notre site web. Nous sommes ravis du résultat
!"</p>

<h5>Jane Doe, CEO de TechStart</h5>

</div>

</div>

<!-- Ajoutez plus de témoignages ici -->

</div>

<a class="carousel-control-prev" href="#testimonialCarousel" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Précédent</span>

</a>

<a class="carousel-control-next" href="#testimonialCarousel" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Suivant</span>

</a>

</div>

</div>

</section>
<!-- Contact Section -->

<section id="contact" class="py-5 bg-light">

<div class="container">

<h2 class="text-center mb-5">Contactez-moi</h2>

<div class="row">

<div class="col-md-6 mb-4">

<form id="contactForm">

<div class="form-group">

<input type="text" class="form-control" id="name" placeholder="Votre nom" required>

</div>

<div class="form-group">

<input type="email" class="form-control" id="email" placeholder="Votre email"


required>

</div>

<div class="form-group">

<textarea class="form-control" id="message" rows="5" placeholder="Votre message"


required></textarea>

</div>

<button type="submit" class="btn btn-primary">Envoyer</button>

</form>

</div>

<div class="col-md-6">

<div id="map" style="height: 300px;"></div>

</div>

</div>
</div>

</section>

<!-- Footer -->

<footer class="bg-dark text-white py-4">

<div class="container text-center">

<div class="mb-3">

<a href="#" class="text-white mx-2"><i class="fab fa-facebook-f"></i></a>

<a href="#" class="text-white mx-2"><i class="fab fa-twitter"></i></a>

<a href="#" class="text-white mx-2"><i class="fab fa-linkedin-in"></i></a>

<a href="#" class="text-white mx-2"><i class="fab fa-github"></i></a>

</div>

<p>&copy; 2023 Mon Portfolio. Tous droits réservés.</p>

</div>

</footer>

<a href="#home" class="scroll-to-top"><i class="fas fa-chevron-up"></i></a>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

<script src="script.js"></script>

</body>

</html>
style.css

/* Global Styles */

body {

font-family: 'Arial', sans-serif;

line-height: 1.6;

color: #333;

/* Parallax effect */

.parallax-section {

background-image: url('background.jpg');

height: 100vh;

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

display: flex;

align-items: center;

justify-content: center;

/* Animated title */

.animated-title {

font-size: 4rem;

font-weight: bold;
animation: fadeInUp 1s ease-out;

.animated-subtitle {

font-size: 2rem;

animation: fadeInUp 1s ease-out 0.5s;

animation-fill-mode: both;

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(20px);

to {

opacity: 1;

transform: translateY(0);

/* Hover effect for profile image */

.hover-effect {

transition: transform 0.3s ease;

}
.hover-effect:hover {

transform: scale(1.05);

/* Skills progress bars */

.skills .skill {

margin-bottom: 20px;

.skills .progress {

height: 10px;

background-color: #e9ecef;

.skills .progress-bar {

background-color: #007bff;

transition: width 1s ease-in-out;

/* Project gallery */

.project-gallery .card {

transition: transform 0.3s ease;

.project-gallery .card:hover {
transform: translateY(-5px);

/* Testimonial carousel */

#testimonialCarousel .carousel-item {

min-height: 300px;

#testimonialCarousel .testimonial-content img {

width: 100px;

height: 100px;

object-fit: cover;

/* Scroll to top button */

.scroll-to-top {

position: fixed;

bottom: 20px;

right: 20px;

display: none;

width: 40px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: #007bff;
color: white;

border-radius: 50%;

transition: background-color 0.3s;

.scroll-to-top:hover {

background-color: #0056b3;

/* Responsive adjustments */

@media (max-width: 768px) {

.animated-title {

font-size: 3rem;

.animated-subtitle {

font-size: 1.5rem;

script.js

$(document).ready(function() {

// Smooth scrolling for navigation links

$('a.nav-link, .scroll-to-top').on('click', function(event) {

if (this.hash !== "") {


event.preventDefault();

var hash = this.hash;

$('html, body').animate({

scrollTop: $(hash).offset().top

}, 800, function(){

window.location.hash = hash;

});

});

// Activate scrollspy to highlight active navigation item

$('body').scrollspy({target: ".navbar", offset: 50});

// Toggle scroll-to-top button visibility

$(window).scroll(function() {

if ($(this).scrollTop() > 100) {

$('.scroll-to-top').fadeIn();

} else {

$('.scroll-to-top').fadeOut();

});

// Animate skill bars on scroll

function animateSkills() {

$('.progress-bar').each(function() {
var width = $(this).data('width');

$(this).css('width', width + '%');

});

// Trigger skill animation when the about section comes into view

var skillsAnimated = false;

$(window).scroll(function() {

if (!skillsAnimated && $(this).scrollTop() > $('#about').offset().top - $(window).height() / 2) {

animateSkills();

skillsAnimated = true;

});

// Project filtering

$('.project-filters button').on('click', function() {

var filterValue = $(this).attr('data-filter');

if (filterValue == 'all') {

$('.project-item').show();

} else {

$('.project-item').hide();

$('.project-item[data-category="'_+_filterValue_+_'"]').show();

$('.project-filters button').removeClass('active');

$(this).addClass('active');
});

// Initialize Google Map

function initMap() {

var location = {lat: -34.397, lng: 150.644}; // Replace with your coordinates

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 8,

center: location

});

var marker = new google.maps.

You might also like