romain.fillot
/
romain-fillot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 update design
continuous-integration/drone/push Build is passing Details

Browse Source
master
Destroyeur6315 12 months ago
parent 61bf6c9288
commit a4cbca6fee
3 changed files with 230 additions and 370 deletions
Show Stats Download Patch File Download Diff File

190
index.html
Unescape View File

@ -1,13 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon portfolio</title>
<!-- Link CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Button scroll -->
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
@ -46,7 +52,7 @@
<h2 class="title">A propos de moi</h2>
<div class="about-content">
<div class="column left">
<img src="./images/picture-profil_2.jpg" alt="Profile Image 626x626">
<img src="./images/picture-profil_2.jpg" alt="Profile Image">
</div>
<div class="column right">
<div class="text">Moi c'est Romain <span class="typing-2"></span></div>
@ -58,7 +64,8 @@
<br><br>
J'ai beaucoup apprécié cette option, qui m'est apparue dans un premier temps très
obscure et compliquée. Néanmoins, cela n'a pas suffi pour me décourager étant donné
que je suis en 3e année d'IUT informatique. Bien entendu, je ne m'arrête pas en si bon chemin. L'année prochaine, c'est parti pour deux ans supplémentaires en
que je suis en 3e année d'IUT informatique. Bien entendu, je ne m'arrête pas en si bon chemin. L'année
prochaine, c'est parti pour deux ans supplémentaires en
Mastère informatique à l'école Hexagone. Cette fois-ci, je me spécialise un peu en me
tournant vers la filière "Architecture des Systèmes d'information".
<br><br>
@ -79,13 +86,12 @@
<section class="services" id="services">
<div class="max-width">
<h2 class="title">Mes expériences</h2>
<!-- <div class="serv-content"> -->
<div class="carousel-container">
<div class="carousel-slide active" id="slide-1">
<h2>Stage au Canada</h2>
<div class="carousel-container-img">
<div class="carousel-img">
<img src="./images/UQAC.png" style="width: 100%; border-radius: 15px;">
<img src="./images/UQAC.png" style="width: 100%; border-radius: 15px;" alt="image de l'UQAC">
</div>
<div class="carousel-text">
J'ai réalisé mon premiers stage au canada
@ -106,7 +112,8 @@
<h2>Alternance chez Matussière Toiles</h2>
<div class="carousel-container-img">
<div class="carousel-img">
<img src="./images/store-toile.png" style="width: 100%; border-radius: 15px;">
<img src="./images/store-toile.png" style="width: 100%; border-radius: 15px;"
alt="image de toile de store">
</div>
<div class="carousel-text">
Ma deuxième expérience, plus professionnalisante est ma 3 ème année d'IUT
@ -125,7 +132,8 @@
<h2>Vendeur chez E.Leclerc</h2>
<div class="carousel-container-img">
<div class="carousel-img">
<img src="./images/leclerc.png" style="width: 100%; border-radius: 15px;">
<img src="./images/leclerc.png" style="width: 100%; border-radius: 15px;"
alt="image d'un magasin leclerc">
</div>
<div class="carousel-text">
J'ai eu l'occasion de travailler plusieurs fois chez E. Leclerc en tant
@ -151,146 +159,13 @@
</div>
</section>
<!-- Skills -->
<!-- <section class="skills" id="skills">
<div class="max-width">
<h2 class="title">My Skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">INTERNSHIP</div>
<p>
<li class="intern">contentstack</li>
<li class="intern">Pensil- as a test analyst</li>
<li class="intern"></li>
</p>
<br>
<div class="text">PROJECT</div>
<p>
<li class="project">Portfolio (HTML, CSS, js, Bootstraps)</li>
<li class="project">eCommerce Website (Shopify liquid-code, HTML, CSS)</li>
<li class="project">QuickShop - eCommerce Website (Like Amazon, Flipkart etc.)</li>
<li class="project">Fully Responsive Design Email Subscribe form</li>
<li class="project">Blog (HTML, CSS, Bootstraps)</li>
<li class="project">Currently Working on a Messaging App (Like WhatsApp)</li>
</p>
<br>
<div class="text">DEVELOPMENT SKILLS</div>
<p>
I'm familiar & work on a daily basis with HTML, CSS, JavaScript, Bootstrap, React js and other modern frameworks.
</p>
<a href="https://aistechx.com/" target="blank">Get Educate...</a>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>Python</span>
<span>90%</span>
</div>
<div class="line python"></div>
</div>
<div class="bars">
<div class="info">
<span>HTML</span>
<span>80%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>CSS</span>
<span>60%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>40%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>Bootstraps</span>
<span>60%</span>
</div>
<div class="line bootstraps"></div>
</div>
<div class="bars">
<div class="info">
<span>Django</span>
<span>70%</span>
</div>
<div class="line django"></div>
</div>
</div>
</div>
</div>
</section> -->
<!-- Projects -->
<!-- <section class="projects" id="projects">
<div class="max-width">
<h2 class="title">My Projects</h2>
<div class="carousel owl-carousel">
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?shopping" alt="">
<div class="text">Ecommerce</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?portfolio" alt="">
<div class="text">Portfolio</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?blog" alt="">
<div class="text">Blog</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?messanger" alt="">
<div class="text">Messaging App</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?app-clone" alt="">
<div class="text">Clone</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="https://source.unsplash.com/720x600/?code,demo" alt="">
<div class="text">Demo</div>
<p>#Project Details:- Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</section> -->
<!-- Contact -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Me contacter</h2>
<div class="contact-content">
<div class="column left">
<div class="text">Entrer en contact</div>
<!-- <div class="text">Entrer en contact</div> -->
<p>
N'hésitez pas à me contacter ! Je suis ouvert à toute discussion et ce serait avec
plaisir d'échanger avec des passionnés.
@ -302,7 +177,8 @@
<i class="fa-solid fa-user-large"></i>
<div class="info">
<div class="head">Nom</div>
<div class="sub-title"><a href="https://aistechx.com/" style="text-decoration: none; color: #333;"> Fillot Romain</a></div>
<div class="sub-title"><a href="https://aistechx.com/" style="text-decoration: none; color: #333;">
Fillot Romain</a></div>
</div>
</div>
</a>
@ -319,7 +195,8 @@
<i class="fa-solid fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<div class="sub-title"><a href="mailto:#" style="text-decoration: none; color: #333;">romain.fillot630@gmail.com</a></div>
<div class="sub-title"><a href="mailto:#"
style="text-decoration: none; color: #333;">romain.fillot630@gmail.com</a></div>
</div>
</div>
@ -339,36 +216,10 @@
<li><a href="https://github.com/Destroyeur6315"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/romain-fillot/"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="https://www.instagram.com/romain.flt/"><i class="fa-brands fa-instagram"></i></a></li>
<!-- <li><a href="https://twitter.com/___kaaashx___/"><i class="fa-brands fa-twitter"></i></a></li> -->
<!-- <li><a href="https://aistechx.com/" title="Get Educate with Us"><i class="fa-solid fa-graduation-cap"></i></a></li> -->
</ul>
</div>
</div>
</div>
<!-- Reach -->
<div class="column right reach">
<div class="text">Formulaire </div>
<form action="#">
<div class="fields">
<div class="field name">
<input type="text" placeholder="Votre nom" required>
</div>
<div class="field email">
<input type="email" placeholder="Votre email" required>
</div>
</div>
<div class="field">
<input type="text" placeholder="Sujet" required>
</div>
<div class="field textarea">
<textarea cols="30" rows="10" placeholder="Message.." required></textarea>
</div>
<div class="button-area">
<button type="submit">Envoyer</button>
</div>
</form>
</div>
</div>
</div>
</section>
@ -381,6 +232,7 @@
</span>
</footer>
<!-- Script JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
<script src="https://kit.fontawesome.com/b29a4dce1b.js" crossorigin="anonymous"></script>

