Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arne Meevis - Software Developer</title>
<meta name="description" content="Analytical software development student with a passion for creating elegant solutions to complex problems. Experienced in full-stack development, database design, and modern web technologies.">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<a href="/" class="logo">Arne meevis</a>
<ul class="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
<svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 17.5a5.5 5.5 0 100-11 5.5 5.5 0 000 11zm0 1.5a7 7 0 110-14 7 7 0 010 14zm-1-15h2V1h-2v3zm0 19h2v-3h-2v3zM4.22 5.64l1.42-1.42 2.12 2.13-1.42 1.42-2.12-2.13zm14.14 14.14l1.42-1.42 2.12 2.13-1.42 1.42-2.12-2.13zM1 11h3v2H1v-2zm19 0h3v2h-3v-2zM4.22 18.36l2.12-2.13 1.42 1.42-2.12 2.13-1.42-1.42zm14.14-14.14l2.12-2.13 1.42 1.42-2.12 2.13-1.42-1.42z"/>
</svg>
<svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="display: none;">
<path d="M12 3a9 9 0 109 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 01-4.4 2.26 5.403 5.403 0 01-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/>
</svg>
</button>
<button class="mobile-toggle" aria-label="Toggle menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="container">
<div class="hero-content">
<h1 class="hero-title">Arne meevis</h1>
<p class="hero-subtitle">Final Year Software Development</p>
<p class="hero-description">Analytical software development student with a passion for creating elegant solutions to complex problems. Experienced in full-stack development, database design, and modern web technologies.</p>
<div class="hero-buttons">
<a href="#projects" class="btn btn-primary">View Projects</a>
<a href="#contact" class="btn btn-outline">Contact Me</a>
</div>
<div class="social-links">
<a href="https://github.com/arnewereld" target="_blank" rel="noopener" aria-label="GitHub" class="social-btn">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
</a>
<a href="https://linkedin.com/in/arnewereld" target="_blank" rel="noopener" aria-label="LinkedIn" class="social-btn">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="mailto:amg.meevis@gmail.com" aria-label="Email" class="social-btn">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="section section-about">
<div class="container">
<h2 class="section-title">About Me</h2>
<div class="about-content">
<div class="about-image">
<img src="uploads/profiel foto.jpg" alt="Arne">
</div>
<div class="about-text">
<div class="about-highlights">
<div class="highlight-item"><h4>Education</h4><p>Final Year Software Development</p></div>
<div class="highlight-item"><h4>Experience</h4><p>Full-Stack Development</p></div>
<div class="highlight-item"><h4>Focus</h4><p>Modern Web Technologies</p></div>
</div>
<div class="about-details">
<p><strong>Age:</strong> 18 years old</p>
<p><strong>Location:</strong> Utrecht, Netherlands</p>
<p><strong>Email:</strong> <a href="mailto:amg.meevis@gmail.com">amg.meevis@gmail.com</a></p>
<!-- <p><strong>Phone:</strong> +32 123 456 789</p> -->
</div>
<!-- <a href="/uploads/arne_resume.pdf" class="btn btn-primary" download>Download Resume</a> -->
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="section section-dark">
<div class="container">
<h2 class="section-title">Featured Projects</h2>
<div class="carousel-wrapper">
<button class="carousel-arrow left" id="carouselLeft">←</button>
<div class="carousel">
<div class="carousel-card">
<div class="card-content">
<h3 class="project-title">Technowire</h3>
<p class="project-desc">A tech news and blog platform built for school, featuring articles and interactive content. Modern design with HTML, CSS, and JavaScript.</p>
<div class="project-tags">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
</div>
<div class="project-links">
<a href="https://github.com/arnewereld/technowire" target="_blank" class="btn btn-sm btn-outline">GitHub</a>
<a href="https://585871.klas4s23.mid-ica.nl/technowire/index.html" target="_blank" class="btn btn-sm btn-primary">Live Demo</a>
</div>
</div>
</div>
<div class="carousel-card">
<div class="card-content">
<h3 class="project-title">Schaak</h3>
<p class="project-desc">A web-based chess game with a clean interface and interactive gameplay. Built for school using HTML, CSS, and JavaScript.</p>
<div class="project-tags">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
</div>
<div class="project-links">
<a href="https://github.com/arnewereld/schaak" target="_blank" class="btn btn-sm btn-outline">GitHub</a>
<a href="https://585871.klas4s23.mid-ica.nl/Schaak/" target="_blank" class="btn btn-sm btn-primary">Live Demo</a>
</div>
</div>
</div>
<div class="carousel-card">
<div class="card-content">
<h3 class="project-title">GameCraft</h3>
<p class="project-desc">A group project for school: a showcase site for multiple student-made games. Built with HTML, CSS, and JavaScript. Modern, responsive, and fun!</p>
<div class="project-tags">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
</div>
<div class="project-links">
<a href="https://github.com/arnewereld/gamecraft" target="_blank" class="btn btn-sm btn-outline">GitHub</a>
<a href="https://585997.klas4s23.mid-ica.nl/gamecraft/gamecraft/html/index.html" target="_blank" class="btn btn-sm btn-primary">Live Demo</a>
</div>
</div>
</div>
<div class="carousel-card">
<div class="card-content">
<h3 class="project-title">Gastenboek</h3>
<p class="project-desc">A simple guestbook web application for visitors to leave messages. Built for school, open for everyone.</p>
<div class="project-tags">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">PHP</span>
</div>
<div class="project-links">
<a href="https://github.com/roc-ica/l3-gastenboek-Arnewereld" target="_blank" class="btn btn-sm btn-outline">GitHub</a>
<a href="https://585871.klas4s23.mid-ica.nl/gastenboekv2/" target="_blank" class="btn btn-sm btn-primary">Live Demo</a>
</div>
</div>
</div>
<div class="carousel-card">
<div class="card-content">
<h3 class="project-title">Ergoweser</h3>
<p class="project-desc">An ergonomic awareness web project, designed to inform and engage users about healthy computer habits. Built for school with HTML, CSS, and JavaScript.</p>
<div class="project-tags">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
</div>
<div class="project-links">
<a href="https://github.com/arnewereld/ergoweser" target="_blank" class="btn btn-sm btn-outline">GitHub</a>
<a href="https://585871.klas4s23.mid-ica.nl/ergoweser/" target="_blank" class="btn btn-sm btn-primary">Live Demo</a>
</div>
</div>
</div>
</div>
<button class="carousel-arrow right" id="carouselRight">→</button>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="section">
<div class="container">
<h2 class="section-title">Skills & Technologies</h2>
<div class="skills-container">
<div class="skill-category">
<h3>Frontend</h3>
<div class="skills-list">
<div class="skill-item">
<span class="skill-name">HTML</span>
<span class="skill-years">3 years</span>
<div class="skill-bar"><div class="skill-progress" style="width: 95%"></div></div>
</div>
<div class="skill-item">
<span class="skill-name">CSS</span>
<span class="skill-years">3 years</span>
<div class="skill-bar"><div class="skill-progress" style="width: 90%"></div></div>
</div>
<div class="skill-item">
<span class="skill-name">JavaScript</span>
<span class="skill-years">3 years</span>
<div class="skill-bar"><div class="skill-progress" style="width: 85%"></div></div>
</div>
<div class="skill-item">
<span class="skill-name">React</span>
<span class="skill-years">1.5 years</span>
<div class="skill-bar"><div class="skill-progress" style="width: 70%"></div></div>
</div>
</div>
</div>
<div class="skill-category">
<h3>Backend</h3>
<div class="skills-list">
<div class="skill-item">
<span class="skill-name">PHP</span>
<span class="skill-years">2 years</span>
<div class="skill-bar"><div class="skill-progress" style="width: 80%"></div></div>
</div>
<div class="skill-item">
<span class="skill-name">MySQL</span>
<span class="skill-years">2 years</span>
<div class="skill-bar"><div class="skill-progress" style="width: 75%"></div></div>
</div>
</div>
</div>
<div class="skill-category">
<h3>Other</h3>
<div class="skills-list">
<div class="skill-item">
<span class="skill-name">Git</span>
<span class="skill-years">2 years</span>
<div class="skill-bar"><div class="skill-progress" style="width: 85%"></div></div>
</div>
<div class="skill-item">
<span class="skill-name">Docker</span>
<span class="skill-years">1 year</span>
<div class="skill-bar"><div class="skill-progress" style="width: 70%"></div></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section section-dark">
<div class="container">
<h2 class="section-title">Get In Touch</h2>
<div class="contact-container">
<div class="contact-info">
<h3>Let's work together!</h3>
<p>I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.</p>
<p><strong>Email:</strong> <a href="mailto:amg.meevis@gmail.com">amg.meevis@gmail.com</a></p>
<p><strong>Location:</strong> netherlands</p>
</div>
<form id="contactForm" class="contact-form" onsubmit="return handleContactForm(event)">
<div class="form-group"><input type="text" name="name" placeholder="Your Name" required></div>
<div class="form-group"><input type="email" name="email" placeholder="Your Email" required></div>
<div class="form-group"><input type="text" name="subject" placeholder="Subject"></div>
<div class="form-group"><textarea name="message" placeholder="Your Message" rows="5" required></textarea></div>
<button type="submit" class="btn btn-primary">Send Message</button>
<div id="formMessage"></div>
</form>
<script>
function handleContactForm(e) {
e.preventDefault();
document.getElementById('formMessage').innerHTML = '<div class="alert alert-success" style="margin-top:1rem;">Thank you for your message! I will get back to you soon.</div>';
document.getElementById('contactForm').reset();
return false;
}
</script>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>© 2025 Arne. All rights reserved.</p>
</div>
</footer>
<script src="assets/js/main.js"></script>
</body>
</html>