-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
273 lines (241 loc) · 13.1 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
<!DOCTYPE html>
<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">
<title>SQ.me</title>
<link rel="stylesheet" href="css/style.css">
<link rel="script" href="js/script.js">
<script src="https://kit.fontawesome.com/d4708d9b77.js" crossorigin="anonymous"></script>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<img src="images/logo.png" class="logo">
<ul id="sidemenu">
<li><a href="#header">Home</a></li>
<li><a href="#me">Me</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#portfolio">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fa-solid fa-circle-xmark" onclick="closemenu()"></i>
</ul>
<i class="fa-solid fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text">
<p>Computer Science Student</p>
<h1>Hello, I'm <span class="typing">Shayaan Q</span><br>from Houston</h1>
</div>
</div>
</div>
<!-------Me----------->
<div id="me">
<div class="container">
<div class="row">
<div class="me-col-1">
<img src="images/image0.jpeg">
</div>
<div class="me-col-2">
<h1 class="sub-title">About Me</h1>
<p><br>My name is Shayaan Qureshi, a passionate developer and aspiring software engineer residing in Houston, Texas.
Welcome to my personal website!<br>At the University of Houston, I am a Junior majoring in computer science.
I have been fascinated by technology and its ability to address complicated issues since I was young.
Because of this enthusiasm, I decided to study computer science so that I could combine my passion for coding with my aim to
change the world through cutting-edge software solutions. <br> For me, coding is more than simply a hobby; it is my actual passion.
I get a great deal of satisfaction and excitement from using code to make ideas come to life.
I regularly push myself to learn new ideas and abilities as I work to increase my knowledge and proficiency in a variety of
programming languages and technologies.<br> Learning is a never-ending process in the ever changing world of technology.
I firmly believe in this method of thinking and am constantly looking for ways to improve my coding abilities.
I am always furthering my skills to stay at the forefront of the business, whether it be by investigating new coding languages,
frameworks, or working on personal projects. <br> I'm constantly eager to make new friends, work on exhilarating projects, and
discover new chances in the field of software engineering. Use the contact details on this page to get in touch with me if you have
any inqueries, suggestions, or simply want to say hello.</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('experience')">Experience</p>
<p class="tab-links" onclick="opentab('education')">Education</p>
</div>
<!---Experience tab contents-->
<div class="tab-contents active-tab" id="experience">
<ul>
<li><span>Projects</span><br>I have worked on a few projects which showcase my proficiency in C++, HTML,
CSS, Java Script as well as full stack projects using React, Type Script, and Node JS. I am very excited to add on to this list as I progress in this ever-evolving field.</li>
<li><span>School Work</span><br>I have achieved an A in Data Structures/Algorithms, Intro to C++ and Computer Organization/Architecture. I have no doubt that as I dive deeper into my studies, I will pick up skills
in more advanced subjects that will further my understanding of the complexity of coding by learning topics pertaining to Data
OOP, and Software Development.</li>
</ul>
</div>
<!---Education tab contents-->
<div class="tab-contents" id="education">
<ul>
<li><span>2018 - 2022</span><br>I attended James E. Taylor High School in
Katy Texas. Here I took elective classes relating to the field of Engineering
which sparked my interest in coding.
</li>
<li><span>2022 - Current</span><br>Currently attending the University of
Houston. I will graduate in the year 2026 with a degree in Computer Science.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!---skills----->
<div id="skills">
<div class="container">
<h1 class="sub-title">My Skills</h1>
<div class="skills-list">
<div>
<i class="fa-solid fa-code-branch"></i>
<h2>C++</h2>
<p>I have completed several projects using the C++ programming language successfully, demonstrating my proficiency in this area.
Through these projects as well as School classes like Data Structures/Algorithms and Computer Organization/Architecture, I continue to expand my understanding of C++. </p>
</div>
<div>
<i class="fa-regular fa-compass"></i>
<h2>Type Script</h2>
<p>I have intermediate Type Script coding abilities, which allow me to develop dynamic and interesting Full Stack projects with the inclusion of various Api's like Sentry, Posthog, Upstash, and many more.
I have improved my Type Script coding skills via lessons and projects, and I have a firm grasp of its fundamental ideas and functionalities.</p>
</div>
<div>
<i class="fa-solid fa-paintbrush"></i>
<h2>React</h2>
<p>I am an intermediate coder with React, which enables me to produce aesthetically attractive and responsive web designs and develop dynamic and interesting Full Stack projects with the inclusion of various frameworks and libraries like Node JS and Type Script.
I have developed my skills to efficiently style and improve the presentation of web pages thanks to a solid
understanding of React fundamentals and practices.</p>
</div>
</div>
</div>
</div>
<!----projects---->
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Projects</h1>
<div class="project-list">
<div class="projects">
<img src="images/netflix.jpg">
<div class="layer">
<h3>Netflix Clone</h3>
<p>A Netflix clone built with React, MongoDB, and various APIs for dynamic content.</p>
<div class="link-container">
<a href="https://netflix-clone-jhzc.onrender.com" class="link-right">
<i class="fa-solid fa-up-right-from-square"></i>
</a>
<a href="https://github.com/ShayaanQ/Netflix-Clone" class="link-left">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
<div class="projects">
<img src="images/ai.jpg">
<div class="layer">
<h3>SynthSpeak</h3>
<p>an interactive chat bot clone utilizing the OpenAI API for real-time conversations.</p>
<div class="link-container">
<a href="https://synth-speak.vercel.app" class="link-right">
<i class="fa-solid fa-up-right-from-square"></i>
</a>
<a href="https://github.com/ShayaanQ/SynthSpeak" class="link-left">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
<div class="projects">
<img src="images/video.jpg">
<div class="layer">
<h3>CasualConf</h3>
<p>A video conferencing app. Provides a smooth, engaging user experience for creating, scheduling, joining, and recording meetings.
</p>
<div class="link-container">
<a href="https://casual-conf.vercel.app" class="link-right">
<i class="fa-solid fa-up-right-from-square"></i>
</a>
<a href="https://github.com/ShayaanQ/CasualConf" class="link-left">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
</div>
<!---- <a href="#" class="btn">See more</a> -->
</div>
</div>
<!--contact-->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-paper-plane"></i>shayaanqureshi25@gmail.com</p>
<p id="phone-text"><i class="fa-solid fa-phone-volume"></i>(832)-732-7082</p>
<div class="social-icons">
<a href="https://www.instagram.com/shayaan_q/ "><i class="fa-brands fa-square-instagram"></i></a>
<a href="https://www.linkedin.com/in/shayaan-qureshi-257725251/"><i class="fa-brands fa-linkedin"></i></a>
</div>
<a href="images/Resume.pdf" download class="btn btn2">View My Resume</a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Name" required>
<input type="email" name="Email" placeholder="Email" required>
<textarea name="Message" rows="6" placeholder="Message"></textarea>
<button type="submit" class="btn btn2">Send</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
<div class="copyright">
<footer>© Copyright 2023.<br>All rights reserved. Powered by Shayaan Q. <i class="fa-solid fa-chess-knight"></i></footer>
</div>
</div>
<script>
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementsByClassName("tab-contents");
function opentab(tabname){
for(tablink of tablinks){
tablink.classList.remove("active-link")
}
for(tabcontent of tabcontents){
tabcontent.classList.remove("active-tab")
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
<script>
var sidemenu = document.getElementById("sidemenu");
function openmenu(){
sidemenu.style.right = "0";
}
function closemenu(){
sidemenu.style.right = "-200px";
}
</script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbxF---3ayf2WUolEBoxMlLPwYhfSitySB5aKJ3L9tro6DqDn67BHIysbQjfqliNTIeH/exec'
const form = document.forms['submit-to-google-sheet']
const msg = document.getElementById("msg")
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
msg.innerHTML = "Message Sent Successfully!"
setTimeout(function(){
msg.innerHTML = ""
}, 5000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.16/typed.umd.js" integrity="sha512-+2pW8xXU/rNr7VS+H62aqapfRpqFwnSQh9ap6THjsm41AxgA0MhFRtfrABS+Lx2KHJn82UOrnBKhjZOXpom2LQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/script.js"></script>
</body>
</html>