-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
238 lines (212 loc) · 11.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Varun Patkar - Portfolio</title>
</head>
<body class="light-theme">
<div class="experience">
<canvas class="experience-canvas"></canvas>
</div>
<!-- Preloader -->
<div class="preloader">
<div class="proloader-wrapper">
<div class="loading">
<div class="middle">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
<div class="bar bar4"></div>
<div class="bar bar5"></div>
<div class="bar bar6"></div>
<div class="bar bar7"></div>
<div class="bar bar8"></div>
</div>
</div>
</div>
</div>
<div class="page" asscroll-container>
<div class="toggle-bar">
<div class="sun-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path fill="currentColor"
d="M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15Zm0 2q-2.075 0-3.537-1.463Q7 14.075 7 12t1.463-3.538Q9.925 7 12 7t3.538 1.462Q17 9.925 17 12q0 2.075-1.462 3.537Q14.075 17 12 17ZM2 13q-.425 0-.712-.288Q1 12.425 1 12t.288-.713Q1.575 11 2 11h2q.425 0 .713.287Q5 11.575 5 12t-.287.712Q4.425 13 4 13Zm18 0q-.425 0-.712-.288Q19 12.425 19 12t.288-.713Q19.575 11 20 11h2q.425 0 .712.287.288.288.288.713t-.288.712Q22.425 13 22 13Zm-8-8q-.425 0-.712-.288Q11 4.425 11 4V2q0-.425.288-.713Q11.575 1 12 1t.713.287Q13 1.575 13 2v2q0 .425-.287.712Q12.425 5 12 5Zm0 18q-.425 0-.712-.288Q11 22.425 11 22v-2q0-.425.288-.712Q11.575 19 12 19t.713.288Q13 19.575 13 20v2q0 .425-.287.712Q12.425 23 12 23ZM5.65 7.05 4.575 6q-.3-.275-.288-.7.013-.425.288-.725.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7 0 .4-.275.7-.275.3-.687.287-.413-.012-.713-.287ZM18 19.425l-1.05-1.075q-.275-.3-.275-.712 0-.413.275-.688.275-.3.688-.287.412.012.712.287L19.425 18q.3.275.288.7-.013.425-.288.725-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.287-.688.012-.412.287-.712L18 4.575q.275-.3.7-.288.425.013.725.288.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275-.4 0-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.713-.275.412 0 .687.275.3.275.288.688-.013.412-.288.712L6 19.425q-.275.3-.7.287-.425-.012-.725-.287ZM12 12Z" />
</svg>
</div>
<button class="toggle-button">
<div class="toggle-circle"></div>
</button>
<div class="moon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path fill="currentColor"
d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025.337.025.662.075-1.025.725-1.637 1.887Q11.1 6.15 11.1 7.5q0 2.25 1.575 3.825Q14.25 12.9 16.5 12.9q1.375 0 2.525-.613 1.15-.612 1.875-1.637.05.325.075.662Q21 11.65 21 12q0 3.75-2.625 6.375T12 21Zm0-2q2.2 0 3.95-1.212 1.75-1.213 2.55-3.163-.5.125-1 .2-.5.075-1 .075-3.075 0-5.238-2.162Q9.1 10.575 9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.162 2.55Q5 9.8 5 12q0 2.9 2.05 4.95Q9.1 19 12 19Zm-.25-6.75Z" />
</svg>
</div>
</div>
<div class="page-wrapper" asscroll>
<section class="hero">
<div class="hero-wrapper">
<!-- Intro HTML -->
<div class="intro-text">Varun Patkar's Portfolio.<br><br>Scroll Down to begin your 3D experience
</div>
<div class="arrow-svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path fill="currentColor"
d="M12 14.95q-.2 0-.375-.063-.175-.062-.325-.212L6.675 10.05q-.275-.275-.262-.688.012-.412.287-.687.275-.275.7-.275.425 0 .7.275l3.9 3.9 3.925-3.925q.275-.275.688-.263.412.013.687.288.275.275.275.7 0 .425-.275.7l-4.6 4.6q-.15.15-.325.212-.175.063-.375.063Z" />
</svg></div>
<div class="hero-main">
<h1 class="hero-main-title">Varun Anand Patkar</h1>
<p class="hero-main-description">Full Stack Developer | ML Enthusiast</p>
</div>
<div class="hero-second">
<p class="hero-second-subheading">Made using 3JS,GSAP,</p>
<p class="hero-second-subheading second-sub">ScrollTrigger & Blender</p>
</div>
</div>
</section>
<div class="first-move section-margin"></div>
<section class="first-section section left">
<div class="progress-wrapper progress-bar-wrapper-left">
<div class="progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h1 class="section-title">
<span class="section-title-text">My Work</span>
<div class="section-title-decoration styleOne"></div>
<div class="section-title-decoration styleTwo"></div>
<div class="section-title-decoration styleThree"></div>
</h1>
<span class="section-number">01</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
</div>
</section>
<div class="second-move section-margin"></div>
<section class="second-section section right">
<div class="progress-wrapper progress-bar-wrapper-right">
<div class="progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h1 class="section-title">
<span class="section-title-text">My Skills</span>
<div class="section-title-decoration styleOne"></div>
<div class="section-title-decoration styleTwo"></div>
<div class="section-title-decoration styleThree"></div>
</h1>
<span class="section-number">02</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Second Title</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
</div>
</section>
<div class="third-move section-margin"></div>
<section class="third-section section left">
<div class="progress-wrapper progress-bar-wrapper-left">
<div class="progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h1 class="section-title">
<span class="section-title-text">My Hobbies</span>
<div class="section-title-decoration styleOne"></div>
<div class="section-title-decoration styleTwo"></div>
<div class="section-title-decoration styleThree"></div>
</h1>
<span class="section-number">03</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Third Title</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
</div>
</section>
<div class="fourth-move section-margin"></div>
<section class="fourth-section section right">
<div class="progress-wrapper progress-bar-wrapper-right">
<div class="progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h1 class="section-title">
<span class="section-title-text">Contact Me</span>
<div class="section-title-decoration styleOne"></div>
<div class="section-title-decoration styleTwo"></div>
<div class="section-title-decoration styleThree"></div>
</h1>
<span class="section-number">04</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Contact Me</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
<h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit alias laudantium
magnam
vel repellendus illum impedit maxime? Perspiciatis unde praesentium quod, quia excepturi aperiam rerum
totam!
Nostrum id accusamus doloribus!</p>
</div>
</section>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>