V2, better design, more functionalities.

resources/views/frontend/_card.blade.php

@@ -0,0 +1,24 @@
+<div class="p-4 bg-white dark:bg-gray-800 rounded shadow">
+    <h3 class="text-lg font-bold text-gray-800 dark:text-white">{{ $skill->title }}</h3>
+
+    @if($skill->type === 'rating')
+        <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Beoordeling: {{ $skill->rating }}/10</p>
+    @endif
+
+    @if($skill->description)
+        <p class="text-sm text-gray-600 dark:text-gray-300">{{ $skill->description }}</p>
+    @endif
+
+    @if ($skill->getFirstMediaUrl('image'))
+        <img src="{{ $skill->getFirstMediaUrl('image') }}" alt="{{ $skill->title }}" class="mt-2 max-w-full h-32 object-contain rounded">
+    @endif
+
+    <div class="mt-4 flex justify-between">
+        <a href="{{ route('skills.edit', $skill) }}" class="text-blue-600 hover:underline">Bewerken</a>
+        <form action="{{ route('skills.destroy', $skill) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je dit wilt verwijderen?')">
+            @csrf
+            @method('DELETE')
+            <button class="text-red-600 hover:underline">Verwijderen</button>
+        </form>
+    </div>
+</div>

resources/views/frontend/cta.blade.php

@@ -0,0 +1,115 @@
+<!-- Call to Action -->
+<section
+    class="text-center lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10 space-y-4">
+
+    <h2 class="text-2xl font-semibold">
+        <i class="fa-solid fa-paper-plane mr-2 text-sitiweb-green"></i> Wat kan ik voor jou betekenen?
+    </h2>
+
+    <p class="text-gray-600 dark:text-gray-300 text-sm">
+        📬 Ook beschikbaar voor freelance opdrachten of samenwerkingen. <br>
+
+    </p>
+
+    <div class="flex justify-center gap-4 mt-4 flex-wrap">
+        <button onclick="openContactModal()"
+            class="px-5 py-2 bg-sitiweb-green text-white rounded-full text-sm font-medium hover:bg-green-700 transition">
+            <i class="fa-solid fa-envelope mr-2"></i> Contact opnemen
+        </button>
+
+    </div>
+</section>
+
+<!-- Contact Modal -->
+<div id="contact-modal" class="fixed inset-0 z-50 hidden bg-black/50 flex items-center justify-center">
+    <div class="bg-white dark:bg-zinc-900 rounded-lg shadow-lg max-w-md w-full p-6 space-y-4">
+        <h3 class="text-xl font-semibold text-zinc-800 dark:text-white">Stuur een bericht</h3>
+        <form id="contact-form" class="space-y-4">
+            <div>
+                <label for="name" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Naam</label>
+                <input type="text" id="name" name="name" required
+                    class="w-full mt-1 px-3 py-2 border border-zinc-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sitiweb-green dark:bg-zinc-800 dark:border-zinc-600 dark:text-white" />
+            </div>
+            <div>
+                <label for="email" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300">E-mail
+                    (optioneel)</label>
+                <input type="email" id="email" name="email"
+                    class="w-full mt-1 px-3 py-2 border border-zinc-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sitiweb-green dark:bg-zinc-800 dark:border-zinc-600 dark:text-white" />
+            </div>
+            <div>
+                <label for="phone" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Telefoonnummer
+                    (optioneel)</label>
+                <input type="tel" id="phone" name="phone"
+                    class="w-full mt-1 px-3 py-2 border border-zinc-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sitiweb-green dark:bg-zinc-800 dark:border-zinc-600 dark:text-white" />
+            </div>
+
+            <div>
+                <label for="message" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Bericht</label>
+                <textarea id="message" name="message" required rows="4"
+                    class="w-full mt-1 px-3 py-2 border border-zinc-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sitiweb-green dark:bg-zinc-800 dark:border-zinc-600 dark:text-white"></textarea>
+            </div>
+            <div class="flex justify-end gap-2">
+                <button type="button" onclick="closeContactModal()"
+                    class="px-4 py-2 text-sm bg-zinc-200 text-zinc-800 rounded-md hover:bg-zinc-300 dark:bg-zinc-700 dark:text-white dark:hover:bg-zinc-600">
+                    Annuleren
+                </button>
+                <button type="submit"
+                    class="px-4 py-2 text-sm bg-sitiweb-green text-white rounded-md hover:bg-green-700">
+                    Versturen
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+@push('scripts')
+    <script>
+        function openContactModal() {
+            document.getElementById('contact-modal').classList.remove('hidden');
+        }
+
+        function closeContactModal() {
+            document.getElementById('contact-modal').classList.add('hidden');
+        }
+
+        document.getElementById('contact-form').addEventListener('submit', async function(e) {
+            e.preventDefault();
+
+            const name = document.getElementById('name').value.trim();
+            const message = document.getElementById('message').value.trim();
+            const email = document.getElementById('email').value.trim();
+            const phone = document.getElementById('phone').value.trim();
+
+
+            try {
+                const response = await fetch('/contact', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute(
+                            'content'),
+                    },
+                    body: JSON.stringify({
+                        name,
+                        message,
+                        email,
+                        phone
+                    }),
+
+                });
+
+                if (response.ok) {
+                    alert('Bericht succesvol verzonden!');
+                    closeContactModal();
+                    this.reset();
+                } else {
+                    alert('Er ging iets mis bij het verzenden.');
+                }
+            } catch (error) {
+                console.error('Fout:', error);
+                alert('Netwerkfout bij verzenden.');
+            }
+        });
+    </script>
+@endpush

