-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (168 loc) · 6.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamza's Website</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="mediaqueries.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<nav id="desktop-nav">
<div class="left-content">
<a href="index.html" class="logo">
<img src="assets/profile_picture.png" alt="Profile Picture">
<span class="name">Hamza Elkababji</span>
</a>
</div>
<ul class="nav-links">
<li><a href="index.html#about">About</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</nav>
<nav id="hamburger-nav">
<a href="index.html" class="logo">
<img src="assets/profile_picture.png">
</a>
<div class="hamburger-menu">
<div class="hamburger-icon" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu-links">
<li><a href="index.html#about" onclick="toggleMenu()">About</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="index.html#contact" onclick="toggleMenu()">Contact</a></li>
</div>
</div>
</nav>
<section id="profile">
<div class="section__pic-container">
<img src="assets/main-pic.png" alt="Hamza Elkababji picture" class = "main-pic">
</div>
<div class="section__text">
<p class="section__text__p1">Hello, I'm</p>
<h1 class="title">Hamza Elkababji</h1>
<p class="section__text__p2">Aspiring Software Engineer</p>
<div class="btn-container">
<button
class="btn btn-color-2"
onclick="window.open('assets/resume.pdf')"
>
Download CV
</button>
<button class="btn btn-color-1" onclick="location.href='./#contact'">
Contact Info
</button>
</div>
<div id="socials-container">
<img
src="assets/linkedin.png"
alt="My LinkedIn profile"
class="icon"
onclick="location.href='https://www.linkedin.com/in/hamzakababji/'"
/>
<img
src="assets/github.png"
alt="My Github profile"
class="icon"
onclick="location.href='https://github.com/HamzaKababji'"
/>
</div>
</div>
</section>
</div>
<div class="section" id="section1">
<section id="about">
<p class="section__text__p1">Get To Know More</p>
<h1 class="title">About Me</h1>
<div class="section-container">
<div class="section__pic-container">
<img
src="assets/about-pic.png"
alt="Profile picture"
class="about-pic"
/>
</div>
<div class="about-details-container">
<div class="about-containers">
<div class="details-container-2">
<img
src="assets/experience.png"
alt="Experience icon"
class="icon"
/>
<h3>Exploration</h3>
<p>6+ Years of Constant Learning <br/>All Things Computer-Related <br/> From Hardware to Software to IoT</p>
</div>
<div class="details-container-2">
<img
src="assets/education.png"
alt="Education icon"
class="icon"
/>
<h3>Education</h3>
<p>Student Of <br/>Bachelor of Engineering Science<br />Software Engineering</p>
</div>
</div>
<div class="text-container">
<p>
Ever since I was a kid, I've been captivated by the world of computers. My journey into the realm of technology began when I built my very own PC from scratch 🛠️. That experience ignited a spark within me, setting me on a path of exploration, innovation, and endless fascination with all things tech.
</p><br>
My journey continued through video games, where I not only enjoyed playing but also delved into the intricacies of game files and configurations. This experience solidified my interest in coding and software development. 🎮
<p><br>
Now, as I pursue my degree, I'm committed to honing my programming skills in languages like Java, Python, and JavaScript.
</p><br>
Beyond my academic pursuits, I'm fortunate to be part of a newly established family business called Smartegrators, specializing in IoT, smart systems, and security solutions. This venture aligns perfectly with my passion, and I dream of contributing to its growth and success. 🌐
<p><br>
Most of all, I'm eager to contribute to the tech community and connect with like-minded individuals who share my enthusiasm for all things tech.
</p>
</div>
</div>
</div>
</section>
</div>
<div class="section" id="section2">
<section id="contact">
<p class="section__text__p1">Get in Touch</p>
<h1 class="title">Contact Me</h1>
<div class="contact-info-upper-container">
<div class="contact-info-container">
<img
src="assets/email.png"
alt="Email icon"
class="icon contact-icon email-icon"
/>
<p><a href="mailto:hamza.kababji@gmail.com" class = "contactText">hamza.kababji@gmail.com</a></p>
</div>
<div class="contact-info-container">
<img
src="assets/linkedin.png"
alt="LinkedIn icon"
class="icon contact-icon"
/>
<p><a href="https://www.linkedin.com/in/hamzakababji/" class = "contactText">in/hamzakababji</a></p>
</div>
</div>
</section>
</div>
<footer>
<nav>
<div class="nav-links-container">
<ul class="nav-links">
<li><a href="index.html#about">About</a></li>
<li><a href="experience.html#experience">Experience</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</div>
</nav>
</footer>
</body>
</html>