diff --git a/app/Http/Controllers/ContactController.php b/app/Http/Controllers/ContactController.php
new file mode 100644
index 0000000..d0e2933
--- /dev/null
+++ b/app/Http/Controllers/ContactController.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Mail;
+
+class ContactController extends Controller
+{
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'name' => 'required|max:255',
+            'message' => 'required|max:5000',
+        ]);
+
+
+
+        return response()->json(['status' => 'success']);
+    }
+}
diff --git a/app/Http/Controllers/EducationController.php b/app/Http/Controllers/EducationController.php
index b8e7c7d..bd35f52 100644
--- a/app/Http/Controllers/EducationController.php
+++ b/app/Http/Controllers/EducationController.php
@@ -32,7 +32,7 @@ class EducationController extends Controller
         $education = Education::create($data);
 
         if ($request->hasFile('afbeelding')) {
-            $education->addMediaFromRequest('afbeelding')->toMediaCollection('afbeelding');
+            $education->addMediaFromRequest('afbeelding')->toMediaCollection('image');
         }
 
         return redirect()->route('educations.index')->with('success', 'Opleiding toegevoegd.');
@@ -62,8 +62,9 @@ class EducationController extends Controller
         $education->update($data);
 
         if ($request->hasFile('afbeelding')) {
-            $education->clearMediaCollection('afbeelding');
-            $education->addMediaFromRequest('afbeelding')->toMediaCollection('afbeelding');
+            $education->clearMediaCollection('image');
+
+            $education->addMediaFromRequest('afbeelding')->toMediaCollection('image');
         }
 
         return redirect()->route('educations.index')->with('success', 'Opleiding bijgewerkt.');
diff --git a/app/Http/Controllers/FrontendController.php b/app/Http/Controllers/FrontendController.php
index 38f5ac9..386c661 100644
--- a/app/Http/Controllers/FrontendController.php
+++ b/app/Http/Controllers/FrontendController.php
@@ -7,15 +7,55 @@ use App\Models\Personalia;
 use App\Models\Skill;
 use App\Models\WorkExperience;
 use Illuminate\Http\Request;
+use App\Jobs\NotifyTelegramAboutPersonaliaClick;
+use App\Jobs\NotifyTelegramAboutContactMessage;
 
 class FrontendController extends Controller
 {
     public function index()
     {
-        $skills = Skill::all();
+        $skills = Skill::all()->groupBy('type');
+
         $personalia = Personalia::all();
-        $education = Education::all();
-        $experience = WorkExperience::all();
+        $education = Education::orderBy('startdatum', 'desc')->get();
+        $experience = WorkExperience::orderBy('startdatum', 'desc')->get();
+
         return view('welcome', compact('skills', 'personalia', 'education', 'experience'));
     }
+
+    public function getPersonalia($id)
+    {
+        $item = Personalia::findOrFail($id);
+        NotifyTelegramAboutPersonaliaClick::dispatch(
+            $item,
+            request()->ip(),
+            request()->userAgent()
+        );
+
+        return response()->json([
+            'value' => $item->value,
+        ]);
+    }
+
+   public function message(Request $request)
+{
+    $validated = $request->validate([
+        'name' => 'required|string|max:255',
+        'message' => 'required|string|max:5000',
+        'email' => 'nullable|email|max:255',
+        'phone' => 'nullable|string|max:50',
+    ]);
+
+    NotifyTelegramAboutContactMessage::dispatch(
+        $validated['name'],
+        $validated['message'],
+        $request->ip(),
+        $request->userAgent(),
+        $validated['email'] ?? null,
+        $validated['phone'] ?? null
+    );
+
+    return response()->json(['status' => 'success']);
+}
+
 }
diff --git a/app/Http/Controllers/SkillController.php b/app/Http/Controllers/SkillController.php
index 5049087..c5d66c5 100644
--- a/app/Http/Controllers/SkillController.php
+++ b/app/Http/Controllers/SkillController.php
@@ -29,11 +29,14 @@ class SkillController extends Controller
      */
     public function store(Request $request)
     {
+
         $validated = $request->validate([
             'title' => 'required|string|max:255',
             'description' => 'nullable|string',
-            'rating' => 'required|integer|min:1|max:10',
+            'rating' => 'required|numeric|min:1|max:10',
             'image' => 'nullable|image|max:2048',
+            'type' => 'required|in:rating,tag,other',
+
         ]);
 
         $skill = Skill::create($validated);
@@ -69,8 +72,10 @@ class SkillController extends Controller
         $validated = $request->validate([
             'title' => 'required|string|max:255',
             'description' => 'nullable|string',
-            'rating' => 'required|integer|min:1|max:10',
+            'rating' => 'required|numeric|min:1|max:10',
             'image' => 'nullable|image|max:2048',
+            'type' => 'required|in:rating,tag,other',
+
         ]);
 
         $skill->update($validated);
diff --git a/app/Http/Controllers/WorkExperienceController.php b/app/Http/Controllers/WorkExperienceController.php
index 3d06f7e..bcb807e 100644
--- a/app/Http/Controllers/WorkExperienceController.php
+++ b/app/Http/Controllers/WorkExperienceController.php
@@ -31,7 +31,7 @@ class WorkExperienceController extends Controller
         $experience = WorkExperience::create($data);
 
         if ($request->hasFile('afbeelding')) {
-            $experience->addMediaFromRequest('afbeelding')->toMediaCollection('afbeelding');
+            $experience->addMediaFromRequest('afbeelding')->toMediaCollection('image');
         }
 
         return redirect()->route('work-experiences.index')->with('success', 'Ervaring toegevoegd.');
@@ -58,11 +58,13 @@ class WorkExperienceController extends Controller
             'afbeelding' => 'nullable|image|max:2048',
         ]);
 
+
+
         $workExperience->update($data);
 
         if ($request->hasFile('afbeelding')) {
-            $workExperience->clearMediaCollection('afbeelding');
-            $workExperience->addMediaFromRequest('afbeelding')->toMediaCollection('afbeelding');
+            $workExperience->clearMediaCollection('image');
+            $workExperience->addMediaFromRequest('afbeelding')->toMediaCollection('image');
         }
 
         return redirect()->route('work-experiences.index')->with('success', 'Ervaring bijgewerkt.');
diff --git a/app/Jobs/NotifyTelegramAboutContactMessage.php b/app/Jobs/NotifyTelegramAboutContactMessage.php
new file mode 100644
index 0000000..696b3a5
--- /dev/null
+++ b/app/Jobs/NotifyTelegramAboutContactMessage.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Jobs;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Facades\Http;
+
+class NotifyTelegramAboutContactMessage implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected string $name;
+    protected string $message;
+    protected string $ip;
+    protected string $userAgent;
+    protected string $email;
+    protected string $phone;
+
+    public function __construct(string $name, string $message, string $ip, string $userAgent, ?string $email = null, ?string $phone = null)
+    {
+        $this->name = $name;
+        $this->message = $message;
+        $this->ip = $ip;
+        $this->userAgent = $userAgent;
+        $this->email = $email;
+        $this->phone = $phone;
+    }
+
+
+    public function handle()
+    {
+        $email = $this->email ?? '–';
+        $phone = $this->phone ?? '–';
+
+        $text = <<<TEXT
+📩 *Nieuw contactbericht ontvangen*
+
+👤 Naam: *{$this->name}*
+
+💬 Bericht:
+{$this->message}
+📧 Email: {$email}
+📱 Telefoon: {$phone}
+🌐 IP: {$this->ip}
+🧭 User Agent: `{$this->userAgent}`
+
+🕒 Tijdstip: *{now()->format('d-m-Y H:i')}*
+TEXT;
+
+        Http::post("https://api.telegram.org/bot" . config('services.telegram.bot_token') . "/sendMessage", [
+            'chat_id' => config('services.telegram.chat_id'),
+            'text' => $text,
+            'parse_mode' => 'Markdown',
+        ]);
+    }
+}
diff --git a/app/Jobs/NotifyTelegramAboutPersonaliaClick.php b/app/Jobs/NotifyTelegramAboutPersonaliaClick.php
new file mode 100644
index 0000000..2bf33a3
--- /dev/null
+++ b/app/Jobs/NotifyTelegramAboutPersonaliaClick.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Jobs;
+
+use App\Models\Personalia;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Facades\Http;
+
+class NotifyTelegramAboutPersonaliaClick implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $personalia;
+    protected $ip;
+    protected $userAgent;
+
+    public function __construct(Personalia $personalia, $ip, $userAgent)
+    {
+        $this->personalia = $personalia;
+        $this->ip = $ip;
+        $this->userAgent = $userAgent;
+    }
+
+    public function handle()
+    {
+        $message = <<<TEXT
+👤 *Persoonlijke gegevens bekeken*
+
+Naam: {$this->personalia->value}
+IP: {$this->ip}
+User Agent: `{$this->userAgent}`
+
+📅 Tijdstip: *{$this->personalia->updated_at->format('d-m-Y H:i')}*
+TEXT;
+
+        Http::post("https://api.telegram.org/bot" . config('services.telegram.bot_token') . "/sendMessage", [
+            'chat_id' => config('services.telegram.chat_id'),
+            'text' => $message,
+            'parse_mode' => 'Markdown',
+        ]);
+    }
+}
diff --git a/app/Models/Education.php b/app/Models/Education.php
index 71f35ac..aee08e7 100644
--- a/app/Models/Education.php
+++ b/app/Models/Education.php
@@ -16,4 +16,13 @@ class Education extends Model implements HasMedia
         'einddatum',
         'beschrijving',
     ];
+
+    public function image()
+    {
+        return $this->getFirstMedia('image');
+    }
+    public function imageUrl()
+    {
+        return $this->image() ? $this->image()->getUrl() : null;
+    }
 }
diff --git a/app/Models/Personalia.php b/app/Models/Personalia.php
index 97e71fc..6aa3cf1 100644
--- a/app/Models/Personalia.php
+++ b/app/Models/Personalia.php
@@ -10,4 +10,13 @@ class Personalia extends Model
     protected $casts = [
         'hidden' => 'boolean',
     ];
+
+    public function image()
+    {
+        return $this->getFirstMedia('image');
+    }
+    public function imageUrl()
+    {
+        return $this->image() ? $this->image()->getUrl() : null;
+    }
 }
diff --git a/app/Models/Skill.php b/app/Models/Skill.php
index b47f7a2..8bf7a33 100644
--- a/app/Models/Skill.php
+++ b/app/Models/Skill.php
@@ -11,5 +11,14 @@ class Skill extends Model implements HasMedia
 {
     use InteractsWithMedia;
 
-    protected $fillable = ['title', 'description', 'rating'];
+    protected $fillable = ['title', 'description', 'rating', 'type'];
+
+    public function image()
+    {
+        return $this->getFirstMedia('image');
+    }
+    public function imageUrl()
+    {
+        return $this->image() ? $this->image()->getUrl() : null;
+    }
 }
diff --git a/app/Models/WorkExperience.php b/app/Models/WorkExperience.php
index a78c150..4d593c7 100644
--- a/app/Models/WorkExperience.php
+++ b/app/Models/WorkExperience.php
@@ -18,5 +18,14 @@ class WorkExperience extends Model implements HasMedia
         'beschrijving',
     ];
 
+    public function image()
+    {
+        return $this->getFirstMedia('image');
+    }
+    public function imageUrl()
+    {
+        return $this->image() ? $this->image()->getUrl() : null;
+    }
+
     // Als je mediaconversies of image handling wil: hier kun je die later toevoegen
 }
diff --git a/config/services.php b/config/services.php
index 6182e4b..ef008fb 100644
--- a/config/services.php
+++ b/config/services.php
@@ -34,5 +34,9 @@ return [
             'channel' => env('SLACK_BOT_USER_DEFAULT_CHANNEL'),
         ],
     ],
+    'telegram' => [
+        'bot_token' => env('TELEGRAM_BOT_TOKEN'),
+        'chat_id' => env('TELEGRAM_CHAT_ID'),
+    ],
 
 ];