resources/views/frontend/opleidingen.blade.php

@@ -1,9 +1,19 @@
 @foreach ($education as $item)
-    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow space-y-2">
-        <h3 class="text-xl font-bold text-gray-900 dark:text-white">
-            {{ $item->opleiding }}
-            <span class="teitemxt-gray-500 dark:text-gray-400 font-normal">– {{ $item->instituut }}</span>
-        </h3>
+    <hr role="presentation" class="w-full border-t border-zinc-950/10 dark:border-white/10 my-8">
+    <div class="space-y-2">
+        <div class="flex items-center gap-4">
+            @if ($item->image())
+                <img src="{{ $item->imageUrl() }}" alt="{{ $item->title }}"
+                    class="w-12 h-12 rounded-md shadow-md object-contain bg-white dark:bg-gray-700 p-1">
+            @endif
+            <h3 class="text-xl font-bold text-gray-900 dark:text-white">
+
+
+                {{ $item->opleiding }}
+                <span class="teitemxt-gray-500 dark:text-gray-400 font-normal">– {{ $item->instituut }}</span>
+
+            </h3>
+        </div>
 
         <p class="text-sm text-gray-600 dark:text-gray-300 italic">
             {{ \Carbon\Carbon::parse($item->startdatum)->translatedFormat('Y') }}

resources/views/frontend/personalia.blade.php

@@ -1,44 +1,39 @@
 <ul class="space-y-4">
-    @foreach($personalia as $item)
-        <li class="flex items-start gap-4">
-            <i class="fa fa-{{ $item->icon }} text-blue-600 text-xl mt-1"></i>
+    @foreach ($personalia as $item)
+        <li class="flex items-start gap-4 hover:scale-105 transition hover:shadow-lg">
+            <i class="fa fa-{{ $item->icon }} text-gray-800  dark:text-gray-400 text-xl mt-1"></i>
 
             <div>
                 <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">{{ ucfirst($item->key) }}</p>
 
-                @if($item->hidden)
+                @if ($item->hidden)
                     @php
-    // 1. Vervang <br>-tags door spaties
-    $cleanValue = str_ireplace(['<br>', '<br/>', '<br />'], ' ', $item->value);
+                        // 1. Vervang <br>-tags door spaties
+                        $cleanValue = str_ireplace(['<br>', '<br/>', '<br />'], ' ', $item->value);
 
-    // 2. Verwijder alle andere HTML-tags
-    $cleanValue = strip_tags($cleanValue);
-
-    // 3. Maskeren vanaf derde teken, spaties zichtbaar houden
-    $masked = '';
-    $chars = mb_str_split($cleanValue); // Split veilig per karakter
-
-    foreach ($chars as $i => $char) {
-        if ($i < 2) {
-            $masked .= $char;
-        } elseif ($char === ' ') {
-            $masked .= ' ';
-        } else {
-            $masked .= '*';
-        }
-    }
-@endphp
-
-<button
-    class="text-gray-500 text-left dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-mono"
-    onclick="revealValue({{ $item->id }}, this)"
-    data-placeholder="{{ $masked }}"
->
-    {{ $masked }}
-</button>
+                        // 2. Verwijder alle andere HTML-tags
+                        $cleanValue = strip_tags($cleanValue);
 
+                        // 3. Maskeren vanaf derde teken, spaties zichtbaar houden
+                        $masked = '';
+                        $chars = mb_str_split($cleanValue); // Split veilig per karakter
 
+                        foreach ($chars as $i => $char) {
+                            if ($i < 2) {
+                                $masked .= $char;
+                            } elseif ($char === ' ') {
+                                $masked .= ' ';
+                            } else {
+                                $masked .= '*';
+                            }
+                        }
+                    @endphp
 
+                    <button
+                        class="text-gray-500 text-left dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-mono"
+                        onclick="revealValue({{ $item->id }}, this)" data-placeholder="{{ $masked }}">
+                        {{ $masked }}
+                    </button>
                 @else
                     <p class="text-gray-800 dark:text-white">{{ $item->value }}</p>
                 @endif
@@ -47,17 +42,17 @@
     @endforeach
 </ul>
 <script>
