added experience page
This commit is contained in:
Valentijn
135
src/components/Experience/ExperienceBox.astro
Normal file
135
src/components/Experience/ExperienceBox.astro
Normal file
@@ -0,0 +1,135 @@
|
||||
---
|
||||
const { experience } = Astro.props;
|
||||
|
||||
const color: string = experience.color
|
||||
---
|
||||
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="accent"></div>
|
||||
|
||||
<div class="content">
|
||||
<div class="titleRow">
|
||||
<div class="titleContainer">
|
||||
<h3 class="main-title">{experience.name}</h3>
|
||||
<p class="sub-title">{experience.role}</p>
|
||||
|
||||
<p class="description">
|
||||
{experience.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="dateContainer">
|
||||
<p>
|
||||
{experience.start.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}
|
||||
-
|
||||
{experience.end
|
||||
? experience.end.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })
|
||||
: 'Nu'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style define:vars={{color}}>
|
||||
.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);
|
||||
}
|
||||
|
||||
.accent {
|
||||
width: 4px;
|
||||
border-radius: 999px;
|
||||
background: var(--color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.dateContainer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dateContainer p {
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.dateContainer p {
|
||||
font-size: 0.74rem;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
src/components/Experience/Page.astro
Normal file
65
src/components/Experience/Page.astro
Normal file
@@ -0,0 +1,65 @@
|
||||
---
|
||||
import { siteData } from '../../data/site';
|
||||
import ExperienceBox from './ExperienceBox.astro';
|
||||
import TitleCard from '../TitleCard.astro';
|
||||
|
||||
const experience = [...siteData.experience];
|
||||
const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.getTime());
|
||||
---
|
||||
|
||||
<div id="container">
|
||||
<section class="studies-section" aria-label="Studies">
|
||||
<div class="studies-list">
|
||||
<TitleCard title="Ervaringen" description="Hieronder zie je alle werkervaring die ik tot nu toe hebv opgedaan. "/>
|
||||
{sortedExperience.map((experience) => (
|
||||
<ExperienceBox experience={experience} />
|
||||
))}
|
||||
</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>
|
||||
@@ -35,6 +35,17 @@ export const siteData = {
|
||||
end: new Date("2025-06-18"),
|
||||
color: "#8FE508"
|
||||
}
|
||||
],
|
||||
experience: [
|
||||
{
|
||||
name: "Brightpark",
|
||||
role: "Stagaire Junior Developer",
|
||||
description: "Bij Brightpark heb ik mijn eerste ervaring opgedaan in het werkveld van Software Ontwikkeling. Ik heb hier gewerkt aan meerdere projecten. Een van de leukere was een iOS app die helpt bij het meten van huizen door gebruik te maken van de Bosch GLM- series meetapperatuur. Deze app heb ik gemaakt in Flutter, met wat kleine stappen Swift in om de meetapperatuur werkend te krijgen.",
|
||||
start: new Date("2024-09-10"),
|
||||
end: new Date("2025-05-1"),
|
||||
tech: ["Flutter", "Swift", "Svelte", "Laravel"],
|
||||
color: "#30e7ffe9"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -47,5 +58,8 @@ export const techColors = {
|
||||
"Tkinter": "#3e759e",
|
||||
"Spotify API": "#1DB954",
|
||||
"C++": "#00599C",
|
||||
"Arduino": "#00979D"
|
||||
"Arduino": "#00979D",
|
||||
"Flutter": "#02569B",
|
||||
"Svelte": "#FF3E00",
|
||||
"Laravel": "#FF2D20",
|
||||
};
|
||||
@@ -3,11 +3,13 @@ import Layout from '../layouts/Layout.astro';
|
||||
import Hero from '../components/Hero/Page.astro';
|
||||
import Studies from "../components/Studies/Page.astro"
|
||||
import Projects from "../components/Projects/Page.astro"
|
||||
import Experience from "../components/Experience/Page.astro"
|
||||
---
|
||||
|
||||
|
||||
<Layout>
|
||||
<Hero />
|
||||
<Projects/>
|
||||
<Studies/>
|
||||
<Experience/>
|
||||
<!-- <Studies/> -->
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user