diff --git a/src/components/Hero/Button.astro b/src/components/Button.astro similarity index 97% rename from src/components/Hero/Button.astro rename to src/components/Button.astro index 7883f5f..94309ba 100644 --- a/src/components/Hero/Button.astro +++ b/src/components/Button.astro @@ -13,7 +13,7 @@ const navigationHandler = `window.open('${href}', '_blank')`;
- + {label}
diff --git a/src/components/Hero/Page.astro b/src/components/Hero/Page.astro index 9dd8085..14f3f34 100644 --- a/src/components/Hero/Page.astro +++ b/src/components/Hero/Page.astro @@ -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})`; diff --git a/src/components/Projects/Page.astro b/src/components/Projects/Page.astro new file mode 100644 index 0000000..7737672 --- /dev/null +++ b/src/components/Projects/Page.astro @@ -0,0 +1,64 @@ +--- +import { siteData } from '../../data/site'; +import ProjectBox from './ProjectBox.astro'; +import TitleCard from '../TitleCard.astro'; + +const projects = [...siteData.projects]; +--- + +
+
+
+ + {projects.map((project) => ( + + ))} +
+
+
+ + \ No newline at end of file diff --git a/src/components/Projects/ProjectBox.astro b/src/components/Projects/ProjectBox.astro new file mode 100644 index 0000000..c4881ff --- /dev/null +++ b/src/components/Projects/ProjectBox.astro @@ -0,0 +1,138 @@ +--- +const { project } = Astro.props; +import {techColors} from "../../data/site" + + +const colors: { [id: string] : string; } = {...techColors} + +import Button from "../Button.astro"; +--- + +
+
+
+
+
+ {project.tech.map((item: string) => { + const color = colors[item] || colors["Default"]; + return ( + + {item} + + ); + })} +
+

{project.title}

+

{project.description}

+
+
+
+
+ + \ No newline at end of file diff --git a/src/components/Studies/Page.astro b/src/components/Studies/Page.astro index e78cb7d..3559cdf 100644 --- a/src/components/Studies/Page.astro +++ b/src/components/Studies/Page.astro @@ -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()); ---
-
- -
-
- + {sortedStudies.map((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; } diff --git a/src/components/Studies/SkillChart.astro b/src/components/Studies/SkillChart.astro deleted file mode 100644 index c19a37d..0000000 --- a/src/components/Studies/SkillChart.astro +++ /dev/null @@ -1,55 +0,0 @@ ---- -const { skills } = Astro.props; - -interface Skill { - name: string; - level: number; -} ---- - -
- {skills.map((skill: Skill) => ( -
- {skill.name} -
- -
-
- ))} -
- - \ No newline at end of file diff --git a/src/components/Studies/StudyBox.astro b/src/components/Studies/StudyBox.astro index 48eaefd..e27341a 100644 --- a/src/components/Studies/StudyBox.astro +++ b/src/components/Studies/StudyBox.astro @@ -4,6 +4,8 @@ const { study } = Astro.props; const color: string = study.color --- + +
diff --git a/src/components/Studies/StudyBoxTitle.astro b/src/components/TitleCard.astro similarity index 89% rename from src/components/Studies/StudyBoxTitle.astro rename to src/components/TitleCard.astro index 02d754b..f8b8960 100644 --- a/src/components/Studies/StudyBoxTitle.astro +++ b/src/components/TitleCard.astro @@ -1,12 +1,13 @@ --- +const { title, description } = Astro.props; ---
-

Opleidingen

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur amet, quos

+

{title}

+

{description}

@@ -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); diff --git a/src/data/site.ts b/src/data/site.ts index 6150028..d634a5b 100644 --- a/src/data/site.ts +++ b/src/data/site.ts @@ -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: [ { @@ -40,4 +36,16 @@ export const siteData = { color: "#8FE508" } ] -} \ No newline at end of file +} + +export const techColors = { + "Default": "#888888", + "Java": "#ED8B00", + "Python": "#3776AB", + "HTML/CSS": "#E34F26", + "Puppeteer": "#40B5A4", + "Tkinter": "#3e759e", + "Spotify API": "#1DB954", + "C++": "#00599C", + "Arduino": "#00979D" +}; \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 8242e5f..2f27e68 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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" --- +