-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
256 lines (232 loc) · 14.7 KB
/
portfolio.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
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - Louai</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800,300" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="css/photo-grid.css">
<link rel="stylesheet" href="css/site.css">
</head>
<body>
<div id="portfolio-section">
<header></header>
<div id="top">
<h2>Portfolio</h2>
<span>Home <i class="fa fa-chevron-right"></i> Portfolio</span>
</div>
<div id="intro">
<div class="section-heading">
<span>Portfolio</span>
<h1>Some of<br>My Projects</h1>
</div>
<p>Here you can see some of my projects. When you click on one, a gallery of screenshots opens up, with explanations of the project.</p>
<div class="down-ind">
<i class="fa fa-arrow-down"></i>
</div>
</div>
<div id="project-selector">
<div class="project project-fms">
<div class="overpane" project="fms">
<span>Fleet Management System</span>
<span><i class="fa fa-info"></i></span>
</div>
<div class="image-frame">
<div class="image" style="background-image: url('img/fms2.png')"></div>
</div>
</div>
<div class="project">
<div class="overpane" project="frost">
<span>Frost</span>
<span><i class="fa fa-info"></i></span>
</div>
<div class="image-frame">
<div class="image" style="background-image: url('img/frost/homepage.png')"></div>
</div>
</div>
<div class="project">
<div class="overpane" project="deltaco">
<span>Delta Lab</span>
<span><i class="fa fa-info"></i></span>
</div>
<div class="image-frame">
<div class="image" style="background-image: url('img/deltaco.png')"></div>
</div>
</div>
<div class="project">
<div class="overpane" project="renshuu">
<span>Renshuu</span>
<span><i class="fa fa-info"></i></span>
</div>
<div class="image-frame">
<div class="image" style="background-image: url('img/renshuu.jpg')"></div>
</div>
</div>
</div>
<div id="project-info">
<div class="project" project="fms">
<div class="photo-grid">
<div style="background-image: url('img/fms-gallery/1.png');"><div class="overimage" show-img="img/fms-gallery/1.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/fms-gallery/2.png');"><div class="overimage" show-img="img/fms-gallery/2.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/fms-gallery/3.png');"><div class="overimage" show-img="img/fms-gallery/3.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/fms-gallery/4.png');"><div class="overimage" show-img="img/fms-gallery/4.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/fms-gallery/6.png');"><div class="overimage" show-img="img/fms-gallery/6.png"><i class="fa fa-eye"></i></div></div>
</div>
<div class="info">
<span>PROJECT</span>
<h2>Fleet Management System</h2>
<span>control your vehicle fleets</span>
<p>This project is aimed at companies that utilize vehicle fleets for their services or needs. Knowing where the vehicles are, what the drivers are doing and monitoring every event in real time are the key parameters for a well-managed decision-making process. This project is for the control and monitoring of vehicle fleets using GPS tracking and various other metrics. A web-based application and a mobile application were created as an interface.</p>
<p>Users can view their fleets on different maps and take detailed reports of the deliveries each vehicle is responsible for. Furthermore, a coordinator can add deliveries using the web application, and the application can compute the optimal routes and optimal vehicles for these deliveries. The application can track travel paths, fuel consumption, speed, and other necessary information.</p>
<p>This project was by request from the Head of the Science Faculty, Computer Science department of the Lebanese University, in cooperation with Everteam.</p>
<a href="https://github.com/LouaiB/FleetManagementSystem" target="_blank">View Source</a>
</div>
</div>
<div class="project" project="deltaco">
<div class="photo-grid">
<div style="background-image: url('img/deltaco-gallery/3.png');"><div class="overimage" show-img="img/deltaco-gallery/3.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/deltaco-gallery/4.png');"><div class="overimage" show-img="img/deltaco-gallery/4.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/deltaco-gallery/1.png');"><div class="overimage" show-img="img/deltaco-gallery/1.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/deltaco-gallery/2.png');"><div class="overimage" show-img="img/deltaco-gallery/2.png"><i class="fa fa-eye"></i></div></div>
</div>
<div class="info">
<span>PROJECT</span>
<h2>Delta Lab Co</h2>
<span>health and laboratory equipment</span>
<p>A leading company in the sales of laboratory equipment for schools and various other institutions accross Lebanon. This project serves as a website for the company to market their brand, allow customers to browse and order laboratory goods, and to automate the creation of sale reports and sale contracts, all within a well designed and user friendly interface.</p>
<a href="#" target="_blank">Visit</a>
</div>
</div>
<div class="project" project="frost">
<div class="photo-grid">
<div style="background-image: url('img/frost/homepage.png');"><div class="overimage" show-img="img/frost/homepage.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/frost/account.png');"><div class="overimage" show-img="img/frost/account.png"><i class="fa fa-eye"></i></div></div>
<!-- <div style="background-image: url('img/frost/change-avatar.png');"><div class="overimage" show-img="img/frost/change-avatar.png"><i class="fa fa-eye"></i></div></div> -->
<div style="background-image: url('img/frost/friendships.png');"><div class="overimage" show-img="img/frost/friendships.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/frost/alerts.png');"><div class="overimage" show-img="img/frost/alerts.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/frost/responsive.png');"><div class="overimage" show-img="img/frost/responsive.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/frost/loaders.png');"><div class="overimage" show-img="img/frost/loaders.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/frost/server-unreachable.png');"><div class="overimage" show-img="img/frost/server-unreachable.png"><i class="fa fa-eye"></i></div></div>
</div>
<div class="info">
<span>PROJECT</span>
<h2>Frost</h2>
<span>social media web and mobile app</span>
<p>Social Media website and android/ios app inspired by twitter. It includes modern UI/UX, smooth transitions & animations, and robust error handling. Nodejs backend with JWT authentication.</p>
</div>
</div>
<div class="project" project="renshuu">
<div class="photo-grid">
<div style="background-image: url('img/renshuu-gallery/3.png');"><div class="overimage" show-img="img/renshuu-gallery/3.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/renshuu-gallery/4.png');"><div class="overimage" show-img="img/renshuu-gallery/4.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/renshuu-gallery/2.png');"><div class="overimage" show-img="img/renshuu-gallery/2.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/renshuu-gallery/5.png');"><div class="overimage" show-img="img/renshuu-gallery/5.png"><i class="fa fa-eye"></i></div></div>
<div style="background-image: url('img/renshuu-gallery/1.png');"><div class="overimage" show-img="img/renshuu-gallery/1.png"><i class="fa fa-eye"></i></div></div>
</div>
<div class="info">
<span>PROJECT</span>
<h2>Renshuu</h2>
<span>language learning website</span>
<p>Learning a language is much more than just studying the grammar and memorizing words. The bulk of a learner's journey revolves around using native content such as novels, shows & movies, podcasts, and the such, to facilitate input training. However, the process of practicing a language using native content is often tedious, as the learner is required to look up words in a dictionary very so often, and furthermore save them in a means to review them later. This is a very discouraging aspect for anyone.</p>
<p>Renshuu is a website that automates all of that hastle. The user is able to use the videos, texts, etc. they like, and the process of looking up words, saving their definitions, and later revision, is all within a click. It genuinely allows the learner to be able to focus on the content they are practicing with, instead of having to spend most of the study session tackling a dictionary and writing down flashcards manually.</p>
<a href="#" target="_blank">Visit</a>
</div>
</div>
</div>
<footer></footer>
</div>
<div id="lightbox">
<div id="lightbox-image"></div>
<div id="lightbox-close">
<i class="fa fa-times"></i>
</div>
</div>
</body>
</html>
<script>
fetch("./header-nav.html")
.then(response => {
return response.text();
})
.then(data => {
document.querySelector("header").innerHTML = data;
document.querySelectorAll('[nav-to="portfolio"]').forEach(link => link.classList.add('active-nav-link'));
});
fetch("./footer.html")
.then(response => {
return response.text();
})
.then(data => {
document.querySelector("footer").innerHTML = data;
document.querySelectorAll('[nav-to="portfolio"]').forEach(link => link.classList.add('active-nav-link'));
document.querySelector('#year').innerHTML = new Date().getFullYear();
});
</script>
<script>
// const renshuuGallery = document.querySelectorAll('[project="renshuu"] .gallery .image');
// let renshuuIndex = 0;
// const renshuuLength = renshuuGallery.length;
// setInterval(() => {
// let mod = renshuuIndex % renshuuLength;
// renshuuGallery[mod].style.zIndex = '10';
// renshuuGallery[mod].style.height = `${document.querySelector('[project="renshuu"] .gallery').clientHeight}px`;
// for(let i = 0; i < renshuuLength; i++){
// if(i != mod){
// renshuuGallery[i].style.zIndex = '5';
// renshuuGallery[i].style.height = '0px';
// }
// }
// renshuuIndex++;
// }, 3000);
</script>
<script>
const lightboxTriggers = document.querySelectorAll('[show-img]');
const lightbox = document.querySelector('#lightbox');
const lightboxImage = lightbox.querySelector('#lightbox-image');
const lightboxClose = lightbox.querySelector('#lightbox-close');
lightboxTriggers.forEach(trigger => {
let imgUrl = trigger.getAttribute('show-img');
trigger.addEventListener('click', () => {
lightboxImage.style.backgroundImage = `url('${imgUrl}')`;
openLightbox();
})
})
lightbox.addEventListener('click', () => {
closeLightbox();
})
lightboxClose.addEventListener('click', () => {
closeLightbox();
})
closeLightbox = () => {
lightbox.style.display = 'none';
lightboxImage.style.height = '0px';
}
openLightbox = () => {
lightbox.style.display = 'flex';
lightboxImage.style.height = `${screen.height * 0.8}px`;
}
</script>
<script>
const projectSelectors = document.querySelectorAll('#project-selector .overpane');
const projects = document.querySelectorAll('#project-info .project');
projectSelectors.forEach(trigger => {
trigger.addEventListener('click', () => {
const projectName = trigger.getAttribute('project');
projects.forEach(p => {
if(p.getAttribute('project') == projectName){
if(p.style.height != 0 && p.style.height != '0px') {
p.style.height = '0px';
} else {
p.style.height = `${p.querySelector('.photo-grid').clientHeight + p.querySelector('.info').clientHeight}px`;
}
} else {
p.style.height = '0px';
}
});
if(window.innerWidth <= 761) window.location.href = '#project-info';
})
})
</script>