-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (164 loc) · 7.8 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
<!DOCTYPE html>
<html>
<head>
<title>Shahzad Bin Shahjahan</title>
<meta name="description" content="Shahzad mainly works as a coder, web developer, among other things. You may learn more about shahzad by visiting his portfolio">
<meta name="keywords" content="Portfolio, web developer, Shahzad, Shahzad Bin Shahjahan, App developer, Html, Css, Bangalore, freelance">
<meta name="author" content="Shahzad Bin Shahjahan">
<meta name="viewport" content="width=device-width, initial-scale=1">
<META HTTP-EQUIV=”refresh” CONTENT=”15″>
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!--Google search console tag-->
<meta name="google-site-verification" content="ISv0mJTVN8Bk4ljEY6EB5VNsG6246n5hdGqPwkgQlJo" />
<!--Bing search tag-->
<meta name="msvalidate.01" content="65D77A9B524E21931808D7AEC7C5453A" />
<!--Stylesheets-->
<link rel="stylesheet" href="styles.css">
<!--External Stylesheet-->
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!--Custom javascript-->
<script defer src="main.js"></script>
</head>
<body class="body">
<nav class="navbar navbar-expand-sm sticky-top navBar ">
<div class="container-fluid" style="padding-right:10%;padding-left:1%;"><!--Style is not working external-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div>
<a href="#homeSection"><h3 class="navbar-brand">SHZD</h3></a>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo01">
<div class="navbar-nav">
<a class="nav-link" href="#projectsSection">Work</a>
<a class="nav-link" href="#aboutSection">About</a>
<a class="nav-link" href="#contactSection">Contact</a>
<!--<a class="nav-link">Other</a>-->
</div>
</div>
</div>
</nav>
<section id="homeSection">
<div class="row container-fluid">
<div class="col-lg-6 introDescription">
<h1>I'm Shahzad Bin Shahjahan, a Web and App developer based in Bangalore,India. <a href="#contactSection"><u>Available</u></a> for freelance & collaborations</h1>
</div>
<div class="col-lg-6">
<img src="images/Shae 3.jpg" alt="Shahzad Picture" title="Shahzad Bin Shahjahan" class="img-fluid mx-auto d-block profileImg">
</div>
</div>
<i class="fa-brands fa-square-github"></i>
</section>
<section id="projectsSection">
<div class="projectsHeading"><h1>Projects</h1><hr/></div>
<div class="row projects">
<div class="col-lg-4 col-md-6 projectCard projectCard01" class="img-fluid">
<a class="projectMainHeading"z>
<p>Control Presentation using Hand gestures</p>
<img src="images/projectcards/handPresentation.jpg">
</a>
</div>
<div class="col-lg-4 col-md-6 projectCard projectCard02" class="img-fluid">
<a class="projectMainHeading">
<p>Draw on the Screen using Hand gestures</p>
<img src="images/projectcards/handDraw.jpg">
</a>
</div>
<div class="col-lg-4 col-md-6 projectCard projectCard03">
<a class="projectMainHeading">
<p>Responsive landing page</p>
<img src="images/projectcards/landingPage.jpg" class="img-fluid">
</a>
<a>
<img src="images/plus.png" title="Show more" class="showMoreImg">
</a>
</div>
</div>
</section>
<section id="aboutSection">
<div>
<h1>About me</h1>
<hr/>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid aboutImg" src="images/SHAHZAD.png">
</div>
<div class="col-md-6">
<p class="lead">
I’ve always loved learning—even if it’s just for learning’s sake.
I always try to learn new technologies or new methods to improve my skills.
My skillset lies in writing efficient code, delivering beautiful websites and applications.
</p>
<p class="lead">
You can often find me tinkering around with linux, learning new ways to optimize code or watching random youtube videos.
I have working proficiency in Kannada, Hindi and Tamil.
Full Professional proficiency in English and my native is Malayalam.
</p>
<p class="lead">
If you would like to chat or if you would like to discuss future job opportunities or freelancing opportunities please reach out through the contact section.
</p>
<button onclick="location.href='#contactSection'" class="btn btn-outline-secondary">Contact</button>
<a href=" Resume_Shahzad_Bin_Shahjahan.pdf" target="_blank"><button class="btn btn-primary resumeBtn">View Resume</button></a>
</div>
</div>
<footer class="aboutFooter"><pre class="text-center">C • C++ • Java • Python • Web Development • React • NextJs • Flutter • OpenCV</pre></footer>
</section>
<section id="contactSection">
<div>
<h1>Say hello</h1>
<hr/>
</div>
<div class="row">
<div class="col-md-6 mt-3">
<p>Looking to start a new project or just want to say hi?Send me an email and I'll do my best to reply within 24 hrs!</p>
<p>If contact form aren't your thing, send me an email at <a class="mailLink" href="mailto:[email protected]">[email protected]</a></p>
<div class="text-center">
<a href="https://github.com/shahzadbinshahjahan"><img class="icons" src="images/square-github.svg"></a>
<a href="https://www.linkedin.com/in/shahzadbinshahjahan/"><img class="icons" src="images/linkedin.svg"></a>
<a href="https://www.instagram.com/shahzadbinshahjahan/"><img class="icons" src="images/square-instagram.svg"></a>
</div>
</div>
<div class="col-md-6">
<form name="contactform" class="contactform">
<div class="alert alert-info mt-3" role="alert">
I'm sorry, the contact form is currently unavilable. You can contact me through any social media linked.
</div>
<div class="mb-3">
<label for="contactName" class="form-label">Name</label>
<input type="text" id="contactName" class="form-control contactformBoxColor" important disabled>
</div>
<div class="row mb-4">
<div class="col">
<label for="inquiry" class="form-label">Inquiry</label>
<select class="form-select contactformBoxColor" id="inquiry" aria-label="inquiry" disabled>
<option value="1">Job offer</option>
<option value="2">Clients</option>
<option value="3">Collaborations</option>
<option value="4" selected>For a cup of chai</option>
</select>
</div>
<div class="col">
<label for="emailInput" class="form-label">Email</label>
<input type="email" class="form-control contactformBoxColor" id="emailInput" placeholder="[email protected]" disabled/>
</div>
</div>
<div class="form-floating mb-3">
<textarea class="form-control contactformBoxColor" placeholder="Hello..." id="messageArea" style="height:20%;" disabled></textarea>
<label for="messageArea">Write a message here</label>
</div>
<button id="sendBtn">Send</button>
</div>
</div>
</section>
<footer class="mainFooter">
<div>
<div class="left">© Shahzad Bin Shahjahan</div>
<div class="right text-end">Design inspired by <a href="https://www.arnau.design/" target="_blank">Arnau Ros</a></div>
</div>
</footer>
<!--Bootstrap javascript code-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>