-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (141 loc) · 6.31 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Portofolio site">
<meta name="author" content="Bilal el Kouazi">
<title>Welcome! - Bilal el Kouazi</title>
<!-- CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Custom styles -->
<link href="css/creative.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Bilal el Kouazi</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="masthead">
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Find me on</h1>
<hr>
<a href="https://nl.linkedin.com/in/bilal-el-kouazi-6b37213b"><i class="fa fa-linkedin-square" aria-hidden="true" style="font-size:48px"></i></a>
<a href="https://github.com/bilalelkouazi"><i class="fa fa-github-square" aria-hidden="true" style="font-size:48px"></i></a>
<p> </p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Read more</a>
</div>
</div>
</header>
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<h2 class="section-heading text-white">Who is Bilal?</h2>
<hr class="light">
<p class="text-faded">My name is Bilal I'm passionate about technology, traveling and DIY. Welcome to my website. I've been in the tech industry for more than 8 years and have worked on various projects. I write tutorials on my website, mostly about Linux servers. </p>
<a class="btn btn-default btn-xl js-scroll-trigger" href="#services">What I do</a>
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Skill set</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-server" aria-hidden="true" style="font-size:48px"></i>
<h3>Storage management</h3>
<p class="text-muted">Back-up, high availability and flexibility.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-code" aria-hidden="true" style="font-size:48px"></i>
<h3>Scripting</h3>
<p class="text-muted">Automation and scheduled jobs in BASH, Powershell and PHP.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-database" aria-hidden="true" style="font-size:48px"></i>
<h3>Data management</h3>
<p class="text-muted">Database management.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-linux" aria-hidden="true" style="font-size:48px"></i>
<h3>Linux</h3>
<p class="text-muted">Opensource </p>
</div>
</div>
</div>
</div>
</section>
<div class="call-to-action bg-dark">
<div class="container text-center">
<h2>Resumé</h2>
<a class="btn btn-default btn-xl sr-button" href="about:blank">Download PDF.</a>
</div>
</div>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<h2 class="section-heading">Ways of contacting me</h2>
<hr class="primary">
<p>I like to think that I'm fairly approachable, I usually respond within a few days. Contact me through:</p>
</div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>
</body>
</html>