6
main.js
Unescape View File

@ -2,10 +2,8 @@ $(document).ready(function () {
$(window).scroll(function () {
if (this.scrollY > 20) {
$(".navbar").addClass("sticky");
console.log("romain");
} else {
$(".navbar").removeClass("sticky");
console.log("romain");
}
// scroll-up button show/hide script //
@ -17,7 +15,6 @@ $(document).ready(function () {
});
// slide-up script //
$(".scroll-up-btn").click(function () {
$("html").animate({ scrollTop: 0 });
// removing smooth scroll on slide-up button click //
@ -26,19 +23,16 @@ $(document).ready(function () {
$(".navbar .menu li a").click(function () {
// Smooth scroll on Menu Items click //
$("html").css("scrollBehavior", "smooth");
});
// Toggle Navbar //
$(".menu-btn").click(function () {
$(".navbar .menu").toggleClass("active");
$(".menu-btn i").toggleClass("active");
});
// Typing Text Animation //
var typed = new Typed(".typing", {
strings: [
"Fullstack Developer",

36
style.css
Unescape View File

@ -69,13 +69,20 @@ footer {
.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content {
.contact {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.contact-content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
section .title {
position: relative;
text-align: center;
@ -179,7 +186,7 @@ section .title::after {
position: fixed;
height: 45px;
width: 42px;
background: #1e3551;
background: #0d4d9b;
right: 30px;
bottom: 10px;
text-align: center;
@ -253,14 +260,14 @@ section .title::after {
.home .home-content a {
display: inline-block;
background: #1e3551;
background: #0d4d9b;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
font-weight: 400;
border-radius: 6px;
border: 2px solid #1e3551;
border: 2px solid #ffffff;
transition: all 0.3s ease;
}
@ -384,9 +391,9 @@ section .title::after {
}
.carousel-buttons button {
background-color: #2e72c4;
background-color: #0d4d9b;
border: 2px solid #ffffff;
color: white;
border: none;
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
@ -394,7 +401,8 @@ section .title::after {
}
.carousel-buttons button:hover {
background-color: #0056b3;
color: #1e3551;
background: rgb(240, 246, 254);
}
.services,
@ -658,6 +666,10 @@ section .title::after {
width: calc(50% - 30px);
}
.contact .contact-content p {
margin-bottom: 30px;
}
.contact .contact-content .text {
font-size: 20px;
font-weight: 600;
@ -772,17 +784,19 @@ section .title::after {
}
.social-menu ul {
position: absolute;
left: 20%;
position: fixed;
right: 10px;
top : 150px;
padding: 0;
margin-top: 35px;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
}
.social-menu ul li {
list-style: none;
margin: 0 15px;
margin: 10px 0;
}
.social-menu ul li .fa {
@ -805,7 +819,7 @@ section .title::after {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #1e3551;
background-color: #0d4d9b;
text-align: center;
transition: 0.6s;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);

Write Preview
Loading…
Cancel
Save