added projects, removed ugly skill chart
This commit is contained in:
Valentijn
@@ -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>
|
||||
@@ -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
64
src/components/Projects/Page.astro
Normal 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
138
src/components/Projects/ProjectBox.astro
Normal 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>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -4,6 +4,8 @@ const { study } = Astro.props;
|
||||
const color: string = study.color
|
||||
---
|
||||
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="accent" aria-hidden="true"></div>
|
||||
|
||||
|
||||
@@ -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);
|
||||
@@ -2,23 +2,19 @@ export const siteData = {
|
||||
name: "Valentijn van der Jagt",
|
||||
email: "valentijnkijkuit@outlook.com",
|
||||
birthDate: new Date("2006-06-27"),
|
||||
skills: [
|
||||
projects: [
|
||||
{
|
||||
name: "C++ / Arduino",
|
||||
level: 7
|
||||
title: "Albert Heijn Bonus Scraper",
|
||||
description: "Een Java-applicatie die via Puppeteer real-time bonusacties scrapt en visualiseert. Bevat een krachtige zoekfunctionaliteit ondersteund door een zelfgeïmplementeerd fuzzy-search algoritme, waardoor er snel en flexibel door de weekelijkse aanbiedingen genavigeerd kan worden.",
|
||||
tech: ["Java", "Puppeteer", "HTML/CSS"],
|
||||
link: "https://git.herpiederpiee.nl/valentijn/Appie-Bonus-Scraper/"
|
||||
},
|
||||
{
|
||||
name: "Java",
|
||||
level: 6
|
||||
title: "Spotify Windows Intergratie ",
|
||||
description: "Een Python-applicatie die via de Spotify Web API real-time playback-data synchroniseert met een custom Windows Taskbar-widget. Maakt gebruik van Tkinter voor een hardware-versnelde, transparante overlay die naadloos integreert met de Windows Shell-omgeving",
|
||||
tech: ["Python", "Tkinter", "Spotify API"],
|
||||
link: "https://git.herpiederpiee.nl/valentijn/Windows-Spotify-Taskbar/"
|
||||
},
|
||||
{
|
||||
name: "Python",
|
||||
level: 8
|
||||
},
|
||||
{
|
||||
name: "Web Development",
|
||||
level: 5
|
||||
}
|
||||
],
|
||||
studies: [
|
||||
{
|
||||
@@ -41,3 +37,15 @@ export const siteData = {
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const techColors = {
|
||||
"Default": "#888888",
|
||||
"Java": "#ED8B00",
|
||||
"Python": "#3776AB",
|
||||
"HTML/CSS": "#E34F26",
|
||||
"Puppeteer": "#40B5A4",
|
||||
"Tkinter": "#3e759e",
|
||||
"Spotify API": "#1DB954",
|
||||
"C++": "#00599C",
|
||||
"Arduino": "#00979D"
|
||||
};
|
||||
@@ -2,10 +2,12 @@
|
||||
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"
|
||||
---
|
||||
|
||||
|
||||
<Layout>
|
||||
<Hero />
|
||||
<Projects/>
|
||||
<Studies/>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user