valentijn/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added projects, removed ugly skill chart

Browse Source
This commit is contained in:
Valentijn
2026-04-24 15:49:28 +02:00
parent 9012debcfe
commit 408afdfd1f
10 changed files with 237 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Hero/Button.astro → src/components/Button.astro
View File

@@ -13,7 +13,7 @@ const navigationHandler = `window.open('${href}', '_blank')`;
<div class="button" onclick={navigationHandler}>
<Icon name={icon} class="icon" />
<a href={href} target="_blank" rel="noreferrer">
<a rel="noreferrer">
{label}
</a>
</div>

2
src/components/Hero/Page.astro
View File

@@ -4,7 +4,7 @@ import {study} from "../../utils/getCurrentStudy"
import hero_img from "../../assets/hero.png"
import Button from "./Button.astro"
import Button from "../Button.astro"
import EmailButton from "./EmailButton.astro"
const hero_img_src = `url(${hero_img.src})`;

64
src/components/Projects/Page.astro Normal file
View File

@@ -0,0 +1,64 @@
---
import { siteData } from '../../data/site';
import ProjectBox from './ProjectBox.astro';
import TitleCard from '../TitleCard.astro';
const projects = [...siteData.projects];
---
<div id="container">
<section class="studies-section" aria-label="Studies">
<div class="studies-list">
<TitleCard title="Projecten" description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur amet, quos "/>
{projects.map((project) => (
<ProjectBox project={project} />
))}
</div>
</section>
</div>
<style>
#container {
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
position: relative;
margin: 10px;
padding: clamp(1.5rem, 3vw, 2.5rem);
background:
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
rgb(74, 74, 74);
border-radius: 20px;
box-shadow: 0 24px 60px rgba(16, 14, 12, 0.18);
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: start;
}
.studies-section {
min-width: 0;
}
.studies-list {
display: flex;
flex-direction: column;
gap: 1.3rem;
position: relative;
}
/* Mobile: collapse to one column,
so "Kennis" ends up fully under studies */
@media (max-width: 768px) {
#container {
margin: 5px;
padding: 1rem;
grid-template-columns: 1fr;
gap: 1rem;
}
.studies-section {
margin-top: 2rem;
}
}
</style>

138
src/components/Projects/ProjectBox.astro Normal file
View File

