-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
272 lines (266 loc) · 15.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tamilselvan - Profolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-merge.css">
<link rel=icon href="image/me.jpg">
<link rel="stylesheet" href="path/to/lightbox2/css/lightbox.css">
<script src="path/to/lightbox2/js/lightbox.js"></script>
<script src="https://kit.fontawesome.com/0a682b9dd5.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/scrollreveal@4.0.7/dist/scrollreveal.min.js"></script>
</head>
<body>
<div class="social-icons-container">
<div class="expand-icon"><i class="fa-solid fa-angle-right"></i></div>
<div class="close-icon"><i class="fa-solid fa-circle-xmark"></i></div>
<ul class="social-icons-side">
<li style="background-color: rgb(255, 221, 0);">
<a href="https://tamilselvan6.github.io/Support-me/" target="_blank" class="buy-me-a-coffee-btn">
<img style="height: 30px;" src="https://play-lh.googleusercontent.com/aMb_Qiolzkq8OxtQZ3Af2j8Zsp-ZZcNetR9O4xSjxH94gMA5c5gpRVbpg-3f_0L7vlo=w240-h480-rw"
alt="Buy Me a Coffee">
</a>
</li>
<li style="background-color: rgba(0, 0, 255, 0.7);"><a href="https://www.linkedin.com/in/vtamilselvanbe/"
target="_blank" class="fab fa-linkedin" aria-label="LinkedIn"></a></li>
<li style="background-color: rgba(59, 59, 59, 0.7);"><a href="https://github.com/Tamilselvan6"
target="_blank" class="fa-brands fa-github" aria-label="Website"></a></li>
<li style="background-color: rgba(255, 166, 0, 0.7);"><a href="https://trendtechcontent.blogspot.com/"
target="_blank" class="fa-brands fa-blogger" aria-label="Blog"></a></li>
<li style="background-color: rgba(255, 0, 0, 0.7);"><a href="mailto:21cse058tamilselvan@email.com"
class="fas fa-envelope" aria-label="Contact"></a></li>
</ul>
</div>
<div id="header">
<div class="container">
<nav>
<h1 class="logo"><span style="color: #f90042;">T</span>amilSelvan</h1>
<ul id="sidemenu">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Porfolio</a></li>
<li><a href="#gallery">Certificate</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fas fa-times" onclick="closemenu()"></i>
</ul>
<i class="fas fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text">
<h1>I am <span> V Tamilselvan</span></h1>
<p>Bachelor of Engineering (Hons) | Passionate about Technology and its Impact | Building the Future with Code </p>
<a href="https://github.com/Tamilselvan6" class="f-btn">Github <i class="fa-solid fa-arrow-right-long"></i></a>
</div>
</div>
</div>
<!-- ---------------about---------------- -->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img style="background-color:whitesmoke;" src="image/boy.png" alt="NotFound">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p style="text-align: justify;">To get an opportunity where I can make the best of my potential and
contribute to the organization's growth. I am driven by a passion for excellence and a strong
determination to succeed in any task I undertake. With a proactive mindset and a constant thirst for learning, I am committed to continuously
improving and adding value to the organization's objectives.
</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
<p class="tab-links" onclick="opentab('experience')">Experience</p>
<p class="tab-links" onclick="opentab('education')">Education</p>
</div>
<div class="tab-contents active-tab" id="skills">
<ul>
<li><span>Developing</span><br>Designing Web/App interfaces.</li>
<li><span>Creative </span><br>Imaginative ideas for projects.</li>
<li><span>Adaptability </span><br>Ability to be flexible in all situations.</li>
<li><span>Leadership</span><br>Leading and guiding a team to achieve their goals.</li>
</ul>
</div>
<div class="tab-contents" id="experience">
<ul>
<li><span>Jun - July 2023</span><br>Web Developer Intern - Kevel Corp</li>
<li><span>Aug – Sep 2023</span><br>UIUX Intern – Codsoft Software Company</li>
<li><span>Jan – Mar 2024</span><br>Front End Developer & Designer – Catchify Company</li>
</ul>
</div>
<div class="tab-contents" id="education">
<ul>
<li><span>2021</span><br>BE(Hons) from Velammal College of
engineering and technology ,Madurai <br> CGPA - 8.3</li>
<li><span>2019</span><br>HSC from VMHSS <br> Percentage - 83% </li>
<li><span>2017</span><br>SSL from VMHSS <br> Percentage - 79% </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ---------------services--------------- -->
<div id="services">
<div class="container">
<div class="sub-title">My Skills</div>
<div class="services-list">
<div>
<i class="fa-solid fa-code"></i>
<h2>Web Design</h2>
<p >Crafting captivating and user-centered web designs that combine aesthetics and functionality.
Every design is meticulously tailored to reflect your brand identity and engage your target
audience effectively.</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-solid fa-crop-simple"></i>
<h2>UI/UX Design</h2>
<p>Creating seamless and intuitive user experiences through thoughtful UI/UX design. I prioritize
user needs and behaviors to design interfaces that enhance usability, drive engagement, and
leave a lasting positive impression.</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-brands fa-app-store"></i>
<h2>App Design</h2>
<p>Designing innovative and visually appealing app interfaces that provide exceptional user
experiences. From wireframes to interactive prototypes, I focus on creating user-centered
designs that meet both user expectations and business goals.</p>
<a href="#">Learn more</a>
</div>
</div>
</div>
</div>
<!-- ---------------portfolio----------------- -->
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Works</h1>
<div class="work-list">
<div class="work">
<img src="image/work-1.png" alt="NotFound">
<div class="layer">
<h3>Deltify WebSite</h3>
<p>A creative agency website offering expert store designing, revenue-boosting services, and
showcasing their portfolio of web design projects </p>
<a href="https://tamilselvan6.github.io/Deltify/"><i
class="fa-solid fa-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="image/work-2.png" alt="NotFound">
<div class="layer">
<h3>E-Login</h3>
<p>A creative agency website offering expert store designing, revenue-boosting services, and
showcasing their portfolio of web design projects </p>
<a href="https://codepen.io/Tamilselvan-V/pen/poQerjY"><i
class="fa-solid fa-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="image/work-3.png" alt="NotFound">
<div class="layer">
<h3>Food-Website</h3>
<p>A professionally crafted food website developed using HTML, CSS, and JavaScript. This endeavor seamlessly blends design and functionality, offering a visually appealing and user-friendly platform </p>
<a href="https://tamilselvan6.github.io/Food-Website/"><i
class="fa-solid fa-up-right-from-square"></i></a>
</div>
</div>
</div>
<!-- <a href="https://github.com/Tamilselvan6" class="btn">See More</a> -->
</div>
</div>
<div class="github-cls">
<div class="git">
<h1>Find something interesting?</h1>
<p>Check out my Github Page</p>
<a href="https://github.com/tamilselvan6" target="_blank"><i class="fa-brands fa-github"></i>Github</a>
</div></div>
<!-- ------------------Certificate--------------------- -->
<section id="gallery">
<br>
<div class="container">
<div class="grid">
<div class="left">
<h1 class="sub-title">Achievements</h1>
<h4 class="gallery-about" style="letter-spacing: 4px; margin: 7px;"> Check My certificate...</h4>
<a href="./certification.html" class="btn" style="display: inline-block;">Certificates</a>
</div>
<div class="right">
<div class="gallery horizontal-gallery img-fluid">
<a href="./certificates/Achievements/yukthi.jpg" data-lightbox="certificates"><img
class="work-modals img-fluid potrait" src="./certificates/Achievements/yukthi.jpg"></a>
<a href="./certificates/Achievements/Mdu.jpg" data-lightbox="certificates"><img
class="work-modals img-fluid potrait" style="width: 270px;"
src="./certificates/Achievements/Mdu.jpg"></a>
<a href="./certificates/Achievements/startup.jpg" data-lightbox="certificates"><img
class="work-modals img-fluid potrait" style="width: 270px;"
src="./certificates/Achievements/startup.jpg"></a>
<a href="./certificates/Achievements/ngp.jpg" data-lightbox="certificates"><img
class="work-modals img-fluid potrait" src="./certificates/Achievements/ngp.jpg"></a>
<a href="./certificates/Achievements/MPC.jpg" data-lightbox="certificates"><img
class="work-modals img-fluid potrait" src="./certificates/Achievements/MPC.jpg"></a>
<a href="./certificates/Achievements/lepidoz.jpg" data-lightbox="certificates"><img
class="work-modals img-fluid potrait"
src="./certificates/Achievements/lepidoz.jpg"></a>
</div>
</div>
</div>
</div>
<br><br><br>
</section>
<!-- ---------------contact------------------ -->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><a href="mailto:21cse058tamilselvan@gmail.com"><i
class="fa-solid fa-paper-plane"></i>21cse058tamilselvan@gmail.com</a></p>
<p><a
href="whatsapp://send?text=Hello%20there!%20I%20wanted%20to%20message%20you%20on%20WhatsApp.&phone=+919384870052"><i
class="fa-solid fa-square-phone"></i>9384870052</a></p>
<div class="social-icons">
<a href="https://facebook.com/"><i class="fa-brands fa-facebook"></i></a>
<a href="https://twitter.com/indreamoflife"><i class="fa-brands fa-twitter-square"></i></a>
<a href="https://instagram.com/tamil_editz_2k"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/vtamilselvanbe/"><i class="fa-brands fa-linkedin"></i></a>
</div>
<a href="https://drive.google.com/file/d/1xvrm7NcjsCkNW6hvoj8UqSUQTLAcksH9/" class="btn btn2">Download CV</a>
</div>
<div class="contact-right">
<form id="contact-form">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="Message" rows="6" placeholder="Your Message"></textarea>
<button type="submit" style="margin-left: 20px" class="btn btn2">Submit</button>
</form>
</div>
<div id="notification" class="notification">
<span id="notification-message">Message Sent Successfully!</span>
<button id="close-notification"><i class="fa-regular fa-circle-xmark"
style="color: #ffffff;"></i></button>
</div>
</div>
</div>
<div class="copyright">
<p>© 2024 Tamilselvan V. All rights reserved.</p>
<a href="https://www.linkedin.com/in/vtamilselvanbe/" target="_blank">LinkedIn</a> |
<a href="https://github.com/Tamilselvan6" target="_blank">GitHub</a> |
<a href="mailto:sritamilselvan6@gmail.com">Email</a>
</div>
</div>
<div id="scrollToTop">
<a href="#header">
<i class="fas fa-arrow-up"></i>
</a>
</div0>
<div id="feedbackBtn">
<a href="rating.html" class="btn-feedback">
<i class="fas fa-comment"></i> Give Feedback
</a>
</div>
<script src="script.js"></script>
</body>
</html>