feat: display Skills and Languages sections side by side in expert profile

Uses CSS Grid two-column layout with responsive fallback to single column on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Thomas Reitz 2026-03-09 10:36:52 +01:00
parent b326081c54
commit c7992040a3
2 changed files with 17 additions and 2 deletions

View file

@ -4,6 +4,18 @@
gap: 1.5rem; gap: 1.5rem;
} }
.twoColumnRow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
@media (max-width: 900px) {
.twoColumnRow {
grid-template-columns: 1fr;
}
}
.loading { .loading {
text-align: center; text-align: center;
color: var(--color-text-muted); color: var(--color-text-muted);

View file

@ -100,9 +100,12 @@ export function ExpertProfileTab() {
return ( return (
<div className={styles.expertContainer}> <div className={styles.expertContainer}>
{/* Skills + Sprachen nebeneinander */}
<div className={styles.twoColumnRow}>
<SkillsSection skills={profile.skills} onUpdate={loadProfile} /> <SkillsSection skills={profile.skills} onUpdate={loadProfile} />
<ExperienceSection experiences={profile.experiences} onUpdate={loadProfile} />
<LanguagesSection languages={profile.languages} onUpdate={loadProfile} /> <LanguagesSection languages={profile.languages} onUpdate={loadProfile} />
</div>
<ExperienceSection experiences={profile.experiences} onUpdate={loadProfile} />
<ProjectsSection projects={profile.projects} onUpdate={loadProfile} /> <ProjectsSection projects={profile.projects} onUpdate={loadProfile} />
<CertificationsSection certifications={profile.certifications} onUpdate={loadProfile} /> <CertificationsSection certifications={profile.certifications} onUpdate={loadProfile} />
<AttachmentsSection attachments={profile.attachments} onUpdate={loadProfile} /> <AttachmentsSection attachments={profile.attachments} onUpdate={loadProfile} />