-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (174 loc) · 10.4 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
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#111827">
<link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
<link rel="manifest" href="static/site.webmanifest">
<title>Firas Jelassi, your typical nerd :3</title>
<link rel="stylesheet" href="css/bulma.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<header>
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<a role="button" id="BurgerButton" class="navbar-burger" data-target="navMenu" aria-label="menu"
aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div id="navMenu" class="navbar-menu">
<div class="navbar-item">
<a class="navbar-item" onclick="actionNavbar(event)" data-id="home" href="#home">
Home
</a>
<a class="navbar-item" onclick="actionNavbar(event)" data-id="whoami" href="#whoami">
About
</a>
<a class="navbar-item" onclick="actionNavbar(event)" data-id="skills" href="#skills">
Skills
</a>
<a class="navbar-item" target="_blank" href="thttps://github.com/FirasSharp?tab=repositories">
Github <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9" class="icon_svg-stroke" stroke="#666" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<body>
<button id="TopNavButton" class="scrollButton" title="Go to top"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" height="28">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
</svg></button>
<section class="section" id="home">
<div class="columns is-centered is-mobile mt-6">
<figure class="image is-250x250" style="margin: auto;">
<img src="https://avatars.githubusercontent.com/u/49401280?v=4">
</figure>
</div>
<div class="columns is-centered mt-auto">
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">Status</span>
<span class="tag is-success">Employed </span>
</div>
</div>
</div>
<div class="columns is-centered mt-auto">
<h2 class="title is-4">Hola 👋 I'm Firas Jelassi</h2>
</div>
<div class="columns is-centered mt-auto">
<h1 class="title is-2">Full Stack software Developer</h1>
</div>
<div class="columns is-centered mt-auto">
<p>I develop customs and ad hoc softwares for SAP systems!</p>
</div>
<div class="columns is-centered mt-auto">
<a class="button is-warning is-rounded is-outlined" href="mailto:firas@jelassi.me">Contact Me!</a>
</div>
</section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#ff5500" fill-opacity="1"
d="M0,96L48,85.3C96,75,192,53,288,90.7C384,128,480,224,576,261.3C672,299,768,277,864,224C960,171,1056,85,1152,80C1248,75,1344,149,1392,186.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
<section class="section whoami" id="whoami">
<div class="is-centered">
<div class="column is-narrow has-text-centered">
<h1 class="title">About</h1>
</div>
<div class="column is-narrow has-text-centered">
<img class="icon is-large" src="static/devops.png">
<img class="icon is-large" src="static/dj-controller.png">
<img class="icon is-large" src="static/nintendo-switch.png">
</div>
<div class="content is-large">
<p>I don't like to talk much about myself, this is why all I will say is that I love making friends and
interacting with people; I like to program and I am a huge fan of the Open Source, and I am slowly starting to
contribute to it. In my free time, I like to hang out with friends and family, play video games, program, and
<a href="https://soundcloud.com/jey01" class="is-link">mix music</a> (mainly techno).
</p>
</div>
</div>
</section>
<svg style="background-color: #ff5500;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#2596be" fill-opacity="1"
d="M0,96L48,85.3C96,75,192,53,288,90.7C384,128,480,224,576,261.3C672,299,768,277,864,224C960,171,1056,85,1152,80C1248,75,1344,149,1392,186.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
<section class="section skills" id="skills">
<div class="is-centered">
<div class="column is-narrow has-text-centered">
<h1 class="title">Skills</h1>
<div>
<img src="https://raw.githubusercontent.com/FriscPlusPlus/FriscPlusPlus/main/img/js.png" width="6%" />
<img src="https://raw.githubusercontent.com/FriscPlusPlus/FriscPlusPlus/main/img/bash.png" width="6%" />
<img src="https://raw.githubusercontent.com/FriscPlusPlus/FriscPlusPlus/main/img/csharp.png" width="6%" />
<img src="https://raw.githubusercontent.com/FriscPlusPlus/FriscPlusPlus/main/img/java.png" width="6%" />
<img src="https://raw.githubusercontent.com/FriscPlusPlus/FriscPlusPlus/main/img/py.png" width="6%" />
<img src="https://raw.githubusercontent.com/FriscPlusPlus/FriscPlusPlus/main/img/sap.png" width="6%" />
<img src="https://raw.githubusercontent.com/FriscPlusPlus/FriscPlusPlus/main/img/go.png" width="6%" />
</div>
</div>
<div class="content is-large">
<p>
First of all I would like to say that tools are just that, tools. My idea is that all tools can get the job done as long as you choose the right stack.
Here I am listing my current skills, but I am always striving to improve my abilities. For this reason I would have no problem taking on a new language that I have never used before. Learning is fun.
</p>
</div>
</div>
<div class="column is-narrow">
<canvas id="myChart"></canvas>
</div>
<div class="content has-text-centered mt-6">
<div class="social">
<a href="https://www.linkedin.com/in/firas-jelassi-901013192/" target="_blank" rel="noopener"
aria-label="LinkedIn"
class="p-2 inline-block rounded-full border border-gray-300 text-gray-300 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:border-gray-600 dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
<line x1="8" y1="11" x2="8" y2="16"></line>
<line x1="8" y1="8" x2="8" y2="8.01"></line>
<line x1="12" y1="16" x2="12" y2="11"></line>
<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
</svg>
</a>
<a href="https://github.com/FriscPlusPlus" target="_blank" rel="noopener" aria-label="GitHub"
class="p-2 inline-block rounded-full border border-gray-300 text-gray-300 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:border-gray-600 dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5">
</path>
</svg>
</a>
<a href="https://www.instagram.com/willyzewonka/" target="_blank" rel="noopener" aria-label="Medium"
class="p-2 inline-block rounded-full border border-gray-300 text-gray-300 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:border-gray-600 dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 24 24">
<path d="M 8 3 C 5.243 3 3 5.243 3 8 L 3 16 C 3 18.757 5.243 21 8 21 L 16 21 C 18.757 21 21 18.757 21 16 L 21 8 C 21 5.243 18.757 3 16 3 L 8 3 z M 8 5 L 16 5 C 17.654 5 19 6.346 19 8 L 19 16 C 19 17.654 17.654 19 16 19 L 8 19 C 6.346 19 5 17.654 5 16 L 5 8 C 5 6.346 6.346 5 8 5 z M 17 6 A 1 1 0 0 0 16 7 A 1 1 0 0 0 17 8 A 1 1 0 0 0 18 7 A 1 1 0 0 0 17 6 z M 12 7 C 9.243 7 7 9.243 7 12 C 7 14.757 9.243 17 12 17 C 14.757 17 17 14.757 17 12 C 17 9.243 14.757 7 12 7 z M 12 9 C 13.654 9 15 10.346 15 12 C 15 13.654 13.654 15 12 15 C 10.346 15 9 13.654 9 12 C 9 10.346 10.346 9 12 9 z"></path>
</svg>
</a>
</div>
<div class="column is-narrow">
<p class="content">Developed from scratch using <a class="is-link" href="https://bulma.io/">Bulma</a> and <a
class="is-link" href="https://www.chartjs.org/">Chart.js</a>
</p>
</div>
</div>
</section>
<script src="js/main.js"></script>
</body>
</html>