Skip to content

Commit 2e4aa7c

Browse files
rohitdavasrohitdavas
committed
added the section of the name and title to the about me part
1 parent fc6953d commit 2e4aa7c

File tree

5 files changed

+184
-55
lines changed

5 files changed

+184
-55
lines changed

‎components/about.html‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,34 @@
11
<section id="about" class="about">
22
<div class="container">
3-
<h2>About Me</h2>
4-
<div class="about-content">
5-
<div class="about-text">
6-
<p>I'm an AI Software Developer at Captury GmbH, where I work on cutting-edge computer vision and deep learning projects. My expertise includes dataset preparation, handpose tracking, and developing solutions for various platforms including Unreal Engine, Unity, and Oculus Quest.</p>
7-
<p>I graduated with a degree in Computer Science and Engineering from IIT Jammu in 2021, where I also served as the Cultural Secretary and initiated the Student Mentorship Program.</p>
8-
<p>My expertise includes:</p>
9-
<ul>
10-
<li>Deep Learning & Computer Vision</li>
11-
<li>CPython Bindings & Build Processes</li>
12-
<li>Plugin Management for Unreal & Unity</li>
13-
<li>3D Face Landmarks & Expression Transfer</li>
14-
</ul>
3+
<div class="about-grid">
4+
<div class="about-content">
5+
<h2>About Me</h2>
6+
<p>I am a passionate AI Engineer with expertise in Deep Learning and Computer Vision. Currently working at Captury GmbH, I specialize in developing cutting-edge AI solutions.</p>
7+
<p>My journey began at IIT Jammu, where I honed my skills in computer science and developed a strong foundation in machine learning.</p>
8+
<div class="skills">
9+
<h3>Skills</h3>
10+
<ul>
11+
<li>Deep Learning</li>
12+
<li>Computer Vision</li>
13+
<li>Python</li>
14+
<li>PyTorch</li>
15+
<li>TensorFlow</li>
16+
</ul>
17+
</div>
18+
</div>
19+
<div class="profile-section">
20+
<h1>Rohit Kumar</h1>
21+
<p>AI Engineer | Deep Learning Engineer | Computer Vision </p>
22+
<div class="profile-card">
23+
<div class="profile-card-inner">
24+
<div class="profile-card-front">
25+
<img src="images/rohit-in-berlin.jpg" alt="Rohit Kumar">
26+
</div>
27+
<div class="profile-card-back">
28+
<img src="images/coder.png" alt="Code Sample">
29+
</div>
30+
</div>
31+
</div>
1532
</div>
1633
</div>
1734
</div>

‎components/hero.html‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,10 @@
11
<section id="home" class="hero">
22
<div class="code-background">
3-
<div class="code-line" data-text="import me">import me</div>
4-
<div class="code-line" data-text="me.whoIam()">me.whoIam()</div>
5-
<div class="code-line code-output" data-text=">>> &quot;Rohit&quot;">>>> "Rohit"</div>
6-
</div>
7-
<div class="hero-content">
8-
<h1>Rohit Kumar</h1>
9-
<p>AI Engineer | Deep Learning Engineer | Computer Vision </p>
10-
<div class="profile-card">
11-
<div class="profile-card-inner">
12-
<div class="profile-card-front">
13-
<img src="images/rohit-in-berlin.jpg" alt="Rohit Kumar">
14-
</div>
15-
<div class="profile-card-back">
16-
<img src="images/coder.png" alt="Code Sample">
17-
</div>
18-
</div>
3+
<div class="typing-container">
4+
<div class="code-line" data-text="import me">import me</div>
5+
<div class="code-line" data-text="me.whoIam()">me.whoIam()</div>
6+
<div class="code-line code-output" data-text=">>> &quot;Rohit&quot;">&gt;&gt;&gt; "Rohit"</div>
7+
<div class="typing-cursor"></div>
198
</div>
20-
<a href="#about" class="cta-button">Learn More</a>
219
</div>
2210
</section>

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,6 @@
1818
<div id="footer-placeholder"></div>
1919

2020
<script src="script.js"></script>
21+
<script src="js/typing.js"></script>
2122
</body>
2223
</html>

‎js/typing.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
const lines = document.querySelectorAll('.code-line');
3+
const cursor = document.querySelector('.typing-cursor');
4+
let currentLine = 0;
5+
6+
function updateCursorPosition() {
7+
const activeLine = document.querySelector('.code-line.typing');
8+
if (activeLine) {
9+
const lineRect = activeLine.getBoundingClientRect();
10+
const containerRect = document.querySelector('.typing-container').getBoundingClientRect();
11+
cursor.style.top = `${lineRect.top - containerRect.top}px`;
12+
cursor.style.left = `${lineRect.left - containerRect.left + activeLine.offsetWidth}px`;
13+
}
14+
}
15+
16+
function typeLine() {
17+
if (currentLine < lines.length) {
18+
lines[currentLine].classList.add('typing');
19+
20+
const typingDuration = 2000; // 2 seconds per line
21+
const lineDelay = 500; // 0.5 second delay between lines
22+
23+
// Update cursor position during typing
24+
const cursorInterval = setInterval(updateCursorPosition, 50);
25+
26+
setTimeout(() => {
27+
clearInterval(cursorInterval);
28+
currentLine++;
29+
if (currentLine < lines.length) {
30+
setTimeout(typeLine, lineDelay);
31+
}
32+
}, typingDuration);
33+
}
34+
}
35+
36+
// Start typing
37+
typeLine();
38+
});

