Skip to content

Commit b3baf4e

Browse files
SakthiProgrammerSakthiProgrammer
committed
Fix: Education section style changed to time-line
1 parent 8a12728 commit b3baf4e

File tree

2 files changed

+195
-36
lines changed

2 files changed

+195
-36
lines changed

‎index.html‎

Lines changed: 43 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
<!-- Hero Section -->
9494
<section id="home" class="hero-section">
9595
<div class="hero-container">
96-
<div class="hero-content fade-in">
96+
<div class="hero-content "> <!--fade-in-->
9797
<h1 class="hero-title">
9898
Hello, I'm <span class="text-primary">Sakthivel D</span>
9999
</h1>
@@ -134,7 +134,7 @@ <h2 class="hero-subtitle">
134134
</section>
135135

136136
<!-- Experience Section -->
137-
<section id="experience" class="section experience">
137+
<section id="experience" class="section section-alt">
138138
<div class="timeline-container">
139139
<h2 class="section-title animate-on-scroll">Experience</h2> <!--animate-on-scroll-->
140140
<div class="timeline animate-on-scroll">
@@ -171,7 +171,7 @@ <h4>Flattrade Broking Private Limited | Chennai, India</h4>
171171

172172

173173
<!-- Skills Section -->
174-
<section id="skills" class="section section-alt">
174+
<section id="skills" class="section ">
175175
<div class="container">
176176
<h2 class="section-title animate-on-scroll">Skills</h2>
177177
<div class="skills-grid">
@@ -285,30 +285,48 @@ <h3>Tools & Technologies</h3>
285285
</section>
286286

287287
<!-- Education Section -->
288-
<section id="education" class="section">
288+
<section id="education" class="section section-alt">
289289
<div class="container">
290290
<h2 class="section-title animate-on-scroll">Education</h2>
291291

292-
<!-- Education Subsection -->
293-
<div class="education-subsection">
294-
<h3 class="subsection-title animate-on-scroll">Academic Background</h3>
295-
<div class="education-grid">
296-
<div class="education-card animate-on-scroll">
297-
<h4>B.sc in Computer Science</h4>
298-
<h5>KK GOVT. ARTS & SCIENCE COLLEGE</h5>
299-
<span class="education-date">2021 - 2024 | CGPA 7.5 / 10</span>
300-
<p>Comprehensive study of computer science fundamentals, programming languages, and software
301-
development practices.</p>
292+
<div class="edu-timeline">
293+
<div class="edu-item">
294+
<div class="edu-left">
295+
<span class="edu-dot"></span>
302296
</div>
303-
<div class="education-card animate-on-scroll">
304-
<h4>HSC - Computer Science</h4>
305-
<h5>GOVT. HR SEC SCHOOL</h5>
306-
<span class="education-date">2019 - 2021 | Cum Per : 82.25</span>
307-
<p>Higher secondary education with focus on computer science and mathematics.</p>
297+
<div class="edu-right">
298+
<!-- <span class="edu-right-arrow"></span> -->
299+
<div clas="right-container-arrow-border"><span class="right-container-arrow"></span></div>
300+
301+
<div class="edu-card">
302+
<h3>B.Sc in Computer Science</h3>
303+
<h4>KK GOVT. ARTS & SCIENCE COLLEGE</h4>
304+
<span class="edu-date">2021 - 2024 | CGPA 7.5 / 10</span>
305+
<p>Comprehensive study of computer science fundamentals, programming languages, and software
306+
development practices.</p>
307+
</div>
308+
</div>
309+
</div>
310+
311+
<div class="edu-item">
312+
<div class="edu-left">
313+
<span class="edu-dot"></span>
314+
</div>
315+
<div class="edu-right">
316+
<div clas="right-container-arrow-border"><span class="right-container-arrow"></span></div>
317+
318+
<!-- <span class="edu-right-arrow"></span> -->
319+
<div class="edu-card">
320+
<h3>HSC - Computer Science</h3>
321+
<h4>GOVT. HR SEC SCHOOL</h4>
322+
<span class="edu-date">2019 - 2021 | Cum Per : 82.25</span>
323+
<p>Higher secondary education with focus on computer science and mathematics.</p>
324+
</div>
308325
</div>
309326
</div>
310327
</div>
311328

329+
312330
<!-- Achievements & Profiles Section -->
313331
<div class="achievements-subsection">
314332
<h3 class="subsection-title animate-on-scroll">Achievements & Profiles</h3>
@@ -361,7 +379,7 @@ <h4>Java FullStack Development</h4>
361379
</section>
362380