diff --git a/database/data/education.json b/database/data/education.json
new file mode 100644
index 0000000..9c6ecb2
--- /dev/null
+++ b/database/data/education.json
@@ -0,0 +1,32 @@
+[
+   {
+      "id": "1",
+      "opleiding": "Havo",
+      "instituut": "Blaise pascal (Scala rietvelden)",
+      "startdatum": "2006-07-01",
+      "einddatum": "2013-01-07",
+      "beschrijving": "Mijn middelbare schoolperiode kende een hobbelig begin: ik startte op het havo/vwo, maar had in de eerste jaren moeite met motivatie en discipline. Daardoor ben ik afgezakt naar het mavo-niveau. Op de mavo heb ik mezelf herpakt en mijn focus hervonden. Dankzij die ommekeer kon ik succesvol doorstromen naar de havo, waar ik mijn diploma met ruime voldoendes heb behaald. Deze periode heeft mij geleerd hoe belangrijk eigen inzet en doelgerichtheid zijn.",
+      "created_at": "2025-06-18 23:08:02",
+      "updated_at": "2025-06-18 23:20:19"
+   },
+   {
+      "id": "2",
+      "opleiding": "Internation Business and Management Studies",
+      "instituut": "Hogeschool Rotterdam",
+      "startdatum": "2013-07-01",
+      "einddatum": "2014-07-01",
+      "beschrijving": "International Business and Management Studies is een brede economische hbo-opleiding gericht op internationale handel, marketing en bedrijfsvoering. Tijdens het eerste jaar maakte ik kennis met onderwerpen als exportstrategieën, interculturele communicatie en organisatiekunde. Hoewel ik waardevolle inzichten heb opgedaan, merkte ik al snel dat de inhoud en aanpak van de opleiding niet goed aansloten bij mij.",
+      "created_at": "2025-06-18 23:11:45",
+      "updated_at": "2025-06-18 23:11:45"
+   },
+   {
+      "id": "3",
+      "opleiding": "HBO Business Studies (Specialisering logistiek)",
+      "instituut": "Inholland Rotterdam",
+      "startdatum": "2014-07-01",
+      "einddatum": "2017-07-01",
+      "beschrijving": "Tijdens deze hbo-opleiding verdiepte ik mij in bedrijfskunde, ondernemerschap en supply chain management. In de laatste fase volgde ik de specialisatie Logistiek aan de vestiging in Haarlem, met een sterke focus op luchtvaartlogistiek en internationale goederenstromen. Hoewel ik brede kennis heb opgedaan binnen het vakgebied, heb ik de opleiding uiteindelijk voortijdig moeten beëindigen. In 2016 startte ik mijn eigen bedrijf, dat in korte tijd sterk groeide. Het combineren van een fulltime afstudeerstage met mijn ondernemersverantwoordelijkheden bleek op dat moment niet haalbaar.",
+      "created_at": "2025-06-18 23:17:49",
+      "updated_at": "2025-06-18 23:17:49"
+   }
+]
diff --git a/database/data/media.json b/database/data/media.json
new file mode 100644
index 0000000..1c3d201
--- /dev/null
+++ b/database/data/media.json
@@ -0,0 +1,762 @@
+[
+   {
+      "id": "1",
+      "model_type": "App\\Models\\WorkExperience",
+      "model_id": "1",
+      "uuid": "3aa34696-9a24-4efe-a255-71fb23093bdb",
+      "collection_name": "image",
+      "name": "jumbo",
+      "file_name": "jumbo.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "3828",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 17:58:25",
+      "updated_at": "2025-07-08 17:58:25"
+   },
+   {
+      "id": "2",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "1",
+      "uuid": "913531cd-8948-45a6-9f8e-abdcfed30677",
+      "collection_name": "image",
+      "name": "php-logo",
+      "file_name": "php-logo.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "80608",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:22:47",
+      "updated_at": "2025-07-08 19:22:47"
+   },
+   {
+      "id": "3",
+      "model_type": "App\\Models\\WorkExperience",
+      "model_id": "2",
+      "uuid": "da630aba-72a4-4dbe-8deb-95d994adde75",
+      "collection_name": "image",
+      "name": "sitiweb-logo",
+      "file_name": "sitiweb-logo.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "2296",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 18:22:18",
+      "updated_at": "2025-07-08 18:22:18"
+   },
+   {
+      "id": "4",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "3",
+      "uuid": "486f344f-dd27-4636-904a-4a5686a06d42",
+      "collection_name": "image",
+      "name": "5848152fcef1014c0b5e4967",
+      "file_name": "5848152fcef1014c0b5e4967.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "9955",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:25:31",
+      "updated_at": "2025-07-08 19:25:31"
+   },
+   {
+      "id": "5",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "2",
+      "uuid": "73a14a0b-4f75-41c4-933b-63c107492162",
+      "collection_name": "image",
+      "name": "JavaScript",
+      "file_name": "JavaScript.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "5418",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:35:02",
+      "updated_at": "2025-07-08 19:35:02"
+   },
+   {
+      "id": "6",
+      "model_type": "App\\Models\\Education",
+      "model_id": "1",
+      "uuid": "b8166354-3e19-4eb5-8778-5f160c5528c0",
+      "collection_name": "image",
+      "name": "images",
+      "file_name": "images.jpg",
+      "mime_type": "image/jpeg",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "10052",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 18:01:03",
+      "updated_at": "2025-07-08 18:01:03"
+   },
+   {
+      "id": "7",
+      "model_type": "App\\Models\\WorkExperience",
+      "model_id": "3",
+      "uuid": "8b814d2e-15f3-4f73-b6b4-ff5114346f63",
+      "collection_name": "image",
+      "name": "internettoday-logo",
+      "file_name": "internettoday-logo.jpg",
+      "mime_type": "image/jpeg",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "13085",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 18:29:44",
+      "updated_at": "2025-07-08 18:29:44"
+   },
+   {
+      "id": "8",
+      "model_type": "App\\Models\\Education",
+      "model_id": "2",
+      "uuid": "0af4f477-13a0-4926-988f-44cfd886b88e",
+      "collection_name": "image",
+      "name": "hr",
+      "file_name": "hr.jpg",
+      "mime_type": "image/jpeg",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "4159",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 18:00:56",
+      "updated_at": "2025-07-08 18:00:56"
+   },
+   {
+      "id": "9",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "4",
+      "uuid": "f3d64062-0571-40db-8871-18584a45420e",
+      "collection_name": "image",
+      "name": "linux-logo",
+      "file_name": "linux-logo.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "145726",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:26:24",
+      "updated_at": "2025-07-08 19:26:24"
+   },
+   {
+      "id": "10",
+      "model_type": "App\\Models\\Education",
+      "model_id": "3",
+      "uuid": "3d811274-5a83-4b56-99af-d87a9d404fc5",
+      "collection_name": "image",
+      "name": "inh",
+      "file_name": "inh.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "3053",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 18:00:48",
+      "updated_at": "2025-07-08 18:00:48"
+   },
+   {
+      "id": "11",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "5",
+      "uuid": "58b96151-814b-4b83-a775-f64101f046a9",
+      "collection_name": "image",
+      "name": "git-logo",
+      "file_name": "git-logo.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "2383",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 17:12:48",
+      "updated_at": "2025-07-08 17:12:48"
+   },
+   {
+      "id": "12",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "7",
+      "uuid": "05cd0535-e055-434d-b025-c9c855651dd3",
+      "collection_name": "image",
+      "name": "lara",
+      "file_name": "lara.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "37110",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:21:24",
+      "updated_at": "2025-07-08 19:21:24"
+   },
+   {
+      "id": "13",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "8",
+      "uuid": "65d02709-dc31-4ccf-84da-7e0ac58c62bc",
+      "collection_name": "image",
+      "name": "Livewire-logo",
+      "file_name": "Livewire-logo.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "32291",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:27:21",
+      "updated_at": "2025-07-08 19:27:21"
+   },
+   {
+      "id": "14",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "9",
+      "uuid": "7e04527d-91c8-4017-9f58-31f9b209e5a8",
+      "collection_name": "image",
+      "name": "Tailwind CSS",
+      "file_name": "Tailwind-CSS.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "6255",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:29:55",
+      "updated_at": "2025-07-08 19:29:55"
+   },
+   {
+      "id": "15",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "10",
+      "uuid": "428f92d1-918a-4490-a2ac-ec613c71b073",
+      "collection_name": "image",
+      "name": "Postman",
+      "file_name": "Postman.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "8252",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:34:47",
+      "updated_at": "2025-07-08 19:34:47"
+   },
+   {
+      "id": "16",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "11",
+      "uuid": "a2ff85d9-e3e6-4e12-ad9d-66b632bd187d",
+      "collection_name": "image",
+      "name": "Docker",
+      "file_name": "Docker.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "11082",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:34:31",
+      "updated_at": "2025-07-08 19:34:31"
+   },
+   {
+      "id": "17",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "12",
+      "uuid": "7b827656-bef3-44eb-bb70-53e4b77b9148",
+      "collection_name": "image",
+      "name": "proxmox-logo",
+      "file_name": "proxmox-logo.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "20014",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:33:25",
+      "updated_at": "2025-07-08 19:33:25"
+   },
+   {
+      "id": "18",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "13",
+      "uuid": "12ce5e7b-fc63-4657-a2ff-edef35d4bb78",
+      "collection_name": "image",
+      "name": "Grafana",
+      "file_name": "Grafana.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "12920",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:34:14",
+      "updated_at": "2025-07-08 19:34:14"
+   },
+   {
+      "id": "19",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "14",
+      "uuid": "496ad2ef-7df9-42b8-b7ed-6e4424621b77",
+      "collection_name": "image",
+      "name": "Cloudflare",
+      "file_name": "Cloudflare.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "7363",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:35:34",
+      "updated_at": "2025-07-08 19:35:34"
+   },
+   {
+      "id": "20",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "15",
+      "uuid": "019cc0f2-57b9-4e94-b307-ecb69988ed00",
+      "collection_name": "image",
+      "name": "directadmnin-logo",
+      "file_name": "directadmnin-logo.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "2364",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:37:04",
+      "updated_at": "2025-07-08 19:37:04"
+   },
+   {
+      "id": "21",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "16",
+      "uuid": "197de2dd-42cb-469e-bd5d-b9d2692ddede",
+      "collection_name": "image",
+      "name": "MySQL",
+      "file_name": "MySQL.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "9330",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:37:57",
+      "updated_at": "2025-07-08 19:37:57"
+   },
+   {
+      "id": "22",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "17",
+      "uuid": "c5fed034-9745-4fc3-84c0-720372e6ea56",
+      "collection_name": "image",
+      "name": "Uptime-Kuma-Logo",
+      "file_name": "Uptime-Kuma-Logo.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "36536",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:38:36",
+      "updated_at": "2025-07-08 19:38:36"
+   },
+   {
+      "id": "23",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "18",
+      "uuid": "2e362926-027a-4e8a-93bd-9a27e9e0fc18",
+      "collection_name": "image",
+      "name": "NGINX",
+      "file_name": "NGINX.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "5301",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:39:19",
+      "updated_at": "2025-07-08 19:39:19"
+   },
+   {
+      "id": "24",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "19",
+      "uuid": "22a353cd-410a-484f-8362-09a00d97a183",
+      "collection_name": "image",
+      "name": "Visual Studio Code (VS Code)",
+      "file_name": "Visual-Studio-Code-(VS-Code).png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "16772",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:40:32",
+      "updated_at": "2025-07-08 19:40:32"
+   },
+   {
+      "id": "25",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "20",
+      "uuid": "d1e09302-0730-493f-9b35-a6f82b27e7b6",
+      "collection_name": "image",
+      "name": "GIMP",
+      "file_name": "GIMP.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "32519",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:41:59",
+      "updated_at": "2025-07-08 19:41:59"
+   },
+   {
+      "id": "26",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "21",
+      "uuid": "1d7d73e4-f373-485a-9205-7261869de4b0",
+      "collection_name": "image",
+      "name": "WordPress",
+      "file_name": "WordPress.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "21613",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:42:37",
+      "updated_at": "2025-07-08 19:42:37"
+   },
+   {
+      "id": "27",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "22",
+      "uuid": "9e062f71-7e0b-4bb0-b455-c4b954a607a8",
+      "collection_name": "image",
+      "name": "WooCommerce",
+      "file_name": "WooCommerce.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "8433",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:43:00",
+      "updated_at": "2025-07-08 19:43:00"
+   },
+   {
+      "id": "28",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "23",
+      "uuid": "dda5797d-16c3-4a70-bf4d-e3eded1d1003",
+      "collection_name": "image",
+      "name": "Vaultwarden--Streamline-Simple-Icons",
+      "file_name": "Vaultwarden--Streamline-Simple-Icons.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "7139",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:44:30",
+      "updated_at": "2025-07-08 19:44:30"
+   },
+   {
+      "id": "29",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "24",
+      "uuid": "c981f25b-b486-4b1d-a4f3-5a15d85464ac",
+      "collection_name": "image",
+      "name": "healthchecks.logo",
+      "file_name": "healthchecks.logo.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "11561",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:45:12",
+      "updated_at": "2025-07-08 19:45:12"
+   },
+   {
+      "id": "30",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "25",
+      "uuid": "606ecdbf-9ed5-4853-b8eb-405bc35a120d",
+      "collection_name": "image",
+      "name": "GitLab",
+      "file_name": "GitLab.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "24046",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:46:14",
+      "updated_at": "2025-07-08 19:46:14"
+   },
+   {
+      "id": "31",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "26",
+      "uuid": "3be7bb80-74a6-444d-b2ef-b072900fc03d",
+      "collection_name": "image",
+      "name": "GitHub",
+      "file_name": "GitHub.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "8449",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:46:27",
+      "updated_at": "2025-07-08 19:46:27"
+   },
+   {
+      "id": "32",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "27",
+      "uuid": "939e8d71-73c4-41ea-ae35-6132cecfdc3c",
+      "collection_name": "image",
+      "name": "Fedora",
+      "file_name": "Fedora.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "10591",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:46:54",
+      "updated_at": "2025-07-08 19:46:54"
+   },
+   {
+      "id": "33",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "28",
+      "uuid": "671081cf-b852-41ff-a746-835f75beaa46",
+      "collection_name": "image",
+      "name": "Ubuntu",
+      "file_name": "Ubuntu.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "11230",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:47:15",
+      "updated_at": "2025-07-08 19:47:15"
+   },
+   {
+      "id": "34",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "29",
+      "uuid": "0c968a1c-202c-4635-b613-04874733d994",
+      "collection_name": "image",
+      "name": "CentOS",
+      "file_name": "CentOS.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "11745",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:47:43",
+      "updated_at": "2025-07-08 19:47:43"
+   },
+   {
+      "id": "35",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "30",
+      "uuid": "1e78c7c9-d73f-4ea8-9426-b274d2b63279",
+      "collection_name": "image",
+      "name": "Debian",
+      "file_name": "Debian.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "6999",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:48:14",
+      "updated_at": "2025-07-08 19:48:14"
+   },
+   {
+      "id": "36",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "31",
+      "uuid": "b36a3c4f-d19e-4832-b0b9-9728ce850f45",
+      "collection_name": "image",
+      "name": "Composer",
+      "file_name": "Composer.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "31190",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:48:40",
+      "updated_at": "2025-07-08 19:48:40"
+   },
+   {
+      "id": "37",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "32",
+      "uuid": "6a888cd6-982b-4e1a-87c8-fd2a200f8fc5",
+      "collection_name": "image",
+      "name": "NPM",
+      "file_name": "NPM.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "1136",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:49:09",
+      "updated_at": "2025-07-08 19:49:09"
+   },
+   {
+      "id": "38",
+      "model_type": "App\\Models\\Skill",
+      "model_id": "33",
+      "uuid": "fb6f3d4d-9a4b-4c4a-87a9-09b9c9bb58c9",
+      "collection_name": "image",
+      "name": "HTML5",
+      "file_name": "HTML5.png",
+      "mime_type": "image/png",
+      "disk": "public",
+      "conversions_disk": "public",
+      "size": "31694",
+      "manipulations": [],
+      "custom_properties": [],
+      "generated_conversions": [],
+      "responsive_images": [],
+      "order_column": 1,
+      "created_at": "2025-07-08 19:50:02",
+      "updated_at": "2025-07-08 19:50:02"
+   }
+]
diff --git a/database/data/personalia.json b/database/data/personalia.json
new file mode 100644
index 0000000..fb6668f
--- /dev/null
+++ b/database/data/personalia.json
@@ -0,0 +1,29 @@
+[
+   {
+      "id": "1",
+      "key": "Email",
+      "value": "roberto@guagliardo.nl",
+      "hidden": 1,
+      "icon": "fa-solid fa-envelope",
+      "created_at": "2025-06-18 20:24:49",
+      "updated_at": "2025-07-08 18:47:19"
+   },
+   {
+      "id": "2",
+      "key": "Telefoonnummer",
+      "value": "+ 31 6 444 60 893",
+      "hidden": 1,
+      "icon": "fa-solid fa-phone",
+      "created_at": "2025-06-18 22:43:12",
+      "updated_at": "2025-06-18 22:43:12"
+   },
+   {
+      "id": "3",
+      "key": "Adres",
+      "value": "Hoefsmid 16<br>3201TC Spijkenisse",
+      "hidden": 1,
+      "icon": "fa-solid fa-home",
+      "created_at": "2025-06-18 22:50:09",
+      "updated_at": "2025-06-18 22:50:09"
+   }
+]
\ No newline at end of file
diff --git a/database/data/skills.json b/database/data/skills.json
new file mode 100644
index 0000000..34be4ed
--- /dev/null
+++ b/database/data/skills.json
@@ -0,0 +1,353 @@
+[
+   {
+      "id": "2",
+      "type": "rating",
+      "title": "PHP",
+      "description": "Met meer dan 9 jaar ervaring in PHP, WordPress en Laravel, heb ik brede expertise opgebouwd in het ontwikkelen van zowel maatwerkfuncties als complete webapplicaties.",
+      "rating": 9,
+      "created_at": "2025-07-08 16:49:03",
+      "updated_at": "2025-07-08 17:14:02"
+   },
+   {
+      "id": "3",
+      "type": "rating",
+      "title": "JavaScript",
+      "description": "Brede ervaring met JavaScript, van vanilla JS tot moderne frameworks zoals React – inzetbaar voor zowel interactieve interfaces als volledige front-end architecturen.",
+      "rating": 7,
+      "created_at": "2025-07-08 16:54:03",
+      "updated_at": "2025-07-08 16:54:03"
+   },
+   {
+      "id": "4",
+      "type": "rating",
+      "title": "Python",
+      "description": "Ruime ervaring met Python voor het bouwen van tools en automatiseringen: van beeldherkenning en muisbesturing tot webscrapers, image-optimalisatie en importtools voor webshops.",
+      "rating": 7,
+      "created_at": "2025-07-08 17:00:01",
+      "updated_at": "2025-07-08 17:00:01"
+   },
+   {
+      "id": "5",
+      "type": "rating",
+      "title": "Linux & Serverbeheer",
+      "description": "Ervaren in het opzetten, beheren en automatiseren van Linux-omgevingen. Dagelijks gebruik van Fedora (werkstation), en zakelijk gewerkt met CentOS, AlmaLinux en Debian. Bekwaam in Bash-scripting, serveronderhoud, optimalisatie en het draaien van hostingplatformen.",
+      "rating": 8,
+      "created_at": "2025-07-08 17:02:21",
+      "updated_at": "2025-07-08 20:11:47"
+   },
+   {
+      "id": "7",
+      "type": "rating",
+      "title": "DevOps & Tools",
+      "description": "Ervaring met Git, Docker, Nginx, SSH en cronjobs. Bekend met CI/CD-principes en inzet van tooling voor automatisering en monitoring binnen ontwikkel- en hostingomgevingen.",
+      "rating": 8,
+      "created_at": "2025-07-08 17:12:48",
+      "updated_at": "2025-07-08 17:12:48"
+   },
+   {
+      "id": "9",
+      "type": "tag",
+      "title": "Leergierig",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:08:00",
+      "updated_at": "2025-07-08 19:08:00"
+   },
+   {
+      "id": "10",
+      "type": "other",
+      "title": "Laravel",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:19:00",
+      "updated_at": "2025-07-08 19:19:00"
+   },
+   {
+      "id": "11",
+      "type": "other",
+      "title": "LiveWire",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:27:21",
+      "updated_at": "2025-07-08 19:27:21"
+   },
+   {
+      "id": "12",
+      "type": "other",
+      "title": "Tailwind",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:29:55",
+      "updated_at": "2025-07-08 19:29:55"
+   },
+   {
+      "id": "13",
+      "type": "other",
+      "title": "Postman",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:32:42",
+      "updated_at": "2025-07-08 19:32:42"
+   },
+   {
+      "id": "14",
+      "type": "other",
+      "title": "Docker",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:32:55",
+      "updated_at": "2025-07-08 19:32:55"
+   },
+   {
+      "id": "15",
+      "type": "other",
+      "title": "Proxmox",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:33:25",
+      "updated_at": "2025-07-08 19:33:25"
+   },
+   {
+      "id": "16",
+      "type": "other",
+      "title": "Grafana",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:34:14",
+      "updated_at": "2025-07-08 19:34:14"
+   },
+   {
+      "id": "17",
+      "type": "other",
+      "title": "Cloudflare",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:35:34",
+      "updated_at": "2025-07-08 19:35:34"
+   },
+   {
+      "id": "18",
+      "type": "other",
+      "title": "directadmin",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:37:04",
+      "updated_at": "2025-07-08 19:37:04"
+   },
+   {
+      "id": "19",
+      "type": "other",
+      "title": "MySQL/MariaDB",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:37:57",
+      "updated_at": "2025-07-08 19:37:57"
+   },
+   {
+      "id": "20",
+      "type": "other",
+      "title": "Uptime Kuma",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:38:36",
+      "updated_at": "2025-07-08 19:38:36"
+   },
+   {
+      "id": "21",
+      "type": "other",
+      "title": "Nginx",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:39:19",
+      "updated_at": "2025-07-08 19:39:19"
+   },
+   {
+      "id": "22",
+      "type": "other",
+      "title": "VS code",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:40:32",
+      "updated_at": "2025-07-08 19:40:32"
+   },
+   {
+      "id": "23",
+      "type": "other",
+      "title": "GIMP",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:41:59",
+      "updated_at": "2025-07-08 19:41:59"
+   },
+   {
+      "id": "24",
+      "type": "other",
+      "title": "WordPress",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:42:37",
+      "updated_at": "2025-07-08 19:42:37"
+   },
+   {
+      "id": "25",
+      "type": "other",
+      "title": "WooCommerce",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:43:00",
+      "updated_at": "2025-07-08 19:43:00"
+   },
+   {
+      "id": "26",
+      "type": "other",
+      "title": "Vaultwarden",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:44:30",
+      "updated_at": "2025-07-08 19:44:30"
+   },
+   {
+      "id": "27",
+      "type": "other",
+      "title": "HealthChecks",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:45:12",
+      "updated_at": "2025-07-08 19:45:12"
+   },
+   {
+      "id": "28",
+      "type": "other",
+      "title": "GitLab",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:46:14",
+      "updated_at": "2025-07-08 19:46:14"
+   },
+   {
+      "id": "29",
+      "type": "other",
+      "title": "GitHub",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:46:27",
+      "updated_at": "2025-07-08 19:46:27"
+   },
+   {
+      "id": "30",
+      "type": "other",
+      "title": "Fedora",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:46:54",
+      "updated_at": "2025-07-08 19:46:54"
+   },
+   {
+      "id": "31",
+      "type": "other",
+      "title": "Ubuntu",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:47:15",
+      "updated_at": "2025-07-08 19:47:15"
+   },
+   {
+      "id": "32",
+      "type": "other",
+      "title": "CentOS",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:47:43",
+      "updated_at": "2025-07-08 19:47:51"
+   },
+   {
+      "id": "33",
+      "type": "other",
+      "title": "Debian",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:48:14",
+      "updated_at": "2025-07-08 19:48:14"
+   },
+   {
+      "id": "34",
+      "type": "other",
+      "title": "Composer",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:48:40",
+      "updated_at": "2025-07-08 19:48:40"
+   },
+   {
+      "id": "35",
+      "type": "other",
+      "title": "NPM",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:49:09",
+      "updated_at": "2025-07-08 19:49:09"
+   },
+   {
+      "id": "36",
+      "type": "other",
+      "title": "HTML",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:50:02",
+      "updated_at": "2025-07-08 19:50:02"
+   },
+   {
+      "id": "37",
+      "type": "tag",
+      "title": "Klantgericht",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:50:46",
+      "updated_at": "2025-07-08 19:50:46"
+   },
+   {
+      "id": "38",
+      "type": "tag",
+      "title": "Dekend aan oplossingen",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:51:09",
+      "updated_at": "2025-07-08 19:51:09"
+   },
+   {
+      "id": "39",
+      "type": "tag",
+      "title": "Meedenkend",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:51:37",
+      "updated_at": "2025-07-08 19:51:37"
+   },
+   {
+      "id": "40",
+      "type": "tag",
+      "title": "Probleemoplossend",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:52:22",
+      "updated_at": "2025-07-08 19:52:22"
+   },
+   {
+      "id": "41",
+      "type": "tag",
+      "title": "Initiatiefrijk",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:52:45",
+      "updated_at": "2025-07-08 19:52:45"
+   },
+   {
+      "id": "42",
+      "type": "tag",
+      "title": "Systeemdenker",
+      "description": null,
+      "rating": 5,
+      "created_at": "2025-07-08 19:53:28",
+      "updated_at": "2025-07-08 19:53:28"
+   }
+]
\ No newline at end of file
diff --git a/database/data/work_experiences.json b/database/data/work_experiences.json
new file mode 100644
index 0000000..fde7fd0
--- /dev/null
+++ b/database/data/work_experiences.json
@@ -0,0 +1,32 @@
+[
+   {
+      "id": "1",
+      "werkgever": "Jumbo Supermarkten",
+      "functie": "Teamleider",
+      "startdatum": "2010-01-01",
+      "einddatum": "2018-12-31",
+      "beschrijving": "Na mijn start als bijbaanmedewerker ben ik binnen een jaar doorgegroeid naar de rol van teamleider. In deze functie werd ik door de regiomanager actief ingezet op verschillende filialen met een extra behoefte aan structuur, klantgerichtheid en kwaliteitsverbetering. Dit betrof zowel nieuwe vestigingen als filialen waar de bestaande werkmentaliteit niet strookte met de kwaliteitsnormen van Jumbo.\r\n\r\nMijn aanpak was altijd gericht op het verhogen van klanttevredenheid, het verbeteren van interne processen en het motiveren van collega’s. Dankzij mijn inzet en flexibiliteit heb ik meerdere filialen kunnen ondersteunen in het opzetten of herstructureren van een sterk, klantgericht team.",
+      "created_at": "2025-06-18 18:13:10",
+      "updated_at": "2025-06-18 18:13:10"
+   },
+   {
+      "id": "2",
+      "werkgever": "SitiWeb",
+      "functie": "Eigenaar / Technisch Specialist",
+      "startdatum": "2016-08-01",
+      "einddatum": "2024-10-01",
+      "beschrijving": "Als oprichter en eigenaar van Sitiweb heb ik gedurende acht jaar totaaloplossingen geleverd aan ondernemers met websites en webshops. De focus lag op zowel het verbeteren van websites als het technisch optimaliseren van hostingomgevingen.\r\n\r\nIk was verantwoordelijk voor de technische infrastructuur, het opzetten en beheren van hostingomgevingen (inclusief VPS-servers), en het uitvoeren van maatwerkoptimalisaties. Daarnaast adviseerde ik klanten actief over verbeteringen op het gebied van snelheid, veiligheid en gebruikservaring.\r\n\r\nOnder mijn leiding groeide Sitiweb uit tot een gewaardeerde partij binnen het MKB, met een sterke focus op kwaliteit en persoonlijke service. In 2024 heb ik besloten om een stap terug te doen, omdat het bedrijf dusdanig was gegroeid dat het met een klein team niet langer optimaal beheersbaar was.",
+      "created_at": "2025-07-08 18:22:12",
+      "updated_at": "2025-07-08 18:22:12"
+   },
+   {
+      "id": "3",
+      "werkgever": "InternetToday",
+      "functie": "Senior Developer",
+      "startdatum": "2024-10-01",
+      "einddatum": null,
+      "beschrijving": "Binnen InternetToday vervul ik een sleutelrol als senior developer met een brede technische verantwoordelijkheid. Ik heb de werkstructuur binnen het ontwikkelteam geoptimaliseerd door het opzetten van uitgebreide monitoring- en analysetools, wat direct heeft bijgedragen aan een efficiëntere en kwalitatievere werkwijze binnen het team.\r\n\r\nDaarnaast fungeer ik als brug tussen de developmentafdeling en de serverbeheerafdeling. Dankzij mijn diepgaande kennis van Linux, hosting en infrastructuur ben ik in staat om complexe technische vraagstukken snel op te lossen en oplossingen te ontwikkelen die doorgaans buiten de scope van het developmentteam vallen. Deze veelzijdigheid maakt mij een waardevolle schakel binnen het bedrijf.",
+      "created_at": "2025-07-08 18:29:36",
+      "updated_at": "2025-07-08 18:31:59"
+   }
+]
\ No newline at end of file
diff --git a/database/migrations/2025_07_08_185355_add_type_to_skills_table.php b/database/migrations/2025_07_08_185355_add_type_to_skills_table.php
new file mode 100644
index 0000000..eb89a89
--- /dev/null
+++ b/database/migrations/2025_07_08_185355_add_type_to_skills_table.php
@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up()
+    {
+        Schema::table('skills', function (Blueprint $table) {
+            $table->string('type')->default('rating')->after('id');
+        });
+    }
+
+    public function down()
+    {
+        Schema::table('skills', function (Blueprint $table) {
+            $table->dropColumn('type');
+        });
+    }
+
+};
diff --git a/database/seeders/EducationSeeder.php b/database/seeders/EducationSeeder.php
new file mode 100644
index 0000000..d0fdd53
--- /dev/null
+++ b/database/seeders/EducationSeeder.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\File;
+
+class EducationSeeder extends Seeder
+{
+    public function run(): void
+    {
+        $path = database_path('data/education.json');
+
+        if (!File::exists($path)) {
+            return;
+        }
+
+        // Verwijder alle bestaande records
+        DB::table('education')->truncate();
+
+        // Laad nieuwe data in
+        $data = json_decode(File::get($path), true);
+
+        foreach ($data as $item) {
+            DB::table('education')->insert([
+                'id' => $item['id'],
+                'opleiding' => $item['opleiding'],
+                'instituut' => $item['instituut'],
+                'startdatum' => $item['startdatum'],
+                'einddatum' => $item['einddatum'] ?? null,
+                'beschrijving' => $item['beschrijving'],
+                'created_at' => $item['created_at'] ?? now(),
+                'updated_at' => $item['updated_at'] ?? now(),
+            ]);
+        }
+    }
+}
diff --git a/database/seeders/MediaSeeder.php b/database/seeders/MediaSeeder.php
new file mode 100644
index 0000000..27cd8c4
--- /dev/null
+++ b/database/seeders/MediaSeeder.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\File;
+
+class MediaSeeder extends Seeder
+{
+    public function run(): void
+    {
+        $path = database_path('data/media.json');
+
+        if (!File::exists($path)) {
+            $this->command->warn("media.json niet gevonden, seeding overgeslagen.");
+            return;
+        }
+
+        DB::table('media')->truncate();
+
+        $data = json_decode(File::get($path), true);
+
+        foreach ($data as $item) {
+            DB::table('media')->insert([
+                // 'id' => $item['id'],
+                'model_type' => $item['model_type'],
+                'model_id' => $item['model_id'],
+                'uuid' => $item['uuid'],
+                'collection_name' => $item['collection_name'],
+                'name' => $item['name'],
+                'file_name' => $item['file_name'],
+                'mime_type' => $item['mime_type'],
+                'disk' => $item['disk'],
+                'conversions_disk' => $item['conversions_disk'],
+                'size' => $item['size'],
+                'manipulations' => json_encode($item['manipulations']),
+                'custom_properties' => json_encode($item['custom_properties']),
+                'generated_conversions' => json_encode($item['generated_conversions']),
+                'responsive_images' => json_encode($item['responsive_images']),
+                'order_column' => $item['order_column'] ?? null,
+                'created_at' => $item['created_at'] ?? now(),
+                'updated_at' => $item['updated_at'] ?? now(),
+            ]);
+        }
+
+        $this->command->info('Media succesvol geïmporteerd.');
+    }
+}
diff --git a/database/seeders/PersonaliaSeeder.php b/database/seeders/PersonaliaSeeder.php
new file mode 100644
index 0000000..2816a01
--- /dev/null
+++ b/database/seeders/PersonaliaSeeder.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use App\Models\Personalia;
+use Illuminate\Support\Facades\File;
+
+class PersonaliaSeeder extends Seeder
+{
+    public function run(): void
+    {
+        $path = database_path('data/personalia.json');
+
+        if (!File::exists($path)) {
+            $this->command->warn("Bestand {$path} bestaat niet, seeder overgeslagen.");
+            return;
+        }
+
+        // Leegmaken van de bestaande data
+        Personalia::truncate();
+
+        // JSON inladen
+        $data = json_decode(File::get($path), true);
+
+        // Records toevoegen
+        foreach ($data as $item) {
+            Personalia::create([
+                'key' => $item['key'],
+                'value' => $item['value'],
+                'hidden' => $item['hidden'],
+                'icon' => $item['icon'],
+            ]);
+        }
+
+        $this->command->info(count($data) . ' personalia-records geïmporteerd.');
+    }
+}
diff --git a/database/seeders/SkillSeeder.php b/database/seeders/SkillSeeder.php
new file mode 100644
index 0000000..2f8bd4c
--- /dev/null
+++ b/database/seeders/SkillSeeder.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use App\Models\Skill;
+use Illuminate\Support\Facades\File;
+
+class SkillSeeder extends Seeder
+{
+    public function run(): void
+    {
+        $path = database_path('data/skills.json');
+
+        if (!File::exists($path)) {
+            return;
+        }
+
+        // Verwijder alle bestaande records
+        Skill::truncate();
+
+        // Laad en decode de JSON
+        $data = json_decode(File::get($path), true);
+
+        // Voeg nieuwe data toe
+        foreach ($data as $item) {
+            Skill::create([
+                'type' => $item['type'],
+                'title' => $item['title'],
+                'description' => $item['description'] ?? null,
+                'rating' => $item['rating'] ?? null,
+                'created_at' => $item['created_at'] ?? now(),
+                'updated_at' => $item['updated_at'] ?? now(),
+            ]);
+        }
+    }
+}
diff --git a/database/seeders/WorkExperienceSeeder.php b/database/seeders/WorkExperienceSeeder.php
new file mode 100644
index 0000000..6fd168a
--- /dev/null
+++ b/database/seeders/WorkExperienceSeeder.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use App\Models\WorkExperience;
+use Illuminate\Support\Facades\File;
+
+class WorkExperienceSeeder extends Seeder
+{
+    public function run(): void
+    {
+        $jsonPath = database_path('data/work_experiences.json');
+
+        // Bestaat het JSON-bestand?
+        if (!File::exists($jsonPath)) {
+            $this->command->warn("❌ Bestand $jsonPath niet gevonden. Seeder overgeslagen.");
+            return;
+        }
+
+        // Verwijder bestaande records
+        WorkExperience::truncate();
+
+        // Lees en decode de JSON
+        $json = File::get($jsonPath);
+        $data = json_decode($json, true);
+
+        // Voeg werkervaringen toe
+        foreach ($data as $item) {
+            WorkExperience::updateOrCreate(
+                [
+                    'werkgever' => $item['werkgever'],
+                    'functie' => $item['functie'],
+                    'startdatum' => $item['startdatum'],
+                ],
+                [
+                    'einddatum' => $item['einddatum'] ?? null,
+                    'beschrijving' => $item['beschrijving'],
+                ]
+            );
+        }
+
+        $this->command->info("✅ Werkervaringen succesvol geïmporteerd.");
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index 0e2faf6..860b95e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,9 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "stickybits": "^3.7.11"
+            },
             "devDependencies": {
                 "@tailwindcss/forms": "^0.5.2",
                 "@tailwindcss/vite": "^4.0.0",
@@ -3259,6 +3262,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/stickybits": {
+            "version": "3.7.11",
+            "resolved": "https://registry.npmjs.org/stickybits/-/stickybits-3.7.11.tgz",
+            "integrity": "sha512-WO+ns7BYZqGS4jWVTg5JNhIvNV4LGbUtNTSck4zAkWRQzA1IfxwIkMGc0BbdGy4PGIjK7kKo5CZcN6Sd5dHVlw==",
+            "license": "MIT"
+        },
         "node_modules/string-width": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
diff --git a/package.json b/package.json
index 03ff0cd..6bf1f83 100644
--- a/package.json
+++ b/package.json
@@ -17,5 +17,8 @@
         "postcss": "^8.4.31",
         "tailwindcss": "^3.1.0",
         "vite": "^6.2.4"
+    },
+    "dependencies": {
+        "stickybits": "^3.7.11"
     }
 }
