almost finished

portfolio/index.html

@@ -6,6 +6,12 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite + Vue</title>
+  <!-- Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap"
+    rel="stylesheet">
   <!-- FontAwesome Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>

portfolio/src/components/Navbar.vue

@@ -223,9 +223,11 @@ onUnmounted(() => {
 }
 
 .nav-text {
-  font-size: 0.9rem;
+  font-family: 'Poppins', sans-serif;
-  letter-spacing: 0.5px;
+  font-size: 0.95rem;
+  letter-spacing: 0.3px;
   font-weight: 500;
+  text-transform: none;
 }
 
 .nav-link.router-link-active {

portfolio/src/views/About.vue

@@ -140,7 +140,7 @@
                   </div>
                 </div>
                 <div class="skill-item">
-                  <span class="skill-name">CSS/SASS</span>
+                  <span class="skill-name">CSS</span>
                   <div class="skill-bar">
                     <div class="skill-progress" data-progress="85"></div>
                   </div>
@@ -161,7 +161,7 @@
                   </div>
                 </div>
                 <div class="skill-item">
-                  <span class="skill-name">Python</span>
+                  <span class="skill-name">Laravel</span>
                   <div class="skill-bar">
                     <div class="skill-progress" data-progress="70"></div>
                   </div>
@@ -192,8 +192,8 @@
                 <div class="marker-icon"><i class="fas fa-briefcase" style="color: #64b5f6;"></i></div>
               </div>
               <div class="timeline-content">
-                <div class="timeline-date">2023 - Present</div>
+                <div class="timeline-date">2024 - Present</div>
-                <h3 class="timeline-title">Web Designer & Software Developer</h3>
+                <h3 class="timeline-title">Co-Founder</h3>
                 <h4 class="timeline-company">Stellarnode VOF</h4>
                 <p class="timeline-description">
                   Developing modern web applications and software solutions. Working with cutting-edge technologies 
@@ -202,7 +202,7 @@
                 </p>
                 <div class="timeline-tags">
                   <span class="tag">Vue.js</span>
-                  <span class="tag">React</span>
+                  <span class="tag">Laravel</span>
                   <span class="tag">Node.js</span>
                   <span class="tag">UI/UX Design</span>
                 </div>
@@ -214,7 +214,7 @@
                 <div class="marker-icon"><i class="fas fa-graduation-cap" style="color: #64b5f6;"></i></div>
               </div>
               <div class="timeline-content">
-                <div class="timeline-date">2022 - Present</div>
+                <div class="timeline-date">2023 - Present</div>
                 <h3 class="timeline-title">Cybersecurity Studies</h3>
                 <h4 class="timeline-company">University/College</h4>
                 <p class="timeline-description">
@@ -236,7 +236,7 @@
                 <div class="marker-icon"><i class="fas fa-laptop-code" style="color: #64b5f6;"></i></div>
               </div>
               <div class="timeline-content">
-                <div class="timeline-date">2021 - 2022</div>
+                <div class="timeline-date">2021 - 2023</div>
                 <h3 class="timeline-title">Self-taught Development</h3>
                 <h4 class="timeline-company">Personal Projects</h4>
                 <p class="timeline-description">

portfolio/src/views/Contact.vue

@@ -1,35 +1,753 @@
 <template>
   <div class="contact">
-    <div class="container">
+    <!-- Background Elements -->
-      <h1>Contact Me</h1>
+    <div class="background-elements">
-      <p>Get in touch - contact form coming soon...</p>
+      <div class="floating-shapes">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+        <div class="shape shape-3"></div>
+      </div>
+      <div class="grid-overlay"></div>
     </div>
+
+    <!-- Hero Section -->
+    <section class="contact-hero">
+      <div class="container">
+        <div class="hero-content">
+          <h1 class="hero-title">Get In Touch</h1>
+          <p class="hero-subtitle">
+            Let's discuss your next project or collaboration opportunity
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Contact Content -->
+    <section class="contact-content">
+      <div class="container">
+        <div class="contact-grid">
+          <!-- Contact Form -->
+          <div class="contact-form-section">
+            <h2 class="section-title">Send me a message</h2>
+            <form @submit.prevent="submitForm" class="contact-form">
+              <div class="form-group">
+                <label for="name">Name</label>
+                <input 
+                  type="text" 
+                  id="name" 
+                  v-model="form.name" 
+                  required
+                  :class="{ error: errors.name }"
+                >
+                <span v-if="errors.name" class="error-message">{{ errors.name }}</span>
+              </div>
+              
+              <div class="form-group">
+                <label for="email">Email</label>
+                <input 
+                  type="email" 
+                  id="email" 
+                  v-model="form.email" 
+                  required
+                  :class="{ error: errors.email }"
+                >
+                <span v-if="errors.email" class="error-message">{{ errors.email }}</span>
+              </div>
+              
+              <div class="form-group">
+                <label for="subject">Subject</label>
+                <input 
+                  type="text" 
+                  id="subject" 
+                  v-model="form.subject" 
+                  required
+                  :class="{ error: errors.subject }"
+                >
+                <span v-if="errors.subject" class="error-message">{{ errors.subject }}</span>
+              </div>
+              
+              <div class="form-group">
+                <label for="message">Message</label>
+                <textarea 
+                  id="message" 
+                  v-model="form.message" 
+                  rows="6" 
+                  required
+                  :class="{ error: errors.message }"
+                ></textarea>
+                <span v-if="errors.message" class="error-message">{{ errors.message }}</span>
+              </div>
+              
+              <button type="submit" class="submit-btn" :disabled="isSubmitting">
+                <span v-if="!isSubmitting">
+                  <i class="fas fa-paper-plane"></i>
+                  Send Message
+                </span>
+                <span v-else>
+                  <i class="fas fa-spinner fa-spin"></i>
+                  Sending...
+                </span>
+              </button>
+              
+              <div v-if="submitMessage" class="submit-message" :class="submitStatus">
+                {{ submitMessage }}
+              </div>
+            </form>
+          </div>
+
+          <!-- Contact Info -->
+          <div class="contact-info-section">
+            <h2 class="section-title">Let's connect</h2>
+            <div class="contact-info">
+              <div class="info-item">
+                <div class="info-icon">
+                  <i class="fas fa-envelope"></i>
+                </div>
+                <div class="info-content">
+                  <h4>Email</h4>
+                  <a href="mailto:contact@nielsm.xyz">contact@nielsm.xyz</a>
+                </div>
+              </div>
+              
+              <div class="info-item">
+                <div class="info-icon">
+                  <i class="fas fa-map-marker-alt"></i>
+                </div>
+                <div class="info-content">
+                  <h4>Location</h4>
+                  <p>Belgium</p>
+                </div>
+              </div>
+              
+              <div class="info-item">
+                <div class="info-icon">
+                  <i class="fas fa-clock"></i>
+                </div>
+                <div class="info-content">
+                  <h4>Response Time</h4>
+                  <p>Within 24 hours</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Social Links -->
+            <div class="social-section">
+              <h3 class="social-title">Follow me</h3>
+              <div class="social-links">
+                <a href="#" class="social-link github" title="GitHub">
+                  <i class="fab fa-github"></i>
+                </a>
+                <a href="#" class="social-link linkedin" title="LinkedIn">
+                  <i class="fab fa-linkedin-in"></i>
+                </a>
+                <a href="#" class="social-link twitter" title="Twitter">
+                  <i class="fab fa-twitter"></i>
+                </a>
+                <a href="#" class="social-link discord" title="Discord">
+                  <i class="fab fa-discord"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup>
+import { ref, reactive } from 'vue'
+
+// Form data
+const form = reactive({
+  name: '',
+  email: '',
+  subject: '',
+  message: ''
+})
+
+// Form validation
+const errors = reactive({
+  name: '',
+  email: '',
+  subject: '',
+  message: ''
+})
+
+// Form state
+const isSubmitting = ref(false)
+const submitMessage = ref('')
+const submitStatus = ref('')
+
+// Validation functions
+const validateEmail = (email) => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+const validateForm = () => {
+  // Clear previous errors
+  Object.keys(errors).forEach(key => errors[key] = '')
+  
+  let isValid = true
+  
+  // Validate name
+  if (!form.name.trim()) {
+    errors.name = 'Name is required'
+    isValid = false
+  } else if (form.name.trim().length < 2) {
+    errors.name = 'Name must be at least 2 characters'
+    isValid = false
+  }
+  
+  // Validate email
+  if (!form.email.trim()) {
+    errors.email = 'Email is required'
+    isValid = false
+  } else if (!validateEmail(form.email)) {
+    errors.email = 'Please enter a valid email address'
+    isValid = false
+  }
+  
+  // Validate subject
+  if (!form.subject.trim()) {
+    errors.subject = 'Subject is required'
+    isValid = false
+  } else if (form.subject.trim().length < 5) {
+    errors.subject = 'Subject must be at least 5 characters'
+    isValid = false
+  }
+  
+  // Validate message
+  if (!form.message.trim()) {
+    errors.message = 'Message is required'
+    isValid = false
+  } else if (form.message.trim().length < 10) {
+    errors.message = 'Message must be at least 10 characters'
+    isValid = false
+  }
+  
+  return isValid
+}
+
+// Submit form
+const submitForm = async () => {
+  if (!validateForm()) {
+    return
+  }
+  
+  isSubmitting.value = true
+  submitMessage.value = ''
+  
+  try {
+    // Simulate form submission (replace with actual API call)
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    
+    // Success
+    submitMessage.value = 'Thank you! Your message has been sent successfully. I\'ll get back to you soon.'
+    submitStatus.value = 'success'
+    
+    // Reset form
+    Object.keys(form).forEach(key => form[key] = '')
+    
+  } catch (error) {
+    // Error
+    submitMessage.value = 'Oops! There was an error sending your message. Please try again.'
+    submitStatus.value = 'error'
+  } finally {
+    isSubmitting.value = false
+    
+    // Clear message after 5 seconds
+    setTimeout(() => {
+      submitMessage.value = ''
+      submitStatus.value = ''
+    }, 5000)
+  }
+}
 </script>
 
 <style scoped>
 .contact {
   min-height: 100vh;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
+  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 70%, #0f0f0f 100%);
   color: #ffffff;
-  padding: 6rem 2rem 2rem;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  position: relative;
+  overflow-x: hidden;
 }
 
+/* Background Elements */
+.background-elements {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.grid-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    linear-gradient(rgba(100, 181, 246, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(100, 181, 246, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: gridMove 20s linear infinite;
+}
+
+.floating-shapes {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.shape {
+  position: absolute;
+  border-radius: 50%;
+  background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+  animation: float 6s ease-in-out infinite;
+}
+
+.shape-1 {
+  width: 80px;
+  height: 80px;
+  top: 25%;
+  left: 10%;
+  animation-delay: 0s;
+}
+
+.shape-2 {
+  width: 60px;
+  height: 60px;
+  top: 70%;
+  right: 15%;
+  animation-delay: 3s;
+}
+
+.shape-3 {
+  width: 100px;
+  height: 100px;
+  top: 50%;
+  left: 80%;
+  animation-delay: 6s;
+}
+
+/* Container */
 .container {
   max-width: 1200px;
   margin: 0 auto;
+  padding: 0 2rem;
+  position: relative;
+  z-index: 2;
+}
+
+/* Hero Section */
+.contact-hero {
+  padding: 8rem 0 4rem;
   text-align: center;
 }
 
-h1 {
+.hero-content {
-  font-size: 3rem;
+  max-width: 600px;
-  margin-bottom: 2rem;
+  margin: 0 auto;
-  background: linear-gradient(45deg, #ffffff, #64b5f6);
+}
+
+.hero-title {
+  font-size: 4rem;
+  font-weight: 800;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(45deg, #ffffff, #64b5f6, #ffffff);
+  background-size: 200% auto;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+.hero-subtitle {
+  font-size: 1.3rem;
+  color: #b0b0b0;
+  line-height: 1.6;
+}
+
+/* Contact Content */
+.contact-content {
+  padding: 2rem 0 4rem;
+}
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: start;
+}
+
+/* Section Titles */
+.section-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 2rem;
+  color: #ffffff;
+}
+
+/* Contact Form */
+.contact-form-section {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  padding: 2.5rem;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #64b5f6;
+  margin-bottom: 0.5rem;
+  font-family: 'Poppins', sans-serif;
+}
+
+.form-group input,
+.form-group textarea {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 1rem;
+  color: #ffffff;
+  font-size: 1rem;
+  font-family: 'Inter', sans-serif;
+  transition: all 0.3s ease;
+  resize: vertical;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #64b5f6;
+  background: rgba(100, 181, 246, 0.05);
+  box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.1);
+}
+
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+  color: #666;
+}
+
+.form-group input.error,
+.form-group textarea.error {
+  border-color: #f44336;
+  background: rgba(244, 67, 54, 0.05);
+}
+
+.error-message {
+  color: #f44336;
+  font-size: 0.85rem;
+  margin-top: 0.5rem;
+  font-family: 'Poppins', sans-serif;
+}
+
+.submit-btn {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 1rem 2rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  font-family: 'Poppins', sans-serif;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+  margin-top: 1rem;
+}
+
+.submit-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
+}
+
+.submit-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.submit-message {
+  padding: 1rem;
+  border-radius: 12px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.submit-message.success {
+  background: rgba(76, 175, 80, 0.1);
+  border: 1px solid rgba(76, 175, 80, 0.3);
+  color: #4caf50;
+}
+
+.submit-message.error {
+  background: rgba(244, 67, 54, 0.1);
+  border: 1px solid rgba(244, 67, 54, 0.3);
+  color: #f44336;
+}
+
+/* Contact Info */
+.contact-info-section {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+.contact-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.info-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.5rem;
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  transition: all 0.3s ease;
+}
+
+.info-item:hover {
+  background: rgba(100, 181, 246, 0.05);
+  border-color: rgba(100, 181, 246, 0.2);
+  transform: translateY(-2px);
+}
+
+.info-icon {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.info-icon i {
+  font-size: 1.2rem;
+  color: white;
+}
+
+.info-content h4 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #ffffff;
+  margin: 0 0 0.5rem 0;
+  font-family: 'Poppins', sans-serif;
+}
+
+.info-content p,
+.info-content a {
+  color: #b0b0b0;
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.4;
+}
+
+.info-content a {
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.info-content a:hover {
+  color: #64b5f6;
+}
+
+/* Social Section */
+.social-section {
+  text-align: center;
+}
+
+.social-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 1.5rem;
+  font-family: 'Poppins', sans-serif;
+}
+
+.social-links {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.social-link {
+  width: 60px;
+  height: 60px;
+  border-radius: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.social-link i {
+  font-size: 1.5rem;
+}
+
+.social-link.github {
+  background: rgba(255, 255, 255, 0.05);
+  color: #ffffff;
+}
+
+.social-link.github:hover {
+  background: #333;
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(51, 51, 51, 0.4);
+}
+
+.social-link.linkedin {
+  background: rgba(0, 119, 181, 0.1);
+  color: #0077b5;
+}
+
+.social-link.linkedin:hover {
+  background: #0077b5;
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(0, 119, 181, 0.4);
+}
+
+.social-link.twitter {
+  background: rgba(29, 161, 242, 0.1);
+  color: #1da1f2;
+}
+
+.social-link.twitter:hover {
+  background: #1da1f2;
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(29, 161, 242, 0.4);
+}
+
+.social-link.discord {
+  background: rgba(114, 137, 218, 0.1);
+  color: #7289da;
+}
+
+.social-link.discord:hover {
+  background: #7289da;
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(114, 137, 218, 0.4);
+}
+
+/* Animations */
+@keyframes shimmer {
+  0% {
+    background-position: -200% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
+}
+
+@keyframes gridMove {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .hero-subtitle {
+    font-size: 1.1rem;
+  }
+  
+  .contact-grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  
+  .contact-form-section {
+    padding: 1.5rem;
+  }
+  
+  .container {
+    padding: 0 1rem;
+  }
+  
+  .social-links {
+    gap: 0.75rem;
+  }
+  
+  .social-link {
+    width: 50px;
+    height: 50px;
+  }
+  
+  .social-link i {
+    font-size: 1.3rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-title {
+    font-size: 2rem;
+  }
+  
+  .section-title {
+    font-size: 1.5rem;
+  }
+  
+  .contact-form-section {
+    padding: 1rem;
+  }
 }
 </style>

portfolio/src/views/Home.vue

@@ -48,12 +48,12 @@
                 <div class="stat-label">Years Experience</div>
               </div>
               <div class="stat-item">
-                <div class="stat-number">50+</div>
+                <div class="stat-number">5+</div>
-                <div class="stat-label">Projects Completed</div>
+                <div class="stat-label">Projects Built</div>
               </div>
               <div class="stat-item">
-                <div class="stat-number">24/7</div>
+                <div class="stat-number">3+</div>
-                <div class="stat-label">Learning Mode</div>
+                <div class="stat-label">Specializations</div>
               </div>
             </div>
 

portfolio/src/views/Projects.vue

@@ -1,35 +1,712 @@
 <template>
   <div class="projects">
-    <div class="container">
+    <!-- Background Elements -->
-      <h1>My Projects</h1>
+    <div class="background-elements">
-      <p>Portfolio projects coming soon...</p>
+      <div class="floating-shapes">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+        <div class="shape shape-3"></div>
+      </div>
+      <div class="grid-overlay"></div>
     </div>
+
+    <!-- Hero Section -->
+    <section class="projects-hero">
+      <div class="container">
+        <div class="hero-content">
+          <h1 class="hero-title">My Projects</h1>
+          <p class="hero-subtitle">
+            A showcase of my work in cybersecurity, web development, and software engineering
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Filter Buttons -->
+    <section class="filter-section">
+      <div class="container">
+        <div class="filter-buttons">
+          <button 
+            class="filter-btn" 
+            :class="{ active: activeFilter === 'all' }"
+            @click="setFilter('all')"
+          >
+            All Projects
+          </button>
+          <button 
+            class="filter-btn" 
+            :class="{ active: activeFilter === 'web' }"
+            @click="setFilter('web')"
+          >
+            Web Development
+          </button>
+          <button 
+            class="filter-btn" 
+            :class="{ active: activeFilter === 'security' }"
+            @click="setFilter('security')"
+          >
+            Cybersecurity
+          </button>
+          <button 
+            class="filter-btn" 
+            :class="{ active: activeFilter === 'fullstack' }"
+            @click="setFilter('fullstack')"
+          >
+            Full Stack
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Projects Grid -->
+    <section class="projects-grid">
+      <div class="container">
+        <div class="grid">
+          <div 
+            v-for="project in filteredProjects" 
+            :key="project.id"
+            class="project-card"
+            :class="{ 'featured': project.featured }"
+            @click="openProject(project)"
+          >
+            <div class="project-image">
+              <div class="image-placeholder">
+                <i :class="project.icon" class="project-icon"></i>
+              </div>
+              <div class="project-overlay">
+                <div class="tech-stack">
+                  <span 
+                    v-for="tech in project.technologies.slice(0, 3)" 
+                    :key="tech"
+                    class="tech-tag"
+                  >
+                    {{ tech }}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="project-content">
+              <div class="project-header">
+                <h3 class="project-title">{{ project.title }}</h3>
+                <div class="project-status" :class="project.status">
+                  {{ project.status }}
+                </div>
+              </div>
+              <p class="project-description">{{ project.description }}</p>
+              <div class="project-links">
+                <a 
+                  v-if="project.demo" 
+                  :href="project.demo" 
+                  target="_blank" 
+                  class="project-link demo"
+                  @click.stop
+                >
+                  <i class="fas fa-external-link-alt"></i>
+                  Live Demo
+                </a>
+                <a 
+                  v-if="project.github" 
+                  :href="project.github" 
+                  target="_blank" 
+                  class="project-link github"
+                  @click.stop
+                >
+                  <i class="fab fa-github"></i>
+                  Code
+                </a>
+                <span 
+                  v-if="!project.github && !project.demo" 
+                  class="project-link private"
+                >
+                  <i class="fas fa-eye-slash"></i>
+                  Private/Proprietary
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta-section">
+      <div class="container">
+        <div class="cta-content">
+          <h2 class="cta-title">Have a Project in Mind?</h2>
+          <p class="cta-subtitle">Let's collaborate and build something amazing together</p>
+          <router-link to="/contact" class="cta-button">
+            <span>Get In Touch</span>
+            <i class="fas fa-arrow-right"></i>
+          </router-link>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup>
+import { ref, computed } from 'vue'
+
+const activeFilter = ref('all')
+
+const projects = ref([
+  {
+    id: 1,
+    title: 'Stellarnode.be Homepage',
+    description: 'Complete redesign and development of the company homepage for Stellarnode VOF. Modern, responsive design showcasing services and company information.',
+    category: 'web',
+    status: 'completed',
+    featured: true,
+    technologies: ['HTML5', 'CSS3', 'JavaScript', 'Responsive Design', 'SEO'],
+    icon: 'fas fa-globe',
+    demo: 'https://stellarnode.be',
+    github: null // No source code available
+  },
+  {
+    id: 2,
+    title: 'Uptime Monitoring Frontend',
+    description: 'Vue.js frontend application for monitoring website uptime and performance. Real-time dashboard with charts, alerts, and status tracking.',
+    category: 'web',
+    status: 'in-progress',
+    featured: false,
+    technologies: ['Vue.js', 'Chart.js', 'Axios', 'WebSocket', 'SCSS'],
+    icon: 'fas fa-chart-line',
+    demo: '#',
+    github: 'https://github.com/NielsM05/statusfrontend'
+  },
+  {
+    id: 3,
+    title: 'Uptime Monitoring Backend',
+    description: 'Laravel-based backend API for uptime monitoring system. Handles website checks, notifications, user management, and data analytics.',
+    category: 'fullstack',
+    status: 'in-progress',
+    featured: false,
+    technologies: ['Laravel', 'PHP', 'MySQL', 'Queue Jobs', 'RESTful API'],
+    icon: 'fas fa-server',
+    demo: null,
+    github: 'https://github.com/NielsM05/status-monitor'
+  },
+  {
+    id: 4,
+    title: 'ELK Stack Log Server',
+    description: 'Centralized logging infrastructure using Elasticsearch, Logstash, and Kibana. Aggregates and analyzes logs from multiple applications and servers.',
+    category: 'security',
+    status: 'completed',
+    featured: false,
+    technologies: ['Elasticsearch', 'Logstash', 'Kibana', 'Docker', 'Linux'],
+    icon: 'fas fa-search',
+    demo: null,
+    github: null // Infrastructure project
+  },
+  {
+    id: 5,
+    title: 'Honeypot Security Server',
+    description: 'Deployed honeypot server for school cybersecurity exam. Captured malicious activities with dedicated logging system and implemented protection measures.',
+    category: 'security',
+    status: 'completed',
+    featured: false,
+    technologies: ['Linux', 'Honeypot', 'iptables', 'Log Analysis', 'Security Monitoring'],
+    icon: 'fas fa-bug',
+    demo: null,
+    github: null // School project
+  }
+])
+
+const filteredProjects = computed(() => {
+  if (activeFilter.value === 'all') {
+    return projects.value
+  }
+  return projects.value.filter(project => project.category === activeFilter.value)
+})
+
+const setFilter = (filter) => {
+  activeFilter.value = filter
+}
+
+const openProject = (project) => {
+  // You can add modal functionality here later
+  console.log('Opening project:', project.title)
+}
 </script>
 
 <style scoped>
 .projects {
   min-height: 100vh;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
+  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 70%, #0f0f0f 100%);
   color: #ffffff;
-  padding: 6rem 2rem 2rem;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  position: relative;
+  overflow-x: hidden;
 }
 
+/* Background Elements */
+.background-elements {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.grid-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    linear-gradient(rgba(100, 181, 246, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(100, 181, 246, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: gridMove 20s linear infinite;
+}
+
+.floating-shapes {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.shape {
+  position: absolute;
+  border-radius: 50%;
+  background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+  animation: float 6s ease-in-out infinite;
+}
+
+.shape-1 {
+  width: 80px;
+  height: 80px;
+  top: 20%;
+  left: 15%;
+  animation-delay: 0s;
+}
+
+.shape-2 {
+  width: 60px;
+  height: 60px;
+  top: 60%;
+  right: 20%;
+  animation-delay: 3s;
+}
+
+.shape-3 {
+  width: 100px;
+  height: 100px;
+  top: 80%;
+  left: 70%;
+  animation-delay: 6s;
+}
+
+/* Container */
 .container {
   max-width: 1200px;
   margin: 0 auto;
+  padding: 0 2rem;
+  position: relative;
+  z-index: 2;
+}
+
+/* Hero Section */
+.projects-hero {
+  padding: 8rem 0 4rem;
   text-align: center;
 }
 
-h1 {
+.hero-content {
-  font-size: 3rem;
+  max-width: 800px;
-  margin-bottom: 2rem;
+  margin: 0 auto;
-  background: linear-gradient(45deg, #ffffff, #64b5f6);
+}
+
+.hero-title {
+  font-size: 4rem;
+  font-weight: 800;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(45deg, #ffffff, #64b5f6, #ffffff);
+  background-size: 200% auto;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+.hero-subtitle {
+  font-size: 1.3rem;
+  color: #b0b0b0;
+  line-height: 1.6;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* Filter Section */
+.filter-section {
+  padding: 2rem 0;
+  margin-bottom: 3rem;
+}
+
+.filter-buttons {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.filter-btn {
+  padding: 0.75rem 1.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50px;
+  color: #b0b0b0;
+  font-family: 'Poppins', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.filter-btn:hover {
+  background: rgba(100, 181, 246, 0.1);
+  border-color: rgba(100, 181, 246, 0.3);
+  color: #64b5f6;
+  transform: translateY(-2px);
+}
+
+.filter-btn.active {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  border-color: transparent;
+  color: #ffffff;
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+}
+
+/* Projects Grid */
+.projects-grid {
+  padding: 2rem 0 4rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+/* Project Cards */
+.project-card {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  overflow: hidden;
+  transition: all 0.4s ease;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  flex-direction: column; /* Stack image and content vertically */
+  height: 100%; /* Ensure all cards have same height */
+}
+
+.project-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  border-color: rgba(100, 181, 246, 0.3);
+}
+
+.project-card.featured {
+  border: 2px solid rgba(100, 181, 246, 0.4);
+  background: rgba(100, 181, 246, 0.05);
+}
+
+.project-card.featured::before {
+  content: 'Featured';
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 15px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  z-index: 3;
+}
+
+/* Project Image */
+.project-image {
+  height: 250px; /* Increased from 200px to accommodate tags */
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden; /* Ensure overlay doesn't leak out */
+  flex-shrink: 0; /* Prevent image from shrinking */
+}
+
+.image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.project-icon {
+  font-size: 3rem;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.project-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
+  padding: 1rem;
+  transform: translateY(100%);
+  transition: transform 0.3s ease;
+  z-index: 2;
+  pointer-events: none; /* Prevent interference when hidden */
+}
+
+.project-card:hover .project-overlay {
+  transform: translateY(0);
+  pointer-events: auto; /* Allow interaction when visible */
+}
+
+.tech-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tech-tag {
+  background: rgba(100, 181, 246, 0.2);
+  color: #64b5f6;
+  padding: 0.25rem 0.75rem;
+  border-radius: 15px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border: 1px solid rgba(100, 181, 246, 0.3);
+}
+
+/* Project Content */
+.project-content {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* Make content fill available space */
+}
+
+.project-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  gap: 1rem; /* Add gap between title and status */
+}
+
+.project-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #ffffff;
+  margin: 0;
+  line-height: 1.2;
+  flex: 1; /* Allow title to take available space */
+}
+
+.project-status {
+  padding: 0.25rem 0.75rem;
+  border-radius: 15px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  white-space: nowrap; /* Prevent text wrapping */
+  flex-shrink: 0; /* Prevent shrinking */
+}
+
+.project-status.completed {
+  background: rgba(76, 175, 80, 0.2);
+  color: #4caf50;
+  border: 1px solid rgba(76, 175, 80, 0.3);
+}
+
+.project-status.in-progress {
+  background: rgba(255, 193, 7, 0.2);
+  color: #ffc107;
+  border: 1px solid rgba(255, 193, 7, 0.3);
+}
+
+.project-description {
+  color: #b0b0b0;
+  line-height: 1.6;
+  margin-bottom: 1rem; /* Reduced from auto to control spacing */
+  font-size: 0.95rem;
+  /* Removed flex-grow to prevent excessive space */
+}
+
+.project-links {
+  display: flex;
+  gap: 1rem;
+  margin-top: auto; /* Push buttons to bottom */
+}
+
+.project-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  text-decoration: none;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  border: 1px solid;
+}
+
+.project-link.demo {
+  background: rgba(100, 181, 246, 0.1);
+  color: #64b5f6;
+  border-color: rgba(100, 181, 246, 0.3);
+}
+
+.project-link.demo:hover {
+  background: rgba(100, 181, 246, 0.2);
+  transform: translateY(-2px);
+}
+
+.project-link.github {
+  background: rgba(255, 255, 255, 0.05);
+  color: #b0b0b0;
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.project-link.github:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  transform: translateY(-2px);
+}
+
+.project-link.private {
+  background: rgba(255, 152, 0, 0.1);
+  color: #ff9800;
+  border-color: rgba(255, 152, 0, 0.3);
+  cursor: default;
+}
+
+/* CTA Section */
+.cta-section {
+  padding: 4rem 0;
+  text-align: center;
+}
+
+.cta-content {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.cta-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: #ffffff;
+}
+
+.cta-subtitle {
+  font-size: 1.1rem;
+  color: #b0b0b0;
+  margin-bottom: 2rem;
+  line-height: 1.6;
+}
+
+.cta-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 2rem;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  text-decoration: none;
+  border-radius: 50px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+}
+
+.cta-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
+}
+
+.cta-button i {
+  transition: transform 0.3s ease;
+}
+
+.cta-button:hover i {
+  transform: translateX(5px);
+}
+
+/* Animations */
+@keyframes shimmer {
+  0% {
+    background-position: -200% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
+}
+
+@keyframes gridMove {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .hero-subtitle {
+    font-size: 1.1rem;
+  }
+  
+  .grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  
+  .filter-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .project-links {
+    flex-direction: column;
+  }
+  
+  .cta-title {
+    font-size: 2rem;
+  }
+  
+  .container {
+    padding: 0 1rem;
+  }
 }
 </style>