363381
<!-- Projects Section -->
364-
<section id="projects" class="section section-alt">
382+
<section id="projects" class="section">
365383
<div class="container">
366384
<h2 class="section-title animate-on-scroll">Projects</h2>
367385
<div class="projects-grid">
@@ -405,7 +423,7 @@ <h3>Car Rental System (Console-Based Application)</h3>
405423
</section>
406424

407425
<!-- About Section -->
408-
<section id="about" class="section">
426+
<section id="about" class="section section-alt">
409427
<div class="container">
410428
<h2 class="section-title animate-on-scroll">About Me</h2>
411429
<div class="about-content">
@@ -444,7 +462,7 @@ <h2 class="section-title animate-on-scroll">About Me</h2>
444462
</section>
445463

446464
<!-- Contact Section -->
447-
<section id="contact" class="section section-alt">
465+
<section id="contact" class="section">
448466
<div class="container">
449467
<h2 class="section-title animate-on-scroll">Contact Me</h2>
450468
<div class="contact-content">
@@ -455,9 +473,10 @@ <h3>Let's work together</h3>
455473
you are looking for a dedicated developer to contribute to your team or have a project idea that
456474
requires technical expertise, I would be glad to connect.
457475

458-
I am passionate about delivering high-quality solutions and continuously improving my skills,
459-
and I look forward to exploring how I can add value to your organization.
460476
</p>
477+
<p>
478+
I am passionate about delivering high-quality solutions and continuously improving my skills,
479+
and I look forward to exploring how I can add value to your organization.</p>
461480
<!-- <div class="contact-details">
462481
<div class="contact-item">
463482
<span class="contact-icon">📧</span>

‎styles.css‎

Lines changed: 152 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
--color-accent: #00CAFF;
77
--color-light: #00FFDE;
88
--color-background: #EDE8F5;
9-
--font-family: 'Poppins', sans-serif;
9+
--color-green : #1995AD;
10+
--text-family: 'Nunito', sans-serif;
1011
}
1112

1213
* {
@@ -16,7 +17,7 @@
1617
}
1718

