Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history 
Uploading the files to The Portfolio website
  • Loading branch information
@Aksel-ELOmari
Aksel-ELOmari authored May 31, 2024
0 parents commit f960b6b
Show file tree
Hide file tree
Showing 16 changed files with 756 additions and 0 deletions.
29 changes: 29 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
let intro = document.getElementById('intro');
let experience = document.getElementById('experience');
let skill = document.getElementById('skill');
let project = document.getElementById('project');
let contact = document.getElementById('contact');

let aHref = document.querySelectorAll('a');

let active = 'intro';
let zIndex = 2;

aHref.forEach(a => {
a.addEventListener('click', function(event){
let tab = a.dataset.tab;
if(tab !== null && tab !== active){

let activeOld = document.querySelector('.tab.active');
if(activeOld) activeOld.classList.remove('active');
active = tab;

let tabActive = document.getElementById(active);
zIndex++;
tabActive.style.zIndex = zIndex;
tabActive.style.setProperty('--x', event.clientX + 'px');
tabActive.style.setProperty('--y', event.clientY + 'px');
tabActive.classList.add('active');
}
})
})
Binary file added images/avatar-backdrop.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/avatar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dashboard.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/home.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/mweb-01.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/mweb-02.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/mweb-03.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/project1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/project2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/project3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/project4.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/project5.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
350 changes: 350 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,350 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio|AYOUB ELOMARI</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<nav>
<a data-tab="intro">Intro</a>
<a data-tab="experience">EXP</a>
<a data-tab="skill">Skill</a>
<a data-tab="project">Project</a>
<a data-tab="contact">Contact</a>
</nav>
</header>

<div class="tab" id="intro">
<div class="container">
<div class="avatar">
<img title="img" src="./images/avatar.png">
</div>
<div class="content">
<div class="name">AYOUB EL OMARI</div>
<div class="job">
I'm a Software<span class="text-gradient">
Developer
</span>
</div>
<div class="des">
I am a creator of digital magic, turning lines of code into seamless experiences that enhance and enrich people's lives.
<br>
<a class="text-gradient" data-tab="skill">See my Skills</a>
</div>
<i class="fa-solid fa-quote-right"></i>
</div>
</div>
</div>

<div class="tab" id="experience">
<div class="container">
<div class="list">
<div class="item">
<div class="time">2015</div>
<i class="fa-solid fa-school-flag"></i>
<div class="content">
<div class="job">I'm Go To School</div>
<div class="company">Name School</div>
<div class="des">
<!-- 15 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates perspiciatis veniam animi reiciendis autem perferendis.
</div>
</div>
</div>

<div class="item">
<div class="time">2019</div>
<i class="fa-solid fa-briefcase"></i>
<div class="content">
<div class="job">BackEnd Developer</div>
<div class="company">Name Company</div>
<div class="des">
<!-- 15 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates perspiciatis veniam animi reiciendis autem perferendis.
</div>
</div>
</div>

<div class="item">
<div class="time">2020</div>
<i class="fa-solid fa-briefcase"></i>
<div class="content">
<div class="job">FrondEnd Developer</div>
<div class="company">Name Company ABC</div>
<div class="des">
<!-- 15 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates perspiciatis veniam animi reiciendis autem perferendis.
</div>
</div>
</div>

<div class="item">
<div class="time">2024</div>
<i class="fa-solid fa-briefcase"></i>
<div class="content">
<div class="job">FullStack Developer</div>
<div class="company">Name Company AAA</div>
<div class="des">
<!-- 15 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates perspiciatis veniam animi reiciendis autem perferendis.
</div>
</div>
</div>
</div>
</div>
</div>

<div class="tab" id="skill" >
<div class="container">
<div class="list">
<div class="item">
<i class="fa-brands fa-html5"></i>
<div class="name">HTML5</div>
<div class="des">
<!-- 7 -->

</div>
</div>

<div class="item">
<i class="fa-brands fa-css3-alt"></i>
<div class="name">CSS</div>
<div class="des">
<!-- 7 -->

</div>
</div>

<div class="item">
<i class="fa-brands fa-js"></i>
<div class="name">Javascript</div>
<div class="des">
<!-- 7 -->

</div>
</div>

<div class="item">
<i class="fa-brands fa-react"></i>
<div class="name">Bootstrap</div>
<div class="des">
<!-- 7 -->

</div>
</div>

<div class="item">
<i class="fa-brands fa-php"></i>
<div class="name">VEU JS</div>
<div class="des">
<!-- 7 -->

</div>
</div>

<div class="item">
<i class="fa-brands fa-angular"></i>
<div class="name">React js</div>
<div class="des">
<!-- 7 -->

</div>
</div>
</div>
</div>
</div>

