-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (177 loc) · 8.17 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
<!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>Ankita Zaveri's Portfolio</title>
<link href = "css/style.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Oxygen&family=Oxygen+Mono&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
</head>
<body>
<!-- Introductory Navigation bar -->
<nav>
<ul>
<li>
<h1> <a href="index.html">
<span class="fas fa-hiking spin" aria-hidden = "true"></span></span>
<span>Ankita Zaveri</span>
</a>
<h1>
</li>
<li><a href="#projects">Projects</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="https://www.linkedin.com/in/ankitazaveri/" target="_blank"><span class="fab fa-linkedin" aria-hidden="true"></span>
<span class="sr-only">LinkedIn</span></a></li>
<li><a href="https://medium.com/@ankitazaveri.dev" target="_blank"><span class="fab fa-medium" aria-hidden="true"></span>
<span class="sr-only">MediumPost</span></a></li>
<li><a href="https://github.com/Marcellia" target="_blank"> <span class="fab fa-github-square" aria-hidden="true"></span>
<span class="sr-only">Github</span></a></li>
<li><a href="./Ankita Zaveri (1).docx.pdf" download target="_blank" class = "button">Resume</a></li>
</ul>
</nav>
<!-- Introductory text -->
<section id ="intro">
<p class="name inlineTypeEffect" id="typeEffect"> </p><p id="blinkingCursor" class = "inlineTypeEffect blinker">|</p>
<p class="name"> <span id="nameEffect"></span><span id ="secondCursor" class ="blinker"></span></p>
<h>I am a Full-Stack Developer</h>
<p>I'm specializing in user experience, HTML, CSS, JavaScript, ReactJS and NodeJS</p>
<p>I recently completed my Bootcamp at the <a href = "https://frontendmasters.com/bootcamp/" target="blank"> the FrontendMasters </a>, and am making a career switch from Risk Management & Operations to Software Development</p>
</section>
<div class = gradient-box> <div style=width:5% class=gradient data-index="gradient"></div></div>
<!-- Projects -->
<div class="section-blue">
<section id="projects">
<h2>Projects I'm proud of</h2>
<!-- First project -->
<article>
<div class="text">
<h4></h4>
<h3>Feed A Mole</h3>
<p class="blackbox">Feed a mole is an interactive game where you feed a mole to earn points, earn at least 10 points within 30 seconds to win the game. <a style="font-size:larger;" href="https://marcellia.github.io/feedamole/" target="_blank"> Let's feed the Moles </a> </p>
<h4>Technologies used include</h4>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul>
<li style="font-size:larger;"> <a href="https://marcellia.github.io/feedamole/" target="_blank">Live</a> </li>
<li style="font-size:larger;"><a href="https://github.com/Marcellia/feedamole" target="_blank">Github</a></li>
</ul>
</div>
<img src="FeedAMole.png" alt="Screenshot of Feed a Mole Game." />
</article>
<!-- Second project -->
<article class="reverse">
<div class="text">
<h4></h4>
<h3>CatsPaw-Woof Pet Store</h3>
<p class="blackbox">
Pet store is an illustrative website for users considering pet adoption. The site allows
users to view animals available for adoption and learn more about them.
<a style="font-size:larger;" href="https://marcellia.github.io/catpawswoof/" target="_blank"> Adopt a pet! </a>
</p>
<h4>Technologies used include:</h4>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>ReactJS</li>
</ul>
<ul>
<li style="font-size:larger;"> <a href="https://marcellia.github.io/catpawswoof/" target="_blank">Live</a> </li>
<li style="font-size:larger;"><a href="https://github.com/Marcellia/catpawswoof" target="_blank">Github</a></li>
</ul>
</div>
<img src="./CatPaws & woof.png" alt="Screenshot of the CatPaws & woof website." />
</article>
<!-- Third project -->
<article>
<div class="text">
<h4></h4>
<h3>Enlighten-Moi</h3>
<p class="blackbox">
Enlighten-moi is an application that exhibits my photography and generates random adage/quotes.
<a style="font-size:larger;" href="https://marcellia.github.io/random-quote-generator/" target="_blank">Get Enlightened</a>
</p>
<h4>Technologies used include:</h4>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>ReactJS</li>
</ul>
<ul>
<li style="font-size:larger;"> <a href="https://marcellia.github.io/random-quote-generator/" target="_blank">Live</a> </li>
<li style="font-size:larger;"><a href="https://github.com/Marcellia/random-quote-generator" target="_blank">Github</a></li>
</ul>
</div>
<img src="./Enlighten-moi1.png" alt="Screenshot of the Enlighten-Moi website." />
</article>
<!-- Fourth project -->
<!-- <article class="reverse">
<div class="text">
<h4></h4>
<h3>Calculator</h3>
<p class="blackbox">
Basic calculator for math with addition, subtraction, division, and multiplication.
<a style="font-size:larger;" href=https://marcellia.github.io/calculator/ target="_blank"> Use Calculator! </a>
</p>
<h4>Technologies used include:</h4>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul>
<li style="font-size:larger;"> <a href="https://marcellia.github.io/feedamole/" target="_blank">Live</a> </li>
<li style="font-size:larger;"><a href="https://marcellia.github.io/feedamole/" target="_blank">Github</a></li>
</ul>
</div>
<img src="./calculator.png" alt="Screenshot of the calculator website." />
</article> -->
</section>
</div>
<div class=gradient></div>
<!-- contact -->
<div class="section-plum">
<section id = "contact">
<h2>Contact me</h2>
<p>I'm always interested in hearing about new job opportunities, website development projects, and design work.</p>
<h4> <a href="mailto:[email protected]" target="_blank" class = "button">Email me</a></h4>
</section>
</div>
<div class=gradient></div>
<!-- Footer -->
<footer>
<h2>Ankita Zaveri · Software Developer </h2>
<ul>
<li>
<a href= "https://www.linkedin.com/in/ankitazaveri/" target="_blank">
<span class="fab fa-linkedin" aria-hidden="true"></span>
<span class="sr-only">LinkedIn</span>
</a>
</li>
<li><a href="https://medium.com/@ankitazaveri.dev" target="_blank"><span class="fab fa-medium" aria-hidden="true"></span>
<span class="sr-only">MediumPost</span></a></li>
<li>
<a href=https://github.com/Marcellia target="_blank">
<span class="fab fa-github-square" aria-hidden="true"></span>
<span class="sr-only">Github</span>
</a>
</li>
<li>
<a href="mailto:[email protected]" target="_blank">
<span class="fas fa-envelope" aria-hidden="true"></span>
<span class="sr-only">Email</span>
</a>
</li>
</ul>
<p><small>© 2021 Ankita Zaveri. All rights reserved.</small></p>
</footer>
<script src="about.js"></script>
</body>
</html>