|
|
<!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">Experience</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="#" data-toggle="modal" data-target="#portfolioModal1">
|
|
|
<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="#" data-toggle="modal" data-target="#portfolioModal2">
|
|
|
<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="#" data-toggle="modal" data-target="#portfolioModal3">
|
|
|
<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="#" data-toggle="modal" data-target="#portfolioModal4">
|
|
|
<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="#" data-toggle="modal" data-target="#portfolioModal5">
|
|
|
<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="#" data-toggle="modal" data-target="#portfolioModal6">
|
|
|
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Portfolio End -->
|
|
|
|
|
|
<!-- Modal HTML -->
|
|
|
<div class="modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="portfolioModalLabel">Craft#</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p>A web application made in blazor in the theme of Minecraft, in which users will be able to list their item, crafter, buy...</p>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<a href="https://codefirst.iut.uca.fr/git/rayhan.hassou/Projet_Blazor" target="_blank" class="btn btn-primary">Git repository</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="portfolioModalLabel">JustMusic</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p>JustMusic is a collaborative for-profit project for Android/IOS using Dart/flutter technology carried out by 4 BUT students.
|
|
|
|
|
|
It is a social network so the user can post and comment on posts. He will be able to subscribe to other users to see their posts on his news feed.</p>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<a href="https://codefirst.iut.uca.fr/git/justDEV/justMusic" target="_blank" class="btn btn-primary">Git repository</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="portfolioModalLabel">ToDoList</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p>Realize a PHP project consisting of making a To do List, which will contain visitors, users or administrator.</p>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<a href="https://codefirst.iut.uca.fr/git/rayhan.hassou/Projet_ToDoList_Php" target="_blank" class="btn btn-primary">Git repository</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="portfolioModalLabel">LeftOvers</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p>A mobile application (IOS/Android) that enables users to choose ingredients in order to cook. The app will return a list of adapted recipes.</p>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<a href="https://codefirst.iut.uca.fr/git/Sae_LeftOvers" target="_blank" class="btn btn-primary">Git repository</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="portfolioModalLabel">Kotanga</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p>Our app is called Kotanga which means counting in Lingala.
|
|
|
It aims to facilitate payments between friends, within a group of people such as collocates, families, ...</p>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<a href="https://gitlab.com/nathanverdier/kotanga" target="_blank" class="btn btn-primary">Git repository</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="portfolioModalLabel">Dou Shou Qi</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p>Dou Shou Qi, or "Jungle Game", is a Chinese board game where two players move pieces representing animals on a 7x9 square board. Each animal has a different strength and can capture other animals according to a specific hierarchy, except the Rat that can capture the Elephant. The goal is to move one of his pieces into the opponent’s lair, while using the rivers and special abilities of the animals to capture the opponent’s pieces and defend his own lair.</p>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<a href="https://codefirst.iut.uca.fr/git/remi.regnault/DouShouQi_App" target="_blank" class="btn btn-primary">Git repository</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 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="80" 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">Blazor</h6>
|
|
|
<h6 class="font-weight-bold">75%</h6>
|
|
|
</div>
|
|
|
<div class="progress">
|
|
|
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75" 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">Java</h6>
|
|
|
<h6 class="font-weight-bold">80%</h6>
|
|
|
</div>
|
|
|
<div class="progress">
|
|
|
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="80" 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">PowerApps</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">Kotlin</h6>
|
|
|
<h6 class="font-weight-bold">75%</h6>
|
|
|
</div>
|
|
|
<div class="progress">
|
|
|
<div class="progress-bar bg-dark" role="progressbar" aria-valuenow="75" 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">React Native</h6>
|
|
|
<h6 class="font-weight-bold">80%</h6>
|
|
|
</div>
|
|
|
<div class="progress">
|
|
|
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="80" 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;">Experiences</h1>
|
|
|
<h1 class="position-absolute text-uppercase text-primary">My Experience</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">CDI in CGI</h4>
|
|
|
</div>
|
|
|
<p>Working as a deployer, I will deploy Michelin applications in various factories around the world and I will test many application with different configuration to see if there is any problems.</p>
|
|
|
<a class="border-bottom border-primary text-decoration-none" href="https://blog.hubspot.fr/website/plan-de-deploiement">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">Internship in CGI</h4>
|
|
|
</div>
|
|
|
<p>I worked on an application for Michelin in PowerApps allowing the transition from application to support mode. I also took care of project management and meetings with the client. I also trained an intern over several weeks to resume my work.</p>
|
|
|
<a class="border-bottom border-primary text-decoration-none" href="./Cv/3A.pdf">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">Internship in Mistral informatique</h4>
|
|
|
</div>
|
|
|
<p>Functionality development for an internal application in angular (front), Java Spring Boot (back). This was my first professional experience in computer science so the skills I acquired were more social than technical.</p>
|
|
|
<a class="border-bottom border-primary text-decoration-none" href="./Cv/2A.pdf">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="https://gitlab.com/hassourayhan1"><i class="fab fa-gitlab"></i></a>
|
|
|
<a class="btn btn-light btn-social mr-2" href="https://github.com/JeSuisRayhan"><i class="fab fa-github"></i></a>
|
|
|
<a class="btn btn-light btn-social mr-2" href="https://www.linkedin.com/in/rayhan-hassou-5a70031b3/"><i class="fab fa-linkedin-in"></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> |