@@ -0,0 +1,138 @@
---
const { project } = Astro.props;
import {techColors} from "../../data/site"
const colors: { [id: string] : string; } = {...techColors}
import Button from "../Button.astro";
---
<div class="container">
<div class="content">
<div class="titleRow">
<div class="titleContainer">
<div class="tech-stack">
{project.tech.map((item: string) => {
const color = colors[item] || colors["Default"];
return (
<span class="tech-badge" style={`--brand-color: ${color}`}>
{item}
</span>
);
})}
</div>
<h3 class="main-title">{project.title}</h3>
<p class="sub-title">{project.description}</p>
</div>
<Button label="Bekijk Project" href={project.link} icon="mdi:link"/>
</div>
</div>
</div>
<style>
/* ... Existing Styles Stay Exactly the Same ... */
.container {
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
position: relative;
display: flex;
align-items: stretch;
gap: 1rem;
min-height: 120px;
padding: 1rem 1rem 1rem 0.9rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
box-shadow: 0 8px 20px rgba(0,0,0,0.18);
color: white;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.container:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0,0,0,0.24);
border-color: rgba(255,255,255,0.14);
}
.content {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
}
.titleRow {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.titleContainer {
min-width: 0;
}
.main-title {
font-size: 1.1rem;
line-height: 1.2;
margin: 0 0 0.3rem 0;
font-weight: 700;
}
.sub-title {
font-size: 0.92rem;
line-height: 1.45;
margin: 0;
opacity: 0.8;
}
.tech-stack {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 0.5rem; /* Space between tags and title */
}
.tech-badge {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0.2rem 0.6rem;
/* The Magic: Using the variable from the style prop */
background: rgba(0, 0, 0, 0.2);
border: 1.5px solid var(--brand-color);
color: var(--brand-color);
border-radius: 4px;
}
/* Keep your existing media queries */
@media (max-width: 768px) {
.container {
min-height: 100px;
padding: 0.85rem 0.85rem 0.85rem 0.75rem;
gap: 0.8rem;
}
.titleRow {
flex-direction: column;
gap: 0.55rem;
}
.main-title {
font-size: 1rem;
}
.sub-title {
font-size: 0.84rem;
}
/* Ensure badges don't get too small on mobile */
.tech-stack {
margin-top: 0.6rem;
}
}
</style>

54
src/components/Studies/Page.astro
View File

@@ -1,26 +1,16 @@
---
import { siteData } from '../../data/site';
import StudyBox from './StudyBox.astro';
import StudyBoxTitle from './StudyBoxTitle.astro';
import SkillChart from './SkillChart.astro';
import TitleCard from '../TitleCard.astro';
const studies = [...siteData.studies];
const sortedStudies = studies.sort((a, b) => b.start.getTime() - a.start.getTime());
---
<div id="container">
<div class="left-column">
<aside class="sidebar-card">
<h2>Kennis</h2>
<div class="skillChart">
<SkillChart skills={siteData.skills} />
</div>
</aside>
</div>
<section class="studies-section" aria-label="Studies">
<div class="studies-list">
<StudyBoxTitle />
<TitleCard title="Opleidingen" description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur amet, quos "/>
{sortedStudies.map((study) => (
<StudyBox study={study} />
))}
@@ -42,45 +32,11 @@ const sortedStudies = studies.sort((a, b) => b.start.getTime() - a.start.getTime
overflow: hidden;
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: start;
}
.left-column {
position: sticky;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 1.25rem;
color: white;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
margin-bottom: 1rem;
}
.sidebar-card h2 {
margin: 0;
font-size: clamp(1.4rem, 2vw, 1.9rem);
line-height: 1.1;
}
.sidebar-copy {
margin: 0.8rem 0 1.2rem 0;
font-size: 0.95rem;
line-height: 1.55;
opacity: 0.82;
}
.skillChart {
margin-top: 1rem;
}
.studies-section {
min-width: 0;
}
@@ -102,10 +58,6 @@ const sortedStudies = studies.sort((a, b) => b.start.getTime() - a.start.getTime
gap: 1rem;
}
.left-column {
position: static;
}
.studies-section {
margin-top: 2rem;
}

55
src/components/Studies/SkillChart.astro
View File

@@ -1,55 +0,0 @@
---
const { skills } = Astro.props;
interface Skill {
name: string;
level: number;
}
---
<div class="skills-chart">
{skills.map((skill: Skill) => (
<div class="skill">
<span class="skill-name">{skill.name}</span>
<div class="skill-bar">
<span
style={{
width: `${(skill.level / 10) * 100}%`
}}
></span>
</div>
</div>
))}
</div>
<style>
.skills-chart {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.skill {
display: grid;
gap: 0.3rem;
}
.skill-name {
font-size: 0.88rem;
opacity: 0.9;
}
.skill-bar {
height: 8px;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
overflow: hidden;
}
.skill-bar span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #7dd3fc, #38bdf8);
}
</style>

2
src/components/Studies/StudyBox.astro
View File

@@ -4,6 +4,8 @@ const { study } = Astro.props;
const color: string = study.color
---
<div class="container">
<div class="accent" aria-hidden="true"></div>

7
src/components/Studies/StudyBoxTitle.astro → src/components/TitleCard.astro
View File

@@ -1,12 +1,13 @@
---
const { title, description } = Astro.props;
---
<div class="container">
<div class="content">
<div class="titleRow">
<div class="titleContainer">
<h2 class="main-title">Opleidingen</h2>
<p class="sub-title">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur amet, quos </p>
<h2 class="main-title">{title}</h2>
<p class="sub-title">{description}</p>
</div>
</div>
</div>
@@ -21,7 +22,7 @@
gap: 1rem;
min-height: 80px;
padding: 1rem 1rem 1rem 0.9rem;
background: rgba(255,255,255,0.05);
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
box-shadow: 0 8px 20px rgba(0,0,0,0.18);