-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
221 lines (200 loc) · 12.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
</head>
<body>
<div class="space-y-12 bg-black dark:text-gray-100">
<!-- Navbar -->
<nav class="bg-white dark:bg-black sticky w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="#" class="flex items-center">
<img src="icon.png" class="h-8 mr-3 lg:translate-x-10" alt="Flowbite Logo">
</a>
<div class="flex md:order-2">
<button data-collapse-toggle="navbar-sticky" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-sticky" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1 lg:translate-x-60" id="navbar-sticky">
<ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-black md:dark:bg-black dark:border-black">
<li>
<a href="#home" class="block py-2 pl-3 pr-4 text-white bg-black rounded md:bg-transparent md:text-orange-400 md:p-0 md:dark:text-orange-400" aria-current="page">Home</a>
</li>
<li>
<a href="#about" class="block py-2 pl-3 pr-4 text-white rounded md:hover:text-orange-400 md:p-0 md:dark:hover:text-orange-400 ">About</a>
</li>
<li>
<a href="#projects" class="block py-2 pl-3 pr-4 text-white rounded md:hover:text-orange-400 md:p-0 md:dark:hover:text-orange-400">Projects</a>
</li>
</ul>
</div>
</div>
</nav>
<!--hero section -->
<!-- 1. introduction -->
<section id="home"
class="flex flex-col-reverse sm:flex-row sm:justify-between lg:min-h-screen px-8 sm:px-16 py-4 max-w-screen-xl mx-auto ">
<!-- left side -->
<div class="sm:w-3/5">
<p class="greeting font-semibold">Hello, this is</p>
<h2 class="text-4xl lg:text-5xl xl:text-6xl font-bold mt-3 lg:mt-7 name">Prazzwal Anand</h2>
<p class="mt-6 lg:mt-10 max-w-md text-2xl edu leading-10">
<span class="name"> Junior Undergraduate,</span> <br>
<span>
Electrical Engineering,</span> <br>
<span>
IIT BHU, Varanasi
</span>
</p>
<br>
<a href="https://www.gmail.com">
<button type="button" class="text-orange-400 hover:text-white border border-orange-400 hover:bg-orange-500 focus:ring-4 focus:outline-none focus:ring-orange-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-orange-300 dark:text-orange-400 dark:hover:text-white dark:hover:bg-orange-400 dark:focus:ring-orange-900">Resume</button>
</a>
</div>
<!-- right side -->
<div class="image hidden md:block sm:w-2/5">
<img src="img3.jpg " alt="hero-img" class="custom-shape">
</div>
</section>
<!-- 2. About Me -->
<div class="py-16 " id="about">
<div class="xl:container m-auto px-6 text-gray-600 md:px-12 xl:px-16">
<div class="lg:bg-gray-50 dark:lg:bg-black lg:p-16 rounded-[4rem] space-y-6 md:flex flex-row-reverse md:gap-6 justify-center md:space-y-0 lg:items-center">
<div class="md:7/12 lg:w-1/2">
<h2 class="text-3xl font-bold text-orange-400 md:text-5xl dark:text-green-400">
About Me
</h2>
<p class="my-8 text-gray-600 dark:text-gray-300">
Sophomore in Electrical Engineering at IIT BHU Varanasi. My deep interest lies in Web Development with deep knowledge of javascript and React. I am always eager to learn the new pluggings and updates in the field of Web development.
I am also very passionate about competetive problem solving. My hobby includes watching anime.
</p>
</div>
</div>
</div>
</div>
<!-- 3. Skills -->
<section class="m-4 p-6 md:m-8 dark:bg-black dark:text-gray-100 translate-y-[-16]">
<div class="container mx-auto p-4 my-6 space-y-2 text-center">
<h2 class="text-5xl font-bold">Skills</h2><br>
</div>
<div class="container mx-auto grid justify-center gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div class="flex flex-col items-center p-4">
<img src="html icon.png" alt="">
</div>
<div class="flex flex-col items-center p-4">
<img src="cssicon.png" alt="">
</div>
<div class="flex flex-col items-center p-4">
<img src="jsicon.png" alt="">
</div>
<div class="flex flex-col items-center p-4">
<img src="reacticon.png" alt="">
</div>
<div class="flex flex-col items-center p-4">
<img src="tailwindicon.png" alt="">
</div>
<div class="flex flex-col items-center p-4">
<img src="cpp_icon.png" alt="">
</div>
</div>
</section>
<!-- 4.Projects -->
<section class="p-6 dark:bg-black dark:text-gray-100 translate-y-20" id="projects">
<div class="container mx-auto">
<h2 class="text-5xl font-bold text-center dark:text-gray-50">Projects</h2>
<div class="grid gap-6 my-16 justify-center">
<div class="flex flex-col p-8 space-y-4 rounded-md dark:bg-gray-900">
<p class="text-2xl font-semibold justify-center ">
<h5 class = "text-orange-400">Web Development</h5>
<b class="text-3xl text-green-400">ShareHub</b>
<p class="text-1.4rem">This is the website created to get an <br> update regarding the stocks, bonds value <br> and it also comes with some features like <br> purchasing and selling the stocks, bonds <br>and mutual funds.</p>
<a
href="https://sharehub-6s7v.vercel.app/"
class="relative mx-auto flex h-10 w-10 items-center justify-center before:absolute before:inset-0 before:rounded-full before:border before:border-gray-100 dark:before:border-gray-600 before:transition before:duration-300 group-hover:before:scale-125"
>
<span class="text-primary">→</span>
</a>
</p>
</div>
</div>
</div>
</section>
<!-- 5. Footer -->
<footer class="w-full bg-black py-16">
<div class="md:px-12 lg:px-28">
<div class="container m-auto space-y-6 text-gray-600 dark:text-gray-300">
<img src="piconnew.png" alt="" class="m-auto " />
<ul
role="list"
class="flex flex-col items-center justify-center gap-4 py-4 sm:flex-row sm:gap-8">
<li role="listitem"><a href="#home" class="hover:text-primary">Home</a></li>
<li role="listitem"><a href="#about" class="hover:text-primary">About</a></li>
<li role="listitem"><a href="#projects" class="hover:text-primary">Projects</a></li>
</ul>
<div class="m-auto flex w-max items-center justify-between space-x-4">
<a href="tel:+243996660436" aria-label="call">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="m-auto w-5"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"
></path>
</svg>
</a>
<a href="mailto:[email protected]" aria-label="send mail">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="m-auto w-5"
viewBox="0 0 16 16"
>
<path
d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"
></path>
</svg>
</a>
<a href="#" title="facebook" target="blank" aria-label="facebook">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="m-auto w-5"
viewBox="0 0 16 16"
>
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"
></path>
</svg>
</a>
<a href="#" title="linkedin" target="blank" aria-label="linkedin">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="m-auto w-5"
viewBox="0 0 16 16"
>
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"
></path>
</svg>
</a>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>