-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
304 lines (199 loc) · 15.6 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
298
299
300
301
302
303
304
<!-- Made by Shrey Shingala -->
<!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>Shrey's Portfolio</title>
<link rel="stylesheet" href="cssfolder/main.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<link rel="icon" type="image/jpg" href="Images/Shrey.jpg">
</head>
<body>
<!-- NAVBAR -->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!-- END OF NAVBAR -->
<!-- LANDING PAGE -->
<section class="hero">
<div class="main-info">
<h1>Shrey Shingala</h1>
<a href="#about" class="btn about">About Me</a>
<a href="#skills" class="btn skills">Skills</a>
<a href="#references" class="btn">References</a>
</div>
<h3>Super Cool Highschool Student</h3> <!-- little part at bottom left -->
<div class="blobby one"></div>
<div class="blobby two"></div>
<div class="blobby three"></div>
<div class="blobby four"></div>
<div class="blobby five"></div>
<div class="blobby six"></div>
<div class="blobby seven"></div>
</section>
<!-- END OF LANDING PAGE -->
<!-- ABOUT SECTION -->
<section id = "about" class="about">
<div class="about-container js-scroll">
<img class="Shrey" src="Images/Shrey.jpg" alt="Picture of Shrey">
<div class="blobby eight"></div>
<div class="blobby nine"></div>
<div class="blobby ten"></div>
<div class="text">
<h1>About Me</h1>
<div class="line"></div>
<h3>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error nesciunt tenetur odit, similique eius iure. Dicta corrupti eaque provident eveniet quaerat, temporibus eius laboriosam a ipsa quisquam qui sapiente, suscipit, omnis asperiores repellat molestiae dolorum! Vel facilis repellendus obcaecati cum perferendis, molestias voluptatem velit alias perspiciatis eos ea fugit veritatis optio labore ad harum adipisci, excepturi voluptate repellat reiciendis. Saepe accusamus, voluptates, adipisci enim qui maxime quibusdam dolorem rerum fuga cumque iusto quo delectus unde, itaque corrupti dolorum id blanditiis sunt voluptate earum veritatis! Aut, officiis accusamus. Alias totam voluptatum aliquam delectus, facilis itaque doloribus laboriosam enim ut officia non.</h3>
</div>
</div>
</section>
<!-- END OF ABOUT SECTION -->
<!-- SKILLS SECTION -->
<section id = "skills" class="skills">
<h1>Skills</h1>
<div class="skills-container">
<div class="skills-container">
<div class="row one js-scroll">
<div id = "python" class="python skill">
<a href="https://www.python.org"><img src="images/python.svg" alt="Python Logo"></a>
<h3>Python</h3>
<h5>Lorem ipsum dolor sit amet conseorem ipsum dolor sit amet conseorem ipsum dolor sit amet conseorem ipsum dolor sit amet conseorem ipsum dolor sit amet conseorem ipsum dolor sit amet conseorem ipsum dolor sit amet conse laboriosam! Quasi at ex laborum molestias repudiandae officiis assumenda aliqua. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, velit iusto vitae officia harum vero. Quo obcaecati harum a aut molestias ipsam, sunt ratione inventore quidem sapiente, voluptates incidunt vel maxime quibusdam exercitationem ad eius nobis beatae odio. Quaerat repellat unde doloremque laboriosam commodi sint, minima minus veritatis alias nostrum? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore eius repellat, commodi quisquam est tenetur ex consequatur asperiores officiis minima! Repellendus nisi voluptas eum at, impedit perferendis obcaecati! Officia assumenda voluptatibus repudiandae officiis ex iure aliquid deserunt beatae, quas est? Saepe pariatur maxime commodi optio reprehenderit corrupti excepturi enim ut. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates expedita dolorem tenetur incidunt nam sit commodi, quam quia facere assumenda cum odio placeat consequatur minus omnis eaque porro. Suscipit neque quod aspernatur, vel praesentium repellendus fuga reiciendis ipsum asperiores accusantium hic dolores cupiditate maiores omnis magni exercitationem ducimus perferendis consequatur libero nihil fugiat esse delectus! Fugiat odio voluptate perferendis repellendus? Quidem eveniet alias laborum dolorem, aspernatur voluptatem voluptatum modi, earum distinctio fuga voluptates perferendis saepe quibusdam incidunt enim quisquam tempora cumque debitis expedita? Quibusdam ad sint hic, iusto voluptate neque corrupti aspernatur eum minus nostrum dicta, laudantium veritatis fuga maiores!</h5>
<img id = "expand" class = "expand" src="Images/down-arrow.svg" alt="expand" onclick="expand('python')">
<img id = "shrink" class = "shrink" src="Images/down-arrow.svg" alt="shrink" onclick="shrink('python')">
</div>
<div id = "html" class="html skill">
<a href="https://html.spec.whatwg.org/multipage/"><img src="images/html5.svg" alt="HTML5 Logo"></a>
<h3>HTML5</h3>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta minus fugiat unde placeat, debitis eveniet hic ex rem repellendus alias praesentium. Placeat, doloribus laboriosam! Quasi at ex laborum molestias repudiandae officiis assumenda aliquam culpa? Tempore non optio ipsam, sunt eligendi vel saepe illo repellat. Tempore, officia minus. Id excepturi beatae ipsum enim libero repellendus. Atque praesentium quibusdam nam, est architecto porro debitis quo voluptatum repellendus animi quasi magnam error expedita dicta dignissimos laudantium odit tempore.</h5>
<img id = "expand" class = "expand" src="Images/down-arrow.svg" alt="expand" onclick="expand('html')">
<img id = "shrink" class = "shrink" src="Images/down-arrow.svg" alt="shrink" onclick="shrink('html')">
</div>
<div class="css skill">
<a href="https://www.w3.org/Style/CSS/Overview.en.html"><img src="images/CSS.svg" alt="CSS Logo"></a>
<h3>CSS3</h3>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta minus fugiat unde placeat, debitis eveniet hic ex rem repellendus alias praesentium. Placeat, doloribus laboriosam! Quasi at ex laborum molestias repudiandae officiis assumenda aliquam culpa? Tempore non optio ipsam, sunt eligendi vel saepe illo repellat. Tempore, officia minus. Id excepturi beatae ipsum enim libero repellendus. Atque praesentium quibusdam nam, est architecto porro debitis quo voluptatum repellendus animi quasi magnam error expedita dicta dignissimos laudantium odit tempore.</h5>
<img id = "expand" class = "expand" src="Images/down-arrow.svg" alt="expand" onclick="expand('css')">
<img id = "shrink" class = "shrink" src="Images/down-arrow.svg" alt="shrink" onclick="shrink('css')">
</div>
</div>
<div class="row two js-scroll">
<div class="js skill">
<a href="https://www.javascript.com"><img src="images/jslogo.svg" alt="Javascript Logo"></a>
<h3>Javascript</h3>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta minus fugiat unde placeat, debitis eveniet hic ex rem repellendus alias praesentium. Placeat, doloribus laboriosam! Quasi at ex laborum molestias repudiandae officiis assumenda aliquam culpa? Tempore non optio ipsam, sunt eligendi vel saepe illo repellat. Tempore, officia minus. Id excepturi beatae ipsum enim libero repellendus. Atque praesentium quibusdam nam, est architecto porro debitis quo voluptatum repellendus animi quasi magnam error expedita dicta dignissimos laudantium odit tempore.</h5>
<img id = "expand" class = "expand" src="Images/down-arrow.svg" alt="expand" onclick="expand('js')">
<img id = "shrink" class = "shrink" src="Images/down-arrow.svg" alt="shrink" onclick="shrink('js')">
</div>
<div class="unity skill">
<a href="https://unity.com"><img src="images/unity.svg" alt="Unity Logo"></a>
<h3>Unity</h3>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta minus fugiat unde placeat, debitis eveniet hic ex rem repellendus alias praesentium. Placeat, doloribus laboriosam! Quasi at ex laborum molestias repudiandae officiis assumenda aliquam culpa? Tempore non optio ipsam, sunt eligendi vel saepe illo repellat. Tempore, officia minus. Id excepturi beatae ipsum enim libero repellendus. Atque praesentium quibusdam nam, est architecto porro debitis quo voluptatum repellendus animi quasi magnam error expedita dicta dignissimos laudantium odit tempore.</h5>
<img id = "expand" class = "expand" src="Images/down-arrow.svg" alt="expand" onclick="expand('unity')">
<img id = "shrink" class = "shrink" src="Images/down-arrow.svg" alt="shrink" onclick="shrink('unity')">
</div>
<div class="java skill">
<a href="https://www.java.com/en/"><img src="images/java.svg" alt="Java Logo"></a>
<h3>Java</h3>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta minus fugiat unde placeat, debitis eveniet hic ex rem repellendus alias praesentium. Placeat, doloribus laboriosam! Quasi at ex laborum molestias repudiandae officiis assumenda aliquam culpa? Tempore non optio ipsam, sunt eligendi vel saepe illo repellat. Tempore, officia minus. Id excepturi beatae ipsum enim libero repellendus. Atque praesentium quibusdam nam, est architecto porro debitis quo voluptatum repellendus animi quasi magnam error expedita dicta dignissimos laudantium odit tempore.</h5>
<img id = "expand" class = "expand" src="Images/down-arrow.svg" alt="expand" onclick="expand('java')">
<img id = "shrink" class = "shrink" src="Images/down-arrow.svg" alt="shrink" onclick="shrink('java')">
</div>
</div>
</div>
</div>
</section>
<!-- End of skills section-->
<!-- REFRENCES SECTION -->
<section id = "references" class="references">
<h1>References</h1>
<h4 class="instruction"><em>(Hover over each refrence to view their quote about me)</em></h4>
<div class="references">
<div class="reference one js-scroll">
<div class="info">
<img src="Images/Shrey.jpg" alt="Refence person 1">
<div class="bio">
<h4><span>Name:</span> Shrey Shingala</h4>
<h4><span>Email:</span> [email protected]</h4>
<h4><span>Phone Number:</span> 123-456-7890</h4>
</div>
</div>
<div class="quote">
<div class="text">
<h5>"Shrey is very good. You should hire him this instant. He is super cool. Yes all of this information is 1000% accurate. Under no circumstance should you not hire him."</h5>
<h3>- Shrey Shingala</h3>
</div>
</div>
</div>
<div class="reference two js-scroll">
<div class="info">
<img src="Images/Shrey.jpg" alt="Refence person 2">
<div class="bio">
<h4><span>Name:</span> Krish Patel</h4>
<h4><span>Email:</span> [email protected]</h4>
<h4><span>Phone Number:</span> 098-765-4321</h4>
</div>
</div>
<div class="quote">
<div class="text">
<h5>"You should totaly hire Shrey right now. I mean it. You have to hire him. Trust me. You can trust me. Hire him. You must hire him. You have to."</h5>
<h3>- Krish Patel</h3>
</div>
</div>
</div>
<div class="reference three js-scroll">
<div class="info">
<img src="Images/Shrey.jpg" alt="Refence person 3">
<div class="bio">
<h4><span>Name:</span> Swara Shingala</h4>
<h4><span>Email:</span> [email protected]</h4>
<h4><span>Phone Number:</span> 111-222-3333</h4>
</div>
</div>
<div class="quote">
<div class="text">
<h5>"You should hire Shrey because he is super cool. Yes that's right he is super cool. So hire him right now."</h5>
<h3>- Swara Shingala</h3>
</div>
</div>
</div>
</div>
</section>
<!-- END OF REFRENCES SECTION -->
<!-- CONTACT SECTION -->
<section id = "contact" class="contact">
<h1>Contact Me</h1>
<div class="form-container js-scroll">
<form name = "Contact" action="https://formsubmit.co/24b29b31bef15a4ab536b2769902eaac" method="POST" class="form">
<label for="name">Name:</label>
<input type="text" id = "name" name = "name" required oninvalid="this.setCustomValidity('Please Enter Your Name Here')" oninput="this.setCustomValidity('')">
<label for="email">Email:</label>
<input type="email" id = "email" name = "email" required oninvalid="this.setCustomValidity('Please Enter Your Email Address Here')" oninput="this.setCustomValidity('')">
<label for="subject">Subject:</label>
<input type="text" id = "subject" name = "subject" required oninvalid="this.setCustomValidity('Please Enter the Subject of Your Email Here')" oninput="this.setCustomValidity('')">
<label for="message">Message:</label>
<textarea id="message" name = "message" cols="30" rows="10" required oninvalid="this.setCustomValidity('Please Enter the Message of Your Email Here')" oninput="this.setCustomValidity('')"></textarea>
<button type = "submit" class = "submit-btn">send email:</button>
</form>
</div>
</section>
<!-- END OF CONTACT SECTION -->
<!-- Footer -->
<footer>
<div class="js-scroll">
<h1>Copyright 2022 Shrey Shingala. All Rights Reserved.</h1>
<h6>Images and Icons sourced from <a href="https://pixabay.com">Pixabay</a>, <a href="https://www.pexels.com">Pexels</a>, and <a href="https://iconscout.com">Iconscout</a>.</h6>
</div>
</footer>
<!-- End of footer section -->
</body>
</html>
<!-- MORE BLOBS -->
<!-- ADD BUTTON OB ABOUT AND SKILLS THAT LEAD TO MORE ABOUT THEM
For skills maybe make it expand. Like add a more... that then exapnds it a lot of reveals it a whole lot more maybe use span to do this.
animate fadout for refrences sectiobn-->
<!-- Animate only once for menu, not animating multiple times, going from a diffrent webpage to contact doesn't show it. -->