diff --git a/resources/css/app.css b/resources/css/app.css
index b5c61c9..4fe6317 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,3 +1,24 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+#custom-cursor {
+    position: fixed;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: 9999;
+    height: 30px;
+    width: auto;
+    display: inline-block;
+    transform: scaleX(-1) translate(-50%, -50%);
+    transform-origin: top left;
+}
+
+
+#custom-cursor svg {
+
+    height: 100%;
+    width: auto;
+    display: block;
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index a8093be..cd5bf61 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -5,3 +5,12 @@ import Alpine from 'alpinejs';
 window.Alpine = Alpine;
 
 Alpine.start();
+
+import stickybits from 'stickybits';
+
+document.addEventListener('DOMContentLoaded', () => {
+    stickybits('#right-content', {
+        stickyBitStickyOffset: 40,
+        parent: '.grid' // dit moet de container zijn waarin sticky moet blijven
+    });
+});
diff --git a/resources/views/auth/verify-email.blade.php b/resources/views/auth/verify-email.blade.php
index 4e4222f..16e803f 100644
--- a/resources/views/auth/verify-email.blade.php
+++ b/resources/views/auth/verify-email.blade.php
@@ -4,7 +4,7 @@
     </div>
 
     @if (session('status') == 'verification-link-sent')
-        <div class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
+        <div class="mb-4 font-medium text-sm text-green-600 dark:text-sitiweb-green">
             {{ __('A new verification link has been sent to the email address you provided during registration.') }}
         </div>
     @endif
