-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
223 lines (213 loc) · 10.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="b_4PJe99FPML4HW_dUvsTAEp4qD8SGbZz-1WpSs8eFY" />
<meta name="description" content="Zaid Sunasra's portfolio showcasing web development and creative solutions. Explore my skills in JavaScript, React, Node.js, Python.">
<meta name="author" content="Zaid Sunasra">
<meta name="keywords" content="Zaid Sunasra, portfolio, web developer, JavaScript, React, Node.js, Databse, projects">
<meta name="robots" content="follow, index">
<meta property="og:title" content="Zaid Sunasra's Portfolio">
<meta property="og:type" content="website">
<meta property="og:url" content="https://zaidsunasra.github.io/Zaid_Sunasra/">
<link rel="canonical" href="https://zaidsunasra.github.io/Zaid_Sunasra/">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@30,400,0,0" />
<link rel="stylesheet" href="style.css">
<title>Zaid Sunasra</title>
</head>
<body>
<nav>
<div class="logo"><a href="">Zaid Sunasra</a></div>
<span class="material-symbols-outlined hamburger"> menu </span>
<div class="links">
<a href="#home">Home</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</div>
</nav>
<section id="home">
<canvas id="playground"></canvas>
<div class="social-links">
<div class="slink"><a href="https://github.com/ZaidSunasra"><img src="assets/github-142-svgrepo-com.svg"
alt="Github icon"></a></div>
<div class="slink"><a href="https://www.linkedin.com/in/zaid-sunasra/"><img
src="assets/linkedin-161-svgrepo-com.svg" alt="Linkedin Icon"></a></div>
</div>
<div class="intro">
<h1>Hey, I'm Zaid Sunasra</h1>
<p>A passionate web developer dedicated to transforming ideas into reality.</p>
<button onclick="downloadCV()"> Download CV </button>
</div>
</section>
<section id="skills">
<h2>Skills</h2>
<div class="skills-list">
<div class="skill-card">
<div class="skill-icon">
<img src="assets/html-5-svgrepo-com.svg" alt="HTML icon">
</div>
<div class="skill-name">HTML</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/css-3-svgrepo-com.svg" alt="CSS icon">
</div>
<div class="skill-name">CSS</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/tailwind-svgrepo-com.svg" alt="Tailwind CSS icon">
</div>
<div class="skill-name">Tailwind CSS</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/javascript-logo-svgrepo-com.svg" alt="Javascript icon">
</div>
<div class="skill-name">JavaScript</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/typescript-svgrepo-com.svg" alt="TypeScript icon">
</div>
<div class="skill-name">TypeScript</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/reactjs-svgrepo-com.svg" alt="React.js icon">
</div>
<div class="skill-name">React.js</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/nodejs-svgrepo-com.svg" alt="Node.js icon">
</div>
<div class="skill-name">Node.Js</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/express-svgrepo-com.svg" alt="Express.js icon">
</div>
<div class="skill-name">Express.Js</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/postgresql-svgrepo-com.svg" alt="PostgreSQL icon">
</div>
<div class="skill-name">PostgreSQL</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/mongodb-svgrepo-com.svg" alt="MongoDB icon">
</div>
<div class="skill-name">MongoDB</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/git-svgrepo-com.svg" alt="Git icon">
</div>
<div class="skill-name">Git</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/python-svgrepo-com.svg" alt="Python icon">
</div>
<div class="skill-name">Python</div>
</div>
<div class="skill-card">
<div class="skill-icon">
<img src="assets/c.svg" alt="C++ icon">
</div>
<div class="skill-name">C++</div>
</div>
</div>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="projects-list">
<div class="project-card">
<div class="project-img"> <img src="assets/play-game-svgrepo-com.svg" alt="Mini Game Icon"></div>
<div class="project-content">
<div class="project-name"> Mini Games</div>
<div class="project-description">A fun website containing games to play with friends. It contains games like Wordle, Simon says, handcricket, etc.</div>
<div class="project-link"> <a href="https://zaidsunasra.github.io/Mini-Games/"> Visit Website </a>
</div>
</div>
</div>
<div class="project-card">
<div class="project-img"> <img src="assets/budget_781760.png" alt="Expense Tracker Icon"></div>
<div class="project-content">
<div class="project-name"> Budget Buddy </div>
<div class="project-description">An expense tracker app for user to manage, visulaize their expenses. Features include CRUD operation on expenses, visualization of expenses, etc. Not deployed yet will be soon deployed for user use.</div>
<div class="project-link"> <a href="https://github.com/ZaidSunasra/Budget-Buddy"> Visit Repo </a>
</div>
</div>
</div>
<div class="project-card">
<div class="project-img"> <img src="assets/dating-app.jpg" alt="Dating App Gui"></div>
<div class="project-content">
<div class="project-name">Destine Dating App</div>
<div class="project-description">A python dating application which matches user with other user of similar choices. GUI made from tkinter. Unfortunately cannot deploy it anywhere.</div>
<div class="project-link"> <a href="https://github.com/ZaidSunasra/Destine_Dating_App"> Visit Repo </a></div>
</div>
</div>
<div class="project-card">
<div class="project-img"> <img src="assets/playfair-algo.png" alt="Playfair Algo Icon"></div>
<div class="project-content">
<div class="project-name"> Play fair Algorithm</div>
<div class="project-description">Implementation of Playfair Cipher Algorithm. Converts a text provided by user into a cipher using playfair algo. Contains animation to show working of playfair algorithm for better understanding.</div>
<div class="project-link"> <a href="https://zaidsunasra.github.io/Play-Fair-Algorithm/"> Visit Website </a></div>
</div>
</div>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Feel free to Contact me by submitting the form below and I will get back to you as soon as possible</p>
<form action="mailto:zaidsunasra26@gmail.com" method="post" enctype="text/plain">
<div class="form-component">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter Your Name" autocomplete="name">
</div>
<div class="form-component">
<label for="email">E mail</label>
<input type="email" name="email" id="email" placeholder="Enter Your Email" autocomplete="email">
</div>
<div class="form-component">
<label for="message">Enter message</label>
<textarea name="message" id="message" rows="5" placeholder="Message"></textarea>
</div>
<button type="submit">Submit</button>
</form>
</section>
<section id="footer">
<div class="footer-wrap">
<div class="footer-name">
<h3>Zaid Sunasra</h3>
</div>
<div class="footer-links">
<div class="footer-text">SOCIAL</div>
<div class="footer-link">
<div class="link-wrap">
<a href="https://github.com/ZaidSunasra"><img src="assets/github-142-svgrepo-com.svg"
alt="Github icon"></a>
</div>
<div class="link-wrap">
<a href="https://www.linkedin.com/in/zaid-sunasra/"><img src="assets/linkedin-161-svgrepo-com.svg"
alt="Linked icon"></a>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="copyright-img">
<img src="assets/copyright-svgrepo-com.svg" alt="Copyright icon">
</div>
<div class="copyright-text"> Copyright 2024. Made by Zaid Sunasra</div>
</div>
</section>
<script src="index.js"></script>
</body>
</html>