-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
213 lines (190 loc) · 10.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sooraj R</title>
<link rel="stylesheet" href="styles.css">
<script>
document.addEventListener('scroll', function() {
let scrollPosition = window.pageYOffset;
document.getElementById('layer1').style.transform = 'translateY(' + scrollPosition * 0.3 + 'px)';
document.getElementById('layer2').style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';
document.getElementById('layer3').style.transform = 'translateY(' + scrollPosition * 0.7 + 'px)';
});
document.addEventListener('DOMContentLoaded', function() {
const navToggle = document.getElementById('nav-toggle');
const navMenu = document.querySelector('.nav');
navToggle.addEventListener('click', function() {
navMenu.classList.toggle('nav-active');
});
// Mouse move parallax effect
const heroSection = document.querySelector('.hero');
heroSection.addEventListener('mousemove', function(e) {
const { offsetX, offsetY } = e;
const { clientWidth, clientHeight } = heroSection;
const moveX = (offsetX - clientWidth / 2) * 0.05;
const moveY = (offsetY - clientHeight / 2) * 0.05;
heroSection.style.backgroundPosition = `${50 + moveX}% ${50 + moveY}%`;
});
});
</script>
</head>
<body id="home">
<!-- Navbar -->
<nav class="custom-navbar">
<div class="container">
<a class="logo" href="#"></a>
<ul class="nav">
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="javascript:void(0)" id="nav-toggle" class="hamburger">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>
</div>
</nav>
<main>
<!-- Hero Section -->
<section class="hero">
<div class="parallax-layer" id="layer1"></div>
<div class="parallax-layer" id="layer2"></div>
<div class="parallax-layer" id="layer3"></div>
<div class="hero-text">
<h1>Hey! I'm Sooraj R</h1>
<p>Engineer | Developer | Music Enthusiast</p>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="about-content">
<h2>About Me</h2>
<p>In a world where wires intertwine with dreams and code shapes reality, I'm Sooraj R, the maestro of embedded systems. My work turns the mundane into the extraordinary, from crafting seamless Python solutions to orchestrating robots with a touch of magic. Journey through my portfolio and discover how I blend the art of engineering with a dash of imagination.</p>
</div>
</section>
<div id="fh5co-resume" class="fh5co-bg-color">
<div class="container">
<!--<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
<h2>My Resume</h2>
</div>
</div>-->
<div class="row">
<div class="col-md-12 col-md-offset-0">
<ul class="timeline">
<li class="timeline-heading text-center animate-box">
<div><h3>Work Experience</h3></div>
</li>
<li class="animate-box timeline-unverted">
<div class="timeline-badge"><i class="icon-suitcase"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Embedded Systems Engineer</h3>
<span class="company">Vikra Ocean Tech Pvt Ltd - 2022 may - Current</span>
</div>
<div class="timeline-body">
<p>Research and Development of underwater robotics and camera systems.</p>
</div>
</div>
</li>
<li class="timeline-inverted animate-box">
<div class="timeline-badge"><i class="icon-suitcase"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Inspection Engineer</h3>
<span class="company">Overseas Merchandise Inspection Co (India) Pvt Ltd (intership) - 2022 feb - 2022 apr</span>
</div>
<div class="timeline-body">
<p>Inspection of oil pumps part for manufacturing errors and damages in engine components.</p>
</div>
</div>
</li>
<!--<li class="animate-box timeline-unverted">
<div class="timeline-badge"><i class="icon-suitcase"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">UI/UX Designer</h3>
<span class="company">Company Name - 2010 - 2012</span>
</div>
<div class="timeline-body">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
</div>
</li>-->
<br>
<li class="timeline-heading text-center animate-box">
<div><h3>Education</h3></div>
</li>
<li class="timeline-inverted animate-box">
<div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Bachelors Degree</h3>
<span class="company">Nehru Institute of Engineering and Technology - 2017 - 2021</span>
</div>
<div class="timeline-body">
<p>Completed a Bachelor's degree in Mechatronics Engineering, combining mechanical, electrical, and software engineering principles to design and develop advanced automated systems.</p>
</div>
</div>
</li>
<li class="animate-box timeline-unverted">
<div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Secondary School</h3>
<span class="company">Govt VHSS - 2015 - 2017</span>
</div>
<div class="timeline-body">
<p>Completed secondary school with a focus on Computer Science and Information Technology, gaining foundational knowledge in programming, systems analysis, and IT infrastructure.</p>
</div>
</div>
</li>
<!--<li class="timeline-inverted animate-box">
<div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Diploma Course</h3>
<span class="company">College Name - 1999 - 2001</span>
</div>
<div class="timeline-body">
<p>Far far away, behind the word mountains, they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
</div>
</li>
<li class="animate-box timeline-unverted">
<div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Graduation</h3>
<span class="company">College Name - 1994 - 1998</span>
</div>
<div class="timeline-body">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
</div>-->
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Projects Section -->
<section id="projects">
<h2>Projects</h2>
<p>Still coding this part.</p>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Contact</h2>
<p>Email: soorajr011@gmail.com</p>
</section>
</main>
<!-- Footer -->
<footer>
<p>© 2024 Sooraj R. All rights reserved.</p>
</footer>
</body>
</html>