yolando/website-portofolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add education section with dynamic timeline component fetching from database

Browse Source
This commit is contained in:
Yolando
2026-04-11 01:33:18 +07:00
parent 6387e2e5a5
commit 87f6114807
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/features/education/education-section.tsx
View File

@@ -60,7 +60,7 @@ export async function EducationSection() {
index % 2 === 0 ? "md:text-right" : "md:text-left" index % 2 === 0 ? "md:text-right" : "md:text-left"
}`} }`}
> >
<span className="inline-block font-mono text-xs text-sky-500 font-semibold tracking-wider uppercase mb-2"> <span className="inline-block font-mono text-xs text-accent font-semibold tracking-wider uppercase mb-2">
{item.period} {item.period}
</span> </span>
<h3 className="text-xl font-bold mb-1"> <h3 className="text-xl font-bold mb-1">
@@ -71,7 +71,7 @@ export async function EducationSection() {
index % 2 === 0 ? "md:justify-end" : "md:justify-start" index % 2 === 0 ? "md:justify-end" : "md:justify-start"
}`} }`}
> >
<School size={14} className="text-sky-500/70" /> <School size={14} className="text-accent/70" />
<span>{item.institution}</span> <span>{item.institution}</span>
</div> </div>
@@ -88,7 +88,7 @@ export async function EducationSection() {
</span> </span>
)} )}
{item.gpa && ( {item.gpa && (
<span className="inline-flex items-center gap-1.5 rounded-full bg-sky-500/10 px-3 py-1 text-xs text-sky-600 dark:text-sky-400"> <span className="inline-flex items-center gap-1.5 rounded-full bg-accent/10 px-3 py-1 text-xs text-accent">
{t("gpaLabel")}: {item.gpa} {t("gpaLabel")}: {item.gpa}
</span> </span>
)} )}
@@ -102,8 +102,8 @@ export async function EducationSection() {
)} )}
{item.finalProjectUrl && ( {item.finalProjectUrl && (
<div className="inline-flex max-w-md flex-col gap-3 rounded-2xl border border-sky-500/15 bg-sky-500/5 p-4"> <div className="inline-flex max-w-md flex-col gap-3 rounded-2xl border border-accent/15 bg-accent/5 p-4">
<span className="text-[10px] font-mono font-bold uppercase tracking-[0.2em] text-sky-600 dark:text-sky-400"> <span className="text-[10px] font-mono font-bold uppercase tracking-[0.2em] text-accent">
{t("finalProjectLabel")} {t("finalProjectLabel")}
</span> </span>
{item.finalProjectTitle && ( {item.finalProjectTitle && (
@@ -115,7 +115,7 @@ export async function EducationSection() {
href={item.finalProjectUrl} href={item.finalProjectUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-2 text-sm font-medium text-sky-600 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300 transition-colors" className="inline-flex items-center gap-2 text-sm font-medium text-accent hover:text-accent/80 transition-colors"
> >
{t("viewFinalProject")} {t("viewFinalProject")}
<ExternalLink size={14} /> <ExternalLink size={14} />
@@ -124,7 +124,7 @@ export async function EducationSection() {
)} )}
</div> </div>
<div className="absolute left-0 md:left-1/2 md:-translate-x-1/2 top-0 w-12 h-12 rounded-xl bg-card border-2 border-sky-500/30 flex items-center justify-center text-sky-500 shadow-lg shadow-sky-500/10 z-10"> <div className="absolute left-0 md:left-1/2 md:-translate-x-1/2 top-0 w-12 h-12 rounded-xl bg-card border-2 border-accent/30 flex items-center justify-center text-accent shadow-lg shadow-accent/10 z-10">
{item.icon} {item.icon}
</div> </div>