Skip to content

Commit 3a4a1b0

Browse files
rohitdavasrohitdavas
committed
bringing the skills to the center part
1 parent 7c3cc3f commit 3a4a1b0

File tree

2 files changed

+208
-18
lines changed

2 files changed

+208
-18
lines changed

‎components/about.html

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,8 @@
22
<div class="container">
33
<div class="about-grid">
44
<div class="about-content">
5-
<h2>About Me</h2>
65
<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>
76
<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>
187
</div>
198
<div class="profile-section">
209
<h1>Rohit Kumar</h1>
@@ -29,6 +18,43 @@ <h1>Rohit Kumar</h1>
2918
</div>
3019
</div>
3120
</div>
21+
<div class="skills">
22+
<h3>Skills</h3>
23+
<div class="skills-group">
24+
<h4>Core AI & ML</h4>
25+
<ul>
26+
<li>Deep Learning</li>
27+
<li>Computer Vision</li>
28+
<li>NLP</li>
29+
<li>Research</li>
30+
</ul>
31+
</div>
32+
<div class="skills-group">
33+
<h4>Frameworks & Tools</h4>
34+
<ul>
35+
<li>PyTorch</li>
36+
<li>TensorFlow</li>
37+
<li>Python</li>
38+
<li>C++</li>
39+
</ul>
40+
</div>
41+
<div class="skills-group">
42+
<h4>3D & Game Engines</h4>
43+
<ul>
44+
<li>Blender</li>
45+
<li>Unreal Engine</li>
46+
<li>Unity</li>
47+
</ul>
48+
</div>
49+
</div>
50+
<div class="established-work">
51+
<h3>Established Work</h3>
52+
<ul>
53+
<li>Hand Tracking Product</li>
54+
<li>Instrument Tracking Solution</li>
55+
<li>Full Body Tracking</li>
56+
</ul>
57+
</div>
3258
</div>
3359
<div class="code-section">
3460
<div class="typing-container">

‎styles.css

Lines changed: 171 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -288,29 +288,193 @@ body {
288288
line-height: 1.6;
289289
}
290290

291+
.profile-section {
292+
text-align: center;
293+
padding: 0.5rem;
294+
}
295+
296+
.profile-section h1 {
297+
font-size: 1.8rem;
298+
margin-bottom: 0.3rem;
299+
color: var(--heading-color);
300+
}
301+
302+
.profile-section > p {
303+
color: var(--text-secondary);
304+
margin-bottom: 1rem;
305+
font-size: 0.9rem;
306+
}
307+
308+
.profile-card {
309+
width: 150px;
310+
height: 150px;
311+
margin: 0 auto 1rem;
312+
perspective: 1000px;
313+
}
314+
315+
.skills {
316+
margin-top: 0.5rem;
317+
text-align: left;
318+
}
319+
320+
.skills h3, .established-work h3 {
321+
font-size: 0.7rem;
322+
margin-bottom: 0.2rem;
323+
color: var(--heading-color);
324+
}
325+
326+
.skills-group {
327+
margin-bottom: 0.2rem;
328+
}
329+
330+
.skills-group h4 {
331+
color: var(--link-color);
332+
font-size: 0.6rem;
333+
margin-bottom: 0.15rem;
334+
font-weight: 500;
335+
}
336+
337+
.skills-group ul, .established-work ul {
338+
list-style: none;
339+
padding: 0;
340+
display: flex;
341+
flex-wrap: wrap;
342+
gap: 0.15rem;
343+
}
344+
345+
.skills-group li {
346+
background: var(--card-bg);
347+
padding: 0.1rem 0.3rem;
348+
border-radius: 8px;
349+
font-size: 0.5rem;
350+
border: 1px solid var(--border-color);
351+
transition: all 0.2s ease;
352+
}
353+
354+
.skills-group li:hover {
355+
transform: translateY(-1px);
356+
box-shadow: 0 1px 4px var(--shadow-color);
357+
border-color: var(--link-color);
358+
}
359+
360+
.established-work {
361+
margin-top: 0.8rem;
362+
text-align: left;
363+
}
364+
365+
.established-work li {
366+
background: var(--card-bg);
367+
padding: 0.2rem 0.4rem;
368+
border-radius: 4px;
369+
font-size: 0.6rem;
370+
border: 1px solid var(--border-color);
371+
transition: all 0.2s ease;
372+
font-weight: 500;
373+
margin-bottom: 0.15rem;
374+
}
375+
376+
.established-work li:hover {
377+
transform: translateY(-1px);
378+
box-shadow: 0 1px 4px var(--shadow-color);
379+
border-color: var(--link-color);
380+
color: var(--link-color);
381+
}
382+
383+
@media (max-width: 768px) {
384+
.profile-card {
385+
width: 120px;
386+
height: 120px;
387+
}
388+
389+
.skills-group ul, .established-work ul {
390+
gap: 0.25rem;
391+
}
392+
393+
.skills-group li {
394+
padding: 0.15rem 0.4rem;
395+
font-size: 0.7rem;
396+
}
397+
398+
.established-work li {
399+
padding: 0.25rem 0.6rem;
400+
font-size: 0.75rem;
401+
}
402+
}
403+
291404
.skills {
292405
margin-top: 2rem;
293406
}
294407

295-
.skills h3 {
408+
.skills h3, .established-work h3 {
296409
font-size: 1.8rem;
297-
margin-bottom: 1rem;
298-
color: #2c3e50;
410+
margin-bottom: 1.5rem;
411+
color: var(--heading-color);
299412
}
300413

301-
.skills ul {
414+
.skills-group {
415+
margin-bottom: 1.5rem;
416+
}
417+
418+
.skills-group h4 {
419+
color: var(--link-color);
420+
font-size: 1.2rem;
421+
margin-bottom: 0.8rem;
422+
font-weight: 500;
423+
}
424+
425+
.skills-group ul, .established-work ul {
302426
list-style: none;
303427
padding: 0;
304428
display: flex;
305429
flex-wrap: wrap;
306-
gap: 1rem;
430+
gap: 0.8rem;
307431
}
308432

309-
.skills li {
310-
background: #f0f2f5;
433+
.skills-group li {
434+
background: var(--card-bg);
311435
padding: 0.5rem 1rem;
312436
border-radius: 20px;
313437
font-size: 0.9rem;
438+
border: 1px solid var(--border-color);
439+
transition: all 0.3s ease;
440+
}
441+
442+
.skills-group li:hover {
443+
transform: translateY(-2px);
444+
box-shadow: 0 2px 8px var(--shadow-color);
445+
border-color: var(--link-color);
446+
}
447+
448+
.established-work {
449+
margin-top: 3rem;
450+
}
451+
452+
.established-work li {
453+
background: var(--card-bg);
454+
padding: 0.8rem 1.2rem;
455+
border-radius: 8px;
456+
font-size: 1rem;
457+
border: 1px solid var(--border-color);
458+
transition: all 0.3s ease;
459+
font-weight: 500;
460+
}
461+
462+
.established-work li:hover {
463+
transform: translateY(-2px);
464+
box-shadow: 0 2px 8px var(--shadow-color);
465+
border-color: var(--link-color);
466+
color: var(--link-color);
467+
}
468+
469+
@media (max-width: 768px) {
470+
.skills-group ul, .established-work ul {
471+
gap: 0.6rem;
472+
}
473+
474+
.skills-group li, .established-work li {
475+
width: 100%;
476+
text-align: center;
477+
}
314478
}
315479

316480
/* Interests Section */

0 commit comments

Comments
 (0)