diff --git a/resources/views/components/auth-session-status.blade.php b/resources/views/components/auth-session-status.blade.php
index a39bc7d..d9e932e 100644
--- a/resources/views/components/auth-session-status.blade.php
+++ b/resources/views/components/auth-session-status.blade.php
@@ -1,7 +1,7 @@
 @props(['status'])
 
 @if ($status)
-    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600 dark:text-green-400']) }}>
+    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600 dark:text-sitiweb-green']) }}>
         {{ $status }}
     </div>
 @endif
diff --git a/resources/views/educations/index.blade.php b/resources/views/educations/index.blade.php
index 4cd82f6..0d01da2 100644
--- a/resources/views/educations/index.blade.php
+++ b/resources/views/educations/index.blade.php
@@ -11,12 +11,12 @@
                 <p class="text-sm text-gray-500 dark:text-gray-400">{{ $education->startdatum }} – {{ $education->einddatum ?? 'heden' }}</p>
                 <p class="mt-2 text-gray-700 dark:text-gray-300">{{ $education->beschrijving }}</p>
 
-                @if ($education->getFirstMediaUrl('afbeelding'))
-                    <img src="{{ $education->getFirstMediaUrl('afbeelding') }}" class="mt-4 w-32 h-auto rounded" />
+                @if ($education->image())
+                    <img src="{{ $education->imageUrl() }}" class="mt-4 w-32 h-auto rounded" />
                 @endif
 
                 <div class="mt-4 space-x-2">
