Public Components
Last components generated by our users
UM CARD DE POST DE REDE SOCIAL Gabriel M. Chiabai
about 1 hour ago
melhore o designer da minha pagina <!-- Profile Section -->
<!-- Hero Section -->
<div class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-8">
<div class="flex flex-col lg:flex-row items-start gap-8">
<!-- Profile Image Container -->
<div class="relative">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="Profile"
class="w-40 h-40 object-cover rounded-2xl shadow-lg ring-4 ring-white" />
<!-- Verified Badge -->
<div class="absolute -bottom-3 -right-3 bg-blue-600 rounded-full p-2 shadow-lg">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
</div>
<!-- Profile Info -->
<div class="flex-1 space-y-6">
<div class="flex justify-between items-start">
<div class="space-y-4">
<h1 class="text-4xl font-bold text-gray-900">Espaço Beleza & Bem-Estar</h1>
<!-- Rating and Reviews -->
<div class="flex items-center gap-6">
<div class="flex items-center">
<svg class="w-4 h-4 text-yellow-300 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
</svg>
<svg class="w-4 h-4 text-yellow-300 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
</svg>
<svg class="w-4 h-4 text-yellow-300 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
</svg>
<svg class="w-4 h-4 text-yellow-300 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
</svg>
<svg class="w-4 h-4 text-gray-300 me-1 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
</svg>
<p class="ms-1 text-sm font-medium text-gray-500 dark:text-gray-400">4.95</p>
<p class="ms-1 text-sm font-medium text-gray-500 dark:text-gray-400">out of</p>
<p class="ms-1 text-sm font-medium text-gray-500 dark:text-gray-400">5</p>
</div>
</div>
</div>
<!-- Options Menu -->
<button class="hover:bg-gray-100 rounded-full transition-colors">
<svg class="w-6 h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/>
</svg>
</button>
</div>
<!-- Action Buttons -->
<div class="flex flex-wrap gap-4">
<button class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
Agendar Agora
</button>
<button class="px-6 py-3 bg-white text-gray-700 font-medium rounded-lg border border-gray-200 hover:border-blue-600 hover:text-blue-600 transition-colors flex items-center gap-2">
Mensagem
</button>
</div>
</div>
</div>
</div>
</div> Gabriel M. Chiabai
about 1 hour ago
home page modern, compact, and elegant for wedding app Dev Nice Try
about 3 hours ago
Please create me a look a like trello to do application kebabislekker
about 5 hours ago
use tailwind css The interface of the site, like Onlyfans, contains three columns for the computer screen, two columns for the tablet screen, and one column for mobile phones with a hidden menu. use tailwind css The interface of the site, like Onlyfans, contains three columns for the computer screen, two columns for the tablet screen, and one column for mobile phones with a hidden menu. fais moi une petite grenouille en te basant sur ce code
<div className="absolute bottom-2 right-2 w-12 h-12 opacity-20 transform -scale-x-100">
<svg viewBox="0 0 100 100" className="w-full h-full fill-current">
<path d="M50 95C74.8528 95 95 74.8528 95 50C95 25.1472 74.8528 5 50 5C25.1472 5 5 25.1472 5 50C5 74.8528 25.1472 95 50 95ZM50 80C66.5685 80 80 66.5685 80 50C80 33.4315 66.5685 20 50 20C33.4315 20 20 33.4315 20 50C20 66.5685 33.4315 80 50 80ZM35 45C38.866 45 42 41.866 42 38C42 34.134 38.866 31 35 31C31.134 31 28 34.134 28 38C28 41.866 31.134 45 35 45ZM65 45C68.866 45 72 41.866 72 38C72 34.134 68.866 31 65 31C61.134 31 58 34.134 58 38C58 41.866 61.134 45 65 45Z" />
</svg>
</div>
je veux qu'elle soit le plus fidele possible au site flexbox froggy Create a React form using TypeScript, react-hook-form, zod, and zodResolver for validating the required data to generate an income invoice (Ingreso) using Facturapi.
The form must include all necessary fields:
customer: Either a customer_id (string) or an object containing customer details.
items: An array of objects (LineItem), with a maximum of 5,000 items.
payment_form: A string (2 characters) representing the payment form, following SAT codes.
use: A string representing CFDI usage, defaulting to "G01".
type: A string, always "I" for income invoices.
payment_method: A string with "PUE" (single payment) or "PPD" (deferred payment).
currency: A string (default "MXN"), following ISO 4217 currency codes.
exchange: A number representing the exchange rate (default 1).
conditions: A string (optional, max 1000 characters) describing payment conditions.
related_documents: An array of objects linking related documents.
global: An optional object required for global invoices.
export: A string ("01", "02", "03", "04") indicating export status.
complements: An array of objects (CustomComplement) for invoice complements.
status: A string ("pending" by default, or "draft" for saving as a draft).
date: A string in ISO 8601 format representing the invoice issue date.
address: An optional object containing the invoice issuance address.
external_id: A string (optional) for tracking the invoice.
idempotency_key: A string (optional) to prevent duplicate submissions.
folio_number: An optional integer for internal control (default auto-increment).
series: A string (max 25 characters) for internal control.
pdf_custom_section: A string containing custom HTML content for the PDF.
addenda: A string containing XML addenda.
namespaces: An array of objects required when using addenda.
pdf_options: An object configuring optional fields in the generated PDF.
The form should be structured with sections and include "Next" and "Previous" buttons to navigate between steps. A "Submit" button should send the form data.
To the right of the form, display a real-time invoice preview that updates dynamically as the user fills in the fields. This preview should be structured similarly to an actual invoice, reflecting entered values.
Use shadcn/ui for styling and UI components like Input, Select, Button, and Card. The layout should be clean, modern, and responsive, ensuring a good user experience. KatzuneStarky
about 7 hours ago
Je souhaite une site en 1 page et en français présentant une école de code avec les rubriques qui sommes nous, quelle formation, lieu et des éléments communs aux écoles. Edouard DAUBIN
about 9 hours ago
Starknet Squirrels Society
Project Details:
- Name: Starknet Squirrels Society
- Version: 1.4.0
- Framework: React with Vite
- Styling: Tailwind CSS
- UI Components: shadcn/ui
Project Structure:
1. Header
- Logo: 🐿️ SQUIRRELS
- Navigation: Roadmap, About
- Connect Wallet button
2. Main Content Layout
- Two-column grid
- Comic book style design
3. Left Section (NFT Preview)
- Large NFT image
- Current price in STRK
- Mint button
- Price doubles every 1000 NFTs
- Starting price: 0.025 STRK
4. Right Section
- Comic-style title section
* Text: "STARKNET SQUIRRELS SOCIETY
CAME TO INVADE THE SPACE,"
* Highlighted title: "HOLD UP,
DONT LOSE
THE NUTTS!"
- Background: Trapezium-shaped with starry effect
- Collage grid (8x5)
* 50 randomly shuffling images
* 35x35 pixel images
* Shuffle every 0.5 seconds
5. Mint Progress Bar
- 10 checkpoints
- Labels: 0.025, 0.05, 0.1, 0.2, 0.4, 0.8, 1.6, 3.2, 6.4, 12.8 STRK
- Progress updates with slider
6. NFT Slider
- Range: 0-10000 NFTs
- Updates mint progress and price
7. Footer
- About link
- Twitter link
- Copyright notice
Design Principles:
- Comic book aesthetic
- Yellow, black, and purple color scheme
- Retro grid background
- Bangers font
- Playful, dynamic interactions
Technical Requirements:
- TypeScript
- Tailwind CSS
- shadcn/ui components
- Responsive design
- Comic-style animations and effects
This prompt provides a comprehensive overview of the Starknet Squirrels Society project, including its structure, design principles, and technical requirements. You can use this to regenerate the project with all its specific details and styling. Zakir Erimbetov
about 10 hours ago
build an rtl admin dashboard with sidebar, and the body contains a table with following sortable columns: id, name, status, datetime. the table has search bar and export button عبدالإله الحصيّن
about 10 hours ago
Design a clean and user-friendly checkout page for bank transfer payments. The page should include the following elements:
1. A section displaying the total amount to be paid.
2. A detailed list of purchased items, including name, quantity, and price.
3. Bank transfer details (account number, bank name, account holder, and reference code).
4. An upload button for users to submit their payment receipt.
5. A ‘Process Payment’ button to confirm the transaction.
The design should be modern, minimalistic, and easy to navigate, ensuring a seamless user experience. Carlos Eli Escobar Ruiz
about 11 hours ago
We need a table view for managing PDF documents with the ability to click on a specific PDF to pop out a side panel with the PDF details. These are the fields for a PDF: Name
URL
Date created
Date modified
File type
Info type
Exception
Standard
Action
Department
Owner
If remediate, # of pages Michael Cowden
about 12 hours ago
Give me a basic ui that shows a list of government websites for cities (city name, website name, url)
Michael Cowden
about 12 hours ago
Give me a basic ui that shows a list of government websites for cities (city name, website name, url) Michael Cowden
about 12 hours ago
Create a modern UI display of menu cards representing different work area menus. Each card should contain the following elements:
A representative image at the top that visually describes the menu.
The menu name displayed prominently in a bold, readable font.
A clickable link to the menu, styled as a button or text with a subtle hover effect.
The menu order number, displayed in a small but visible way.
A checkbox in the top right corner that visually toggles when selected.
The cards should have a clean, minimalistic design with soft colors, rounded corners, and a shadow effect. They should be neatly arranged in a grid layout with a slight hover lift effect. The background should be light, allowing the images and text to stand out clearly. The overall design should be professional and user-friendly KatzuneStarky
about 12 hours ago
Create a modern UI display of menu cards representing different work area menus. Each card should have a unique icon, a title with the menu name, and a subtle shadow effect. The cards should be arranged neatly with a hover effect that slightly lifts them. Each menu card should also include a checkbox in the top right corner, which visually toggles when selected. Use a soft color scheme with rounded edges and a clean, professional design. The background should be light, allowing the icons and text to stand out. The design should be minimalistic and user-friendly KatzuneStarky
about 12 hours ago
Luuk Battjes
about 13 hours ago
Luuk Battjes
about 13 hours ago
A landing page hero section with a heading, leading text and an opt-in form. Daniel Pettersson
about 13 hours ago
linear-gradient(to bottom right, #EFF6FF, #DBEAFE, #93C5FD)
give me colors to put in darkmode Ahmed Evolve
about 13 hours ago
An ecommerce dashboard with a sidebar navigation and a table of recent orders. HU Coding
about 14 hours ago
Standard logo like google with text "HomeTown" Dinesh N K
about 14 hours ago
contact.html
<!DOCTYPE html>
<html lang="nl" data-theme="business">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Kaya Brankjanner</title>
<meta name="description" content="Neem contact op met Kaya Brankjanner voor samenwerkingen of vragen.">
<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-base-200 min-h-screen flex flex-col">
<!-- Sticky Header -->
<header class="sticky top-0 z-50 bg-base-100 shadow-md">
<div class="navbar container mx-auto">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<!-- Hamburger menu icon van w3.org -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="index.html">Over Mij</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</div>
<img src="images/Group 1.svg" alt="Kaya Brankjanner Logo" class="h-8 mr-2">
<a class="btn btn-ghost text-xl">Contact</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="index.html">Over Mij</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</div>
</div>
</header>
<main class="flex-grow container mx-auto px-4 py-8">
<div class="card w-full max-w-md mx-auto bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-center">Neem Contact Op</h2>
<form action="mailto:info@bleizovitz.nl" method="get" enctype="text/plain">
<div class="form-control">
<label class="label" for="naam">
<span class="label-text">Naam</span>
</label>
<input type="text" id="naam" name="naam" placeholder="Uw naam" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label" for="email">
<span class="label-text">E-mail</span>
</label>
<input type="email" id="email" name="email" placeholder="Uw e-mailadres" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Uw bericht</span>
</label>
<textarea name="bericht" class="textarea textarea-bordered h-24" placeholder="Typ uw bericht hier" required></textarea>
</div>
<div class="form-control mt-6">
<button type="submit" class="btn btn-primary">Verzenden</button>
<button type="reset" class="btn btn-ghost mt-2">Formulier leegmaken</button>
</div>
</form>
</div>
</div>
</main>
<!-- Sticky Footer -->
<footer class="footer footer-center p-4 bg-base-300 text-base-content sticky bottom-0">
<aside>
<p>© 2024 Kaya Brankjanner - Alle rechten voorbehouden</p>
</aside>
</footer>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="nl" data-theme="business">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaya Brankjanner - Multimedia Kunstenaar</title>
<meta name="description" content="Portfolio van Kaya Brankjanner, een multimedia kunstenaar gespecialiseerd in innovatieve kunst die technologie en traditie combineert.">
<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-base-200 min-h-screen flex flex-col">
<!-- Sticky Header -->
<header class="sticky top-0 z-50 bg-base-100 shadow-md">
<div class="navbar container mx-auto">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<!-- Hamburger menu icon van w3.org -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<img src="images/Group 1.svg" alt="Kaya Brankjanner Logo" class="h-8 mr-2">
<a class="btn btn-ghost text-xl">Over Mij</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</header>
<main class="flex-grow container mx-auto px-4 py-8">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="prose max-w-prose">
<h1 class="text-3xl font-bold mb-4">Hallo, ik ben Kaya Brankjanner</h1>
<p>Als multimedia kunstenaar uit Delft verken ik de grenzen tussen kunst, technologie en menselijke ervaring. Mijn werk is een reis door kleuren, patronen en verhalen die voortkomen uit mijn rijke achtergrond.</p>
<h2 class="text-2xl mt-6">Missie</h2>
<p>Ik streef ernaar kunst te creëren die mensen uitdaagt om de wereld vanuit een nieuw perspectief te bekijken. Door traditionele kunstvormen te combineren met moderne digitale technieken, vertel ik verhalen die raken en inspireren.</p>
<div class="mt-6 flex space-x-4">
<a href="portfolio.html" class="btn btn-secondary">Bekijk Portfolio</a>
<a href="contact.html" class="skeleton btn btn-outline">Neem Contact Op</a>
</div>
</div>
<div class="flex justify-center">
<img src="images/portret.jpg" alt="Portret van Kaya Brankjanner" class="rounded-lg shadow-2xl max-w-full h-auto">
</div>
</div>
</main>
<!-- Sticky Footer -->
<footer class="footer footer-center p-4 bg-base-300 text-base-content sticky bottom-0">
<aside>
<p>© 2024 Kaya Brankjanner - Alle rechten voorbehouden</p>
</aside>
</footer>
</body>
</html>
portfolio.html
<!DOCTYPE html>
<html lang="nl" data-theme="business">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - Kaya Brankjanner</title>
<meta name="description" content="Portfolio van kunstwerken door Kaya Brankjanner, een multimedia kunstenaar.">
<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="js/portfolio.js"></script>
</head>
<body class="bg-base-200 min-h-screen flex flex-col">
<!-- Sticky Header -->
<header class="sticky top-0 z-50 bg-base-100 shadow-md">
<div class="navbar container mx-auto">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<!-- Hamburger menu icon van w3.org -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="index.html">Over Mij</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<img src="images/Group 1.svg" alt="Kaya Brankjanner Logo" class="h-8 mr-2">
<a class="btn btn-ghost text-xl">Portfolio</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="index.html">Over Mij</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</header>
<!-- Main Content: Portfolio Slideshow -->
<main class="flex-grow container mx-auto px-4 py-8 flex items-center justify-center">
<div class="portfolio-slideshow w-full max-w-4xl">
<div class="relative">
<!-- Grote Afbeelding -->
<div id="mainImage" class="w-full aspect-video bg-cover bg-center rounded-xl shadow-2xl"
style="background-image: url('images/artwork_1.jpeg')">
<!-- Overlay met titel -->
<div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-4">
<h2 id="imageTitle" class="text-2xl font-bold text-center">The Wall</h2>
</div>
</div>
<!-- Navigatie Pijlen -->
<button id="prevBtn" class="absolute left-4 top-1/2 transform -translate-y-1/2 btn btn-circle btn-primary btn-lg shadow-xl">
<i class="fas fa-chevron-left text-2xl"></i>
</button>
<button id="nextBtn" class="absolute right-4 top-1/2 transform -translate-y-1/2 btn btn-circle btn-primary btn-lg shadow-xl">
<i class="fas fa-chevron-right text-2xl"></i>
</button>
</div>
<!-- Thumbnail Indicatoren -->
<div class="flex justify-center mt-4 space-x-2">
<div id="thumbnails" class="flex space-x-2">
<div class="w-16 h-16 bg-cover bg-center rounded-md opacity-50 cursor-pointer active"
data-image="images/artwork_1.jpeg"
data-title="The Wall"
style="background-image: url('images/artwork_1.jpeg')"></div>
<div class="w-16 h-16 bg-cover bg-center rounded-md opacity-50 cursor-pointer"
data-image="images/artwork_2.jpeg"
data-title="Helicopter View"
style="background-image: url('images/artwork_2.jpeg')"></div>
<div class="w-16 h-16 bg-cover bg-center rounded-md opacity-50 cursor-pointer"
data-image="images/artwork_3.jpeg"
data-title="Planeten"
style="background-image: url('images/artwork_3.jpeg')"></div>
<div class="w-16 h-16 bg-cover bg-center rounded-md opacity-50 cursor-pointer"
data-image="images/artwork_4.jpeg"
data-title="Vrije Inspiratie"
style="background-image: url('images/artwork_4.jpeg')"></div>
</div>
</div>
</div>
</main>
<!-- Sticky Footer -->
<footer class="footer footer-center p-4 bg-base-300 text-base-content sticky bottom-0">
<aside>
<p>© 2024 Kaya Brankjanner - Alle rechten voorbehouden</p>
</aside>
</footer>
</body>
</html>
portfolio.js
document.addEventListener('DOMContentLoaded', () => {
const mainImage = document.getElementById('mainImage');
const imageTitle = document.getElementById('imageTitle');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const thumbnails = document.querySelectorAll('#thumbnails > div');
let currentIndex = 0;
const images = Array.from(thumbnails).map(thumb => ({
src: thumb.dataset.image,
title: thumb.dataset.title
}));
function updateImage(index) {
// Update main image
mainImage.style.backgroundImage = `url('${images[index].src}')`;
imageTitle.textContent = images[index].title;
// Update thumbnail active state
thumbnails.forEach((thumb, i) => {
thumb.classList.toggle('opacity-100', i === index);
thumb.classList.toggle('opacity-50', i !== index);
});
}
// Next Button
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % images.length;
updateImage(currentIndex);
});
// Previous Button
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateImage(currentIndex);
});
// Thumbnail Click
thumbnails.forEach((thumb, index) => {
thumb.addEventListener('click', () => {
currentIndex = index;
updateImage(currentIndex);
});
});
});
change the layout of overmij.html make it more interactive and add some things that fit for a portfolio website 
