-
-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
254 lines (246 loc) · 23.9 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
<!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" />
<link rel="shortcut icon" href="assets/r.png" type="image/x-icon" />
<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=Poppins:wght@300;400;600;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<title>Rakesh | Portfolio</title>
</head>
<body>
<header>
<a href="#">
<nav>
<svg class="logoIcon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_6_6)">
<path
d="M18 36C8.05838 36 0 27.9416 0 18C0 8.05838 8.05838 0 18 0C27.9416 0 36 8.05838 36 18C36 27.9416 27.9416 36 18 36ZM11.8125 27.7178L15.7129 25.6793V12.0881L21.2839 15.2134L17.1056 17.388V21.8734L26.4375 28.125V23.9119L20.727 19.971L25.4633 17.5241V13.1749L15.7118 7.875L11.8125 9.9135V27.7178Z"
fill="#272727" />
</g>
<defs>
<clipPath id="clip0_6_6">
<rect width="36" height="36" fill="white" />
</clipPath>
</defs>
</svg>
</a>
<ul>
<li><a href="#" class="hover-animation">Home</a></li>
<li>
<a href="#projectsSection" class="hover-animation">Project</a>
</li>
<li>
<a href="#contactPage" class="hover-animation">Contact me</a>
</li>
</ul>
<div class="icons">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_6_80)">
<path
d="M10.3125 3H11.6875V6.4375H10.3125V3ZM14.9105 7.74375L17.3209 5.33337L18.293 6.3055L15.8826 8.71588L14.9105 7.74375ZM17.1875 11.9375H20.625V13.3125H17.1875V11.9375ZM14.9105 17.5063L15.8826 16.5348L18.293 18.9452L17.3209 19.9173L14.9105 17.5063ZM10.3125 18.8125H11.6875V22.25H10.3125V18.8125ZM3.70837 18.9445L6.11875 16.5341L7.09088 17.5063L4.68119 19.9166L3.70837 18.9445ZM1.375 11.9375H4.8125V13.3125H1.375V11.9375ZM3.70906 6.3055L4.68119 5.33337L7.09156 7.74375L6.11875 8.71588L3.70906 6.3055ZM11 8.5C10.1842 8.5 9.38663 8.74193 8.70827 9.19519C8.02992 9.64845 7.50121 10.2927 7.189 11.0464C6.87679 11.8002 6.7951 12.6296 6.95426 13.4297C7.11343 14.2299 7.50629 14.9649 8.08318 15.5418C8.66008 16.1187 9.39508 16.5116 10.1953 16.6707C10.9954 16.8299 11.8248 16.7482 12.5786 16.436C13.3323 16.1238 13.9766 15.5951 14.4298 14.9167C14.8831 14.2384 15.125 13.4408 15.125 12.625C15.125 11.531 14.6904 10.4818 13.9168 9.70818C13.1432 8.9346 12.094 8.5 11 8.5Z"
fill="#393939" />
</g>
<defs>
<clipPath id="clip0_6_80">
<rect width="22" height="22" fill="white" />
</clipPath>
</defs>
</svg>
<!-- //new -->
<a href="https://www.twitter.com/RakeshSangem8"><svg width="28" height="28" viewBox="0 0 28 28" fill="white"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14 0C6.26875 0 0 6.26875 0 14C0 21.7312 6.26875 28 14 28C21.7312 28 28 21.7312 28 14C28 6.26875 21.7312 0 14 0ZM20.7281 10.5531C20.7375 10.7 20.7375 10.8531 20.7375 11.0031C20.7375 15.5906 17.2438 20.875 10.8594 20.875C8.89062 20.875 7.06562 20.3031 5.52812 19.3188C5.80937 19.35 6.07813 19.3625 6.36563 19.3625C7.99063 19.3625 9.48438 18.8125 10.675 17.8813C9.15 17.85 7.86875 16.85 7.43125 15.475C7.96562 15.5531 8.44687 15.5531 8.99687 15.4125C8.21164 15.253 7.50586 14.8265 6.99943 14.2056C6.49299 13.5846 6.21715 12.8075 6.21875 12.0063V11.9625C6.67812 12.2219 7.21875 12.3812 7.78438 12.4031C7.30888 12.0862 6.91893 11.6569 6.6491 11.1532C6.37926 10.6495 6.23789 10.087 6.2375 9.51562C6.2375 8.86875 6.40625 8.27812 6.70938 7.76562C7.58095 8.83855 8.66853 9.71607 9.90145 10.3411C11.1344 10.9662 12.485 11.3249 13.8656 11.3938C13.375 9.03438 15.1375 7.125 17.2563 7.125C18.2563 7.125 19.1562 7.54375 19.7906 8.21875C20.575 8.07188 21.325 7.77812 21.9937 7.38437C21.7344 8.1875 21.1906 8.86562 20.4688 9.29375C21.1687 9.21875 21.8438 9.025 22.4688 8.75313C21.9969 9.44688 21.4062 10.0625 20.7281 10.5531V10.5531Z"
fill="black" />
</svg></a>
<a href="https://www.github.com/rakeshsangem"><svg width="28" height="28" viewBox="0 0 28 28" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.9749 8.34835e-05C10.6567 0.000530041 7.44691 1.1815 4.91967 3.33174C2.39243 5.48198 0.712627 8.46121 0.180751 11.7365C-0.351124 15.0118 0.299623 18.3695 2.01659 21.209C3.73355 24.0484 6.40472 26.1844 9.55227 27.2348C10.2511 27.3646 10.5506 26.9353 10.5506 26.5659V24.1899C6.66706 25.0285 5.84842 22.313 5.84842 22.313C5.57533 21.4572 5.00055 20.7299 4.23111 20.2664C2.96322 19.4078 4.33095 19.4178 4.33095 19.4178C4.77382 19.4804 5.19653 19.6433 5.5668 19.8942C5.93708 20.1451 6.24512 20.4773 6.4674 20.8654C6.8541 21.559 7.50041 22.0706 8.26424 22.2878C9.02807 22.5049 9.84687 22.4099 10.5406 22.0235C10.597 21.3151 10.9093 20.6515 11.4192 20.1566C8.32431 19.7972 5.05974 18.5992 5.05974 13.2481C5.0371 11.8583 5.55214 10.5134 6.49735 9.4943C6.06952 8.2905 6.11954 6.96847 6.63711 5.80044C6.63711 5.80044 7.80517 5.42107 10.4807 7.22807C12.7684 6.60406 15.1814 6.60406 17.4691 7.22807C20.1347 5.42107 21.3027 5.80044 21.3027 5.80044C21.8203 6.96847 21.8703 8.2905 21.4425 9.4943C22.3877 10.5134 22.9027 11.8583 22.8801 13.2481C22.8801 18.6191 19.6155 19.7972 16.5007 20.1466C16.8344 20.4848 17.0917 20.8906 17.2553 21.3366C17.4189 21.7826 17.485 22.2586 17.4491 22.7323V26.5659C17.4491 27.0252 17.6987 27.3746 18.4475 27.2348C21.5992 26.1831 24.2731 24.043 25.9898 21.1983C27.7065 18.3536 28.3536 14.9904 27.8152 11.7118C27.2768 8.43318 25.588 5.4536 23.0517 3.30736C20.5154 1.16111 17.2974 -0.0113949 13.9749 8.34835e-05V8.34835e-05Z"
fill="black" />
</svg></a>
</div>
</nav>
</header>
<section class="hero">
<div class="textSection">
<h3 class="name">Hello, I am <span style="color: #0774d9">Rakesh</span></h3>
<h1 class="job">FRONT-END DEVELOPER</h1>
<div class="description">
<p class="job-2">• Open Source Contributor</p>
<p class="job-1">• Freelancer</p>
</div>
<div class="CTA">
<button class="btn btn-1">
<a href="#contactPage">Let's get in touch!</a>
</button>
<!-- <button class="btn-outline btn-2">
<a href="">Check out my blog</a>
</button> -->
</div>
</div>
</section>
<!-- Skills -->
<section id="skillSection" class="skill">
<h3 class="skills">SKILLS</h3>
<ul class="skillsContainer">
<li style="color:#ff8800; --animation-order:1" class="styles_item__jBhft" ><svg stroke="currentColor" fill="currentColor"
stroke-width="0" role="img" viewBox="0 0 24 24" height="2em" width="2em" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z">
</path>
</svg>JavaScript
</li>
<li style="color:#0096c7; --animation-order:2" class="styles_item__jBhft" ><svg stroke="currentColor" fill="currentColor"
stroke-width="0" role="img" viewBox="0 0 24 24" height="2em" width="2em" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z">
</path>
</svg>React</li>
<li style="color:#d00000; --animation-order:3" class="styles_item__jBhft" ><svg stroke="currentColor" fill="currentColor"
stroke-width="0" role="img" viewBox="0 0 24 24" height="2em" width="2em" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z">
</path>
</svg>HTML5</li>
<li style="color:#0466c8; --animation-order:4" class="styles_item__jBhft" ><svg stroke="currentColor" fill="currentColor"
stroke-width="0" role="img" viewBox="0 0 24 24" height="2em" width="2em" xmlns="http://www.w3.org/2000/svg">
<title></title>
<path
d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z">
</path>
</svg>CSS3
</li>
<li style="color:#f94144; --animation-order:5" class="styles_item__jBhft" ><svg stroke="currentColor" fill="currentColor"
stroke-width="0" role="img" viewBox="0 0 24 24" height="2em" width="2em" xmlns="http://www.w3.org/2000/svg">
<title></title>
<path
d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187">
</path>
</svg>Git</li>
<li style="color:#9d56f7; --animation-order:6" class="styles_item__jBhft" ><svg stroke="currentColor" fill="currentColor"
stroke-width="0" role="img" viewBox="0 0 24 24" height="2em" width="2em" xmlns="http://www.w3.org/2000/svg">
<title></title>
<path
d="M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z">
</path>
</svg>Figma
</li>
<li style="color:#2fa3f7; --animation-order:7" class="styles_item__jBhft" ><svg stroke="currentColor" fill="currentColor"
stroke-width="0" role="img" viewBox="0 0 24 24" height="2em" width="2em" xmlns="http://www.w3.org/2000/svg">
<title></title>
<path
d="M9.85 8.42c-.37-.15-.77-.21-1.18-.2-.26 0-.49 0-.68.01-.2-.01-.34 0-.41.01v3.36c.14.01.27.02.39.02h.53c.39 0 .78-.06 1.15-.18.32-.09.6-.28.82-.53.21-.25.31-.59.31-1.03.01-.31-.07-.62-.23-.89-.17-.26-.41-.46-.7-.57zM19.75.3H4.25C1.9.3 0 2.2 0 4.55v14.899c0 2.35 1.9 4.25 4.25 4.25h15.5c2.35 0 4.25-1.9 4.25-4.25V4.55C24 2.2 22.1.3 19.75.3zm-7.391 11.65c-.399.56-.959.98-1.609 1.22-.68.25-1.43.34-2.25.34-.24 0-.4 0-.5-.01s-.24-.01-.43-.01v3.209c.01.07-.04.131-.11.141H5.52c-.08 0-.12-.041-.12-.131V6.42c0-.07.03-.11.1-.11.17 0 .33 0 .56-.01.24-.01.49-.01.76-.02s.56-.01.87-.02c.31-.01.61-.01.91-.01.82 0 1.5.1 2.06.31.5.17.96.45 1.34.82.32.32.57.71.73 1.14.149.42.229.85.229 1.3.001.86-.199 1.57-.6 2.13zm7.091 3.89c-.28.4-.671.709-1.12.891-.49.209-1.09.318-1.811.318-.459 0-.91-.039-1.359-.129-.35-.061-.7-.17-1.02-.32-.07-.039-.121-.109-.111-.189v-1.74c0-.029.011-.07.041-.09.029-.02.06-.01.09.01.39.23.8.391 1.24.49.379.1.779.15 1.18.15.38 0 .65-.051.83-.141.16-.07.27-.24.27-.42 0-.141-.08-.27-.24-.4-.16-.129-.489-.279-.979-.471-.51-.18-.979-.42-1.42-.719-.31-.221-.569-.51-.761-.85-.159-.32-.239-.67-.229-1.021 0-.43.12-.84.341-1.21.25-.4.619-.72 1.049-.92.469-.239 1.059-.349 1.769-.349.41 0 .83.03 1.24.09.3.04.59.12.86.23.039.01.08.05.1.09.01.04.02.08.02.12v1.63c0 .04-.02.08-.05.1-.09.02-.14.02-.18 0-.3-.16-.62-.27-.96-.34-.37-.08-.74-.13-1.12-.13-.2-.01-.41.02-.601.07-.129.03-.24.1-.31.2-.05.08-.08.18-.08.27s.04.18.101.26c.09.11.209.2.34.27.229.12.47.23.709.33.541.18 1.061.43 1.541.73.33.209.6.49.789.83.16.318.24.67.23 1.029.011.471-.129.94-.389 1.331z">
</path>
</svg>Photoshop
</li>
</ul>
<!-- <div class="chips-container">
<span class="chips">HTML5</span>
<span class="chips">CSS3</span>
<span class="chips">JavaScript</span>
<span class="chips">C++</span>
<span class="chips">Figma</span>
<span class="chips">Git</span>
<span class="chips">Github</span>
</div> -->
</section>
<!-- PROJECTS -->
<section id="projectsSection" class="projects">
<h3 class="watermark">PROJECTS</h3>
<h3 class="projectText">PROJECTS</h3>
<div class="project-cards">
<!-- <article class="project-card">
<div class="imageContainer">
<img src="./assets/bankist.png" alt="" />
</div>
<div class="project-details">
<h2>Bankist</h2>
<p>Bankist is an online platform where user can interact and access their bank account details and much more</p>
</div>
<div class="project-links">
<a href="https://www.github.com/RakeshSangem/bankist-application">Github</a>
<a href="https://bankist-application.vercel.app">Live site</a>
</div>
</article> -->
</div>
</section>
<!-- CONTACT -->
<section class="contact-page" id="contactPage">
<span class="projectText">GET IN TOUCH</span>
<article class="contact-container">
<div class="contact-info">
<div class="contact-info-content">
<h3 class="contact-info-heading">Contact</h3>
<p class="contact-info-text">Any questions or remarks? Just write me a message.</p>
</div>
<div class="contact-info-icons">
<a href="https://twitter.com/RakeshSangem8"><img src="./assets/twitter.svg" alt="" class="contact-icons"></a>
<a href="https://github.com/rakeshsangem"><img src="./assets/github.svg" alt="" class="contact-icons"></a>
<a href="https://www.linkedin.com/in/rakeshsangem"><img src="./assets/linkedin.svg" alt=""
class="contact-icons"></a>
</div>
</div>
<form action="" class="contact-form">
<div class="contact-name">
<label for="name" class="contact-label">Enter Name</label>
<input type="text" class="contact-input" id="name" name="name" placeholder="John Doe">
</div>
<div class="contact-email">
<label for="email" class="contact-label">Enter Email</label>
<input type="text" class="contact-input" id="email" name="email" placeholder="johndoe@gmail.com">
</div>
<div class="contact-message">
<label for="message" class="contact-label">Enter Message</label>
<textarea class="contact-input" id="message" rows="3"
placeholder="Hello Rakesh! I want to say that..."></textarea>
</div>
<button type="submit" class="contact-submit">
Send Message
<img src="./assets/send.svg" alt="send button icon" class="contact-send-icon">
</button>
</form>
</article>
</section>
<!-- FOOTER -->
<footer>
<div class="social">
<a href="https://www.github.com/rakeshsangem"><svg width="28" height="28" viewBox="0 0 28 28" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.9749 8.34835e-05C10.6567 0.000530041 7.44691 1.1815 4.91967 3.33174C2.39243 5.48198 0.712627 8.46121 0.180751 11.7365C-0.351124 15.0118 0.299623 18.3695 2.01659 21.209C3.73355 24.0484 6.40472 26.1844 9.55227 27.2348C10.2511 27.3646 10.5506 26.9353 10.5506 26.5659V24.1899C6.66706 25.0285 5.84842 22.313 5.84842 22.313C5.57533 21.4572 5.00055 20.7299 4.23111 20.2664C2.96322 19.4078 4.33095 19.4178 4.33095 19.4178C4.77382 19.4804 5.19653 19.6433 5.5668 19.8942C5.93708 20.1451 6.24512 20.4773 6.4674 20.8654C6.8541 21.559 7.50041 22.0706 8.26424 22.2878C9.02807 22.5049 9.84687 22.4099 10.5406 22.0235C10.597 21.3151 10.9093 20.6515 11.4192 20.1566C8.32431 19.7972 5.05974 18.5992 5.05974 13.2481C5.0371 11.8583 5.55214 10.5134 6.49735 9.4943C6.06952 8.2905 6.11954 6.96847 6.63711 5.80044C6.63711 5.80044 7.80517 5.42107 10.4807 7.22807C12.7684 6.60406 15.1814 6.60406 17.4691 7.22807C20.1347 5.42107 21.3027 5.80044 21.3027 5.80044C21.8203 6.96847 21.8703 8.2905 21.4425 9.4943C22.3877 10.5134 22.9027 11.8583 22.8801 13.2481C22.8801 18.6191 19.6155 19.7972 16.5007 20.1466C16.8344 20.4848 17.0917 20.8906 17.2553 21.3366C17.4189 21.7826 17.485 22.2586 17.4491 22.7323V26.5659C17.4491 27.0252 17.6987 27.3746 18.4475 27.2348C21.5992 26.1831 24.2731 24.043 25.9898 21.1983C27.7065 18.3536 28.3536 14.9904 27.8152 11.7118C27.2768 8.43318 25.588 5.4536 23.0517 3.30736C20.5154 1.16111 17.2974 -0.0113949 13.9749 8.34835e-05V8.34835e-05Z"
fill="white" />
</svg></a>
<a href="https://www.twitter.com/RakeshSangem8"><svg width="28" height="28" viewBox="0 0 28 28" fill="white"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14 0C6.26875 0 0 6.26875 0 14C0 21.7312 6.26875 28 14 28C21.7312 28 28 21.7312 28 14C28 6.26875 21.7312 0 14 0ZM20.7281 10.5531C20.7375 10.7 20.7375 10.8531 20.7375 11.0031C20.7375 15.5906 17.2438 20.875 10.8594 20.875C8.89062 20.875 7.06562 20.3031 5.52812 19.3188C5.80937 19.35 6.07813 19.3625 6.36563 19.3625C7.99063 19.3625 9.48438 18.8125 10.675 17.8813C9.15 17.85 7.86875 16.85 7.43125 15.475C7.96562 15.5531 8.44687 15.5531 8.99687 15.4125C8.21164 15.253 7.50586 14.8265 6.99943 14.2056C6.49299 13.5846 6.21715 12.8075 6.21875 12.0063V11.9625C6.67812 12.2219 7.21875 12.3812 7.78438 12.4031C7.30888 12.0862 6.91893 11.6569 6.6491 11.1532C6.37926 10.6495 6.23789 10.087 6.2375 9.51562C6.2375 8.86875 6.40625 8.27812 6.70938 7.76562C7.58095 8.83855 8.66853 9.71607 9.90145 10.3411C11.1344 10.9662 12.485 11.3249 13.8656 11.3938C13.375 9.03438 15.1375 7.125 17.2563 7.125C18.2563 7.125 19.1562 7.54375 19.7906 8.21875C20.575 8.07188 21.325 7.77812 21.9937 7.38437C21.7344 8.1875 21.1906 8.86562 20.4688 9.29375C21.1687 9.21875 21.8438 9.025 22.4688 8.75313C21.9969 9.44688 21.4062 10.0625 20.7281 10.5531V10.5531Z"
fill="white" />
</svg></a>
<a href="https://www.linkedin.com/in/rakeshsangem"><svg width="28" height="28" viewBox="0 0 28 28" fill="white"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14 0C6.26792 0 0 6.26792 0 14C0 21.7321 6.26792 28 14 28C21.7321 28 28 21.7321 28 14C28 6.26792 21.7321 0 14 0ZM10.5729 19.8027H7.73792V10.6794H10.5729V19.8027ZM9.13792 9.55937C8.2425 9.55937 7.66354 8.925 7.66354 8.14042C7.66354 7.33979 8.26 6.72437 9.17437 6.72437C10.0887 6.72437 10.6487 7.33979 10.6662 8.14042C10.6662 8.925 10.0887 9.55937 9.13792 9.55937ZM20.9271 19.8027H18.0921V14.7467C18.0921 13.5698 17.6808 12.7706 16.6556 12.7706C15.8725 12.7706 15.4073 13.3117 15.2017 13.8323C15.1258 14.0175 15.1069 14.28 15.1069 14.541V19.8012H12.2704V13.5888C12.2704 12.4498 12.234 11.4975 12.196 10.6779H14.6592L14.789 11.9452H14.8458C15.2192 11.3502 16.1335 10.4723 17.6633 10.4723C19.5285 10.4723 20.9271 11.7221 20.9271 14.4083V19.8027V19.8027Z"
fill="white" />
</svg></a>
</div>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#projectsSection">Projects</a></li>
<li><a href="#contactPage">Contact</a></li>
</ul>
<!-- <p>Made with ❤ by Open Source Team</p> -->
<p class="currentYear"></p>
<script>
let a = new Date().getFullYear();
document.querySelector(".currentYear").innerHTML =
"Rakesh Sangem © " + a;
</script>
</footer>
<script src="https://unpkg.com/gsap@3.9.1/dist/gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/ScrollTrigger.min.js"></script>
<script src="app.js" type="module"></script>
</body>
</html>