-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (177 loc) · 11.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="./style.css">
<title>Vinuth Sri Arampath | Portfolio</title>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container sticky-md-top bg-black bg-opacity-75">
<div class="header">
<div class="row p-2">
<div class="col-lg-6 col-md-12 col-sm-12 text-center text-md-center text-sm-center">
<p class="fw-bolder text-warning my-auto fs-3">VSA.</p>
</div>
<div class="col-lg-6 d-none d-md-block">
<ul class="nav justify-content-around" id="0">
<li class="nav-item order-1"><a href="#about" class="nav-link fs-6 fw-bolder text-warning"><i class="bi bi-house me-2"></i>About</a></li>
<li class="nav-item order-2"><a href="#projects" class="nav-link fs-6 fw-bolder text-warning"><i class="bi bi-person-workspace me-2"></i>Projects</a></li>
<li class="nav-item order-3"><a href="#skills" class="nav-link fs-6 fw-bolder text-warning"><i class="bi bi-list-task me-2"></i>Skills</a></li>
<li class="nav-item order-4"><a href="#social" class="nav-link fs-6 fw-bolder text-warning"><i class="bi bi-people-fill me-2"></i>Socials</a></li>
</ul>
</div>
<div class="col-12 d-md-none d-sm-flex flex-column align-items-center">
<ul class="nav flex-column align-items-center">
<li class="nav-item"><a href="#about" class="nav-link fs-6 fw-bolder text-warning"><i class="bi bi-house me-2"></i>About</a></li>
<li class="nav-item"><a href="#projects" class="nav-link fs-6 fw-bolder text-warning"><i class="bi bi-person-workspace me-2"></i>Projects</a></li>
<li class="nav-item"><a href="#skills" class="nav-link fs-6 fw-bolder text-warning"><i class="bi bi-list-task me-2"></i>Skills</a></li>
<li class="nav-item"><a href="#social" class="nav-link fs-6 fw-bolder text-warning"><i class="bi bi-people-fill me-2"></i>Socials</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container p-5 mt-5" id="about">
<div class="row">
<div class="col-lg-6 p-5 mt-5 m-auto text-center text-lg-start">
<p class="text-white fs-2 fw-bold">LET ME <span class="text-warning">INTRODUCE</span> MYSELF</p>
<p class="text-white fs-4 fw-medium">I'm Vinuth Sri Arampath.</p>
<p class="text-white fs-4 fw-medium">An aspiring fullstack software engineer with skills in <span class="text-warning fst-italic">Java, HTML, CSS, Bootstrap, and MySQL, etc.</span> </p>
<p class="text-white fs-4 fw-medium">I'm passionate about <span class="text-warning fst-italic">innovating in the software engineering field</span> and eager to connect with professionals to <span class="text-warning fst-italic">drive technological advancements.</span></p>
</div>
<div class="col-lg-6 text-center">
<img src="./img/me.jpg" alt="Vinuth Sri Arampath" style="width: 100%; max-width: 500px;" class="rounded-5">
</div>
</div>
</div>
<div class="container my-5" id="projects">
<div class="text-center mb-5">
<h1 class="text-warning">My Recent <span>Projects</span></h1>
<p class="text-white fs-4">Here are some <span class="text-warning">projects</span> I have contributed recently</p>
</div>
<div class="row justify-content-center">
<div class="card bg-transparent border-1 p-2 m-2" style="width: 18rem; border-color: orange;">
<img src="./img/gamex.com.png" class="card-img-top" alt="Gamex.com">
<div class="card-body">
<h5 class="card-title text-warning">Game<sub>x</sub>.com</h5>
<p class="card-text text-white">Simple website for gamers, which allows them to read the latest gaming news, host tournaments, and participate in esports tournaments.</p>
<p class="card-text text-white">This website is developed using <span class="text-warning">HTML</span> and <span class="text-warning">CSS</span></p>
<div class="d-flex justify-content-around">
<a href="https://vinuthsriarampath.github.io/gamex.com/" class="btn text-bg-warning"><i class="bi bi-globe-americas text-black"></i></a>
<a href="https://github.com/VinuthSriArampath/gamex.com" class="btn text-bg-warning"><i class="bi bi-github text-black"></i></a>
</div>
</div>
</div>
<div class="card bg-transparent border-1 p-2 m-2" style="width: 18rem; border-color: orange;">
<img src="./img/ContactManager.png" class="card-img-top" alt="Contact_Manager">
<div class="card-body">
<h5 class="card-title text-warning">Contact Manager</h5>
<p class="card-text text-white">Simple application made to manage your contacts which allows you to add,delete,update,search and list(sort) contacts </p>
<p class="card-text text-white">This application is developed using only <span class="text-warning">JAVA</span></p>
<div class="d-flex justify-content-around">
<a href="https://github.com/VinuthSriArampath/Contact_Manager.git" class="btn text-bg-warning"><i class="bi bi-github text-black"></i></a>
</div>
</div>
</div>
<div class="card bg-transparent border-1 p-2 m-2" style="width: 18rem; border-color: orange;">
<img src="./img/project_calculator.png" class="card-img-top" alt="Calculator">
<div class="card-body">
<h5 class="card-title text-warning">Calculator</h5>
<p class="card-text text-white">Simple calculator made for perform arithmatic operations with two number</p>
<p class="card-text text-white">This Web application is developed using <span class="text-warning">HTML,CSS and JavaScript</span></p>
<div class="d-flex justify-content-around">
<a href="https://vinuthsriarampath.github.io/Calculator-JavaScript/" class="btn text-bg-warning"><i class="bi bi-globe-americas text-black"></i></a>
<a href="https://github.com/VinuthSriArampath/Calculator-JavaScript.git" class="btn text-bg-warning"><i class="bi bi-github text-black"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="container my-5" id="skills">
<h1 class="text-center text-white pb-4">Professional <span class="text-warning">SkillSet</span></h1>
<div class="row justify-content-center">
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
<div class="border border-warning rounded-3 d-flex justify-content-center p-2" style="width: 100%; height: 100px;">
<img src="./img/java.png" alt="Java" style="max-height: 100%;">
</div>
<p class="text-white text-center">JAVA</p>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
<div class="border border-warning rounded-3 d-flex justify-content-center p-2" style="width: 100%; height: 100px;">
<img src="./img/html.png" alt="HTML" style="max-height: 100%;">
</div>
<p class="text-white text-center">HTML</p>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
<div class="border border-warning rounded-3 d-flex justify-content-center p-2" style="width: 100%; height: 100px;">
<img src="./img/css.png" alt="CSS" style="max-height: 100%;">
</div>
<p class="text-white text-center">CSS</p>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
<div class="border border-warning rounded-3 d-flex justify-content-center p-2" style="width: 100%; height: 100px;">
<img src="./img/Bootstrap.png" alt="Bootstrap" style="max-height: 100%;">
</div>
<p class="text-white text-center">BOOTSTRAP</p>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 mb-4">
<div class="border border-warning rounded-3 d-flex justify-content-center p-2" style="width: 100%; height: 100px;">
<img src="./img/Mysql.png" alt="MySQL" style="max-height: 100%;">
</div>
<p class="text-white text-center">MYSQL</p>
</div>
</div>
</div>
<div class="container my-5" id="social">
<div class="text-center mb-3">
<h1 class="text-white">Find Me On</h1>
<p class="text-white fs-4">Feel free to<span class="text-warning"> connect </span>with me</p>
</div>
<div class="d-flex justify-content-center">
<a href="https://github.com/VinuthSriArampath" class="btn bg-warning mx-3 rounded-circle"><i class="bi bi-github text-black"></i></a>
<a href="https://www.linkedin.com/in/vinuth-sri-arampath/" class="btn bg-warning mx-3 rounded-circle"><i class="bi bi-linkedin text-black"></i></a>
</div>
</div>
<div class="footer bg-black py-4 px-5">
<div class="row">
<div class="col-6">
<p class="text-white">Vinuth Sri Arampath</p>
</div>
<div class="col-6 d-flex justify-content-end">
<a href="https://github.com/VinuthSriArampath"><i class="bi bi-github text-white mx-2"></i></a>
<a href="https://www.linkedin.com/in/vinuth-sri-arampath/"><i class="bi bi-linkedin text-white mx-2"></i></a>
</div>
</div>
</div>
<a href="#0" class="cd-top">Top</a>
<!-- Script section -->
<script>
$(document).ready(function() {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('.cd-top').addClass('cd-is-visible');
} else {
$('.cd-top').removeClass('cd-is-visible');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('.cd-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 50);
});
});
</script>
</body>
</html>