-function revealValue(id, el) {
-    fetch(`/getPersonalia/${id}`)
-        .then(res => res.json())
-        .then(data => {
-            el.innerHTML = data.value; // Gebruik innerHTML om HTML-opmaak te ondersteunen
-            el.classList.remove('hover:text-gray-800', 'dark:hover:text-white');
-            el.classList.add('text-gray-800', 'dark:text-white');
-            el.removeAttribute('onclick');
-        })
-        .catch(() => {
-            el.textContent = '[mislukt ophalen]';
-        });
-}
+    function revealValue(id, el) {
+        fetch(`/getPersonalia/${id}`)
+            .then(res => res.json())
+            .then(data => {
+                el.innerHTML = data.value; // Gebruik innerHTML om HTML-opmaak te ondersteunen
+                el.classList.remove('hover:text-gray-800', 'dark:hover:text-white');
+                el.classList.add('text-gray-800', 'dark:text-white');
+                el.removeAttribute('onclick');
+            })
+            .catch(() => {
+                el.textContent = '[mislukt ophalen]';
+            });
+    }
 </script>

resources/views/frontend/vaardigheden.blade.php

@@ -0,0 +1,66 @@
+@if (isset($skills['tag']))
+    <div class="flex flex-wrap gap-2">
+        @foreach ($skills['tag'] as $skill)
+            <span
+                class="inline-block hover:scale-105 transition hover:shadow-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-sm px-3 py-1 rounded">
+
+                {{ $skill->title }}
+            </span>
+        @endforeach
+    </div>
+@endif
+
+@if (isset($skills['rating']))
+
+    @foreach ($skills['rating'] as $skill)
+        <hr role="presentation" class="w-full border-t border-zinc-950/10 dark:border-white/10 my-8">
+        <div class="space-y-4 flex flex-col gap-4">
+
+            <div class="flex items-center gap-4">
+                @if ($skill->image())
+                    <img src="{{ $skill->imageUrl() }}" alt="{{ $skill->title }}"
+                        class="w-12 h-12 rounded-md shadow-md object-contain bg-white dark:bg-gray-700 p-1 hover:scale-125 transition hover:shadow-lg">
+                @endif
+                <h3 class="text-xl font-bold text-gray-900 dark:text-white">
+                    {{ $skill->title }}
+                </h3>
+            </div>
+
+            {{-- Rating bar --}}
+            <div>
+                <div class="text-sm text-gray-600 dark:text-gray-300 italic mb-1">
+                    Beoordeling: {{ $skill->rating }}/10
+                </div>
+                <div class="w-full h-3 bg-gray-300 dark:bg-gray-700 rounded-full overflow-hidden">
+                    <div class="h-full bg-sitiweb-green transition-all duration-300"
+                        style="width: {{ $skill->rating * 10 }}%">
+                    </div>
+                </div>
+            </div>
+
+            @if ($skill->description)
+                <div class="text-gray-800 dark:text-gray-100 prose dark:prose-invert max-w-prose text-sm">
+                    {!! nl2br(e($skill->description)) !!}
+                </div>
+            @endif
+
+        </div>
+    @endforeach
+
+@endif
+
+
+@if (isset($skills['other']))
+    <div class="flex flex-wrap gap-4 mt-8">
+        @foreach ($skills['other'] as $skill)
+            <div class="flex flex-col items-center w-16">
+
+                @if ($skill->getFirstMediaUrl('image'))
+                    <img src="{{ $skill->getFirstMediaUrl('image') }}" alt="{{ $skill->title }}"
+                        class="w-10 h-10 object-contain mb-1 hover:scale-125 transition hover:shadow-lg" >
+                @endif
+                <span class="text-xs text-center text-gray-700 dark:text-gray-300">{{ $skill->title }}</span>
+            </div>
+        @endforeach
+    </div>
+@endif

resources/views/frontend/werkervaring.blade.php

@@ -1,8 +1,16 @@
 @foreach ($experience as $item)
-    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow space-y-2">
-        <h3 class="text-xl font-bold text-gray-900 dark:text-white">
-            {{ $item->functie }} <span class="text-gray-500 dark:text-gray-400 font-normal">bij {{ $item->werkgever }}</span>
-        </h3>
+    <hr role="presentation" class="w-full border-t border-zinc-950/10 dark:border-white/10 my-8">
+    <div class=" space-y-2">
+        <div class="flex items-center gap-4">
+            @if ($item->image())
+                <img src="{{ $item->imageUrl() }}" alt="{{ $item->title }}"
+                    class="w-12 h-12 rounded-md shadow-md object-contain bg-white dark:bg-gray-700 p-1">
+            @endif
+            <h3 class="text-xl font-bold text-gray-900 dark:text-white">
+                {{ $item->functie }} <span class="text-gray-500 dark:text-gray-400 font-normal">bij
+                    {{ $item->werkgever }}</span>
+            </h3>
+        </div>
 
         <p class="text-sm text-gray-600 dark:text-gray-300 italic">
             {{ \Carbon\Carbon::parse($item->startdatum)->translatedFormat('F Y') }}