-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (157 loc) · 8.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vaishnav Sabari Girish - Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
@keyframes glow {
0% { box-shadow: 0 0 5px #4F46E5, 0 0 10px #4F46E5, 0 0 15px #4F46E5; }
100% { box-shadow: 0 0 10px #4F46E5, 0 0 20px #4F46E5, 0 0 30px #4F46E5; }
}
.skill-card:hover {
animation: glow 1.5s ease-in-out infinite alternate;
transform: translateY(-5px);
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Navigation -->
<nav class="border-b border-gray-800 backdrop-blur-md bg-gray-900/80 fixed w-full z-10">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<a href="#" class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-indigo-500 bg-clip-text text-transparent">
VSG
</a>
<a href="projects.html" class="px-4 py-2 rounded-full border border-gray-700 hover:border-indigo-500 transition-all duration-300">
View Projects
</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="bg-gradient-to-r from-gray-900 via-indigo-900 to-gray-900 pt-32">
<div class="container mx-auto px-6 py-16">
<div class="flex flex-col items-center text-center">
<img src="dp.png" alt="Profile Picture" class="w-32 h-32 rounded-full mb-6 border-4 border-indigo-500 shadow-lg hover:border-indigo-400 transition-all duration-300">
<h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-500 to-indigo-500 bg-clip-text text-transparent">Vaishnav Sabari Girish</h1>
<p class="text-xl mb-8 text-gray-300">Electronics And Communication Engineering student</p>
<div class="flex space-x-4">
<a href="projects.html" class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-500 transition">View Projects</a>
<a href="#contact" class="border-2 border-indigo-500 px-6 py-2 rounded-full hover:bg-indigo-500 hover:text-white transition">Contact Me</a>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section class="py-16 bg-gray-800">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12 bg-gradient-to-r from-blue-500 to-indigo-500 bg-clip-text text-transparent">About Me</h2>
<div class="max-w-3xl mx-auto text-gray-300 leading-relaxed">
<p class="mb-6">
I'm Vaishnav, a third-year Electronics and Communication Engineering (ECE) student
passionate about technology, innovation, and space exploration. Eager to excel as
an engineer, I am committed to mastering emerging technologies and contributing to
advancements in electronics, communication, and the exploration of the universe.
Enthusiastic about modern tech, I thrive on learning and growing in this dynamic field.
</p>
<p>
I am especially interested in the fields of Linux Kernel Development, Embedded Systems,
Embedded Software, Embedded Linux and Embedded Programming.
</p>
</div>
</div>
</section>
<!-- Skills Section -->
<section class="py-16 bg-gray-900">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12 bg-gradient-to-r from-blue-500 to-indigo-500 bg-clip-text text-transparent">Skills & Expertise</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="skill-card bg-gray-800 p-6 rounded-xl shadow-lg transition-all duration-300">
<h3 class="text-xl font-semibold mb-4 text-indigo-400">Programming Languages</h3>
<ul class="text-gray-300 space-y-2">
<li>C</li>
<li>Embedded C</li>
<li>C++</li>
<li>MicroPython</li>
<li>Python</li>
<li>MATLAB/OCTAVE/SCILAB</li>
<li>Shell Scripting (Bash, Nu, Fish)</li>
</ul>
</div>
<div class="skill-card bg-gray-800 p-6 rounded-xl shadow-lg transition-all duration-300">
<h3 class="text-xl font-semibold mb-4 text-indigo-400">Software and Tools</h3>
<ul class="text-gray-300 space-y-2">
<li>Arduino</li>
<li>Git and GitHub</li>
<li>LT Spice</li>
<li>Proteus</li>
<li>Inkscape</li>
<li>KiCad</li>
<li>MATLAB</li>
<li>NeoVim/Vim</li>
<li>LabbView</li>
</ul>
</div>
<div class="skill-card bg-gray-800 p-6 rounded-xl shadow-lg transition-all duration-300">
<h3 class="text-xl font-semibold mb-4 text-indigo-400">Technical Skills</h3>
<ul class="text-gray-300 space-y-2">
<li>Linux</li>
<li>Embedded Linux</li>
<li>Circuit Debugging</li>
<li>Embedded Programming</li>
<li>Signal Processing</li>
</ul>
</div>
<div class="skill-card bg-gray-800 p-6 rounded-xl shadow-lg transition-all duration-300">
<h3 class="text-xl font-semibold mb-4 text-indigo-400">Soft Skills</h3>
<ul class="text-gray-300 space-y-2">
<li>Team Work</li>
<li>Leadership</li>
<li>Problem Solving</li>
<li>Analytical Thinking</li>
</ul>
</div>
<div class="skill-card bg-gray-800 p-6 rounded-xl shadow-lg transition-all duration-300">
<h3 class="text-xl font-semibold mb-4 text-indigo-400">Languages</h3>
<ul class="text-gray-300 space-y-2">
<li>English (Written and Spoken)</li>
<li>Japanese (N3 Level)</li>
<li>Tamil (Spoken)</li>
<li>Kannada (Written and Spoken)</li>
<li>Hindi (Spoken)</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-gray-800">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12 bg-gradient-to-r from-blue-500 to-indigo-500 bg-clip-text text-transparent">Let's Connect</h2>
<div class="flex justify-center space-x-6">
<a href="https://www.linkedin.com/in/vaishnav-sabari-girish/" class="text-gray-400 hover:text-blue-500 transition-all duration-300">
<i class="fab fa-linkedin text-3xl"></i>
</a>
<a href="https://github.com/Vaishnav-Sabari-Girish" class="text-gray-400 hover:text-white transition-all duration-300">
<i class="fab fa-github text-3xl"></i>
</a>
<a href="https://t.me/vaishnav_dev" class="text-gray-400 hover:text-blue-400 transition-all duration-300">
<i class="fab fa-telegram text-3xl"></i>
</a>
<a href="https://mastodon.social/@vaishnav_s" class="text-gray-400 hover:text-purple-400 transition-all duration-300">
<i class="fab fa-mastodon text-3xl"></i>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-gray-800 py-8">
<div class="container mx-auto px-6 text-center text-gray-500">
<p>© 2025 Vaishnav Sabari Girish. All rights reserved.</p>
</div>
</footer>
</body>
</html>