-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
237 lines (226 loc) · 9.62 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
<!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>Yagnesh Patoriya</title>
<link rel="shortcut icon" href="Y.png" type="image/x-icon" />
<link rel="stylesheet" href="./output.css" />
</head>
<body class="text-white bg-black app pb-52">
<!-- NAVIGATION -->
<section
class="text-black bg-white w-[95%] mt-4 mx-auto rounded-lg p-2 h-[8vh] flex items-center"
>
<div class="flex justify-between px-5 md:px-10 grow">
<!-- NAVBAR CONTAINER -->
<div class="text-2xl font-bold">Yagnesh Patoriya</div>
<!-- NAVBAR -->
<div
class="items-center justify-end hidden gap-5 font-semibold md:flex"
>
<a class="press-3" href="#experience">Experience</a>
<a class="press-3" href="#project">Project</a>
<a class="press-3" href="#certification">Certifications</a>
<a class="press-3" href="#blog">Blog</a>
<a class="press-3" href="#social">Contact</a>
</div>
<!-- MENU ICON -->
<div
id="menu-icon"
class="md:hidden h-[30px] w-[30px] flex flex-col gap-y-[5px] items-center justify-center press-3"
>
<div class="h-[3px] w-full bg-black rounded-full"></div>
<div class="h-[3px] w-full bg-black rounded-full"></div>
<div class="h-[3px] w-full bg-black rounded-full"></div>
</div>
<!-- ASIDE -->
<div
class="fixed top-0 right-0 z-20 w-0 h-screen pt-20 overflow-hidden transition-all bg-white"
id="aside"
>
<div
class="flex flex-col items-center justify-end gap-10 font-semibold"
>
<a class="press-3" href="#">Experience</a>
<a class="press-3" href="#">Project</a>
<a class="press-3" href="#">Blog</a>
<a class="press-3" href="#">Contact</a>
</div>
</div>
<div
class="fixed top-0 right-0 z-10 w-0 h-screen backdrop-blur-sm"
id="overlay"
></div>
</div>
</section>
<!-- HERO -->
<section
class="h-[88vh] flex justify-center items-center flex-col opacity-0 transition duration-1000"
id="name"
>
<h1 class="text-5xl font-bold">Yagnesh Patoriya</h1>
<p>B.Tech Computer Engineering</p>
</section>
<!-- EXPERIENCE -->
<section
class="grid grid-cols-1 px-10 max-w-[800px] mx-auto md:grid-cols-2 mt-[20vh]"
id="experience"
>
<div class="mb-10 text-4xl font-bold">Experience</div>
<div class="">
<h1 class="text-2xl font-bold">DecodeCafe Community</h1>
<h2 class="font-bold">Social Media Manager</h2>
<p>
Responsible for creating content and engaging with community
with diverse background.
</p>
<h1 class="mt-10 text-2xl font-bold">Google Cloud</h1>
<h2 class="font-bold">Facilitator</h2>
<p>Enrolled university student to google cloud program</p>
</div>
</section>
<!-- PROJECT -->
<section
class="grid grid-cols-1 px-10 max-w-[800px] mx-auto md:grid-cols-2 mt-[40vh]"
id="project"
>
<div class="mb-10 text-4xl font-bold">Projects</div>
<div class="">
<h1 class="text-2xl font-bold">Property Management</h1>
<h2 class="font-bold">.NET WinForms</h2>
<p>
Created a desktop application for buying, renting and
selling properties. There are three modules user, broker and
admin. Broker can post the information about the property in
marketplace. User can view that listing and buy or rent from
there.
</p>
<h1 class="mt-10 text-2xl font-bold">
Medical Shop Management
</h1>
<h2 class="font-bold">Java Swing</h2>
<p>
It is dashboard in which all the functions of medical shop
is displayed. Search functionality with short description of
medicine with location of it. After placing order all
entries are stored in excel file.
</p>
</div>
</section>
<!-- Certifications -->
<section
class="grid grid-cols-1 px-10 max-w-[800px] mx-auto md:grid-cols-2 mt-[40vh]"
id="certification"
>
<div class="mb-10 text-4xl font-bold">Certifications</div>
<div class="">
<h1 class="text-2xl font-bold">CCNA: Cisco Networking</h1>
<div class="press-3">
<a href="#" class="font-bold underline"
>Click Here to verify</a
>
</div>
<h1 class="mt-5 text-2xl font-bold">Linux Server Management</h1>
<div class="press-3">
<a href="#" class="font-bold underline"
>Click Here to verify</a
>
</div>
<h1 class="mt-5 text-2xl font-bold">Cisco Packet Tracer</h1>
<div class="press-3">
<a href="#" class="font-bold underline"
>Click Here to verify</a
>
</div>
</div>
</section>
<!-- BLOG -->
<section
class="grid grid-cols-1 px-10 max-w-[800px] mx-auto md:grid-cols-2 mt-[40vh]"
id="blog"
>
<div class="mb-10 text-4xl font-bold">Blogs</div>
<div class="">
<h1 class="text-2xl font-bold">Blog Title 1</h1>
<p>Short description of Blog 1</p>
<button
class="px-4 py-2 mt-3 text-black bg-white rounded press-3"
>
More
</button>
<h1 class="mt-10 text-2xl font-bold">Blog Title 1</h1>
<p>Short description of Blog 1</p>
<button
class="px-4 py-2 mt-3 text-black bg-white rounded press-3"
>
More
</button>
<h1 class="mt-10 text-2xl font-bold">Blog Title 1</h1>
<p>Short description of Blog 1</p>
<button
class="px-4 py-2 mt-3 text-black bg-white rounded press-3"
>
More
</button>
</div>
</section>
<!-- Social Media -->
<section
class="grid grid-cols-1 px-10 max-w-[800px] mx-auto md:grid-cols-2 mt-[40vh]"
id="social"
>
<div id="social" class="mb-10 text-4xl font-bold">Social Media</div>
<div class="flex flex-col gap-5">
<a
href="https://twitter.com/YagneshTweet" target="_blank"
class="block press-3"
>
<img src="./assets/twitter.svg" class="w-[50px]" alt="" />
</a>
<a
href="https://www.linkedin.com/in/yagnesh-patoriya/" target="_blank"
class="block press-3"
>
<img src="./assets/linkedin.svg" class="w-[50px]" alt="" />
</a>
<a
href="https://github.com/yaggit" target="_blank"
class="block press-3"
>
<img src="./assets/github.svg" class="w-[50px]" alt="" />
</a>
</div>
</section>
<!-- Contect -->
<!-- <section
class="grid grid-cols-1 px-10 max-w-[800px] mx-auto md:grid-cols-2 mt-[40vh]"
id="contact"
>
<div class="mb-10 text-4xl font-bold">Contact</div>
<div class="">
<fieldset class="p-2 border border-white rounded">
<legend class="p-1 mx-2">Email Address</legend>
<input type="text" class="bg-transparent outline-none" />
</fieldset>
<fieldset class="p-2 border border-white rounded mt-7">
<legend class="p-1 mx-2">Subject</legend>
<input type="text" class="bg-transparent outline-none" />
</fieldset>
<fieldset class="p-2 border border-white rounded mt-7">
<legend class="p-1 mx-2">Body</legend>
<textarea
class="w-full bg-transparent outline-none"
name=""
id=""
cols="30"
rows="10"
></textarea>
</fieldset>
</div>
</section> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>