-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (146 loc) · 8.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glad You're Here | Kulvir Jaydeep Chavda</title>
<!-- Favicon and App Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/site.webmanifest">
<link rel="shortcut icon" href="icons/favicon.ico">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-config" content="icons/browserconfig.xml">
<meta name="theme-color" content="#000000">
<!-- Main CSS File -->
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation Bar -->
<nav>
<div class="nav-container">
<!-- Logo linking to the hero section -->
<div class="nav-logo">
<a href="#hero">Kulvir Chavda</a>
</div>
<!-- Hamburger icon (visible on narrow window) -->
<div class="hamburger" id="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<!-- Navigation menu for desktop -->
<ul class="nav-menu" id="nav-menu">
<li><a href="#about">About Me</a></li>
<li><a href="education.html">Education, Skills & Courses</a></li>
<li><a href="work.html">Work Experience</a></li>
<li><a href="projects.html">Engineering Projects</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="#contact">Get in Touch!</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<header id="hero" class="hero">
<div class="hero-content">
<!-- Main heading for the page -->
<h1 style="font-weight: normal;">Hi, I'm Kulvir. I like engineering...</h1>
</div>
</header>
<!-- About Section -->
<section id="about" class="section about-section white-background">
<div class="container">
<!-- Image related to the About section -->
<div class="floating-image">
<img src="images/about.jpg" alt="About Kulvir" style="border: black 2px solid; border-radius: 10px;">
</div>
<!-- Text content about me -->
<div class="content">
<h2>About Me</h2>
<p>As a passionate and driven aerospace engineering upperclassman at the University of Illinois Urbana-Champaign, I’m eager to apply my knowledge and skills to cutting-edge aerospace projects. With hands-on experience in unmanned aerial systems, satellite design, and rocket launch systems, I’ve honed my abilities in propulsion, aerodynamics, and avionics through internships and international competitions.
I have led technical teams in aerospace initiatives like high-altitude rockets and 3D-printed drones while mentoring the next generation of STEM talent. I’m also the founder of "Cosmological" – a platform for sharing and exploring science. Let’s connect!</p>
</div>
</div>
</section>
<!-- Horizontal Resume Sections (Education, Work Experience, Projects, Research) -->
<section class="resume-sections">
<!-- Education Section -->
<div class="section resume-section">
<div class="container">
<div class="content">
<h3>Education, Skills & Courses</h3>
<p>I am studying aerospace engineering at the University of Illinois at Urbana-Champaign. Through my education, projects, work, and research, I’ve developed skills across various fields. I’m always learning and ensuring that I can apply what I’ve learned to real-world applications.</p>
<!-- Button linking to the detailed Education page -->
<a href="education.html" class="bubble">Learn More</a>
</div>
<!-- Image associated with Education -->
<div class="floating-image">
<img src="images/skills.jpg" alt="Education" style="border: black 2px solid; border-radius: 10px;">
</div>
</div>
</div>
<!-- Work Experience Section (Reversed) -->
<div class="section resume-section reverse">
<div class="container">
<div class="floating-image">
<img src="images/work.jpg" alt="Work Experience" style="border: black 2px solid; border-radius: 10px;">
</div>
<div class="content">
<h3>Work Experience</h3>
<p>My experience in both industry and academia has allowed me to understand the pace and requirements of different environments. I’ve successfully adapted and contributed positively to the organizations I’ve been a part of. While my roles have primarily focused on aerospace engineering and computer science, they cover core engineering areas such as systems, electrical, materials, mechanical, and chemical engineering.</p>
<!-- Button linking to the detailed Work Experience page -->
<a href="work.html" class="bubble">Learn More</a>
</div>
</div>
</div>
<!-- Projects Section -->
<div class="section resume-section">
<div class="container">
<div class="content">
<h3>Engineering Projects</h3>
<p>I’m a strong believer in the famous Oppenheimer quote, "Theory will only take you so far." I enjoy pushing the boundaries of what’s possible. From self-landing rockets to indoor skydiving robots, I strive to innovate and develop my skills by applying what I learn to real engineering projects. I look forward to expanding this list a lot.</p>
<!-- Button linking to the detailed Projects page -->
<a href="projects.html" class="bubble">Learn More</a>
</div>
<!-- Image associated with Projects -->
<div class="floating-image">
<img src="images/projects.jpg" alt="Projects" style="border: black 2px solid; border-radius: 10px;">
</div>
</div>
</div>
<!-- Research Section (Reversed) -->
<div class="section resume-section reverse">
<div class="container">
<div class="floating-image">
<img src="images/research.jpg" alt="Research & Writing" style="border: black 2px solid; border-radius: 10px;">
</div>
<div class="content">
<h3>Research</h3>
<p>I thoroughly enjoy discovering new applications for what I learn in my engineering courses. From being a young kid who uploaded physics articles to his WordPress website to publishing my first research paper, research has been integral to my journey as an engineering student. I’m excited to share my findings with you.</p>
<!-- Button linking to the detailed Research page -->
<a href="research.html" class="bubble">Learn More</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-container">
<!-- Footer contact info -->
<h3 style="padding-bottom: 10px;">Get in Touch!</h3>
<p>Email: <a href="mailto:chavdakulvir@gmail.com">chavdakulvir@gmail.com</a></p>
<p>Phone: +1 (447) 902-1541</p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/kulvirchavda">www.linkedin.com/in/kulvirchavda</a></p>
<p style="padding-bottom: 10px;">Location: Champaign, Illinois, USA</p>
<!-- Button linking to the resume (PDF) -->
<button onclick="window.location.href='files/resume.pdf'" class="resume-button">
<img src="images/resume-icon.png" alt="Resume Icon"> View Resume
</button>
</div>
</footer>
<!-- Script file -->
<script src="js/script.js"></script>
</body>
</html>