-                    <a href="{{ route('educations.edit', $education) }}" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">Bewerk</a>
+                    <a href="{{ route('educations.edit', $education) }}" class="px-3 py-1 bg-green-400 text-white rounded hover:bg-blue-600">Bewerk</a>
 
                     <form action="{{ route('educations.destroy', $education) }}" method="POST" class="inline-block" onsubmit="return confirm('Weet je zeker dat je dit wilt verwijderen?')">
                         @csrf
diff --git a/resources/views/frontend/_card.blade.php b/resources/views/frontend/_card.blade.php
new file mode 100644
index 0000000..6deba66
--- /dev/null
+++ b/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>
diff --git a/resources/views/frontend/cta.blade.php b/resources/views/frontend/cta.blade.php
new file mode 100644
index 0000000..fc882d5
--- /dev/null
+++ b/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
diff --git a/resources/views/frontend/opleidingen.blade.php b/resources/views/frontend/opleidingen.blade.php
index 37fef16..2fe17c9 100644
--- a/resources/views/frontend/opleidingen.blade.php
+++ b/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') }}
diff --git a/resources/views/frontend/personalia.blade.php b/resources/views/frontend/personalia.blade.php
index 887d04b..b7b2297 100644
--- a/resources/views/frontend/personalia.blade.php
+++ b/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>
diff --git a/resources/views/frontend/vaardigheden.blade.php b/resources/views/frontend/vaardigheden.blade.php
index e69de29..4d80336 100644
--- a/resources/views/frontend/vaardigheden.blade.php
+++ b/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
diff --git a/resources/views/frontend/werkervaring.blade.php b/resources/views/frontend/werkervaring.blade.php
index eb599e5..96633ca 100644
--- a/resources/views/frontend/werkervaring.blade.php
+++ b/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') }}
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index ff04aa0..1b7a276 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -43,6 +43,7 @@
             </div>
         </main>
     </div>
+@stack('scripts')
 </body>
 
 </html>
diff --git a/resources/views/profile/partials/update-profile-information-form.blade.php b/resources/views/profile/partials/update-profile-information-form.blade.php
index 7273fff..a2c5c4d 100644
--- a/resources/views/profile/partials/update-profile-information-form.blade.php
+++ b/resources/views/profile/partials/update-profile-information-form.blade.php
@@ -39,7 +39,7 @@
                     </p>
 
                     @if (session('status') === 'verification-link-sent')
-                        <p class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
+                        <p class="mt-2 font-medium text-sm text-green-600 dark:text-sitiweb-green">
                             {{ __('A new verification link has been sent to your email address.') }}
                         </p>
                     @endif
diff --git a/resources/views/skills/_form.blade.php b/resources/views/skills/_form.blade.php
index 9f9eddd..322b169 100644
--- a/resources/views/skills/_form.blade.php
+++ b/resources/views/skills/_form.blade.php
@@ -1,24 +1,57 @@
 <div class="space-y-6">
+        <div>
+    <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Type</label>
+    <select id="type" name="type" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
+        <option value="rating" @selected(old('type', $skill->type ?? 'rating') === 'rating')>Rating</option>
+        <option value="tag" @selected(old('type', $skill->type ?? '') === 'tag')>Tag</option>
+        <option value="other" @selected(old('type', $skill->type ?? '') === 'other')>Overig</option>
+    </select>
+</div>
     <div>
         <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Titel</label>
         <input type="text" id="title" name="title" value="{{ old('title', $skill->title ?? '') }}" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
     </div>
 
-    <div>
+    <div id="description-field">
+
         <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Beschrijving</label>
         <textarea id="description" name="description" rows="4" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">{{ old('description', $skill->description ?? '') }}</textarea>
     </div>
 
-    <div>
-        <label for="rating" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Beoordeling (1–10)</label>
-        <input type="number" id="rating" name="rating" min="1" max="10" value="{{ old('rating', $skill->rating ?? 5) }}" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
-    </div>
-
-    <div>
-        <label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Afbeelding</label>
-        <input type="file" id="image" name="image" class="mt-1 text-gray-800 dark:text-gray-100">
-        @if (!empty($skill) && $skill->getFirstMediaUrl('image'))
-            <img src="{{ $skill->getFirstMediaUrl('image') }}" class="mt-2 max-w-xs rounded">
-        @endif
-    </div>
+    <div id="rating-field">
+    <label for="rating" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Beoordeling (1–10)</label>
+    <input type="number" id="rating" name="rating" min="1" max="10" value="{{ old('rating', $skill->rating ?? 5) }}" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
 </div>
+
+<div id="image-field">
+    <label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Afbeelding</label>
+    <input type="file" id="image" name="image" class="mt-1 text-gray-800 dark:text-gray-100">
+    @if (!empty($skill) && $skill->getFirstMediaUrl('image'))
+        <img src="{{ $skill->getFirstMediaUrl('image') }}" class="mt-2 max-w-xs rounded">
+    @endif
+</div>
+
+</div>
+@push('scripts')
+
+<script>
+    function toggleFields() {
+        const type = document.getElementById('type').value;
+
+        // Rating alleen tonen bij type = rating
+        document.getElementById('rating-field').style.display = (type === 'rating') ? 'block' : 'none';
+
+        // Image tonen bij rating en other
+        document.getElementById('image-field').style.display = (type === 'rating' || type === 'other') ? 'block' : 'none';
+
+        // Beschrijving alleen tonen bij rating
+        document.getElementById('description-field').style.display = (type === 'rating') ? 'block' : 'none';
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        document.getElementById('type').addEventListener('change', toggleFields);
+        toggleFields(); // initial
+    });
+</script>
+
+@endpush
diff --git a/resources/views/skills/index.blade.php b/resources/views/skills/index.blade.php
index d539721..72221bc 100644
--- a/resources/views/skills/index.blade.php
+++ b/resources/views/skills/index.blade.php
@@ -1,27 +1,51 @@
 <x-app-layout>
-    <div class="p-6">
-        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Vaardigheden</h2>
-        <a href="{{ route('skills.create') }}" class="mb-4 inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Nieuwe vaardigheid</a>
+    <div class="p-6 space-y-10">
+        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Vaardigheden</h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            @foreach ($skills as $skill)
-                <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>
-                    <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Beoordeling: {{ $skill->rating }}/10</p>
-                    <p class="text-sm text-gray-600 dark:text-gray-300">{{ $skill->description }}</p>
-                    @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>
+        <a href="{{ route('skills.create') }}" class="inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+            Nieuwe vaardigheid
+        </a>
+
+        @php
+            $groupedSkills = $skills->groupBy('type');
+        @endphp
+
+        {{-- Rating --}}
+        @if($groupedSkills->has('rating'))
+            <div>
+                <h3 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-4">Ratings</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    @foreach ($groupedSkills['rating'] as $skill)
+                        @include('frontend._card', ['skill' => $skill])
+                    @endforeach
                 </div>
-            @endforeach
-        </div>
+            </div>
+        @endif
+
+        {{-- Tags --}}
+        @if($groupedSkills->has('tag'))
+            <div>
+                <h3 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-4">Tags</h3>
+                <div class="flex flex-wrap gap-2">
+                    @foreach ($groupedSkills['tag'] as $skill)
+                        <span class="inline-block bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded">
+                            {{ $skill->title }}
+                        </span>
+                    @endforeach
+                </div>
+            </div>
+        @endif
+
+        {{-- Overig --}}
+        @if($groupedSkills->has('other'))
+            <div>
+                <h3 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-4">Overige vaardigheden</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    @foreach ($groupedSkills['other'] as $skill)
+                        @include('frontend._card', ['skill' => $skill])
+                    @endforeach
+                </div>
+            </div>
+        @endif
     </div>
 </x-app-layout>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index b89c0a7..c4477f2 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -1,79 +1,155 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <title>Laravel</title>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <!-- Fonts -->
-        <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
+    <title>Laravel</title>
 
