-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
297 lines (288 loc) · 16.1 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link href="/vite.svg" rel="icon" type="image/svg+xml"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Sashmitha Ravindu</title>
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,600,400,700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header container">
<nav>
<ul class="header__menu">
<li>
<a class="header__link" href="#about-section">About</a>
</li>
<li>
<a class="header__link" href="#featured-section">Work</a>
</li>
<li>
<a class="header__link" href="#contact-section">Contact</a>
</li>
<li class="header__line"></li>
<li>
<button class="header__sun" id="theme-toggle">
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
</svg>
</button>
</li>
<li>
<a class="header__resume btn" href="https://drive.google.com/file/d/1RHqovBwuCr5BgWgcynhUwU-ctY_WgA2U/view?usp=sharing">Resume</a>
</li>
</ul>
<button class="header__bars">
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd"
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
fill-rule="evenodd"/>
</svg>
</button>
</nav>
</header>
<!-- Mobile Navigation -->
<div class="mobile-nav">
<ul class="mobile-nav__menu">
<li>
<a href="#about-section" class="mobile-nav__link">About</a>
</li>
<li>
<a href="#featured-section" class="mobile-nav__link">Work</a>
</li>
<li>
<a href="#contact-section" class="mobile-nav__link">Contact</a>
</li>
<li class="mobile-nav__line"></li>
<li>
<button class="mobile-nav__sun" id="theme-toggle">
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
</svg>
</button>
</li>
<li>
<a href="https://drive.google.com/file/d/1RHqovBwuCr5BgWgcynhUwU-ctY_WgA2U/view?usp=sharing" class="mobile-nav__resume btn">Resume</a>
</li>
</ul>
</div>
<!-- End of Mobile Navigation -->
<main>
<section class="hero container">
<img alt="Hero picture" class="hero__img" src="/hero.jpg">
<h2 class="hero__subtitle">Hi, I'm Sashmitha 👋</h2>
<h1 class="hero__title">FULL-STACK <br> WEB DEVELOPER.</h1>
<p class="hero__description">A passionate <strong>Frontend / Fullstack</strong> web developer and
<strong>UI/UX</strong> enthusiast specialized in
building stunning
interactive websites / applications.</p>
<a class="hero__btn btn" href="mailto:sashmitharavindu@gmail.com" target="_blank">Reach out</a>
</section>
<section class="about container section" id="about-section">
<div class="about__content">
<h2 class="about__title">About</h2>
<p class="about__description">Hello there everyone, I'm Sashmitha a <strong>Frontend / Fullstack</strong>
web developer based in Sri
Lanka. And if you know me really well I love learning new things and making software / web
solutions throughout the day, everyday.</p>
<p class="about__description">Also, I'm really interested in projects related to 3D graphics and game
development.</p>
<p class="about__description">You're welcome to collaborate a project with me!</p>
<hr class="about__hr"/>
<h3 class="about__subtitle">Technologies</h3>
<div class="about__ul-container">
<ul class="about__ul">
<li class="about__list">Javascript(ES6+)</li>
<li class="about__list">CSS</li>
<li class="about__list">HTML</li>
<li class="about__list">C++</li>
</ul>
<ul class="about__ul">
<li class="about__list">AWS</li>
<li class="about__list">Bootstrap</li>
<li class="about__list">Java</li>
<li class="about__list">Python</li>
</ul>
</div>
</div>
<div class="about__img-wrapper">
<img alt="Profile picture" class="about__img" src="/about.jpeg">
</div>
</section>
<section class="featured container section" id="featured-section">
<h3 class="featured__subtitle">Featured Projects</h3>
<div class="featured__link-wrapper">
<h2 class="featured__title">Flower Trading Exchange</h2>
<a class="featured__link" href="#">
<svg fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</a>
</div>
<p class="featured__description">This is a project I developed under supervision of LSEG Sri Lanka. In this
project I have simulated a trading environment with basic trading operations using flower varieties instead
of stocks. I used C++ which has been the base language for most high availability systems in the
industry. <a href="Github - https://github.com/Sashmitha-Ravindu/Flower-Exchange.git">See on GitHub-></a>
</p>
<div class="featured__info-container">
<div class="featured__content">
<h3 class="featured__label">Tech stack</h3>
<ul class="featured__tech-stack">
<li class="featured__info">C++</li>
<!-- <li class="featured__info">CSV File Processsing</li>-->
</ul>
</div>
<div class="featured__content">
<h3 class="featured__label">Project type</h3>
<p class="featured__info">Backend/Terminal App</p>
</div>
<div class="featured__content">
<h3 class="featured__label">Timeline</h3>
<p class="featured__info">February 2023 - Jul 2023</p>
</div>
</div>
<div class="featured__img-container">
<div class="featured__img-wrapper">
<img alt="flower exchange github" src="/Flower-Exchange-image.png">
</div>
<div class="featured__img-wrapper">
<img alt="flower exchange ide" src="/flower-exchange2.png">
</div>
<!--<div class="featured__img-wrapper">
<img alt="flower exchange pricing" src="/blender-image.png">
</div>
<div class="featured__img-wrapper">
<img alt="flower exchange features" src="/unity-image.png">
</div>
<div class="featured__img-wrapper">
<img alt="flower exchange faqs" src="/portfolio-image.png">
</div>
<div class="featured__img-wrapper">
<img alt="flower exchange blog" src="/portfolio-image2.png">
</div>
<div class="featured__img-wrapper">
<img alt="flower exchange sign-in" src="/porsche-image.png">
</div>
<div class="featured__img-wrapper">
<img alt="flower exchange dashboard" src="/manthra-image.png">
</div>-->
</div>
</section>
<section class="work container section">
<h2 class="work__title">Projects</h2>
<p class="work__description">
Here are some educational projects I have done to explore various technologies in depth!
</p>
<div class="work__container">
<!--Project 1 -->
<h3 class="work__project-title">Portfolio</h3>
<div class="work__img-wrapper work__image1">
<img alt="work1" src="/portfolio-img.png">
</div>
<div class="work__project work__content1">
<h3 class="work__project-subtitle">Portfolio</h3>
<p class="work__project-description1">I developed this portfolio website to showcase my projects to the
tech space.</p>
<p class="work__project-description2">As a passionate developer I made this project to showcase my
frontend development technologies and to experiment working with Vite. I used Vite, HTML,CSS,
JavaScript technologies to make this project.</p>
<a class="btn work__project-btn" href="#">Website</a>
</div>
<!--Project 2 -->
<h3 class="work__project-title">Animated Front Page</h3>
<div class="work__img-wrapper work__image2">
<img alt="work2" src="/animated-page-img.png">
</div>
<div class="work__project work__content2">
<h3 class="work__project-subtitle">Animated Front Page</h3>
<p class="work__project-description1">This project is done on educational purpose to get comfortable
with JavaScript.</p>
<p class="work__project-description2">I focused learning how DOM Manipulation works and be flexible with
JavaScript in order to dive deep with JavaScript Fundamentals.</p>
<a class="btn work__project-btn" href="https://github.com/Sashmitha-Ravindu/animated-front-page.git">GitHub</a>
</div>
<!--Project 3 -->
<h3 class="work__project-title">Spring Security Demo</h3>
<div class="work__img-wrapper work__image3">
<img alt="work3" src="/spring-sec-demo-img.png">
</div>
<div class="work__project work__content3">
<h3 class="work__project-subtitle">Spring Security Demo</h3>
<p class="work__project-description1">This project mainly focuses on Spring Security and JWT Tokens.</p>
<p class="work__project-description2">I did this learning project to grasp concepts in spring security
and JWT authentication & authorization. Here I have used Spring framework & Hibernate JPA and
PostgresSQL.</p>
<a class="btn work__project-btn" href="#">GitHub</a>
</div>
<!--<!–Project 4 –>
<h3 class="work__project-title">Survival Knife Weekly Drills 045 - #SurvivalKnife</h3>
<div class="work__img-wrapper work__image4">
<img alt="work4" src="/work4.png">
</div>
<div class="work__project work__content4">
<h3 class="work__project-subtitle">Survival Knife Weekly Drills 045 - #SurvivalKnife</h3>
<p class="work__project-description1">Design based on BUCK KNIVES My second project for the rookie
weekly
drills, in this project I really focused on making a practical game ready asset and improve my
texturing
skills. 10994 Tris</p>
<p class="work__project-description2">Princess Ira Giselle Is a fictional African princess with gold
several elements from different cultural designs from all over the world to portray unity.</p>
<a class="btn work__project-btn" href="#">Website</a>
</div>
<!–Project 5 –>
<h3 class="work__project-title">OC of Ye Zhang</h3>
<div class="work__img-wrapper work__image5">
<img alt="work5" src="/work5.png">
</div>
<div class="work__project work__content5">
<h3 class="work__project-subtitle">OC of Ye Zhang</h3>
<p class="work__project-description1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At
debitis
dicta
ut.</p>
<p class="work__project-description2">LHere's a 3D character made with the beautiful OC of Ye Zhang :
artstation/yezhang Blockin and Highpoly in Zbrush Topology, UV done with Blender Textured with
Substance
Painter and Idle done with Maya. UV Set : Human : 4096x4096 Dog : 4096x4096 Sword : 2048x2048 Thanks
to
Artside School and my mates for the feedback!</p>
<a class="btn work__project-btn" href="#">Website</a>
</div>
<!–Project 6 –>
<h3 class="work__project-title">RADIANCE</h3>
<div class="work__img-wrapper work__image6">
<img alt="work6" src="/work6.png">
</div>
<div class="work__project work__content6">
<h3 class="work__project-subtitle">RADIANCE</h3>
<p class="work__project-description1">Graduation project made for the Concept Art specialised cursus at
New3dge School.</p>
<p class="work__project-description2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
commodi consequuntur cumque cupiditate illo mollitia necessitatibus nemo, perspiciatis rerum sequi
sint!
Assumenda deleniti ea facere ipsa laboriosam numquam reiciendis veritatis. Impedit nam totam vero
voluptatem
voluptatum.</p>
<a class="btn work__project-btn" href="#">Website</a>
</div>-->
</div>
</section>
<section class="contact container section" id="contact-section">
<h2 class="contact__title">Get In Contact</h2>
<p class="contact__description">
Whether you are willing to work with me in a project, have any business inquiries or just want to say hi, my
inbox is always open so feel free to reach out and I will get back to you as soon as possible.
</p>
<a href="mailto:sashmitharavindu@gmail.com" target="_blank" class="contact__btn btn">Reach Out</a>
</section>
</main>
<footer class="footer container section">
<h3 class="footer__title">~Sashmitha Ravindu~</h3>
</footer>
<script src="/src/main.js" type="module"></script>
</body>
</html>