-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
224 lines (212 loc) · 11.8 KB
/
index.html
File metadata and controls
224 lines (212 loc) · 11.8 KB
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet">
<link rel="shortcut icon" href="resources/favicon.ico" type="image/x-icon">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
<title>Nasreddine Boutouil</title>
</head>
<body>
<header class="header">
<nav class="header__nav">
<div class="header__wrapper header__social-links-wrapper">
<a href="https://github.com/xerox0213" class="header__nav-item header__nav-link" target="_blank">
<i class='bx bxl-github header__icon'></i>
</a>
<a href="https://www.linkedin.com/in/nasreddine-boutouil-b1b700265/"
class="header__nav-item header__nav-link" target="_blank">
<i class='bx bxl-linkedin header__icon'></i>
</a>
<a href="mailto:61453@etu.he2b.be" class="header__nav-item header__nav-link" target="_blank">
<i class='bx bxs-envelope header__icon'></i>
</a>
</div>
<div class="header__wrapper header__page-links-wrapper">
<a href="#home" class="header__nav-item header__nav-link">Home</a>
<a href="#projects" class="header__nav-item header__nav-link">Projects</a>
<a href="#skills" class="header__nav-item header__nav-link">Skills</a>
<a href="#about-me" class="header__nav-item header__nav-link">About me</a>
</div>
<div class="header__wrapper header__theme-switchers-wrapper">
<button id="light-switcher" class="header__nav-item header__theme-switcher header__light-switcher">
<i class='bx bx-sun header__icon'></i>
</button>
<button id="dark-switcher" class="header__nav-item header__theme-switcher header__dark-switcher">
<i class='bx bx-moon header__icon'></i>
</button>
</div>
</nav>
</header>
<main class="main">
<section id="home" class="hero main__section">
<div class="hero__picture-wrapper">
<img src="./resources/images/myself.jpg" alt="Nasreddine Boutouil" class="hero__picture">
</div>
<p class="hero__hello">Hi, i'm Nasreddine 👋🏼</p>
<h1 class="hero__intro">
Fullstack developer with a passion for crafting code.
</h1>
<a href="#projects" class="hero__see-projects-btn btn">
<span>See my projects</span>
<i class='bx bx-chevron-down'></i>
</a>
</section>
<section id="projects" class="projects main__section">
<h2 class="main__section-title">Projects</h2>
<div class="projects__wrapper">
<a href="https://github.com/xerox0213/budget-tracker" target="_blank"
class="card card--interactive projects__project-card">
<div class="projects__project-card-header">
<h4 class="project-card__title">Budget Tracker</h4>
</div>
<p class="projects__project-card-description">
Budget Tracker is a web application designed to track and organize your financial transactions. It
allows you to create custom categories for your income and expenses, view transaction history, and
analyze your finances with detailed summaries and interactive charts.
</p>
<div class="projects__project-card-footer">
<img src="./resources/logo/vue-logo.svg" alt="logo de vue js"
class="projects__project-card-techno-icon">
<img src="./resources/logo/ts-logo.svg" alt="logo de typescript"
class="projects__project-card-techno-icon">
<img src="./resources/logo/tailwind-logo.svg" alt="logo de tailwind css"
class="projects__project-card-techno-icon">
</div>
</a>
<a href="https://github.com/xerox0213/note-app" target="_blank"
class="card card--interactive projects__project-card">
<div class="projects__project-card-header">
<h4 class="project-card__title">Notes app</h4>
</div>
<p class="projects__project-card-description">
Notes app allows users to create, edit, delete, and pin notes, with data stored in the browser’s
local storage. Users can search notes by title or tags, with pinned notes displayed at the top.
</p>
<div class="projects__project-card-footer">
<img src="./resources/logo/vue-logo.svg" alt="logo de vue js"
class="projects__project-card-techno-icon">
<img src="./resources/logo/ts-logo.svg" alt="logo de typescript"
class="projects__project-card-techno-icon">
<img src="./resources/logo/tailwind-logo.svg" alt="logo de tailwind css"
class="projects__project-card-techno-icon">
</div>
</a>
<a href="https://github.com/xerox0213/nassenger" target="_blank"
class="card card--interactive projects__project-card">
<div class="projects__project-card-header">
<h4 class="project-card__title">Nassenger</h4>
</div>
<p class="projects__project-card-description">
Nassenger is a messaging app where users can log in, send text or voice messages, reply by tagging
messages, and manage group chats with admin features like adding members or promoting other admins.
</p>
<div class="projects__project-card-footer">
<img src="./resources/logo/react-logo.svg" alt="logo de react js"
class="projects__project-card-techno-icon">
<img src="./resources/logo/ts-logo.svg" alt="logo de typescript"
class="projects__project-card-techno-icon">
<img src="./resources/logo/firebase-logo.svg" alt="logo de firebase"
class="projects__project-card-techno-icon">
</div>
</a>
<a href="https://github.com/xerox0213/travel" target="_blank"
class="card card--interactive projects__project-card">
<div class="projects__project-card-header">
<h4 class="project-card__title">Flight Management</h4>
</div>
<p class="projects__project-card-description">
A Laravel web app allowing users to search flights between airports, register or log in, and save
favorite flights. Focused on backend functionality and secure authentication.
</p>
<div class="projects__project-card-footer">
<img src="./resources/logo/laravel-logo.svg" alt="logo de laravel"
class="projects__project-card-techno-icon">
</div>
</a>
<a href="https://github.com/xerox0213/connect-four" target="_blank"
class="card card--interactive projects__project-card">
<div class="projects__project-card-header">
<h4 class="projects__project-card-title">Connect Four Game</h4>
</div>
<p class="projects__project-card-description">
This project is a Connect 4 game that can be played against a computer or a friend online.
</p>
<div class="projects__project-card-footer">
<img src="./resources/logo/java-logo.svg" alt="logo de java"
class="projects__project-card-techno-icon">
</div>
</a>
<a href="https://github.com/xerox0213/turing-machine" target="_blank"
class="card card--interactive projects__project-card">
<div class="projects__project-card-header">
<h4 class="project-card__title">Turing Machine Game</h4>
</div>
<p class="projects__project-card-description">
A digital version of the Turing Machine board game, featuring the core logic and deduction
mechanics, offering players an interactive and challenging experience.
</p>
<div class="projects__project-card-footer">
<img src="./resources/logo/java-logo.svg" alt="logo de java"
class="projects__project-card-techno-icon">
</div>
</a>
</div>
</section>
<section id="skills" class="skills main__section">
<h2 class="main__section-title">How can i help you ?</h2>
<div class="skills__grid">
<div class="skills__grid-item">
<h4>Front-end technologies</h4>
<div class="skills__techno-wrapper">
<img src="./resources/logo/vue-logo.svg" alt="vue"
class="skills__techno-logo">
<img src="./resources/logo/react-logo.svg" alt="react"
class="skills__techno-logo skills__techno-logo--spin">
</div>
</div>
<div class="skills__grid-item">
<h4>Back-end technologies</h4>
<div class="skills__techno-wrapper">
<img src="./resources/logo/laravel-logo.svg" alt="laravel" class="skills__techno-logo">
<img src="./resources/logo/firebase-logo.svg" alt="firebase" class="skills__techno-logo">
</div>
</div>
<div class="skills__grid-item">
<h4>Programming languages</h4>
<div class="skills__techno-wrapper">
<img src="./resources/logo/ts-logo.svg" alt="typescript" class="skills__techno-logo">
<img src="./resources/logo/php-logo.svg" alt="php" class="skills__techno-logo">
<img src="./resources/logo/java-logo.svg" alt="java" class="skills__techno-logo">
</div>
</div>
</div>
</section>
<section id="about-me" class="about-me main__section">
<h2 class="main__section-title">About me 👋🏼</h2>
<div class="about-me__wrapper">
<p class="about-me__content">
I'm a final-year application development student at <a
href="https://he2b.be/formations/developpeur-dapplications/" target="_blank">Haute École
Bruxelles-Brabant (ESI)</a>
with a passion
for web development 🌐. I taught myself HTML, CSS, JavaScript, and React before starting school.
<br><br>
I love exploring new cultures through travel ✈️ (I've been to Indonesia, Malaysia, and Oman), and
staying active with scuba diving 🤿, running 🏃♂️, and even surfing 🏄♂️. Fun fact: I may look confident
holding that surfboard in the photo, but I only managed to stay on the board three times!
</p>
<div class="about-me__picture-wrapper">
<img src="./resources/images/myself.jpg" alt="Nasreddine Boutouil (myself)" class="about-me__picture">
</div>
</div>
</section>
<script src="./app.js"></script>
</main>
</body>
</html>