-        <!-- Styles / Scripts -->
-        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
-            @vite(['resources/css/app.css', 'resources/js/app.js'])
-        @else
-            <style>
-                /*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:'Instrument Sans',ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(.971 .013 17.38);--color-red-100:oklch(.936 .032 17.717);--color-red-200:oklch(.885 .062 18.334);--color-red-300:oklch(.808 .114 19.571);--color-red-400:oklch(.704 .191 22.216);--color-red-500:oklch(.637 .237 25.331);--color-red-600:oklch(.577 .245 27.325);--color-red-700:oklch(.505 .213 27.518);--color-red-800:oklch(.444 .177 26.899);--color-red-900:oklch(.396 .141 25.723);--color-red-950:oklch(.258 .092 26.042);--color-orange-50:oklch(.98 .016 73.684);--color-orange-100:oklch(.954 .038 75.164);--color-orange-200:oklch(.901 .076 70.697);--color-orange-300:oklch(.837 .128 66.29);--color-orange-400:oklch(.75 .183 55.934);--color-orange-500:oklch(.705 .213 47.604);--color-orange-600:oklch(.646 .222 41.116);--color-orange-700:oklch(.553 .195 38.402);--color-orange-800:oklch(.47 .157 37.304);--color-orange-900:oklch(.408 .123 38.172);--color-orange-950:oklch(.266 .079 36.259);--color-amber-50:oklch(.987 .022 95.277);--color-amber-100:oklch(.962 .059 95.617);--color-amber-200:oklch(.924 .12 95.746);--color-amber-300:oklch(.879 .169 91.605);--color-amber-400:oklch(.828 .189 84.429);--color-amber-500:oklch(.769 .188 70.08);--color-amber-600:oklch(.666 .179 58.318);--color-amber-700:oklch(.555 .163 48.998);--color-amber-800:oklch(.473 .137 46.201);--color-amber-900:oklch(.414 .112 45.904);--color-amber-950:oklch(.279 .077 45.635);--color-yellow-50:oklch(.987 .026 102.212);--color-yellow-100:oklch(.973 .071 103.193);--color-yellow-200:oklch(.945 .129 101.54);--color-yellow-300:oklch(.905 .182 98.111);--color-yellow-400:oklch(.852 .199 91.936);--color-yellow-500:oklch(.795 .184 86.047);--color-yellow-600:oklch(.681 .162 75.834);--color-yellow-700:oklch(.554 .135 66.442);--color-yellow-800:oklch(.476 .114 61.907);--color-yellow-900:oklch(.421 .095 57.708);--color-yellow-950:oklch(.286 .066 53.813);--color-lime-50:oklch(.986 .031 120.757);--color-lime-100:oklch(.967 .067 122.328);--color-lime-200:oklch(.938 .127 124.321);--color-lime-300:oklch(.897 .196 126.665);--color-lime-400:oklch(.841 .238 128.85);--color-lime-500:oklch(.768 .233 130.85);--color-lime-600:oklch(.648 .2 131.684);--color-lime-700:oklch(.532 .157 131.589);--color-lime-800:oklch(.453 .124 130.933);--color-lime-900:oklch(.405 .101 131.063);--color-lime-950:oklch(.274 .072 132.109);--color-green-50:oklch(.982 .018 155.826);--color-green-100:oklch(.962 .044 156.743);--color-green-200:oklch(.925 .084 155.995);--color-green-300:oklch(.871 .15 154.449);--color-green-400:oklch(.792 .209 151.711);--color-green-500:oklch(.723 .219 149.579);--color-green-600:oklch(.627 .194 149.214);--color-green-700:oklch(.527 .154 150.069);--color-green-800:oklch(.448 .119 151.328);--color-green-900:oklch(.393 .095 152.535);--color-green-950:oklch(.266 .065 152.934);--color-emerald-50:oklch(.979 .021 166.113);--color-emerald-100:oklch(.95 .052 163.051);--color-emerald-200:oklch(.905 .093 164.15);--color-emerald-300:oklch(.845 .143 164.978);--color-emerald-400:oklch(.765 .177 163.223);--color-emerald-500:oklch(.696 .17 162.48);--color-emerald-600:oklch(.596 .145 163.225);--color-emerald-700:oklch(.508 .118 165.612);--color-emerald-800:oklch(.432 .095 166.913);--color-emerald-900:oklch(.378 .077 168.94);--color-emerald-950:oklch(.262 .051 172.552);--color-teal-50:oklch(.984 .014 180.72);--color-teal-100:oklch(.953 .051 180.801);--color-teal-200:oklch(.91 .096 180.426);--color-teal-300:oklch(.855 .138 181.071);--color-teal-400:oklch(.777 .152 181.912);--color-teal-500:oklch(.704 .14 182.503);--color-teal-600:oklch(.6 .118 184.704);--color-teal-700:oklch(.511 .096 186.391);--color-teal-800:oklch(.437 .078 188.216);--color-teal-900:oklch(.386 .063 188.416);--color-teal-950:oklch(.277 .046 192.524);--color-cyan-50:oklch(.984 .019 200.873);--color-cyan-100:oklch(.956 .045 203.388);--color-cyan-200:oklch(.917 .08 205.041);--color-cyan-300:oklch(.865 .127 207.078);--color-cyan-400:oklch(.789 .154 211.53);--color-cyan-500:oklch(.715 .143 215.221);--color-cyan-600:oklch(.609 .126 221.723);--color-cyan-700:oklch(.52 .105 223.128);--color-cyan-800:oklch(.45 .085 224.283);--color-cyan-900:oklch(.398 .07 227.392);--color-cyan-950:oklch(.302 .056 229.695);--color-sky-50:oklch(.977 .013 236.62);--color-sky-100:oklch(.951 .026 236.824);--color-sky-200:oklch(.901 .058 230.902);--color-sky-300:oklch(.828 .111 230.318);--color-sky-400:oklch(.746 .16 232.661);--color-sky-500:oklch(.685 .169 237.323);--color-sky-600:oklch(.588 .158 241.966);--color-sky-700:oklch(.5 .134 242.749);--color-sky-800:oklch(.443 .11 240.79);--color-sky-900:oklch(.391 .09 240.876);--color-sky-950:oklch(.293 .066 243.157);--color-blue-50:oklch(.97 .014 254.604);--color-blue-100:oklch(.932 .032 255.585);--color-blue-200:oklch(.882 .059 254.128);--color-blue-300:oklch(.809 .105 251.813);--color-blue-400:oklch(.707 .165 254.624);--color-blue-500:oklch(.623 .214 259.815);--color-blue-600:oklch(.546 .245 262.881);--color-blue-700:oklch(.488 .243 264.376);--color-blue-800:oklch(.424 .199 265.638);--color-blue-900:oklch(.379 .146 265.522);--color-blue-950:oklch(.282 .091 267.935);--color-indigo-50:oklch(.962 .018 272.314);--color-indigo-100:oklch(.93 .034 272.788);--color-indigo-200:oklch(.87 .065 274.039);--color-indigo-300:oklch(.785 .115 274.713);--color-indigo-400:oklch(.673 .182 276.935);--color-indigo-500:oklch(.585 .233 277.117);--color-indigo-600:oklch(.511 .262 276.966);--color-indigo-700:oklch(.457 .24 277.023);--color-indigo-800:oklch(.398 .195 277.366);--color-indigo-900:oklch(.359 .144 278.697);--color-indigo-950:oklch(.257 .09 281.288);--color-violet-50:oklch(.969 .016 293.756);--color-violet-100:oklch(.943 .029 294.588);--color-violet-200:oklch(.894 .057 293.283);--color-violet-300:oklch(.811 .111 293.571);--color-violet-400:oklch(.702 .183 293.541);--color-violet-500:oklch(.606 .25 292.717);--color-violet-600:oklch(.541 .281 293.009);--color-violet-700:oklch(.491 .27 292.581);--color-violet-800:oklch(.432 .232 292.759);--color-violet-900:oklch(.38 .189 293.745);--color-violet-950:oklch(.283 .141 291.089);--color-purple-50:oklch(.977 .014 308.299);--color-purple-100:oklch(.946 .033 307.174);--color-purple-200:oklch(.902 .063 306.703);--color-purple-300:oklch(.827 .119 306.383);--color-purple-400:oklch(.714 .203 305.504);--color-purple-500:oklch(.627 .265 303.9);--color-purple-600:oklch(.558 .288 302.321);--color-purple-700:oklch(.496 .265 301.924);--color-purple-800:oklch(.438 .218 303.724);--color-purple-900:oklch(.381 .176 304.987);--color-purple-950:oklch(.291 .149 302.717);--color-fuchsia-50:oklch(.977 .017 320.058);--color-fuchsia-100:oklch(.952 .037 318.852);--color-fuchsia-200:oklch(.903 .076 319.62);--color-fuchsia-300:oklch(.833 .145 321.434);--color-fuchsia-400:oklch(.74 .238 322.16);--color-fuchsia-500:oklch(.667 .295 322.15);--color-fuchsia-600:oklch(.591 .293 322.896);--color-fuchsia-700:oklch(.518 .253 323.949);--color-fuchsia-800:oklch(.452 .211 324.591);--color-fuchsia-900:oklch(.401 .17 325.612);--color-fuchsia-950:oklch(.293 .136 325.661);--color-pink-50:oklch(.971 .014 343.198);--color-pink-100:oklch(.948 .028 342.258);--color-pink-200:oklch(.899 .061 343.231);--color-pink-300:oklch(.823 .12 346.018);--color-pink-400:oklch(.718 .202 349.761);--color-pink-500:oklch(.656 .241 354.308);--color-pink-600:oklch(.592 .249 .584);--color-pink-700:oklch(.525 .223 3.958);--color-pink-800:oklch(.459 .187 3.815);--color-pink-900:oklch(.408 .153 2.432);--color-pink-950:oklch(.284 .109 3.907);--color-rose-50:oklch(.969 .015 12.422);--color-rose-100:oklch(.941 .03 12.58);--color-rose-200:oklch(.892 .058 10.001);--color-rose-300:oklch(.81 .117 11.638);--color-rose-400:oklch(.712 .194 13.428);--color-rose-500:oklch(.645 .246 16.439);--color-rose-600:oklch(.586 .253 17.585);--color-rose-700:oklch(.514 .222 16.935);--color-rose-800:oklch(.455 .188 13.697);--color-rose-900:oklch(.41 .159 10.272);--color-rose-950:oklch(.271 .105 12.094);--color-slate-50:oklch(.984 .003 247.858);--color-slate-100:oklch(.968 .007 247.896);--color-slate-200:oklch(.929 .013 255.508);--color-slate-300:oklch(.869 .022 252.894);--color-slate-400:oklch(.704 .04 256.788);--color-slate-500:oklch(.554 .046 257.417);--color-slate-600:oklch(.446 .043 257.281);--color-slate-700:oklch(.372 .044 257.287);--color-slate-800:oklch(.279 .041 260.031);--color-slate-900:oklch(.208 .042 265.755);--color-slate-950:oklch(.129 .042 264.695);--color-gray-50:oklch(.985 .002 247.839);--color-gray-100:oklch(.967 .003 264.542);--color-gray-200:oklch(.928 .006 264.531);--color-gray-300:oklch(.872 .01 258.338);--color-gray-400:oklch(.707 .022 261.325);--color-gray-500:oklch(.551 .027 264.364);--color-gray-600:oklch(.446 .03 256.802);--color-gray-700:oklch(.373 .034 259.733);--color-gray-800:oklch(.278 .033 256.848);--color-gray-900:oklch(.21 .034 264.665);--color-gray-950:oklch(.13 .028 261.692);--color-zinc-50:oklch(.985 0 0);--color-zinc-100:oklch(.967 .001 286.375);--color-zinc-200:oklch(.92 .004 286.32);--color-zinc-300:oklch(.871 .006 286.286);--color-zinc-400:oklch(.705 .015 286.067);--color-zinc-500:oklch(.552 .016 285.938);--color-zinc-600:oklch(.442 .017 285.786);--color-zinc-700:oklch(.37 .013 285.805);--color-zinc-800:oklch(.274 .006 286.033);--color-zinc-900:oklch(.21 .006 285.885);--color-zinc-950:oklch(.141 .005 285.823);--color-neutral-50:oklch(.985 0 0);--color-neutral-100:oklch(.97 0 0);--color-neutral-200:oklch(.922 0 0);--color-neutral-300:oklch(.87 0 0);--color-neutral-400:oklch(.708 0 0);--color-neutral-500:oklch(.556 0 0);--color-neutral-600:oklch(.439 0 0);--color-neutral-700:oklch(.371 0 0);--color-neutral-800:oklch(.269 0 0);--color-neutral-900:oklch(.205 0 0);--color-neutral-950:oklch(.145 0 0);--color-stone-50:oklch(.985 .001 106.423);--color-stone-100:oklch(.97 .001 106.424);--color-stone-200:oklch(.923 .003 48.717);--color-stone-300:oklch(.869 .005 56.366);--color-stone-400:oklch(.709 .01 56.259);--color-stone-500:oklch(.553 .013 58.071);--color-stone-600:oklch(.444 .011 73.639);--color-stone-700:oklch(.374 .01 67.558);--color-stone-800:oklch(.268 .007 34.298);--color-stone-900:oklch(.216 .006 56.043);--color-stone-950:oklch(.147 .004 49.25);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-sm:40rem;--breakpoint-md:48rem;--breakpoint-lg:64rem;--breakpoint-xl:80rem;--breakpoint-2xl:96rem;--container-3xs:16rem;--container-2xs:18rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-4xl:2rem;--shadow-2xs:0 1px #0000000d;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--inset-shadow-2xs:inset 0 1px #0000000d;--inset-shadow-xs:inset 0 1px 1px #0000000d;--inset-shadow-sm:inset 0 2px 4px #0000000d;--drop-shadow-xs:0 1px 1px #0000000d;--drop-shadow-sm:0 1px 2px #00000026;--drop-shadow-md:0 3px 3px #0000001f;--drop-shadow-lg:0 4px 4px #00000026;--drop-shadow-xl:0 9px 7px #0000001a;--drop-shadow-2xl:0 25px 25px #00000026;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--animate-bounce:bounce 1s infinite;--blur-xs:4px;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-2xl:40px;--blur-3xl:64px;--perspective-dramatic:100px;--perspective-near:300px;--perspective-normal:500px;--perspective-midrange:800px;--perspective-distant:1200px;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-font-variation-settings:var(--font-sans--font-variation-settings);--default-mono-font-family:var(--font-mono);--default-mono-font-feature-settings:var(--font-mono--font-feature-settings);--default-mono-font-variation-settings:var(--font-mono--font-variation-settings)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.-mt-\[4\.9rem\]{margin-top:-4.9rem}.-mb-px{margin-bottom:-1px}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.-ml-8{margin-left:calc(var(--spacing)*-8)}.flex{display:flex}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[335\/376\]{aspect-ratio:335/376}.h-1{height:calc(var(--spacing)*1)}.h-1\.5{height:calc(var(--spacing)*1.5)}.h-2{height:calc(var(--spacing)*2)}.h-2\.5{height:calc(var(--spacing)*2.5)}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-14{height:calc(var(--spacing)*14)}.h-14\.5{height:calc(var(--spacing)*14.5)}.min-h-screen{min-height:100vh}.w-1{width:calc(var(--spacing)*1)}.w-1\.5{width:calc(var(--spacing)*1.5)}.w-2{width:calc(var(--spacing)*2)}.w-2\.5{width:calc(var(--spacing)*2.5)}.w-3{width:calc(var(--spacing)*3)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-\[448px\]{width:448px}.w-full{width:100%}.max-w-\[335px\]{max-width:335px}.max-w-none{max-width:none}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-y-0{--tw-translate-y:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*1)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.rounded-br-lg{border-bottom-right-radius:var(--radius-lg)}.rounded-bl-lg{border-bottom-left-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-\[\#19140035\]{border-color:#19140035}.border-\[\#e3e3e0\]{border-color:#e3e3e0}.border-black{border-color:var(--color-black)}.border-transparent{border-color:#0000}.bg-\[\#1b1b18\]{background-color:#1b1b18}.bg-\[\#FDFDFC\]{background-color:#fdfdfc}.bg-\[\#dbdbd7\]{background-color:#dbdbd7}.bg-\[\#fff2f2\]{background-color:#fff2f2}.bg-white{background-color:var(--color-white)}.p-6{padding:calc(var(--spacing)*6)}.px-5{padding-inline:calc(var(--spacing)*5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.pb-12{padding-bottom:calc(var(--spacing)*12)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\[13px\]{font-size:13px}.leading-\[20px\]{--tw-leading:20px;line-height:20px}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-\[\#1b1b18\]{color:#1b1b18}.text-\[\#706f6c\]{color:#706f6c}.text-\[\#F53003\],.text-\[\#f53003\]{color:#f53003}.text-white{color:var(--color-white)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.opacity-100{opacity:1}.shadow-\[0px_0px_1px_0px_rgba\(0\,0\,0\,0\.03\)\,0px_1px_2px_0px_rgba\(0\,0\,0\,0\.06\)\]{--tw-shadow:0px 0px 1px 0px var(--tw-shadow-color,#00000008),0px 1px 2px 0px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[inset_0px_0px_0px_1px_rgba\(26\,26\,0\,0\.16\)\]{--tw-shadow:inset 0px 0px 0px 1px var(--tw-shadow-color,#1a1a0029);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.\!filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)!important}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.delay-300{transition-delay:.3s}.duration-750{--tw-duration:.75s;transition-duration:.75s}.not-has-\[nav\]\:hidden:not(:has(:is(nav))){display:none}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:top-0:before{content:var(--tw-content);top:calc(var(--spacing)*0)}.before\:top-1\/2:before{content:var(--tw-content);top:50%}.before\:bottom-0:before{content:var(--tw-content);bottom:calc(var(--spacing)*0)}.before\:bottom-1\/2:before{content:var(--tw-content);bottom:50%}.before\:left-\[0\.4rem\]:before{content:var(--tw-content);left:.4rem}.before\:border-l:before{content:var(--tw-content);border-left-style:var(--tw-border-style);border-left-width:1px}.before\:border-\[\#e3e3e0\]:before{content:var(--tw-content);border-color:#e3e3e0}@media (hover:hover){.hover\:border-\[\#1915014a\]:hover{border-color:#1915014a}.hover\:border-\[\#19140035\]:hover{border-color:#19140035}.hover\:border-black:hover{border-color:var(--color-black)}.hover\:bg-black:hover{background-color:var(--color-black)}}@media (width>=64rem){.lg\:-mt-\[6\.6rem\]{margin-top:-6.6rem}.lg\:mb-0{margin-bottom:calc(var(--spacing)*0)}.lg\:mb-6{margin-bottom:calc(var(--spacing)*6)}.lg\:-ml-px{margin-left:-1px}.lg\:ml-0{margin-left:calc(var(--spacing)*0)}.lg\:block{display:block}.lg\:aspect-auto{aspect-ratio:auto}.lg\:w-\[438px\]{width:438px}.lg\:max-w-4xl{max-width:var(--container-4xl)}.lg\:grow{flex-grow:1}.lg\:flex-row{flex-direction:row}.lg\:justify-center{justify-content:center}.lg\:rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.lg\:rounded-tl-lg{border-top-left-radius:var(--radius-lg)}.lg\:rounded-r-lg{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.lg\:rounded-br-none{border-bottom-right-radius:0}.lg\:p-8{padding:calc(var(--spacing)*8)}.lg\:p-20{padding:calc(var(--spacing)*20)}}@media (prefers-color-scheme:dark){.dark\:block{display:block}.dark\:hidden{display:none}.dark\:border-\[\#3E3E3A\]{border-color:#3e3e3a}.dark\:border-\[\#eeeeec\]{border-color:#eeeeec}.dark\:bg-\[\#0a0a0a\]{background-color:#0a0a0a}.dark\:bg-\[\#1D0002\]{background-color:#1d0002}.dark\:bg-\[\#3E3E3A\]{background-color:#3e3e3a}.dark\:bg-\[\#161615\]{background-color:#161615}.dark\:bg-\[\#eeeeec\]{background-color:#eeeeec}.dark\:text-\[\#1C1C1A\]{color:#1c1c1a}.dark\:text-\[\#A1A09A\]{color:#a1a09a}.dark\:text-\[\#EDEDEC\]{color:#ededec}.dark\:text-\[\#F61500\]{color:#f61500}.dark\:text-\[\#FF4433\]{color:#f43}.dark\:shadow-\[inset_0px_0px_0px_1px_\#fffaed2d\]{--tw-shadow:inset 0px 0px 0px 1px var(--tw-shadow-color,#fffaed2d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dark\:before\:border-\[\#3E3E3A\]:before{content:var(--tw-content);border-color:#3e3e3a}@media (hover:hover){.dark\:hover\:border-\[\#3E3E3A\]:hover{border-color:#3e3e3a}.dark\:hover\:border-\[\#62605b\]:hover{border-color:#62605b}.dark\:hover\:border-white:hover{border-color:var(--color-white)}.dark\:hover\:bg-white:hover{background-color:var(--color-white)}}}@starting-style{.starting\:translate-y-4{--tw-translate-y:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}}@starting-style{.starting\:translate-y-6{--tw-translate-y:calc(var(--spacing)*6);translate:var(--tw-translate-x)var(--tw-translate-y)}}@starting-style{.starting\:opacity-0{opacity:0}}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false;initial-value:rotateX(0)}@property --tw-rotate-y{syntax:"*";inherits:false;initial-value:rotateY(0)}@property --tw-rotate-z{syntax:"*";inherits:false;initial-value:rotateZ(0)}@property --tw-skew-x{syntax:"*";inherits:false;initial-value:skewX(0)}@property --tw-skew-y{syntax:"*";inherits:false;initial-value:skewY(0)}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
-            </style>
-        @endif
-    </head>
- <body class="bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-white">
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <style>
+        body {
+            cursor: none;
+        }
+    </style>
+</head>
+
+<body class="text-zinc-950 antialiased lg:bg-zinc-100 dark:bg-zinc-900 dark:text-white dark:lg:bg-zinc-950">
     <div class="max-w-5xl mx-auto p-6 space-y-8">
 
-        <!-- Header + Foto -->
-        <header class="flex flex-col md:flex-row items-center md:items-start bg-white dark:bg-gray-800 shadow-lg rounded-xl p-6 gap-6">
-            <img src="{{ asset('storage/roberto.png') }}" alt="Profielfoto" class="w-32 h-32 rounded-full object-cover shadow-md">
-            <div>
-                <h1 class="text-4xl font-bold">Roberto Guagliardo</h1>
-                <p class="text-lg text-gray-600 dark:text-gray-300">Full Stack Developer · Laravel Expert · DevOps Enthousiast</p>
-                <p class=" text-gray-200 mt-1">
-Ik word enthousiast van alles wat systemen sneller, stabieler en slimmer maakt. Of het nu gaat om het automatiseren van deploys, het opzetten van monitoring met Grafana & Promtail, of het draaien van Docker-containers op Proxmox — ik denk graag in oplossingen die schaalbaar zijn en onderhoud verminderen.
-Ik werk op het snijvlak van development en systeembeheer, en zoek continu naar manieren om processen te versimpelen, te automatiseren en te verbeteren.</p>
+        <header
+            class="flex flex-col md:flex-row items-center md:items-start gap-6 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 transition">
+
+            <!-- Profielfoto -->
+            <div class="shrink-0">
+                <img src="{{ asset('storage/roberto.png') }}" alt="Profielfoto"
+                    class="w-32 h-32 rounded-full object-cover shadow-md ring-4 ring-zinc-200 dark:ring-zinc-800">
+            </div>
+
+            <!-- Content -->
+            <div class="flex-1 space-y-3">
+                <h1 class="text-4xl font-bold leading-tight text-zinc-900 dark:text-white">
+                    Roberto Guagliardo
+                </h1>
+
+                <p class="text-lg text-sitiweb-green font-medium">
+                    Full Stack Developer · Laravel Expert · DevOps Enthousiast
+                </p>
+
+                <p class="text-zinc-600 dark:text-zinc-300 text-sm leading-relaxed max-w-3xl">
+                    Ik word enthousiast van alles wat systemen sneller, stabieler en slimmer maakt. Of het nu gaat om
+                    het automatiseren van deploys, het opzetten van monitoring met Grafana & Promtail, of het draaien
+                    van Docker-containers op Proxmox — ik denk graag in oplossingen die schaalbaar zijn en onderhoud
+                    verminderen. <br><br>
+                    Ik werk op het snijvlak van development en systeembeheer, en zoek continu naar manieren om processen
+                    te versimpelen, te automatiseren en te verbeteren.
+                </p>
+
+                <!-- Optioneel: Socials -->
+                <div class="flex gap-4 pt-2">
+                    <a href="https://github.com/SitiWeb" target="_blank"
+                        class="text-zinc-500 hover:text-black dark:hover:text-white text-xl">
+                        <i class="fab fa-github"></i>
+                    </a>
+                    <a href="https://nl.linkedin.com/in/roberto-guagliardo-489061a5" target="_blank"
+                        class="text-zinc-500 hover:text-blue-600 text-xl">
+                        <i class="fab fa-linkedin"></i>
+                    </a>
+                </div>
             </div>
         </header>
 
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <!-- Linkerkolom (1/3) -->
-        <div class="lg:col-span-1 space-y-6">
 
-            <!-- Personalia -->
-            <section class="bg-blue-50 dark:bg-blue-900 p-6 rounded-xl shadow">
-                <h2 class="text-2xl font-semibold mb-4">Personalia</h2>
-                @include('frontend.personalia')
-            </section>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Linkerkolom (1/3) -->
+            <div class="lg:col-span-1 space-y-6">
 
-            <!-- Vaardigheden -->
-            <section class="bg-purple-50 dark:bg-purple-900 p-6 rounded-xl shadow">
-                <h2 class="text-2xl font-semibold mb-4">Vaardigheden</h2>
-                @include('frontend.vaardigheden')
-            </section>
-        </div>
+                <!-- Personalia -->
+                <section
+                    class="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">
+                    <h2 class="text-2xl font-semibold mb-4">
+                        <i class="fa-solid fa-user mr-2 text-sitiweb-green"></i> Profiel
+                    </h2>
 
-        <!-- Rechterkolom (2/3) -->
-        <div class="lg:col-span-2 space-y-6">
-            <!-- Werkervaring -->
-            <section class="bg-green-50 dark:bg-green-900 p-6 rounded-xl shadow">
-                <h2 class="text-2xl font-semibold mb-4">Werkervaring</h2>
-                @include('frontend.werkervaring')
-            </section>
+                    @include('frontend.personalia')
+                </section>
+
+                <!-- Vaardigheden -->
+                <section
+                    class="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">
+                    <h2 class="text-2xl font-semibold mb-4">
+                        <i class="fa-solid fa-tools mr-2 text-sitiweb-green"></i> Vaardigheden
+                    </h2>
+
+                    @include('frontend.vaardigheden')
+                </section>
+
+            </div>
+
+            <!-- Rechterkolom (2/3) -->
+            <div class="lg:col-span-2 space-y-6 min-h-screen" id="right-column">
+
+                <div id="right-content" class="space-y-6">
+                    <!-- Werkervaring -->
+                    <section
+                        class="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">
+                        <h2 class="text-2xl font-semibold mb-4">
+                            <i class="fa-solid fa-briefcase mr-2 text-sitiweb-green"></i> Werkervaring
+                        </h2>
+
+                        @include('frontend.werkervaring')
+                    </section>
+
+                    <!-- Opleidingen -->
+                    <section
+                        class="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">
+                        <h2 class="text-2xl font-semibold mb-4">
+                            <i class="fa-solid fa-graduation-cap mr-2 text-sitiweb-green"></i> Opleidingen
+                        </h2>
+                        @include('frontend.opleidingen')
+                    </section>
+
+
+                </div>
+            </div>
 
-            <!-- Opleidingen -->
-            <section class="bg-yellow-50 dark:bg-yellow-900 p-6 rounded-xl shadow">
-                <h2 class="text-2xl font-semibold mb-4">Opleidingen</h2>
-                @include('frontend.opleidingen')
-            </section>
 
 
         </div>
-    </div>
 
+        @include('frontend.cta')
         <!-- Footer -->
         <footer class="text-center text-sm text-gray-500 dark:text-gray-400 mt-10">
             &copy; {{ date('Y') }} Roberto Guagliardo. Alle rechten voorbehouden.
         </footer>
+        <div id="custom-cursor">
+            {!! file_get_contents(public_path('storage/sitiweb.svg')) !!}
+        </div>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+        <script>
+            const cursor = document.getElementById('custom-cursor');
+
+            document.addEventListener('mousemove', (e) => {
+                gsap.to(cursor, {
+                    duration: 0.2,
+                    x: e.clientX + 20,
+                    y: e.clientY - 15,
+                    ease: 'power2.out'
+                });
+            });
+        </script>
+
+        @stack('scripts')
 
-    </div>
 </body>
+
 </html>
diff --git a/resources/views/work_experiences/_form.blade.php b/resources/views/work_experiences/_form.blade.php
index bbb4f30..86b6d96 100644
--- a/resources/views/work_experiences/_form.blade.php
+++ b/resources/views/work_experiences/_form.blade.php
@@ -1,4 +1,6 @@
 <div class="space-y-6">
+
+
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div>
             <label for="werkgever" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Werkgever</label>
@@ -32,6 +34,7 @@
     </div>
 
     <div>
+
         <label for="beschrijving" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Beschrijving</label>
         <textarea id="beschrijving" name="beschrijving" rows="4" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">{{ old('beschrijving', $workExperience->beschrijving ?? '') }}</textarea>
     </div>
@@ -39,8 +42,9 @@
     <div>
         <label for="afbeelding" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Afbeelding</label>
         <input type="file" id="afbeelding" name="afbeelding" class="mt-1 text-gray-800 dark:text-gray-100">
-        @if (!empty($workExperience) && $workExperience->getFirstMediaUrl('afbeelding'))
-            <img src="{{ $workExperience->getFirstMediaUrl('afbeelding') }}" class="mt-2 max-w-xs rounded">
+
+        @if (!empty($workExperience) && $workExperience->image())
+            <img src="{{ $workExperience->imageUrl() }}" class="mt-2 max-w-xs rounded">
         @endif
     </div>
 </div>
diff --git a/resources/views/work_experiences/index.blade.php b/resources/views/work_experiences/index.blade.php
index 8057b57..42e4c1c 100644
--- a/resources/views/work_experiences/index.blade.php
+++ b/resources/views/work_experiences/index.blade.php
@@ -7,7 +7,7 @@
         </div>
 
         @if (session('success'))
-            <div class="mb-4 text-green-700 dark:text-green-400">{{ session('success') }}</div>
+            <div class="mb-4 text-green-700 dark:text-sitiweb-green">{{ session('success') }}</div>
         @endif
 
         <div class="space-y-4">
@@ -20,7 +20,7 @@
                             <p class="mt-2 text-gray-700 dark:text-gray-200">{{ $experience->beschrijving }}</p>
                         </div>
                         <div class="flex gap-2">
-                            <a href="{{ route('work-experiences.edit', $experience) }}" class="text-blue-500 hover:underline">Bewerken</a>
+                            <a href="{{ route('work-experiences.edit', $experience) }}" class="text-sitiweb-green hover:underline">Bewerken</a>
                             <form method="POST" action="{{ route('work-experiences.destroy', $experience) }}">
                                 @csrf
                                 @method('DELETE')
@@ -28,8 +28,8 @@
                             </form>
                         </div>
                     </div>
-                    @if ($experience->getFirstMediaUrl('afbeelding'))
-                        <img src="{{ $experience->getFirstMediaUrl('afbeelding') }}" class="mt-4 max-w-xs rounded">
+                    @if ($experience->image())
+                        <img src="{{ $experience->imageUrl() }}" class="mt-4 max-w-xs rounded">
                     @endif
                 </div>
             @endforeach
diff --git a/routes/web.php b/routes/web.php
index bd8850a..910b6ac 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -11,12 +11,8 @@ Route::get('/', [FrontendController::class, 'index'])->name('home');
 Route::get('/dashboard', function () {
     return view('dashboard');
 })->middleware(['auth', 'verified'])->name('dashboard');
-Route::get('/getPersonalia/{id}', function ($id) {
-    $item = \App\Models\Personalia::findOrFail($id);
-    return response()->json([
-        'value' => $item->value,
-    ]);
-});
+Route::get('/getPersonalia/{id}', [FrontendController::class, 'getPersonalia'])->name('personalia');
+Route::post('/contact', [FrontendController::class, 'message'])->name('contact');
 
 Route::middleware('auth')->group(function () {
     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
diff --git a/storage/app/.gitignore b/storage/app/.gitignore
index fedb287..85699dc 100644
--- a/storage/app/.gitignore
+++ b/storage/app/.gitignore
@@ -1,4 +1,46 @@
-*
-!private/
-!public/
-!.gitignore
+# Alles negeren
+/public/*
+
+# Uitzonderingen (wél toevoegen aan Git)
+!public/1/
+!public/2/
+!public/3/
+!public/4/
+!public/5/
+!public/6/
+!public/7/
+!public/8/
+!public/9/
+!public/10/
+!public/11/
+!public/12/
+!public/13/
+!public/14/
+!public/15/
+!public/16/
+!public/17/
+!public/18/
+!public/19/
+!public/20/
+!public/21/
+!public/22/
+!public/23/
+!public/24/
+!public/25/
+!public/26/
+!public/27/
+!public/28/
+!public/29/
+!public/30/
+!public/31/
+!public/32/
+!public/33/
+!public/34/
+!public/35/
+!public/36/
+!public/37/
+!public/38/
+
+# Specifieke losse bestanden
+!public/roberto.png
+!public/sitiweb.svg
diff --git a/storage/app/public/.gitignore b/storage/app/public/.gitignore
deleted file mode 100644
index d6b7ef3..0000000
--- a/storage/app/public/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-*
-!.gitignore
diff --git a/storage/app/public/1/jumbo.png b/storage/app/public/1/jumbo.png
new file mode 100644
index 0000000..3afdc29
Binary files /dev/null and b/storage/app/public/1/jumbo.png differ
diff --git a/storage/app/public/10/inh.png b/storage/app/public/10/inh.png
new file mode 100644
index 0000000..07d1caf
Binary files /dev/null and b/storage/app/public/10/inh.png differ
diff --git a/storage/app/public/11/git-logo.png b/storage/app/public/11/git-logo.png
new file mode 100644
index 0000000..51f4ae5
Binary files /dev/null and b/storage/app/public/11/git-logo.png differ
diff --git a/storage/app/public/12/lara.png b/storage/app/public/12/lara.png
new file mode 100644
index 0000000..c96b343
Binary files /dev/null and b/storage/app/public/12/lara.png differ
diff --git a/storage/app/public/13/Livewire-logo.png b/storage/app/public/13/Livewire-logo.png
new file mode 100644
index 0000000..e07eb3c
Binary files /dev/null and b/storage/app/public/13/Livewire-logo.png differ
diff --git a/storage/app/public/14/Tailwind-CSS.png b/storage/app/public/14/Tailwind-CSS.png
new file mode 100644
index 0000000..77eb776
Binary files /dev/null and b/storage/app/public/14/Tailwind-CSS.png differ
diff --git a/storage/app/public/15/Postman.png b/storage/app/public/15/Postman.png
new file mode 100644
index 0000000..2d7322d
Binary files /dev/null and b/storage/app/public/15/Postman.png differ
diff --git a/storage/app/public/16/Docker.png b/storage/app/public/16/Docker.png
new file mode 100644
index 0000000..5b9ca9b
Binary files /dev/null and b/storage/app/public/16/Docker.png differ
diff --git a/storage/app/public/17/proxmox-logo.png b/storage/app/public/17/proxmox-logo.png
new file mode 100644
index 0000000..8f6d459
Binary files /dev/null and b/storage/app/public/17/proxmox-logo.png differ
diff --git a/storage/app/public/18/Grafana.png b/storage/app/public/18/Grafana.png
new file mode 100644
index 0000000..d63fa1b
Binary files /dev/null and b/storage/app/public/18/Grafana.png differ
diff --git a/storage/app/public/19/Cloudflare.png b/storage/app/public/19/Cloudflare.png
new file mode 100644
index 0000000..b3683e3
Binary files /dev/null and b/storage/app/public/19/Cloudflare.png differ
diff --git a/storage/app/public/2/php-logo.png b/storage/app/public/2/php-logo.png
new file mode 100644
index 0000000..9dfb905
Binary files /dev/null and b/storage/app/public/2/php-logo.png differ
diff --git a/storage/app/public/20/directadmnin-logo.png b/storage/app/public/20/directadmnin-logo.png
new file mode 100644
index 0000000..657a465
Binary files /dev/null and b/storage/app/public/20/directadmnin-logo.png differ
diff --git a/storage/app/public/21/MySQL.png b/storage/app/public/21/MySQL.png
new file mode 100644
index 0000000..cfda724
Binary files /dev/null and b/storage/app/public/21/MySQL.png differ
diff --git a/storage/app/public/22/Uptime-Kuma-Logo.png b/storage/app/public/22/Uptime-Kuma-Logo.png
new file mode 100644
index 0000000..2adfffc
Binary files /dev/null and b/storage/app/public/22/Uptime-Kuma-Logo.png differ
diff --git a/storage/app/public/23/NGINX.png b/storage/app/public/23/NGINX.png
new file mode 100644
index 0000000..d6816eb
Binary files /dev/null and b/storage/app/public/23/NGINX.png differ
diff --git a/storage/app/public/24/Visual-Studio-Code-(VS-Code).png b/storage/app/public/24/Visual-Studio-Code-(VS-Code).png
new file mode 100644
index 0000000..9a4a45e
Binary files /dev/null and b/storage/app/public/24/Visual-Studio-Code-(VS-Code).png differ
diff --git a/storage/app/public/25/GIMP.png b/storage/app/public/25/GIMP.png
new file mode 100644
index 0000000..1e941c6
Binary files /dev/null and b/storage/app/public/25/GIMP.png differ
diff --git a/storage/app/public/26/WordPress.png b/storage/app/public/26/WordPress.png
new file mode 100644
index 0000000..723950f
Binary files /dev/null and b/storage/app/public/26/WordPress.png differ
diff --git a/storage/app/public/27/WooCommerce.png b/storage/app/public/27/WooCommerce.png
new file mode 100644
index 0000000..e58214a
Binary files /dev/null and b/storage/app/public/27/WooCommerce.png differ
diff --git a/storage/app/public/28/Vaultwarden--Streamline-Simple-Icons.png b/storage/app/public/28/Vaultwarden--Streamline-Simple-Icons.png
new file mode 100644
index 0000000..41f10c0
Binary files /dev/null and b/storage/app/public/28/Vaultwarden--Streamline-Simple-Icons.png differ
diff --git a/storage/app/public/29/healthchecks.logo.png b/storage/app/public/29/healthchecks.logo.png
new file mode 100644
index 0000000..42c0814
Binary files /dev/null and b/storage/app/public/29/healthchecks.logo.png differ
diff --git a/storage/app/public/3/sitiweb-logo.png b/storage/app/public/3/sitiweb-logo.png
new file mode 100644
index 0000000..a790631
Binary files /dev/null and b/storage/app/public/3/sitiweb-logo.png differ
diff --git a/storage/app/public/30/GitLab.png b/storage/app/public/30/GitLab.png
new file mode 100644
index 0000000..b18437d
Binary files /dev/null and b/storage/app/public/30/GitLab.png differ
diff --git a/storage/app/public/31/GitHub.png b/storage/app/public/31/GitHub.png
new file mode 100644
index 0000000..be999cb
Binary files /dev/null and b/storage/app/public/31/GitHub.png differ
diff --git a/storage/app/public/32/Fedora.png b/storage/app/public/32/Fedora.png
new file mode 100644
index 0000000..28ccce8
Binary files /dev/null and b/storage/app/public/32/Fedora.png differ
diff --git a/storage/app/public/33/Ubuntu.png b/storage/app/public/33/Ubuntu.png
new file mode 100644
index 0000000..c6fc00d
Binary files /dev/null and b/storage/app/public/33/Ubuntu.png differ
diff --git a/storage/app/public/34/CentOS.png b/storage/app/public/34/CentOS.png
new file mode 100644
index 0000000..5ebb9f9
Binary files /dev/null and b/storage/app/public/34/CentOS.png differ
diff --git a/storage/app/public/35/Debian.png b/storage/app/public/35/Debian.png
new file mode 100644
index 0000000..14b6966
Binary files /dev/null and b/storage/app/public/35/Debian.png differ
diff --git a/storage/app/public/36/Composer.png b/storage/app/public/36/Composer.png
new file mode 100644
index 0000000..45982f8
Binary files /dev/null and b/storage/app/public/36/Composer.png differ
diff --git a/storage/app/public/37/NPM.png b/storage/app/public/37/NPM.png
new file mode 100644
index 0000000..3581bea
Binary files /dev/null and b/storage/app/public/37/NPM.png differ
diff --git a/storage/app/public/38/HTML5.png b/storage/app/public/38/HTML5.png
new file mode 100644
index 0000000..104f2d6
Binary files /dev/null and b/storage/app/public/38/HTML5.png differ
diff --git a/storage/app/public/4/5848152fcef1014c0b5e4967.png b/storage/app/public/4/5848152fcef1014c0b5e4967.png
new file mode 100644
index 0000000..49ea8f5
Binary files /dev/null and b/storage/app/public/4/5848152fcef1014c0b5e4967.png differ
diff --git a/storage/app/public/5/JavaScript.png b/storage/app/public/5/JavaScript.png
new file mode 100644
index 0000000..a8fdba8
Binary files /dev/null and b/storage/app/public/5/JavaScript.png differ
diff --git a/storage/app/public/6/images.jpg b/storage/app/public/6/images.jpg
new file mode 100644
index 0000000..0fcafdc
Binary files /dev/null and b/storage/app/public/6/images.jpg differ
diff --git a/storage/app/public/7/internettoday-logo.jpg b/storage/app/public/7/internettoday-logo.jpg
new file mode 100644
index 0000000..c80a6ba
Binary files /dev/null and b/storage/app/public/7/internettoday-logo.jpg differ
diff --git a/storage/app/public/8/hr.jpg b/storage/app/public/8/hr.jpg
new file mode 100644
index 0000000..d9fca67
Binary files /dev/null and b/storage/app/public/8/hr.jpg differ
diff --git a/storage/app/public/9/linux-logo.png b/storage/app/public/9/linux-logo.png
new file mode 100644
index 0000000..4dc819c
Binary files /dev/null and b/storage/app/public/9/linux-logo.png differ
diff --git a/storage/app/public/roberto.png b/storage/app/public/roberto.png
new file mode 100644
index 0000000..0f0477a
Binary files /dev/null and b/storage/app/public/roberto.png differ
diff --git a/storage/app/public/sitiweb.svg b/storage/app/public/sitiweb.svg
new file mode 100644
index 0000000..e9eee5b
--- /dev/null
+++ b/storage/app/public/sitiweb.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg2" xml:space="preserve" viewBox="0 0 406.66666 473.33334" sodipodi:docname="Beeldmerk.ai"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"/><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="640" inkscape:window-height="480" id="namedview4"/><g id="g10" inkscape:groupmode="layer" inkscape:label="Beeldmerk" transform="matrix(1.3333333,0,0,-1.3333333,0,473.33333)"><g id="g12" transform="translate(192.9405,297.8561)"><path d="M 0,0 3.661,-204.853 95.917,-260.941 95.291,47.32 Z" style="fill:#009000;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path14"/></g><g id="g16" transform="translate(287.7484,238.091)"><path d="M 0,0 -183.898,-87.583 -275.154,-31.495 1.239,108.114 Z" style="fill:#00ab00;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path18"/></g><g id="g20" transform="translate(172.7637,52.3648)"><path d="M 0,0 -93.429,-43.886 -96.399,59 -2.97,102.886 Z" style="fill:#ee0004;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path22"/></g><g id="g24" transform="translate(169.794,155.2513)"><path d="m 0,0 2.97,-102.886 -93.429,-43.887" style="fill:#d8000e;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path26"/></g></g></svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index c29eb1a..ddb929b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,9 @@ export default {
             fontFamily: {
                 sans: ['Figtree', ...defaultTheme.fontFamily.sans],
             },
+            colors: {
+                'sitiweb-green': '#00AB00',
+            },
         },
     },