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.
416 lines
24 KiB
416 lines
24 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Portfolio Hassou Rayhan</title>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<meta content="Free HTML Templates" name="keywords">
|
|
<meta content="Free HTML Templates" name="description">
|
|
|
|
<!-- Favicon -->
|
|
<link href="img/favicon.ico" rel="icon">
|
|
|
|
<!-- Google Web Fonts -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
|
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<!-- Libraries Stylesheet -->
|
|
<link href="lib/owlcarousel/assets/owsl.carousel.min.css" rel="stylesheet">
|
|
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
|
|
|
|
<!-- Customized Bootstrap Stylesheet -->
|
|
<link href="css/style.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body data-spy="scroll" data-target=".navbar" data-offset="51">
|
|
<!-- Navbar Start -->
|
|
<nav class="navbar fixed-top shadow-sm navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-lg-5">
|
|
<a href="index.html" class="navbar-brand ml-lg-3">
|
|
<h1 class="m-0 display-5"><spanclass="text-primary">My</span>PortFolio</h1>
|
|
</a>
|
|
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse px-lg-3" id="navbarCollapse">
|
|
<div class="navbar-nav m-auto py-0">
|
|
<a href="#home" class="nav-item nav-link active">Home</a>
|
|
<a href="#about" class="nav-item nav-link">About</a>
|
|
<a href="#portfolio" class="nav-item nav-link">Portfolio</a>
|
|
<a href="#skill" class="nav-item nav-link">Skill</a>
|
|
<a href="#service" class="nav-item nav-link">Service</a>
|
|
<a href="#contact" class="nav-item nav-link">Contact</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Navbar End -->
|
|
|
|
<!-- Header Start -->
|
|
<div class="container-fluid bg-primary d-flex align-items-center mb-5 py-5" id="home" style="min-height: 100vh;">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-5 px-5 pl-lg-0 pb-5 pb-lg-0">
|
|
<img class="img-fluid w-100 rounded-circle shadow-sm" src="img/profile.jpg" alt="">
|
|
</div>
|
|
<div class="col-lg-7 text-center text-lg-left">
|
|
<h3 class="text-white font-weight-normal mb-3">I'm</h3>
|
|
<h1 class="display-3 text-uppercase text-primary mb-2" style="-webkit-text-stroke: 2px #ffffff;">Rayhan Hassou</h1>
|
|
<h1 class="typed-text-output d-inline font-weight-lighter text-white"></h1>
|
|
<div class="typed-text d-none">Web Designer, Web Developer, Front End Developer, Apps Designer, Apps Developer, Deployer</div>
|
|
<div class="d-flex align-items-center justify-content-center justify-content-lg-start pt-5">
|
|
<a href="./CV/Cv.pdf" class="btn btn-outline-light mr-5" target="_blank">Download CV</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Header End -->
|
|
|
|
|
|
<!-- About Start -->
|
|
<div class="container-fluid py-5" id="about">
|
|
<div class="container">
|
|
<div class="position-relative d-flex align-items-center justify-content-center">
|
|
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">About</h1>
|
|
<h1 class="position-absolute text-uppercase text-primary">About Me</h1>
|
|
</div>
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-5 pb-4 pb-lg-0">
|
|
<img class="img-fluid rounded w-100" src="img/about.jpg" alt="">
|
|
</div>
|
|
<div class="col-lg-7">
|
|
<h3 class="mb-4">Web & Mobile Developer</h3>
|
|
<p>My name is Rayhan Hassou, I am currently in my final year of BUT with the objective of having a position in one of the following areas: web or mobile application design, web or mobile application development or deployment. I am a motivated man, constantly looking to improve and diversify. The challenge is an integral part of my life philosophy. </p>
|
|
<div class="row mb-3">
|
|
<div class="col-sm-6 py-2"><h6>Name: <span class="text-secondary">Rayhan Hassou</span></h6></div>
|
|
<div class="col-sm-6 py-2"><h6>Birthday: <span class="text-secondary">7 juin 2002</span></h6></div>
|
|
<div class="col-sm-6 py-2"><h6>Degree: <span class="text-secondary">BUT informatique</span></h6></div>
|
|
<div class="col-sm-6 py-2"><h6>Experience: <span class="text-secondary">2 Years</span></h6></div>
|
|
<div class="col-sm-6 py-2"><h6>Phone: <span class="text-secondary">07 68 11 37 06</span></h6></div>
|
|
<div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">hassourayhan1@gmail.com</span></h6></div>
|
|
<div class="col-sm-6 py-2"><h6>Address: <span class="text-secondary">87 rue du ressort</span></h6></div>
|
|
</div>
|
|
<a href="" class="btn btn-outline-primary mr-4">Hire Me</a>
|
|
<a href="" class="btn btn-outline-primary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- About End -->
|
|
|
|
<!-- Portfolio Start -->
|
|
<div class="container-fluid pt-5 pb-3" id="portfolio">
|
|
<div class="container">
|
|
<div class="position-relative d-flex align-items-center justify-content-center">
|
|
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Gallery</h1>
|
|
<h1 class="position-absolute text-uppercase text-primary">My Portfolio</h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 text-center mb-2">
|
|
<ul class="list-inline mb-4" id="portfolio-flters">
|
|
<li class="btn btn-sm btn-outline-primary m-1 active" data-filter="*">All</li>
|
|
<li class="btn btn-sm btn-outline-primary m-1" data-filter=".first">Design</li>
|
|
<li class="btn btn-sm btn-outline-primary m-1" data-filter=".second">Development</li>
|
|
<li class="btn btn-sm btn-outline-primary m-1" data-filter=".third">Project management</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="row portfolio-container">
|
|
<div class="col-lg-4 col-md-6 mb-4 portfolio-item first second">
|
|
<div class="position-relative overflow-hidden mb-2">
|
|
<img class="img-fluid rounded w-100" src="img/portfolio-1.png" alt="">
|
|
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
|
|
<a href="img/portfolio-1.jpg" data-lightbox="portfolio">
|
|
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4 portfolio-item second">
|
|
<div class="position-relative overflow-hidden mb-2">
|
|
<img class="img-fluid rounded w-100" src="img/portfolio-2.png" alt="">
|
|
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
|
|
<a href="img/portfolio-2.jpg" data-lightbox="portfolio">
|
|
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4 portfolio-item second">
|
|
<div class="position-relative overflow-hidden mb-2">
|
|
<img class="img-fluid rounded w-100" src="img/portfolio-3.jpg" alt="">
|
|
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
|
|
<a href="img/portfolio-3.jpg" data-lightbox="portfolio">
|
|
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4 portfolio-item first second third">
|
|
<div class="position-relative overflow-hidden mb-2">
|
|
<img class="img-fluid rounded w-100" src="img/portfolio-4.jpg" alt="">
|
|
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
|
|
<a href="img/portfolio-4.jpg" data-lightbox="portfolio">
|
|
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4 portfolio-item first third">
|
|
<div class="position-relative overflow-hidden mb-2">
|
|
<img class="img-fluid rounded w-100" src="img/portfolio-5.png" alt="">
|
|
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
|
|
<a href="img/portfolio-5.jpg" data-lightbox="portfolio">
|
|
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4 portfolio-item first second">
|
|
<div class="position-relative overflow-hidden mb-2">
|
|
<img class="img-fluid rounded w-100" src="img/portfolio-6.jpg" alt="">
|
|
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
|
|
<a href="img/portfolio-6.jpg" data-lightbox="portfolio">
|
|
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Portfolio End -->
|
|
|
|
|
|
<!-- Skill Start -->
|
|
<div class="container-fluid py-5" id="skill">
|
|
<div class="container">
|
|
<div class="position-relative d-flex align-items-center justify-content-center">
|
|
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Skills</h1>
|
|
<h1 class="position-absolute text-uppercase text-primary">My Skills</h1>
|
|
</div>
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<div class="skill mb-4">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="font-weight-bold">Swift</h6>
|
|
<h6 class="font-weight-bold">80%</h6>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skill mb-4">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="font-weight-bold">C#</h6>
|
|
<h6 class="font-weight-bold">75%</h6>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skill mb-4">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="font-weight-bold">PHP</h6>
|
|
<h6 class="font-weight-bold">90%</h6>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="skill mb-4">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="font-weight-bold">Javascript</h6>
|
|
<h6 class="font-weight-bold">90%</h6>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skill mb-4">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="font-weight-bold">Angular JS</h6>
|
|
<h6 class="font-weight-bold">95%</h6>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-dark" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skill mb-4">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="font-weight-bold">Wordpress</h6>
|
|
<h6 class="font-weight-bold">85%</h6>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Skill End -->
|
|
|
|
<!-- Services Start -->
|
|
<div class="container-fluid pt-5" id="service">
|
|
<div class="container">
|
|
<div class="position-relative d-flex align-items-center justify-content-center">
|
|
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Service</h1>
|
|
<h1 class="position-absolute text-uppercase text-primary">My Services</h1>
|
|
</div>
|
|
<div class="row pb-3">
|
|
<div class="col-lg-4 col-md-6 text-center mb-5">
|
|
<div class="d-flex align-items-center justify-content-center mb-4">
|
|
<i class="fa fa-2x fa-laptop service-icon bg-primary text-white mr-3"></i>
|
|
<h4 class="font-weight-bold m-0">Web Design</h4>
|
|
</div>
|
|
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
|
|
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 text-center mb-5">
|
|
<div class="d-flex align-items-center justify-content-center mb-4">
|
|
<i class="fa fa-2x fa-laptop-code service-icon bg-primary text-white mr-3"></i>
|
|
<h4 class="font-weight-bold m-0">Web Development</h4>
|
|
</div>
|
|
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
|
|
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 text-center mb-5">
|
|
<div class="d-flex align-items-center justify-content-center mb-4">
|
|
<i class="fab fa-2x fa-android service-icon bg-primary text-white mr-3"></i>
|
|
<h4 class="font-weight-bold m-0">Apps Design</h4>
|
|
</div>
|
|
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
|
|
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 text-center mb-5">
|
|
<div class="d-flex align-items-center justify-content-center mb-4">
|
|
<i class="fab fa-2x fa-apple service-icon bg-primary text-white mr-3"></i>
|
|
<h4 class="font-weight-bold m-0">Apps Development</h4>
|
|
</div>
|
|
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
|
|
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 text-center mb-5">
|
|
<div class="d-flex align-items-center justify-content-center mb-4">
|
|
<i class="fa fa-2x fa-search service-icon bg-primary text-white mr-3"></i>
|
|
<h4 class="font-weight-bold m-0">SEO</h4>
|
|
</div>
|
|
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
|
|
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 text-center mb-5">
|
|
<div class="d-flex align-items-center justify-content-center mb-4">
|
|
<i class="fa fa-2x fa-edit service-icon bg-primary text-white mr-3"></i>
|
|
<h4 class="font-weight-bold m-0">Content Creating</h4>
|
|
</div>
|
|
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
|
|
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Services End -->
|
|
|
|
|
|
<!-- Contact Start -->
|
|
<div class="container-fluid py-5" id="contact">
|
|
<div class="container">
|
|
<div class="position-relative d-flex align-items-center justify-content-center">
|
|
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Contact</h1>
|
|
<h1 class="position-absolute text-uppercase text-primary">Contact Me</h1>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="contact-form text-center">
|
|
<div id="success"></div>
|
|
<form name="sentMessage" id="contactForm" novalidate="novalidate">
|
|
<div class="form-row">
|
|
<div class="control-group col-sm-6">
|
|
<input type="text" class="form-control p-4" id="name" placeholder="Your Name"
|
|
required="required" data-validation-required-message="Please enter your name" />
|
|
<p class="help-block text-danger"></p>
|
|
</div>
|
|
<div class="control-group col-sm-6">
|
|
<input type="email" class="form-control p-4" id="email" placeholder="Your Email"
|
|
required="required" data-validation-required-message="Please enter your email" />
|
|
<p class="help-block text-danger"></p>
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<input type="text" class="form-control p-4" id="subject" placeholder="Subject"
|
|
required="required" data-validation-required-message="Please enter a subject" />
|
|
<p class="help-block text-danger"></p>
|
|
</div>
|
|
<div class="control-group">
|
|
<textarea class="form-control py-3 px-4" rows="5" id="message" placeholder="Message"
|
|
required="required"
|
|
data-validation-required-message="Please enter your message"></textarea>
|
|
<p class="help-block text-danger"></p>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-outline-primary" type="submit" id="sendMessageButton">Send
|
|
Message</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Contact End -->
|
|
|
|
|
|
<!-- Footer Start -->
|
|
<div class="container-fluid bg-primary text-white mt-5 py-5 px-sm-3 px-md-5">
|
|
<div class="container text-center py-5">
|
|
<div class="d-flex justify-content-center mb-4">
|
|
<a class="btn btn-light btn-social mr-2" href="#"><i class="fab fa-twitter"></i></a>
|
|
<a class="btn btn-light btn-social mr-2" href="#"><i class="fab fa-facebook-f"></i></a>
|
|
<a class="btn btn-light btn-social mr-2" href="#"><i class="fab fa-linkedin-in"></i></a>
|
|
<a class="btn btn-light btn-social" href="#"><i class="fab fa-instagram"></i></a>
|
|
</div>
|
|
<div class="d-flex justify-content-center mb-3">
|
|
<a class="text-white" href="#">Privacy</a>
|
|
<span class="px-3">|</span>
|
|
<a class="text-white" href="#">Terms</a>
|
|
<span class="px-3">|</span>
|
|
<a class="text-white" href="#">FAQs</a>
|
|
<span class="px-3">|</span>
|
|
<a class="text-white" href="#">Help</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer End -->
|
|
|
|
<!-- Scroll to Bottom -->
|
|
<i class="fa fa-2x fa-angle-down text-white scroll-to-bottom"></i>
|
|
|
|
<!-- Back to Top -->
|
|
<a href="#" class="btn btn-outline-dark px-0 back-to-top"><i class="fa fa-angle-double-up"></i></a>
|
|
|
|
|
|
<!-- JavaScript Libraries -->
|
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
|
|
<script src="lib/typed/typed.min.js"></script>
|
|
<script src="lib/easing/easing.min.js"></script>
|
|
<script src="lib/waypoints/waypoints.min.js"></script>
|
|
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
|
|
<script src="lib/isotope/isotope.pkgd.min.js"></script>
|
|
<script src="lib/lightbox/js/lightbox.min.js"></script>
|
|
|
|
<!-- Contact Javascript File -->
|
|
<script src="mail/jqBootstrapValidation.min.js"></script>
|
|
<script src="mail/contact.js"></script>
|
|
|
|
<!-- Template Javascript -->
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
|
|
</html> |