-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
292 lines (286 loc) · 15.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="Hello there! I am Pathum Chinthaka. I am a self-motivated web developer and web-designer passionate about both front-end and back-end technologies. I am happy to share my knowledge with people who are interested in this technical world.">
<meta name="keywords" content="pathum chinthaka, portfolio, web development,web design">
<meta name="author" content="Pathum Chinthaka">
<meta name="robots" content="index, follow">
<link rel="icon" href="Asset\Images\myLogo.png" type="image/x-icon">
<link rel="stylesheet" href="Asset\Css\style.css" />
<script src="https://kit.fontawesome.com/045bd16cf0.js" crossorigin="anonymous"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<title>Pathum Chinthaka | Portfolio</title>
</head>
<body onload="windowLoad()">
<section id="pre-loader">
<img src="Asset\Images\preloader.gif" alt="pre-loader">
</section>
<nav>
<span class="logo-text">Pathum.</span>
<ul id="side-menu">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fa-solid fa-xmark" onclick="closeMenu()"></i>
</ul>
<i class="fa-solid fa-bars" onclick="openMenu()"></i>
</nav>
<section id="header">
<div class="container">
<div class="header-text">
<p>Hellow, I am</p>
<h1 class="fName">Pathum</h1>
<h2 class="lName">Chinthaka</h2>
<p class="header-paragraph">
I'm a <b>Full-Stack developer</b> with a passion for Front-end and Back-end development.I enjoy
developing simple, clean and slick websites that provide real value to the end user.
</p>
</div>
<div class="btn-group">
<a href="https://www.fiverr.com/chinthakapeiris" target="_blank" class="seeMore-btn link">Hire Me</a>
<a href="Asset/Doc/Minimalist CV Resume.pdf" target="_blank" class="seeMore-btn link">My CV</a>
</div>
</div>
</section>
<!-- about me section -->
<section id="about">
<div class="container about-container" data-aos="fade-up">
<div class="row">
<div class="about-col-1">
<img src="Asset\Images\aboutme.png" alt="my-image" />
</div>
<div class="about-col-2">
<h1 class="main-title">About Me</h1>
<p class="about-paragraph">
I'm a <b>Full-Stack developer</b> with a passion for Front-end and Back-end development.I enjoy
developing simple, clean and slick websites that provide real value to the end user. I love the
challenge of solving complex problems and stay motivated in my career and I love what i do.
</p>
<div class="sub-titles">
<p class="sub-links active-link" onclick="openTab('skills')">
Skills
</p>
<p class="sub-links" onclick="openTab('experience')">
Experience
</p>
<p class="sub-links" onclick="openTab('education')">Education</p>
</div>
<div class="sub-content active-content" id="skills">
<ul>
<li>
<div></div>
<span>Front-end Development</span><br />
<p><b>Tech-stack</b> : HTML , Css , Javascript , Jquery , Bootstrap , Tailwind Css</p>
</li>
<li>
<span>UI/UX Design</span><br />
<p><b>Tools</b> : Figma </p>
</li>
<li>
<span>Back-end Development</span><br />
<p><b>Frameworks</b> : Spring-Boot , Spring-Security , Apache , Hibernate</p>
<p><b>Databases</b> : MongoDB , MySql </p>
<p><b>Languages</b> : Java </p>
</li>
</ul>
</div>
<div class="sub-content" id="experience">
<ul>
<li>
<span>Web Development</span><br />
<p>I am a web developer with 1 year of experience in the field.
I had the privilege of honing my skills at the IJSE Institute.</p>
</li>
<li>
<span>UI/UX Design</span><br />
<p>I am a UI/UX designer with 1 year of experience in the field.
My journey began at the IJSE Institute.</p>
</li>
<li>
<span>Software Development</span><br />
<p>I am a software developer with 1 year of experience in the
field. My journey in software development began at the IJSE
Institute.</p>
</li>
</ul>
</div>
<div class="sub-content" id="education">
<ul>
<li>
<span>Diploma in Computer Science</span><br />
<p>
I am a passionate individual currently pursuing a Diploma in
Computer Software Engineering at the IJSE Institute.
</p>
</li>
<li>
<span>Advance Level Education</span><br />
<p>
I am a motivated individual who completed my Ordinary Level
education at Mahanama College.
</p>
</li>
<li>
<span>Ordinary Level Education</span><br />
<p>
I am a motivated individual who completed my Ordinary Level
education at Malamulla Maha Vidyalaya.
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Service section -->
<section id="service">
<div class="container" data-aos="fade-up">
<h1 class="main-title">Service</h1>
<div class="service-list">
<div>
<i class="fa-solid fa-desktop"></i>
<h2>Web Design</h2>
<p>
As a web designer, I possess a strong command over front-end technologies such as HTML, CSS, and
JavaScript, enabling me to create visually appealing and responsive websites that provide an
exceptional user experience across various devices and browsers.
</p>
<p>
<a href="#">Learn more</a>
</p>
</div>
<div>
<i class="fa-solid fa-pen-ruler"></i>
<h2>UI/UX Design</h2>
<p>
As a UI/UX designer, I specialize in creating visually appealing and intuitive user interfaces
that
enhance the overall user experience of digital products and websites.
With a deep understanding of user-centered design principles and creative design idea.
</p>
<p>
<a href="#">Learn more</a>
</p>
</div>
<div>
<i class="fa-sharp fa-solid fa-code"></i>
<h2>Web Development</h2>
<p>
As a Web developer,I specialize in research and implementing efficient and user-friendly
Back-end solutions to address complex business challenges.
With a passion for coding and problem-solving in programming languages such as Java.
</p>
<p>
<a href="#">Learn more</a>
</p>
</div>
</div>
</div>
</section>
<!-- portfolio section -->
<section id="portfolio">
<div class="container" data-aos="fade-up">
<h1 class="main-title">Projects</h1>
<div class="project-list">
<div class="project" data-aos="zoom-in">
<img src="https://img.freepik.com/free-vector/college-campus-concept-illustration_114360-10535.jpg?size=626&ext=jpg&ga=GA1.1.1657943786.1696784854&semt=ais"
alt="project-theme" loading="eager" />
<div class="layer">
<h3>Hostel Management System</h3>
<p>
Developed using Java, the Hostel Management System is a comprehensive solution for
efficiently managing hostel operations. providing administrators with a user-friendly
interface to oversee and organize hostel activities.
</p>
<a href="https://github.com/PathumChinthaka/Hostel-Management-System" target="_blank"><i
class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="project" data-aos="zoom-in">
<img src="https://img.freepik.com/free-vector/nfc-technology-concept-illustration_114360-14387.jpg?size=626&ext=jpg&ga=GA1.1.1657943786.1696784854&semt=ais"
alt="project-theme" loading="eager" />
<div class="layer">
<h3>Web Pos System</h3>
<p>
Developed using JavaScript and utilizing session storage, this Web-based Point of Sale (POS)
System offers a lightweight yet powerful solution for businesses. The system provides a
seamless user experience with its simple CRUD (Create, Read, Update, Delete) operations,
allowing for efficient management.
</p>
<a href="https://github.com/PathumChinthaka/Point-of-sale-System" target="_blank"><i
class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="project" data-aos="zoom-in">
<img src="https://img.freepik.com/free-vector/website-creator-concept-illustration_114360-3315.jpg?size=626&ext=jpg&ga=GA1.1.1657943786.1696784854&semt=sph"
alt="project-theme" loading="eager" />
<div class="layer">
<h3>JS Animation</h3>
<p>
Leveraging the power of JavaScript, this animation project showcases dynamic and visually
appealing web animations and also this project demonstrates the creative and dynamic
capabilities of JavaScript in the realm of web development and user interface design.
</p>
<a href="https://github.com/PathumChinthaka/JS-Animation" target="_blank"><i
class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
</div>
<a href="https://github.com/PathumChinthaka?tab=repositories" target="_blank" class="seeMore-btn">See
More</a>
</div>
</section>
<!-- contact me section -->
<section id="contact">
<div class="container contact-container" data-aos="fade-up">
<div class="row contact-row">
<div class="contact-leftside">
<h1 class="main-title">Contact Me</h1>
<p>
<i class="fa-solid fa-paper-plane"></i> mpathumchinthaka@gmail.com
</p>
<p><i class="fa-sharp fa-solid fa-phone"></i> +(94) 785 460 963</p>
<p>
<b>Don't Be Shy </b>Feel free to get in touch with me. I am always open to discussing new
projects, creative ideas or
opportunities to be part of your visions.
</p>
<div class="social-icons">
<a href="https://www.linkedin.com/in/pathum-chinthaka/" target="_blank"><i
class="fa-brands fa-linkedin-in"></i></a>
<a href="https://github.com/PathumChinthaka" target="_blank"><i
class="fa-brands fa-github"></i></a>
<a href="https://app.slack.com/client/T04MPKVCVHQ/D04MQ65FWF8" target="_blank"><i
class="fa-brands fa-slack"></i></a>
<a href="https://medium.com/@chinthakapathum0618" target="_blank"><i
class="fa-brands fa-medium"></i></a>
</div>
</div>
<form action="https://formsubmit.co/a74f5f6eb927d974f9ca58c24642f80b" method="POST"
class="contact-rightside">
<input type="text" name="name" placeholder="Your name" required />
<input type="email" name="email" placeholder="Your e-mail" required />
<textarea name="message" cols="30" rows="10" placeholder="Your message" required></textarea>
<button type="submit" class="submit-btn">Send message</button>
</form>
</div>
</div>
<br>
</section>
<footer>
<span>Developed With 💙 By <b>Pathum. </b>All Rights Reserved 2023</span>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script src="Asset\Js\index.js"></script>
</body>
</html>