1819
body {
19-
font-family: var(--font-family);
20+
font-family: var(--text-family);
2021
line-height: 1.6;
2122
color: #333;
2223
overflow-x: hidden;
@@ -545,7 +546,7 @@ body {
545546
}
546547

547548
.section-alt {
548-
background: linear-gradient(135deg, var(--color-background) 0%, rgba(173, 187, 218, 0.3) 100%);
549+
background: #EBF4F6;
549550
}
550551

551552
.section-title {
@@ -585,9 +586,9 @@ body {
585586

586587

587588
/* Experience Section */
588-
.experience {
589+
/* .experience {
589590
background: #EBF4F6;
590-
}
591+
} */
591592

592593

593594
/* Each timeline item */
@@ -604,7 +605,7 @@ body {
604605
top: 12px;
605606
width: 16px;
606607
height: 16px;
607-
background: var(--color-accent);
608+
background: var(--color-green);
608609
border-radius: 50%;
609610
border: 3px solid #fff;
610611
/* inner white border */
@@ -642,7 +643,7 @@ body {
642643
margin-left: -3px;
643644
width: 4px;
644645
height: 100%;
645-
background: var(--color-accent);
646+
background: var(--color-green);
646647
z-index: 0;
647648
/* animation: moveline 6s linear forwards; */
648649
}
@@ -665,7 +666,7 @@ body {
665666
/* Outer arrow (border outline) */
666667
border-top: 16px solid transparent;
667668
border-bottom: 16px solid transparent;
668-
border-right: 16px solid var(--color-accent);
669+
border-right: 16px solid var(--color-green);
669670
}
670671

671672
.right-container-arrow::after {
@@ -704,7 +705,7 @@ body {
704705
padding: 20px 30px;
705706
border-radius: 12px;
706707
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
707-
border-left: 4px solid var(--color-accent);
708+
border-left: 4px solid var(--color-green);
708709
/* margin: 20px 0; */
709710
}
710711

@@ -726,7 +727,7 @@ body {
726727
height: 50px;
727728
background: #fff;
728729
border-radius: 50%;
729-
border: 2px solid var(--color-accent);
730+
border: 2px solid var(--color-green);
730731
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
731732
/* display: flex; */
732733
/* align-items: center; */
@@ -750,7 +751,7 @@ body {
750751
font-family: "Open Sans";
751752
font-size: 1.3rem;
752753
margin-bottom: 5px;
753-
color: #1995AD;
754+
color: var(--color-green);
754755
}
755756
.timeline-card h4 {
756757
font-size: 1rem;
@@ -990,7 +991,8 @@ body {
990991

991992

992993
/* Education Section */
993-
.education-subsection,
994+
995+
/* .education-subsection,
994996
.achievements-subsection,
995997
.coursework-subsection {
996998
margin-bottom: 3rem;
@@ -1042,8 +1044,146 @@ body {
10421044
font-style: italic;
10431045
margin-bottom: 1rem;
10441046
display: block;
1047+
} */
1048+
1049+
/* TIMELINE WRAPPER */
1050+
1051+
/* Timeline wrapper */
1052+
.edu-timeline {
1053+
width: 90%;
1054+
max-width: 1000px;
1055+
margin: 40px auto;
1056+
position: relative;
1057+
font-family: "Nunito", system-ui, sans-serif;
1058+
}
1059+
1060+
/* Two-column rows */
1061+
.edu-item {
1062+
display: grid;
1063+
grid-template-columns: 80px 1fr;
1064+
gap: 20px;
1065+
align-items: start;
1066+
position: relative;
1067+
margin-bottom: 50px; /* GAP between items */
1068+
}
1069+
1070+
/* Vertical line */
1071+
.edu-timeline::before {
1072+
content: "";
1073+
position: absolute;
1074+
left: 40px; /* half of 80px */
1075+
top: 47px;
1076+
bottom: 0;
1077+
width: 4px;
1078+
background: var(--color-green);
1079+
border-radius: 2px;
1080+
z-index: 0;
1081+
}
1082+
1083+
/* Left column (dot on the line) */
1084+
.edu-left {
1085+
position: relative;
1086+
display: flex;
1087+
justify-content: center;
1088+
}
1089+
1090+
.edu-dot {
1091+
margin-left: 3px;
1092+
display: inline-block;
1093+
width: 18px;
1094+
height: 18px;
1095+
margin-top: 47px;
1096+
background: var(--color-green);
1097+
border-radius: 50%;
1098+
border: 3px solid #fff;
1099+
box-shadow: 0 0 0 3px rgba(25,149,173,0.12);
1100+
z-index: 2;
1101+
}
1102+
1103+
/* Right column (card area + arrow) */
1104+
.edu-right {
1105+
position: relative;
1106+
text-align: left; /* Always left align text */
1107+
}
1108+
1109+
/* Card */
1110+
.edu-card {
1111+
margin-left: -2px;
1112+
background: #fff;
1113+
padding: 20px 28px;
1114+
border-radius: 12px;
1115+
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
1116+
border-left: 4px solid var(--color-green);
1117+
position: relative;
1118+
z-index: 3;
10451119
}
10461120

1121+
/* Arrow styles (your version applied here) */
1122+
.edu-right-arrow {
1123+
position: absolute;
1124+
top: 38px; /* adjust vertical alignment */
1125+
left: -18px; /* position arrow touching timeline */
1126+
width: 0;
1127+
height: 0;
1128+
1129+
/* Outer arrow */
1130+
border-top: 16px solid transparent;
1131+
border-bottom: 16px solid transparent;
1132+
border-right: 16px solid var(--color-green);
1133+
}
1134+
1135+
.edu-right-arrow::after {
1136+
content: "";
1137+
position: absolute;
1138+
top: -15px;
1139+
left: 2px;
1140+
width: 0;
1141+
height: 0;
1142+
1143+
/* Inner white arrow */
1144+
border-top: 15px solid transparent;
1145+
border-bottom: 15px solid transparent;
1146+
border-right: 15px solid #fff;
1147+
}
1148+
1149+
/* Typography */
1150+
.edu-card h3 {
1151+
font-size: 1.2rem;
1152+
margin-bottom: 6px;
1153+
color: var(--color-green);
1154+
}
1155+
.edu-card h4 {
1156+
font-size: 1rem;
1157+
margin-bottom: 8px;
1158+
color: #444;
1159+
}
1160+
.edu-date {
1161+
display: inline-block;
1162+
font-size: 0.9rem;
1163+
padding: 4px 10px;
1164+
border-radius: 20px;
1165+
background: #f9f9f9;
1166+
border: 1px solid var(--color-green);
1167+
margin-bottom: 10px;
1168+
color: #555;
1169+
}
1170+
.edu-card p {
1171+
margin-top: 8px;
1172+
font-size: 1rem;
1173+
color: #333;
1174+
line-height: 1.6;
1175+
}
1176+
1177+
/* Responsive */
1178+
@media (max-width: 700px) {
1179+
.edu-item { grid-template-columns: 40px 1fr; gap: 12px; }
1180+
.edu-timeline::before { left: 20px; }
1181+
.edu-dot { width: 12px; height: 12px; margin-top: 47px; }
1182+
.edu-right-arrow, .edu-right-arrow::after { display: none; }
1183+
.edu-card { padding: 14px 18px; }
1184+
}
1185+
1186+
10471187
/* Achievements */
10481188
.achievements-grid {
10491189
display: grid;

0 commit comments

Comments
 (0)