-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
297 lines (289 loc) · 18.7 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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rahat Rahman">
<meta name="description" content="Portfolio site of Rahat Rahman">
<meta name="robots" content="noindex, nofollow, noarchive, nocache, nosnippet, noimageindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177713480-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-177713480-1');
</script>
<script src="https://kit.fontawesome.com/c3eced3f24.js" crossorigin="anonymous"></script>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<link href="favicon.ico" rel="icon" type="image/x-icon" sizes="any">
<link href="assets/favicons/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link href="assets/favicons/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32">
<link href="assets/favicons/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16">
<link href="assets/favicons/manifest.json" rel="manifest">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css" rel="stylesheet">
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
<title>Rahat Rahman | Portfolio</title>
</head>
<body>
<header id="home">
<div class="wrapper head">
<div class="hamburgerMenu" data-aos="fade-down">
<button class="hamburger hamburger--emphatic" type="button" aria-label="menu" aria-controls="navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
<span class="label">menu</span>
</button>
</div>
<div class="cursor"></div>
<div id="background"></div>
<nav id="navigation">
<ul data-aos="fade-down">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="heading">
<h1><span class="sr-only">Rahat Rahman</span><span class="name" aria-hidden="true"></span></h1>
<p aria-hidden="true">I am <span class="typed"></span></p>
<p class="sr-only">I am a web developer.</p>
<p class="sr-only">I am based in Toronto.</p>
<p class="sr-only">I am working at Q4.</p>
</div>
<div class="mouse">
<a href="#about" tabindex="-1"><i class="fas fa-mouse" aria-hidden="true"></i></a>
</div>
</div>
</header>
<main>
<section class="about" id="about">
<div class="wrapper">
<h2>About</h2>
<div class="aboutSection">
<div class="profile" data-aos="fade-right" data-aos-once="true" data-aos-duration="1000">
<img src="uploads/profile.jpg" alt="Profile picture of Rahat Rahman.">
</div>
<div>
<p>I am a web developer based in Toronto. I love to create websites that are accessible, interactive and responsive while making my code clean, modular and DRY. I am passionate about web as a platform since it is open, free and democratic and which provides the maximum reach of users.</p>
<p>My previous experience working in Agile & Scrum based development teams along with my background in testing enables me to care deeply about writing quality code, while ensuring that all client requirements have been met.</p>
<p>Instead of being afraid of failure, I would like to be more afraid of inaction. Hence, I am always willing to embrace new challenges and push myself into new frontiers in order to learn more and grow as a developer.</p>
<a href="uploads/Rahat_Rahman.pdf" target="_blank">Résumé</a>
</div>
</div>
</div>
</section>
<section class="skills" id="skills">
<div class="wrapper">
<h2>Skills</h2>
<ul class="icons" data-aos="zoom-in" data-aos-once="true" data-aos-duration="800">
<li>
<i class="fab fa-html5" aria-hidden="true"></i>
<p>HTML5</p>
</li>
<li>
<i class="fab fa-css3-alt" aria-hidden="true"></i>
<p>CSS3</p>
</li>
<li>
<i class="fab fa-sass" aria-hidden="true"></i>
<p>SCSS</p>
</li>
<li>
<i class="fab fa-js" aria-hidden="true"></i>
<p>JavaScript</p>
</li>
<li>
<i class="devicon-jquery-plain" aria-hidden="true"></i>
<p>jQuery</p>
</li>
<li>
<i class="fab fa-react" aria-hidden="true"></i>
<p>React</p>
</li>
<li>
<span class="iconify" data-icon="mdi-firebase" data-inline="false" aria-hidden="true"></span>
<p>Firebase</p>
</li>
<li>
<i class="fas fa-universal-access" aria-hidden="true"></i>
<p>Accessibility</p>
</li>
<li>
<img src="assets/icons/responsive.svg" alt="">
<p>Responsive</p>
</li>
<li>
<img src="assets/icons/rest-api.svg" alt="">
<p>REST API</p>
</li>
<li>
<i class="fas fa-code-branch" aria-hidden="true"></i>
<p>GitHub</p>
</li>
<li>
<img class="agile" src="assets/icons/agile.png" alt="">
<p>Agile</p>
</li>
<li>
<img src="assets/icons/vscode.svg" alt=""/>
<p>VS Code</p>
</li>
<li>
<i class="fas fa-terminal" aria-hidden="true"></i>
<p>Terminal</p>
</li>
</ul>
</div>
</section>
<section class="projects" id="projects">
<div class="wrapper">
<h2>Projects</h2>
<div class="project">
<div data-aos="fade-right" data-aos-once="true" data-aos-duration="1000">
<img src="assets/images/TILES.jpg" alt="Screenshot of TILES project showing all the tiles as matched.">
</div>
<div class="description">
<h3>Tiles</h3>
<p>A tile based memory game where the player matches the tiles using colours. The game logic is implemented in JavaScript & jQuery, styled with SCSS and animated using Animista. The game also offers a continuous mode play option at 320px.</p>
<p>HTML5 | CSS3 | SCSS | JavaScript | jQuery | Responsive</p>
<a href="https://github.com/rahatbd/rahatRahmanProjectThree" target="_blank" rel="noopener noreferrer">GitHub Repo</a>
<a href="TILES">Live Link</a>
<a href="https://www.loom.com/share/0bb14c04246f486b96ce2710d9d227ca" target="_blank" rel="noopener noreferrer">Loom Demo</a>
</div>
</div>
<div class="project">
<div data-aos="fade-right" data-aos-once="true" data-aos-duration="1000">
<img src="assets/images/NEWS.jpg" alt="Screenshot of News Project showing the latest Canadian headlines.">
</div>
<div class="description">
<h3>News Project</h3>
<p>A news aggregator website and a pair programming project that uses the NewsAPI to fetch the latest headlines from multiple categories using an Ajax call and made interactive using jQuery. The website is fully responsive and provides headlines for Canada and US.</p>
<p>HTML5 | CSS3 | SCSS | JavaScript | jQuery | Rest API | Responsive</p>
<a href="https://github.com/Project-News/kristenScheelRahatRahmanProjectFour" target="_blank" rel="noopener noreferrer">GitHub Repo</a>
<a href="ProjectNews">Live Link</a>
</div>
</div>
<div class="project">
<div data-aos="fade-right" data-aos-once="true" data-aos-duration="1000">
<img src="assets/images/COVID19.jpg" alt="Screenshot of Covid-19 project showing the Canadian case numbers on August 25, 2020 at 3:37 P.M. EDT.">
</div>
<div class="description">
<h3>Covid-19 Tracker</h3>
<p>A React COVID-19 tracking site that uses the Coronavirus COVID19 API to fetch the latest global coronavirus case numbers using an Axios call. The site also provides options to view the latest case numbers for 186 countries or territories.</p>
<p>React | CSS3 | Rest API | Responsive</p>
<a href="https://github.com/rahatbd/covid19" target="_blank" rel="noopener noreferrer">GitHub Repo</a>
<a href="covid19">Live Link</a>
</div>
</div>
<div class="project">
<div data-aos="fade-right" data-aos-once="true" data-aos-duration="1000">
<img src="assets/images/fluence.jpeg" alt="Screenshot of Fluence project home page showing top navigation, project title and Get Started button.">
</div>
<div class="description">
<h3>Fluence</h3>
<p>A React web app that empowers influencers or content creators with their marketability by providing them with personalized calculations based on their social media metrics so that they can find their sponsorship value.</p>
<p>React | CSS3 | Responsive</p>
<a href="https://github.com/Co-Lab-You-Belong-in-Tech/fluence" target="_blank" rel="noopener noreferrer">GitHub Repo</a>
<a href="https://www.fluence.social" target="_blank" rel="noopener noreferrer">Live Link</a>
</div>
</div>
<div class="project">
<div data-aos="fade-right" data-aos-once="true" data-aos-duration="1000">
<img src="assets/images/project-2.jpeg" alt="Screenshot of Under the Sea project home page showing top navigation, project title and images of fish swimming in aquariums.">
</div>
<div class="description">
<h3>Under the Sea</h3>
<p>A multi-page design conversion project built using HTML and SCSS that is fully responsive and made pixel-perfect following a style guide and design mock-up.</p>
<p>HTML5 | CSS3 | SCSS | Responsive</p>
<a href="https://github.com/rahatbd/-rahat-rahman-project-two" target="_blank" rel="noopener noreferrer">GitHub Repo</a>
<a href="project-2">Live Link</a>
</div>
</div>
<div class="project lastProject">
<div data-aos="fade-right" data-aos-once="true" data-aos-duration="1000">
<img src="assets/images/project-1.jpeg" alt="Screenshot of Galass Handbags project home page showing top navigation, project title and an image of three handbags.">
</div>
<div class="description">
<h3>Galass Handbags</h3>
<p>A single page design conversion project built using HTML and CSS that is fully responsive and made pixel-perfect following a style guide and design mock-up.</p>
<p>HTML5 | CSS3 | Responsive</p>
<a href="https://github.com/rahatbd/rahat-rahman-project-one" target="_blank" rel="noopener noreferrer">GitHub Repo</a>
<a href="project-1">Live Link</a>
</div>
</div>
</div>
</section>
<section class="blog" id="blog">
<div class="wrapper">
<h2>Blog</h2>
<div class="posts">
<div class="post" data-aos="fade-right" data-aos-once="true" data-aos-duration="1000">
<a href="https://medium.com/@rahat.me/my-journey-with-juno-d4a778dce6ff" target="_blank" rel="noopener noreferrer">My Journey with Juno</a>
<p><time datetime="2020-07-06">July 06, 2020</time></p>
</div>
<div class="post" data-aos="fade-right" data-aos-once="true" data-aos-duration="1000">
<a href="https://www.joincolab.io/projects/fluence" target="_blank" rel="noopener noreferrer">Fluence with Co.Lab</a>
<p><time datetime="2021-06">June 2021</time></p>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="wrapper">
<h2>Contact</h2>
<div class="social">
<form action="https://formspree.io/maypgnpq" method="POST">
<input type="text" name="name" id="name" placeholder="Name*" maxlength="50" required>
<label for="name" class="sr-only">Name</label>
<input type="email" name="email" id="email" placeholder="Email*" maxlength="50" required>
<label for="email" class="sr-only">Email</label>
<textarea name="message" id="message" cols="30" rows="10" placeholder="Message*" maxlength="350" required></textarea>
<label for="message" class="sr-only">Message</label>
<button type="submit">Send</button>
</form>
<div>
<p>Thank you for visiting my portfolio. If you would like to connect, you can contact me through my form.</p>
<p>You can also find me on social media or book a meeting through Calendly.</p>
<div data-aos="fade-up" data-aos-once="true" data-aos-duration="1000">
<a href="https://medium.com/@rahat.me" title="Medium" target="_blank" rel="noopener noreferrer" aria-label="Medium blog of Rahat Rahman"><i class="fab fa-medium" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/rahat-rahman" title="LinkedIn" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn profile of Rahat Rahman"><i class="fab fa-linkedin" aria-hidden="true"></i></a>
<a href="https://github.com/rahatbd" title="GitHub" target="_blank" rel="noopener noreferrer" aria-label="GitHub repo of Rahat Rahman"><i class="fab fa-github-square" aria-hidden="true"></i></a>
<a href="" onclick="Calendly.initPopupWidget({url:'https://calendly.com/rahatrahman/30min'});return false;">
<svg height="40" width="40" viewBox="7.4 0 344.6 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="calendlyTitle calendlyDesc">
<title id="calendlyTitle">Calendly</title>
<desc id="calendlyDesc">Book a 30 minute meeting with Rahat Rahman.</desc>
<g fill="#fafafa">
<path d="m313.8 360h-268.3c-21 0-38.1-17.1-38.1-38.1v-268.4c0-21 17.1-38.1 38.1-38.1h268.3c21 0 38.1 17.1 38.1 38.1v268.3c.1 21.1-17 38.2-38.1 38.2zm-268.3-323.5c-9.4 0-17 7.6-17 17v268.3c0 9.4 7.6 17 17 17h268.3c9.4 0 17-7.6 17-17v-268.3c0-9.4-7.6-17-17-17z"/>
<path d="m256.6 72.4c-4.5 0-8.1-3.6-8.1-8.1v-56.2c0-4.5 3.6-8.1 8.1-8.1s8.1 3.6 8.1 8.1v56.1c0 4.5-3.6 8.2-8.1 8.2zm-154.7 0c-4.5 0-8.1-3.6-8.1-8.1v-56.2c0-4.5 3.6-8.1 8.1-8.1s8.1 3.6 8.1 8.1v56.1c.1 4.5-3.6 8.2-8.1 8.2zm87.5 181.4c-33.6 0-60.9-27.3-60.9-60.9s27.3-60.9 60.9-60.9c15.2 0 29.7 5.6 40.9 15.8 1.4 1.2 1.5 3.4.2 4.7-1.2 1.4-3.4 1.5-4.7.2-10-9.1-22.9-14.1-36.4-14.1-29.9 0-54.2 24.3-54.2 54.2s24.3 54.2 54.2 54.2c13.5 0 26.4-5 36.4-14.1 1.4-1.2 3.5-1.1 4.7.2 1.2 1.4 1.1 3.5-.2 4.7-11.2 10.4-25.7 16-40.9 16z"/>
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="wrapper">
<p>Made with 🤍 in Toronto. <span>© Rahat Rahman 2021.</span></p>
</div>
</footer>
<script src='https://code.jquery.com/jquery-3.6.0.min.js' integrity='sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=' crossorigin='anonymous'></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="scripts/scramble.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>