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

added contact form, css class name clarification

Browse Source
This commit is contained in:
Valentijn
2026-05-15 14:52:28 +02:00
parent 72137466dc
commit f6c44128b3
8 changed files with 169 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/Contact/ContactForm.astro Normal file
View File

@@ -0,0 +1,101 @@
---
const { title, description } = Astro.props;
---
<div class="container">
<div class="content">
<form method="POST" action="https://example.com/example">
<input type="text" name="name" id="nameInput" class="name" placeholder="John Doe" autocomplete="name">
<input type="email" name="email" id="emailInput" class="email" placeholder="john@example.com" autocomplete="email">
<textarea name="message" id="messageInput" placeholder="Your message here"></textarea>
<input type="submit" value="Indienen" class="submitBtn">
</form>
</div>
</div>
<style>
.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;
margin-top: 0.5rem;
padding: 1rem;
}
.container:hover {
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;
}
input, textarea {
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
border-radius: 10pt;
padding:10px;
font-size: .8rem;
color: white;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(18, 18, 28, 0.24);
backdrop-filter: blur(2px);
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
transition: transform var(--transition-time), border-color var(--transition-time), background var(--transition-time), box-shadow var(--transition-time);
padding: 0.95rem 1.2rem;
}
.submitBtn {
padding: unset !important;
background: rgba(96, 67, 8, 0.24);
}
form {
display: flex;
flex-direction: column;
justify-content: start;
gap: .5rem;
width: 50%;
}
form input {
height: 2.1rem;
}
form textarea {
height: 5rem;
resize: none;
}
@media (max-width: 768px) {
.container {
min-height: 100px;
padding: 0.85rem 0.85rem 0.85rem 0.75rem;
gap: 0.8rem;
}
form {
width: 100%;
}
}
</style>

48
src/components/Contact/Page.astro Normal file
View File

@@ -0,0 +1,48 @@
---
import TitleCard from '../TitleCard.astro';
import ContactForm from './ContactForm.astro';
---
<div id="container">
<section class="contact-section" aria-label="Contact">
<TitleCard title="Contact" description="Neem gerust contact met me op!"/>
<ContactForm/>
</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;
}
.contact-section {
min-width: 0;
}
/* Mobile: collapse to one column,
so "Kennis" ends up fully under contact */
@media (max-width: 768px) {
#container {
margin: 5px;
padding: 1rem;
grid-template-columns: 1fr;
gap: 1rem;
}
}
</style>

1
src/components/Experience/ExperienceBox.astro
View File

@@ -48,6 +48,7 @@ const color: string = experience.color
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;
margin-top: 0.5rem;
}
.container:hover {

12
src/components/Experience/Page.astro
View File

@@ -8,8 +8,8 @@ const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.g
---
<div id="container">
<section class="studies-section" aria-label="Studies">
<div class="studies-list">
<section class="experience-section" aria-label="Experience">
<div class="experience-list">
<TitleCard title="Ervaringen" description="Hieronder zie je alle werkervaring die ik tot nu toe hebv opgedaan. "/>
{sortedExperience.map((experience) => (
<ExperienceBox experience={experience} />
@@ -37,11 +37,11 @@ const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.g
align-items: start;
}
.studies-section {
.experience-section {
min-width: 0;
}
.studies-list {
.experience-list {
display: flex;
flex-direction: column;
gap: 1.3rem;
@@ -49,7 +49,7 @@ const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.g
}
/* Mobile: collapse to one column,
so "Kennis" ends up fully under studies */
so "Kennis" ends up fully under experience */
@media (max-width: 768px) {
#container {
margin: 5px;
@@ -58,7 +58,7 @@ const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.g
gap: 1rem;
}
.studies-section {
.experience-section {
margin-top: 2rem;
}
}

1
src/components/Hero/EmailButton.astro
View File

@@ -56,6 +56,7 @@ const clipboardHandler = `navigator.clipboard.writeText('${safeEmail}').then(()=
transform: translateY(-2px);
box-shadow: 0 24px 65px rgba(0, 0, 0, 0.22);
width: min(15rem, 100%);
transition: all .3s;
}
.email-button:hover .label {

10
src/components/Projects/Page.astro
View File

@@ -7,8 +7,8 @@ const projects = [...siteData.projects];
---
<div id="container">
<section class="studies-section" aria-label="Studies">
<div class="studies-list">
<section class="projects-section" aria-label="Projects">
<div class="projects-list">
<TitleCard title="Projecten" description="Hieronder zie je een aantal van mijn favoriete persoonlijke projecten!"/>
{projects.map((project) => (
<ProjectBox project={project} />
@@ -36,11 +36,11 @@ const projects = [...siteData.projects];
align-items: start;
}
.studies-section {
.projects-section {
min-width: 0;
}
.studies-list {
.projects-list {
display: flex;
flex-direction: column;
gap: 1.3rem;
@@ -57,7 +57,7 @@ const projects = [...siteData.projects];
gap: 1rem;
}
.studies-section {
.projects-section {
margin-top: 2rem;
}
}

8
src/components/Projects/ProjectBox.astro
View File

@@ -12,6 +12,9 @@ import Button from "../Button.astro";
<div class="content">
<div class="titleRow">
<div class="titleContainer">
<h3 class="main-title">{project.title}</h3>
<p class="sub-title">{project.description}</p>
<div class="tech-stack">
{project.tech.map((item: string) => {
const color = colors[item] || colors["Default"];
@@ -22,8 +25,6 @@ import Button from "../Button.astro";
);
})}
</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>
@@ -46,6 +47,7 @@ import Button from "../Button.astro";
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;
margin-top:0.5rem;
}
.container:hover {
@@ -91,7 +93,7 @@ import Button from "../Button.astro";
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 0.5rem; /* Space between tags and title */
margin-top: 1rem; /* Space between tags and title */
}
.tech-badge {