-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
183 lines (165 loc) · 10.2 KB
/
index.html
File metadata and controls
183 lines (165 loc) · 10.2 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="VASUDEVAN | Computer Science student portfolio" />
<title>VASUDEVAN | Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header / Navbar -->
<header class="header" id="home">
<nav class="nav container">
<a href="#home" class="brand" aria-label="Go to home">VASU</a>
<button class="nav__toggle" aria-expanded="false" aria-controls="navMenu" aria-label="Toggle menu">
<span class="nav__bar"></span>
<span class="nav__bar"></span>
<span class="nav__bar"></span>
</button>
<ul class="nav__menu" id="navMenu">
<li><a class="nav__link" href="#home">Home</a></li>
<li><a class="nav__link" href="#about">About</a></li>
<li><a class="nav__link" href="#skills">Skills</a></li>
<li><a class="nav__link" href="#projects">Projects</a></li>
<li><a class="nav__link" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- Hero Section -->
<section class="section hero">
<div class="container hero__grid">
<div class="hero__content">
<p class="eyebrow">Computer Science Student</p>
<h1 class="hero__title">Hi, I’m <span class="accent">VASU</span><span class="wave" aria-hidden="true">👋</span></h1>
<p class="hero__subtitle">A Computer Science student passionate about building smart and practical projects.</p>
<div class="hero__cta">
<a class="btn btn--primary" href="assets/VASUDEVAN_Resume.pdf" download>Download Resume</a>
<a class="btn btn--ghost" href="#projects">View Projects</a>
</div>
</div>
<div class="hero__visual" aria-hidden="true">
<div class="orb orb--lg"></div>
<div class="orb orb--sm"></div>
</div>
</div>
</section>
<!-- About Section -->
<section class="section" id="about">
<div class="container">
<h2 class="section__title">About</h2>
<p class="section__lead">I’m a pre-final year Computer Science student focusing on building robust, user-friendly applications. I enjoy solving real-world problems and turning ideas into working software.</p>
<p class="section__lead">My core skills include <strong>Java</strong> and <strong>Python</strong> for problem solving, and <strong>React</strong> with modern <strong>web development</strong> practices for building responsive frontends. I’m currently improving my full‑stack skills and exploring clean architecture, performance, and accessibility.</p>
</div>
</section>
<!-- Skills Section -->
<section class="section" id="skills">
<div class="container">
<h2 class="section__title">Skills</h2>
<p class="section__lead">Core technologies and areas I work with regularly.</p>
<div class="cards skills__grid">
<article class="card skill-card"><div class="skill-card__inner"><h3>Java</h3><p>OOP, Collections, problem solving</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>Python</h3><p>Scripting, data processing</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>React</h3><p>Hooks, state, SPA design</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>HTML</h3><p>Semantic, accessible markup</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>CSS</h3><p>Responsive layouts, animations</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>JavaScript</h3><p>ES6+, DOM APIs</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>Git/GitHub</h3><p>Version control, PR workflow</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>DSA</h3><p>Data structures, algorithms</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>Databases</h3><p>SQL & NoSQL basics</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>Web Dev</h3><p>REST, auth, deployment</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>C</h3><p>Basic programming</p></div></article>
<article class="card skill-card"><div class="skill-card__inner"><h3>C++</h3><p>Object-oriented programming</p></div></article>
</div>
</div>
</section>
<!-- Projects Section -->
<section class="section" id="projects">
<div class="container">
<h2 class="section__title">Projects</h2>
<div class="cards">
<!-- Duty Chart Generator -->
<article class="card">
<div class="card__body">
<h3 class="card__title">Duty Chart Generator</h3>
<p class="card__desc">Desktop tool to automate creating duty rosters with validation and export options.</p>
<p class="card__tech">Python, Tkinter, Pandas</p>
</div>
<div class="card__actions">
<a class="btn btn--ghost" href="https://github.com/Vasu-Dev-arch/Duty-Chart" target="_blank" rel="noopener">GitHub</a>
</div>
</article>
<!-- Library Management System -->
<!-- <article class="card">
<div class="card__body">
<h3 class="card__title">Library Management System</h3>
<p class="card__desc">Full‑stack CRUD app for managing books, members, and transactions with role-based access.</p>
<p class="card__tech">React, Node/Express, MongoDB (or SQL)</p>
</div>
<div class="card__actions">
<a class="btn btn--ghost" href="https://github.com/your-username/library-management-system" target="_blank" rel="noopener">GitHub</a>
</div>
</article> -->
<!-- Portfolio Website -->
<article class="card">
<div class="card__body">
<h3 class="card__title">Portfolio Website</h3>
<p class="card__desc">Responsive personal site to showcase projects, skills, and contact information.</p>
<p class="card__tech">HTML, CSS, JavaScript</p>
</div>
<div class="card__actions">
<a class="btn btn--ghost" href="https://github.com/Vasu-Dev-arch/portfolio" target="_blank" rel="noopener">GitHub</a>
</div>
</article>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="section" id="contact">
<div class="container">
<h2 class="section__title">Contact</h2>
<div class="contact__grid">
<div class="contact__info">
<ul class="list">
<li><a href="mailto:vasu40405@example.com">Gmail</a></li>
<li><a href="https://github.com/Vasu-Dev-arch" target="_blank" rel="noopener">GitHub</a></li>
<li><a href="https://www.linkedin.com/in/vasudevan-j" target="_blank" rel="noopener">LinkedIn</a></li>
</ul>
</div>
<form class="form" id="contactForm">
<div class="form__row">
<label class="form__label" for="name">Name</label>
<input class="form__input" id="name" name="name" type="text" placeholder="Your name" required />
</div>
<div class="form__row">
<label class="form__label" for="email">Email</label>
<input class="form__input" id="email" name="email" type="email" placeholder="you@example.com" required />
</div>
<div class="form__row">
<label class="form__label" for="message">Message</label>
<textarea class="form__textarea" id="message" name="message" rows="4" placeholder="How can I help?" required></textarea>
</div>
<button class="btn btn--primary" type="submit">Send Message</button>
</form>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container footer__grid">
<p>© <span id="year"></span> VASUDEVAN. All rights reserved.</p>
<div class="footer__links">
<a href="https://github.com/Vasu-Dev-arch" target="_blank" rel="noopener" aria-label="GitHub">GitHub</a>
<a href="https://linkedin.com/in/vasudevan-j" target="_blank" rel="noopener" aria-label="LinkedIn">LinkedIn</a>
<a href="mailto:vasu40405@gmail.com" aria-label="Email">Email</a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>