‎styles.css‎

Lines changed: 111 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,56 @@ body {
113113
color: #00a2ff;
114114
}
115115

116+
.typing-container {
117+
position: relative;
118+
width: fit-content;
119+
padding: 1rem;
120+
font-family: 'Consolas', 'Monaco', monospace;
121+
}
122+
123+
.code-line {
124+
width: auto;
125+
text-align: left;
126+
white-space: pre;
127+
color: #00ff9d;
128+
overflow: hidden;
129+
position: relative;
130+
display: none;
131+
}
132+
133+
.code-line.typing {
134+
display: block;
135+
animation: typing 2s steps(30, end);
136+
}
137+
138+
.typing-cursor {
139+
position: absolute;
140+
width: 2px;
141+
height: 1.2em;
142+
background-color: #00ff9d;
143+
left: 1rem;
144+
top: 1rem;
145+
animation: blink 0.7s infinite;
146+
}
147+
148+
.code-line.code-output {
149+
color: #ff9d00;
150+
}
151+
152+
.code-line.code-output + .typing-cursor {
153+
background-color: #ff9d00;
154+
}
155+
156+
@keyframes typing {
157+
from { width: 0 }
158+
to { width: 100% }
159+
}
160+
161+
@keyframes blink {
162+
0%, 100% { opacity: 1; }
163+
50% { opacity: 0; }
164+
}
165+
116166
.hero-content {
117167
position: relative;
118168
max-width: 800px;
@@ -190,50 +240,85 @@ body {
190240
background: #fff;
191241
}
192242

193-
.container {
194-
max-width: 1200px;
195-
margin: 0 auto;
196-
padding: 0 1rem;
197-
width: 100%;
243+
.about-grid {
244+
display: grid;
245+
grid-template-columns: 1fr 1fr;
246+
gap: 2rem;
247+
align-items: center;
198248
}
199249

200250
.about-content {
201-
display: grid;
202-
grid-template-columns: 1fr;
203-
gap: 2rem;
251+
padding-right: 2rem;
252+
}
253+
254+
.about-content h2 {
255+
font-size: 2.5rem;
256+
margin-bottom: 1.5rem;
257+
color: #2c3e50;
258+
}
259+
260+
.about-content p {
261+
margin-bottom: 1.5rem;
262+
line-height: 1.6;
263+
}
264+
265+
.skills {
204266
margin-top: 2rem;
205-
max-width: 800px;
206-
margin-left: auto;
207-
margin-right: auto;
208267
}
209268

210-
.about h2 {
211-
text-align: center;
212-
margin-bottom: 2rem;
213-
font-size: 2.2rem;
269+
.skills h3 {
270+
font-size: 1.8rem;
271+
margin-bottom: 1rem;
214272
color: #2c3e50;
215273
}
216274

217-
.about-text {
218-
font-size: 1.1rem;
219-
line-height: 1.7;
275+
.skills ul {
276+
list-style: none;
277+
padding: 0;
278+
display: flex;
279+
flex-wrap: wrap;
280+
gap: 1rem;
220281
}
221282

222-
.about-text p {
223-
margin-bottom: 1.2rem;
283+
.skills li {
284+
background: #f0f2f5;
285+
padding: 0.5rem 1rem;
286+
border-radius: 20px;
287+
font-size: 0.9rem;
224288
}
225289

226-
.about-text ul {
227-
margin: 1rem 0;
228-
padding-left: 1.5rem;
229-
list-style-type: disc;
290+
.profile-section {
291+
text-align: center;
292+
padding: 2rem;
230293
}
231294

232-
.about-text li {
233-
margin-bottom: 0.5rem;
295+
.profile-section h1 {
296+
font-size: 2.5rem;
297+
margin-bottom: 1rem;
234298
color: #2c3e50;
235299
}
236300

301+
.profile-section p {
302+
color: #666;
303+
margin-bottom: 2rem;
304+
}
305+
306+
/* Responsive */
307+
@media (max-width: 768px) {
308+
.about-grid {
309+
grid-template-columns: 1fr;
310+
gap: 3rem;
311+
}
312+
313+
.about-content {
314+
padding-right: 0;
315+
}
316+
317+
.profile-section {
318+
padding: 1rem;
319+
}
320+
}
321+
237322
/* Timeline Section */
238323
.timeline {
239324
padding: 5rem 0;

0 commit comments

Comments
 (0)