-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (232 loc) · 11.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
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
<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">
<link rel="shortcut icon" href="./img/portfolio_icon.png">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- custom css -->
<link rel="stylesheet" href="./css/style.css">
<!-- bootstrap js bundle -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- custom js -->
<script src="./js/script.js" defer></script>
<title>Portfolio | Hafizul Haque</title>
</head>
<body>
<header class="container">
<div class="logo">
<img src="./img/portfolio.png" alt="">
</div>
<nav>
<div class="navitem btn btn-outline-warning m-3">Home</div>
<div class="navitem btn btn-outline-warning m-3">About Me</div>
<div class="navitem btn btn-outline-warning m-3">Contact</div>
</nav>
</header>
<main class="container">
<section id="imageContainer">
<img src="./img/self.jpg" alt="">
<div id="text">
<p>Hello, I'm</p>
<p id="dev">Hafizul Haque</p>
<p>I'm Web & Android App Developer.</p>
</div>
</section>
<section id="showcase">
<h2>Web Projects Showcase</h2>
<hr>
<div class="items">
<!-- item 1 -->
<div class="item">
<a href="./resources/CUET Library Homepage/index.html" target="_blank">
<div class="view">
<img src="./img/ss/Central Library.jpeg" alt="">
</div>
<h3>Landing Page: CUET Central Library</h3>
<p>Did this page design as a assignment on DBMS course. Implemented this web interface and worked with database in the backend. Although only the landing page of Central Library, CUET is shown here.</p>
</a>
<div class="tools">
<h4>Tools & Techniques:</h4>
<button class="btn btn-danger m-1">HTML</button>
<button class="btn btn-info m-1">CSS</button>
<button class="btn btn-dark m-1">Vanilla Js</button>
<button class="btn btn-success m-1">Image Slider</button>
</div>
</div>
<!-- item 2 -->
<div class="item">
<a href="./resources/Portfolio Page/index.html" target="_blank">
<div class="view">
<img src="./img/ss/portfolio.jpeg" alt="">
</div>
<h3>Web Developer Portfolio Page</h3>
<p>Developed this cool looking web developer page as a fun project. Pure CSS was used, no CSS library, i.e: bootstrap, materialize was used. Applied some attractive transition effect.</p>
</a>
<div class="tools">
<h4>Tools & Techniques:</h4>
<button class="btn btn-light m-1">HTML</button>
<button class="btn btn-primary m-1">CSS</button>
<button class="btn btn-warning m-1">javascript</button>
<button class="btn btn-info m-1">Bootstrap</button>
</div>
</div>
<!-- item 3 -->
<div class="item">
<a href="./resources/Style Conference Site/index.html" target="_blank">
<div class="view">
<img src="./img/ss/style_conference.jpeg" alt="">
</div>
<h3>Web Page for Conference Event</h3>
<p>Implemented this professional looking website as a requirement of a web design online course conducted by Shay Howe. A lot variety of elements such as map, SEO techniques were applied.</p>
</a>
<div class="tools">
<h4>Tools & Techniques:</h4>
<button class="btn btn-info m-1">HTML</button>
<button class="btn btn-danger m-1">CSS</button>
<button class="btn btn-light m-1">javascript</button>
<button class="btn btn-dark m-1">jQuery</button>
<button class="btn btn-secondary m-1">Google Font</button>
<button class="btn btn-primary m-1">Responsive Web Design</button>
<button class="btn btn-success m-1">Google Map API</button>
</div>
</div>
<!-- item 4 -->
<div class="item">
<a href="./resources/Photo Gallery/index.html" target="_blank">
<div class="view">
<img src="./img/ss/Photo Gallery.jpeg" alt="">
</div>
<h3>Photo Gallery Page</h3>
<p>This page was developed for the purpose of gaining parctical hand-on experience on real life use of CSS Flexbox. Implemented this Image gallery using only flexbox, no css framework. </p>
</a>
<div class="tools">
<h4>Tools & Techniques:</h4>
<button class="btn btn-secondary m-1">HTML</button>
<button class="btn btn-warning m-1">CSS</button>
<button class="btn btn-danger m-1">Flexbox</button>
<button class="btn btn-success m-1">CSS animation</button>
<button class="btn btn-info m-1">Javascript</button>
<button class="btn btn-dark m-1">Responsive Web Design</button>
</div>
</div>
<!-- item 5 -->
<div class="item">
<a href="./resources/Sample Blog Website/index.html" target="_blank">
<div class="view">
<img src="./img/ss/Blog.jpeg" alt="">
</div>
<h3>Personal Blog Demo</h3>
<p>This is one of my early days design page developed using purely HTML, CSS, javascript. Font Awesome Icons were used. This blog post website can be used as a template by dynamically populating data by fetching from server.</p>
</a>
<div class="tools">
<h4>Tools & Techniques:</h4>
<button class="btn btn-light m-1">HTML</button>
<button class="btn btn-info m-1">CSS</button>
<button class="btn btn-success m-1">Font Awesome Icon</button>
<button class="btn btn-danger m-1">Layout Design</button>
</div>
</div>
<!-- item 6 -->
<div class="item">
<a href="./resources/Realtime-FaceDetection-Webapp/index.html" target="_blank">
<div class="view">
<img src="./img/ss/face-detect.jpeg" alt="">
</div>
<h3>Webcam Input-Based Face Detection & Emotion Recognition Webapp</h3>
<p>This is an Machine learning based project. From webcam input we can detect human face in realtime and determine mood, i.e, happy, sad, surprised. We used face-api API to add machine learing capability to our cool web application.</p>
</a>
<div class="tools">
<h4>Tools & Techniques:</h4>
<button class="btn btn-danger m-1">HTML</button>
<button class="btn btn-info m-1">CSS</button>
<button class="btn btn-dark m-1">Vanilla Js</button>
<button class="btn btn-primary m-1">Responsive Web Design</button>
<button class="btn btn-secondary m-1">Machine Learning</button>
<button class="btn btn-light m-1">3rd party JS Library</button>
<button class="btn btn-success m-1">Webcam</button>
</div>
</div>
<!-- item 7 -->
<div class="item">
<a href="./resources/Particle Effect/index.html" target="_blank">
<div class="view">
<img src="./img/ss/Particle Effect.jpeg" alt="">
</div>
<h3>HTML-Canvas: Mouse Event Particle Effect</h3>
<p>Developed this Mouse Event based Particle effect javascript fun project. We implemented those particle effect in HTML5 canvas. It adds some facinating effect to a page. </p>
</a>
<div class="tools">
<h4>Tools & Techniques:</h4>
<button class="btn btn-info m-1">HTML</button>
<button class="btn btn-success m-1">CSS</button>
<button class="btn btn-light m-1">Vanilla Js</button>
<button class="btn btn-danger m-1">HTML5 Canvas API</button>
</div>
</div>
<!-- item 8 -->
<div class="item">
<a href="./resources/Web Piano/index.html" target="_blank">
<div class="view">
<img src="./img/ss/web piano.jpeg" alt="">
</div>
<h3>Vanilla JS Project: Web Piano</h3>
<p>This is a click-play web piano app. Implemented this web appliacation to gain some hand on experience of vanilla javascript. No framework was used. Design of this page was simply done using CSS. And for dynamic rendering and logic we used vanilla javascript.</p>
</a>
<div class="tools">
<h4>Tools & Techniques:</h4>
<button class="btn btn-danger m-1">HTML</button>
<button class="btn btn-info m-1">CSS</button>
<button class="btn btn-secondary m-1">Javascript</button>
<button class="btn btn-light m-1">Responsive Web Design</button>
<button class="btn btn-dark m-1">CSS Flexbox</button>
</div>
</div>
<!-- item 9 -->
<div class="item">
<a href="https://hafizulhaque.github.io/react-todo-app/" target="_blank">
<div class="view">
<img src="./img/ss/todo.jpeg" alt="">
</div>
<h3>React JS Project: Task Tracker App</h3>
<p>This is a React Task Tracker Project. Did this porject to learn react concepts like hooks, states, state-lifting,
react-router etc. practically. This really cool looking react website works pretty well.</p>
</a>
<div class="tools">
<h4>Tools & Techniques:</h4>
<button class="btn btn-dark m-1">HTML</button>
<button class="btn btn-success m-1">CSS</button>
<button class="btn btn-primary m-1">Bootstrap</button>
<button class="btn btn-danger m-1">Responsive Web Design</button>
<button class="btn btn-info m-1">React JS</button>
</div>
</div>
<!-- item 10 -->
<div class="item">
<a href="./resources/blockchain-maldect-app/index.html" target="_blank">
<div class="view">
<img src="./img/ss/bb-mal-dect.jpeg" alt="">
</div>
<h3>Frontend: Blockchain-Based Malware Detection App</h3>
<p>This is the implemented frontend for Malware Detection application using Ethereum blockchin and Support Vector
Machine (SVM) algo in the backend. Did this to prototype my final year thesis work.</p>
</a>
<div class="tools">
<h4>Tools & Techniques:</h4>
<button class="btn btn-primary m-1">HTML</button>
<button class="btn btn-secondary m-1">CSS</button>
<button class="btn btn-success m-1">javaScript</button>
<button class="btn btn-light m-1">Blockchain</button>
<button class="btn btn-info m-1">Machine Learning</button>
<button class="btn btn-danger m-1">SVM Algo</button>
</div>
</div>
</div>
</section>
</main>
<footer class="container">
<p>Copyright 2021 © Reserved by Hafizul Haque, CSE, CUET</p>
</footer>
</body>
</html>