<div class="tab" id="project" >
<div class="container">
<div class="list">
<a href="" rel="noopener" target="_blank" title="item-link" class="item">
<img title="img" src="images/project1.jpg">
<div class="index">#1</div>
<div class="name">Name Project</div>
<div class="des">
<!-- 20 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, sint? Amet minus similique officiis enim impedit unde cumque id corrupti!
</div>
<div class="author">
<div class="job">FullStack</div>
<div class="time">
2022/10/10
<i class="fa-regular fa-clock"></i>
</div>
</div>
</a>
<a href="" rel="noopener" target="_blank" title="item-link" class="item">
<img title="img" src="images/project2.jpg">
<div class="index">#2</div>
<div class="name">Name Project</div>
<div class="des">
<!-- 20 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, sint? Amet minus similique officiis enim impedit unde cumque id corrupti!
</div>
<div class="author">
<div class="job">FullStack</div>
<div class="time">
2022/10/10
<i class="fa-regular fa-clock"></i>
</div>
</div>
</a>
<a href="" rel="noopener" target="_blank" title="item-link" class="item">
<img title="img" src="images/project3.jpg">
<div class="index">#3</div>
<div class="name">Name Project</div>
<div class="des">
<!-- 20 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, sint? Amet minus similique officiis enim impedit unde cumque id corrupti!
</div>
<div class="author">
<div class="job">FullStack</div>
<div class="time">
2022/10/10
<i class="fa-regular fa-clock"></i>
</div>
</div>
</a>
<a href="" rel="noopener" target="_blank" title="item-link" class="item">
<img title="img" src="images/project4.jpg">
<div class="index">#4</div>
<div class="name">Name Project</div>
<div class="des">
<!-- 20 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, sint? Amet minus similique officiis enim impedit unde cumque id corrupti!
</div>
<div class="author">
<div class="job">FullStack</div>
<div class="time">
2022/10/10
<i class="fa-regular fa-clock"></i>
</div>
</div>
</a>
<a href="" rel="noopener" target="_blank" title="item-link" class="item">
<img title="img" src="images/project5.jpg">
<div class="index">#5</div>
<div class="name">Name Project</div>
<div class="des">
<!-- 20 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, sint? Amet minus similique officiis enim impedit unde cumque id corrupti!
</div>
<div class="author">
<div class="job">FullStack</div>
<div class="time">
2022/10/10
<i class="fa-regular fa-clock"></i>
</div>
</div>
</a>

<!-- Movies_4U -->
<a href="https://aksel-elomari.github.io/Movies_4U" rel="noopener" target="_blank" title="item-link" class="item">
<img title="img" src="./images/mweb-01.jpg">
<div class="index">#6</div>
<div class="name">Movies_4U</div>
<div class="des">
Movies_4U is the best free streaming Movies website 2024. where you can watch movies / TvShoes/ Anime / Animation online for free. no regestration required with a large database and great features. we're confident that Movies_4U is the best free online movie site in the space you just can't mess.
</div>
<div class="author">
<div class="job">FullStack</div>
<div class="time">
2024/03/01
<i class="fa-regular fa-clock"></i>
</div>
</div>
</a>
<!-- Hinto -->
<a href="" rel="noopener" target="_blank" title="item-link" class="item">
<img title="img" src="./images/mweb-03.png">
<div class="index">#7</div>
<div class="name">HINTO</div>
<div class="des">
<!-- 20 -->
the best free movies streaming website
</div>
<div class="author">
<div class="job">FullStack</div>
<div class="time">
2024/04/23
<i class="fa-regular fa-clock"></i>
</div>
</div>
</a>
<!-- Anime_4U -->
<a href="" rel="noopener" target="_blank" title="item-link" class="item">
<img title="img" src="./images/mweb-02.png">
<div class="index">#8</div>
<div class="name">Anime_4u</div>
<div class="des">
<!-- 20 -->
the best free movies streaming website
</div>
<div class="author">
<div class="job">FullStack</div>
<div class="time">
2024/04/23
<i class="fa-regular fa-clock"></i>
</div>
</div>
</a>
<!-- Dashboar Page -->
<a href="" rel="noopener" target="_blank" title="item-link" class="item">
<img title="img" src="./images/dashboard.png">
<div class="index">#8</div>
<div class="name">Ecomerce website user Dashboard</div>
<div class="des">
<!-- 20 -->
the best free movies streaming website
</div>
<div class="author">
<div class="job">FullStack</div>
<div class="time">
2024/04/23
<i class="fa-regular fa-clock"></i>
</div>
</div>
</a>
</div>
</div>
</div>

<div class="tab" id="contact">
<div class="container">
<div class="content">
<div class="thank text-gradient">Thank you!</div>
<div class="des">
<!-- 50 -->
I'm professional web developer. Feel free to get in touch with me.
<br>
<a data-tab="intro" class="text-gradient">See My Intro</a>
</div>
<div class="list">
<div class="item">
<i class="fa-solid fa-phone"></i>
+212 606100950
</div>

<div class="item">
<i class="fa-regular fa-envelope"></i>
tagrawla2023@gmail.com
</div>

<div class="item">
<i class="fa-brands fa-facebook"></i>
<a href="https://web.facebook.com/?ref=homescreenpwa&_rdc=1&_rdr" title="link">Ayoub El omari</a>
</div>
</div>
</div>
</div>
</div>


<script src="app.js"></script>
</body>
</html>
Loading

0 comments on commit f960b6b

Please sign in to comment.