{"id":19,"date":"2026-04-23T14:02:05","date_gmt":"2026-04-23T14:02:05","guid":{"rendered":"https:\/\/indrasdrafts.nl\/?page_id=19"},"modified":"2026-04-23T14:06:39","modified_gmt":"2026-04-23T14:06:39","slug":"elementor-19","status":"publish","type":"page","link":"https:\/\/indrasdrafts.nl\/","title":{"rendered":"Elementor #19"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nIndra Bangaru \u2013 Illustrator & Social Illustrator | indrasdrafts.nl<\/title>\r\n<meta name=\"description\" content=\"Indra Bangaru is een illustrator uit Eindhoven die verhalen, merken en maatschappelijke thema's omzet in krachtige, unieke visuals. Gespecialiseerd in diversiteit, migratie, feminisme en mentale gezondheid.\">\r\n<meta name=\"keywords\" content=\"illustrator, sociale illustratie, diversiteit, migratie, feminisme, editorial illustratie, Eindhoven, Nederland, Indra Bangaru\">\r\n\r\n<!-- Schema.org structured data -->\r\n<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"Person\",\r\n \"name\": \"Indra Bangaru\",\r\n \"jobTitle\": \"Illustrator\",\r\n \"description\": \"Social illustrator gespecialiseerd in diversiteit, migratie, feminisme en mentale gezondheid\",\r\n \"url\": \"https:\/\/indrasdrafts.nl\",\r\n \"email\": \"indrabangaru1@gmail.com\",\r\n \"telephone\": \"+31643769046\",\r\n \"address\": {\r\n \"@type\": \"PostalAddress\",\r\n \"addressLocality\": \"Eindhoven\",\r\n \"addressCountry\": \"NL\"\r\n },\r\n \"sameAs\": [\r\n \"https:\/\/www.instagram.com\/indrasdrafts\"\r\n ]\r\n}\r\n<\/script>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --cream: #F5F0E8;\r\n --dark: #1A1713;\r\n --green-deep: #2B4A2E;\r\n --green-mid: #5A7A3A;\r\n --pink-hot: #D44D6E;\r\n --gold: #C8902A;\r\n --text-muted: #6B6459;\r\n --font-display: 'Playfair Display', Georgia, serif;\r\n --font-body: 'DM Sans', sans-serif;\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background: var(--cream);\r\n color: var(--dark);\r\n font-family: var(--font-body);\r\n font-weight: 300;\r\n line-height: 1.7;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n nav {\r\n position: fixed;\r\n top: 0; left: 0; right: 0;\r\n z-index: 100;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1.5rem 3rem;\r\n mix-blend-mode: multiply;\r\n }\r\n\r\n .nav-logo {\r\n font-family: var(--font-display);\r\n font-style: italic;\r\n font-size: 1.1rem;\r\n color: var(--dark);\r\n text-decoration: none;\r\n letter-spacing: 0.02em;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 2.5rem;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n font-size: 0.8rem;\r\n font-weight: 400;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n color: var(--dark);\r\n text-decoration: none;\r\n transition: color 0.2s;\r\n }\r\n\r\n .nav-links a:hover { color: var(--pink-hot); }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n padding: 8rem 3rem 4rem;\r\n gap: 4rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n top: -10%;\r\n right: -5%;\r\n width: 55%;\r\n height: 120%;\r\n background: var(--green-deep);\r\n clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);\r\n z-index: 0;\r\n }\r\n\r\n .hero-text {\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .hero-eyebrow {\r\n font-size: 0.75rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--pink-hot);\r\n margin-bottom: 1.5rem;\r\n display: block;\r\n }\r\n\r\n .hero-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(3.5rem, 7vw, 6rem);\r\n font-weight: 900;\r\n line-height: 0.95;\r\n color: var(--dark);\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .hero-title em {\r\n font-style: italic;\r\n color: var(--green-deep);\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 1rem;\r\n color: var(--text-muted);\r\n max-width: 380px;\r\n margin-bottom: 3rem;\r\n line-height: 1.8;\r\n }\r\n\r\n .hero-cta {\r\n display: flex;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn-primary {\r\n display: inline-block;\r\n background: var(--pink-hot);\r\n color: #fff;\r\n padding: 0.9rem 2rem;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n transition: background 0.2s, transform 0.2s;\r\n }\r\n\r\n .btn-primary:hover {\r\n background: var(--dark);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-secondary {\r\n display: inline-block;\r\n border: 1.5px solid var(--dark);\r\n color: var(--dark);\r\n padding: 0.9rem 2rem;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n transition: all 0.2s;\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: var(--dark);\r\n color: var(--cream);\r\n }\r\n\r\n \/* Hero gallery stack *\/\r\n .hero-gallery {\r\n position: relative;\r\n z-index: 2;\r\n height: 580px;\r\n }\r\n\r\n .hero-img-stack {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .hero-img-stack .img-card {\r\n position: absolute;\r\n border: 4px solid #fff;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.18);\r\n overflow: hidden;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .hero-img-stack .img-card:nth-child(1) {\r\n width: 65%;\r\n height: 70%;\r\n top: 5%;\r\n left: 10%;\r\n transform: rotate(-2deg);\r\n background: var(--green-deep);\r\n }\r\n\r\n .hero-img-stack .img-card:nth-child(2) {\r\n width: 50%;\r\n height: 55%;\r\n top: 35%;\r\n right: 0;\r\n transform: rotate(1.5deg);\r\n background: var(--pink-hot);\r\n }\r\n\r\n .hero-img-stack .img-card:nth-child(3) {\r\n width: 38%;\r\n height: 38%;\r\n top: 0;\r\n right: 5%;\r\n transform: rotate(3deg);\r\n background: var(--gold);\r\n }\r\n\r\n .hero-img-stack .img-card img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n \/* Placeholder art blocks *\/\r\n .art-placeholder {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-display);\r\n font-style: italic;\r\n font-size: 0.9rem;\r\n color: rgba(255,255,255,0.5);\r\n }\r\n\r\n \/* Rotating artwork indicator *\/\r\n .artwork-rotate-indicator {\r\n position: absolute;\r\n bottom: 1rem;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 6px;\r\n }\r\n\r\n .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.4);\r\n cursor: pointer;\r\n transition: background 0.2s;\r\n }\r\n\r\n .dot.active { background: var(--pink-hot); }\r\n\r\n \/* \u2500\u2500 MARQUEE \u2500\u2500 *\/\r\n .marquee-wrap {\r\n background: var(--dark);\r\n padding: 1rem 0;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n\r\n .marquee-track {\r\n display: inline-block;\r\n animation: marquee 20s linear infinite;\r\n }\r\n\r\n .marquee-track span {\r\n display: inline-block;\r\n font-family: var(--font-display);\r\n font-style: italic;\r\n font-size: 1rem;\r\n color: var(--cream);\r\n margin: 0 2rem;\r\n opacity: 0.7;\r\n }\r\n\r\n .marquee-track .sep {\r\n color: var(--pink-hot);\r\n opacity: 1;\r\n font-style: normal;\r\n margin: 0 1rem;\r\n }\r\n\r\n @keyframes marquee {\r\n from { transform: translateX(0); }\r\n to { transform: translateX(-50%); }\r\n }\r\n\r\n \/* \u2500\u2500 SECTION BASE \u2500\u2500 *\/\r\n section {\r\n padding: 6rem 3rem;\r\n }\r\n\r\n .section-label {\r\n font-size: 0.7rem;\r\n letter-spacing: 0.25em;\r\n text-transform: uppercase;\r\n color: var(--pink-hot);\r\n margin-bottom: 1rem;\r\n display: block;\r\n }\r\n\r\n .section-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(2rem, 4vw, 3.2rem);\r\n font-weight: 700;\r\n line-height: 1.1;\r\n color: var(--dark);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .section-title em { font-style: italic; color: var(--green-mid); }\r\n\r\n \/* \u2500\u2500 PORTFOLIO GRID \u2500\u2500 *\/\r\n .portfolio {\r\n background: var(--dark);\r\n padding: 6rem 3rem;\r\n }\r\n\r\n .portfolio .section-title { color: var(--cream); }\r\n .portfolio .section-label { color: var(--gold); }\r\n\r\n .portfolio-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .portfolio-filter {\r\n display: flex;\r\n gap: 0.5rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .filter-btn {\r\n padding: 0.4rem 1rem;\r\n font-size: 0.7rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n border: 1px solid rgba(255,255,255,0.2);\r\n color: rgba(255,255,255,0.6);\r\n background: transparent;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n\r\n .filter-btn.active,\r\n .filter-btn:hover {\r\n border-color: var(--pink-hot);\r\n color: var(--pink-hot);\r\n }\r\n\r\n \/* Masonry-style portfolio grid *\/\r\n .portfolio-grid {\r\n display: grid;\r\n grid-template-columns: repeat(12, 1fr);\r\n gap: 1rem;\r\n grid-auto-rows: 80px;\r\n }\r\n\r\n .p-item {\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n }\r\n\r\n .p-item:hover .p-overlay { opacity: 1; }\r\n .p-item:hover img { transform: scale(1.05); }\r\n\r\n .p-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n \/* Color placeholder for items without images *\/\r\n .p-item-color {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n padding: 1.2rem;\r\n }\r\n\r\n .p-item-title-block {\r\n font-family: var(--font-display);\r\n font-style: italic;\r\n font-size: 0.9rem;\r\n color: rgba(255,255,255,0.9);\r\n }\r\n\r\n .p-item-cat {\r\n font-size: 0.65rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.5);\r\n margin-top: 0.2rem;\r\n }\r\n\r\n .p-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n padding: 1.5rem;\r\n }\r\n\r\n \/* Grid layout for portfolio items *\/\r\n .p-item:nth-child(1) { grid-column: 1 \/ 6; grid-row: 1 \/ 5; }\r\n .p-item:nth-child(2) { grid-column: 6 \/ 9; grid-row: 1 \/ 4; }\r\n .p-item:nth-child(3) { grid-column: 9 \/ 13; grid-row: 1 \/ 5; }\r\n .p-item:nth-child(4) { grid-column: 6 \/ 9; grid-row: 4 \/ 7; }\r\n .p-item:nth-child(5) { grid-column: 1 \/ 4; grid-row: 5 \/ 8; }\r\n .p-item:nth-child(6) { grid-column: 4 \/ 7; grid-row: 5 \/ 8; }\r\n .p-item:nth-child(7) { grid-column: 9 \/ 13; grid-row: 5 \/ 9; }\r\n .p-item:nth-child(8) { grid-column: 1 \/ 5; grid-row: 8 \/ 11; }\r\n .p-item:nth-child(9) { grid-column: 5 \/ 9; grid-row: 7 \/ 11; }\r\n\r\n \/* \u2500\u2500 TOPICS \u2500\u2500 *\/\r\n .topics-section {\r\n background: var(--cream);\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 6rem;\r\n align-items: center;\r\n }\r\n\r\n .topics-visual {\r\n position: relative;\r\n height: 500px;\r\n }\r\n\r\n .topic-tag {\r\n position: absolute;\r\n font-family: var(--font-display);\r\n font-weight: 700;\r\n color: var(--dark);\r\n line-height: 1;\r\n transition: color 0.2s;\r\n cursor: default;\r\n }\r\n\r\n .topic-tag:hover { color: var(--pink-hot); }\r\n .topic-tag.t1 { font-size: 3.2rem; top: 5%; left: 0; }\r\n .topic-tag.t2 { font-size: 2rem; top: 25%; left: 20%; color: var(--green-deep); }\r\n .topic-tag.t3 { font-size: 4rem; top: 42%; left: 0; font-style: italic; }\r\n .topic-tag.t4 { font-size: 1.8rem; top: 62%; left: 25%; color: var(--text-muted); }\r\n .topic-tag.t5 { font-size: 2.8rem; top: 75%; left: 0; color: var(--pink-hot); }\r\n\r\n .topics-text p {\r\n font-size: 1.05rem;\r\n color: var(--text-muted);\r\n margin-bottom: 1.5rem;\r\n line-height: 1.9;\r\n }\r\n\r\n .topics-text strong { color: var(--dark); font-weight: 500; }\r\n\r\n \/* \u2500\u2500 PROJECTS \u2500\u2500 *\/\r\n .projects-section { background: var(--cream); }\r\n\r\n .projects-list { margin-top: 3rem; }\r\n\r\n .project-item {\r\n display: grid;\r\n grid-template-columns: 80px 1fr 200px;\r\n gap: 2rem;\r\n align-items: center;\r\n padding: 1.8rem 0;\r\n border-top: 1px solid rgba(0,0,0,0.1);\r\n transition: all 0.2s;\r\n cursor: pointer;\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .project-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.1); }\r\n\r\n .project-item:hover .project-number { color: var(--pink-hot); }\r\n .project-item:hover .project-title { letter-spacing: 0.02em; }\r\n .project-item:hover .project-thumb { transform: scale(1.05); }\r\n\r\n .project-number {\r\n font-family: var(--font-display);\r\n font-size: 1.5rem;\r\n font-style: italic;\r\n color: var(--text-muted);\r\n transition: color 0.2s;\r\n }\r\n\r\n .project-info { padding: 0.5rem 0; }\r\n\r\n .project-title {\r\n font-family: var(--font-display);\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: var(--dark);\r\n transition: letter-spacing 0.3s;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .project-desc {\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n }\r\n\r\n .project-tags {\r\n display: flex;\r\n gap: 0.4rem;\r\n flex-wrap: wrap;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n .tag {\r\n font-size: 0.65rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n padding: 0.2rem 0.6rem;\r\n border: 1px solid var(--text-muted);\r\n color: var(--text-muted);\r\n }\r\n\r\n .project-thumb {\r\n width: 200px;\r\n height: 120px;\r\n object-fit: cover;\r\n transition: transform 0.3s;\r\n }\r\n\r\n .thumb-placeholder {\r\n width: 200px;\r\n height: 120px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-display);\r\n font-style: italic;\r\n font-size: 0.75rem;\r\n color: rgba(255,255,255,0.6);\r\n }\r\n\r\n \/* \u2500\u2500 ABOUT \u2500\u2500 *\/\r\n .about-section {\r\n background: var(--green-deep);\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 6rem;\r\n align-items: center;\r\n }\r\n\r\n .about-section .section-title { color: var(--cream); }\r\n .about-section .section-label { color: var(--gold); }\r\n\r\n .about-text p {\r\n color: rgba(245,240,232,0.75);\r\n margin-bottom: 1.2rem;\r\n font-size: 1rem;\r\n line-height: 1.9;\r\n }\r\n\r\n .about-photo-wrap {\r\n position: relative;\r\n }\r\n\r\n .about-photo-frame {\r\n position: relative;\r\n width: 100%;\r\n max-width: 420px;\r\n }\r\n\r\n .about-photo-frame::before {\r\n content: '';\r\n position: absolute;\r\n top: -1.5rem;\r\n left: -1.5rem;\r\n right: 1.5rem;\r\n bottom: 1.5rem;\r\n border: 2px solid var(--gold);\r\n z-index: 0;\r\n }\r\n\r\n .about-photo-frame img {\r\n position: relative;\r\n z-index: 1;\r\n width: 100%;\r\n display: block;\r\n }\r\n\r\n .about-photo-placeholder {\r\n position: relative;\r\n z-index: 1;\r\n width: 100%;\r\n height: 480px;\r\n background: rgba(255,255,255,0.05);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--font-display);\r\n font-style: italic;\r\n color: rgba(255,255,255,0.3);\r\n }\r\n\r\n .about-stats {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1.5rem;\r\n margin-top: 2.5rem;\r\n }\r\n\r\n .stat-block { border-left: 2px solid var(--gold); padding-left: 1rem; }\r\n\r\n .stat-num {\r\n font-family: var(--font-display);\r\n font-size: 2.2rem;\r\n font-weight: 700;\r\n color: var(--cream);\r\n line-height: 1;\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.75rem;\r\n color: rgba(245,240,232,0.5);\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n margin-top: 0.3rem;\r\n }\r\n\r\n \/* \u2500\u2500 CLIENTS \/ PRESS \u2500\u2500 *\/\r\n .press-section {\r\n background: var(--cream);\r\n padding: 4rem 3rem;\r\n }\r\n\r\n .press-label {\r\n font-size: 0.7rem;\r\n letter-spacing: 0.25em;\r\n text-transform: uppercase;\r\n color: var(--text-muted);\r\n text-align: center;\r\n margin-bottom: 2.5rem;\r\n }\r\n\r\n .press-logos {\r\n display: flex;\r\n gap: 3rem;\r\n align-items: center;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .press-logo {\r\n font-family: var(--font-display);\r\n font-weight: 900;\r\n font-size: 1.4rem;\r\n color: var(--text-muted);\r\n letter-spacing: -0.02em;\r\n opacity: 0.5;\r\n transition: opacity 0.2s;\r\n }\r\n\r\n .press-logo:hover { opacity: 1; }\r\n .press-logo.serif { font-style: italic; }\r\n\r\n \/* \u2500\u2500 CONTACT \u2500\u2500 *\/\r\n .contact-section {\r\n background: var(--dark);\r\n text-align: center;\r\n padding: 8rem 3rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .contact-section::before {\r\n content: 'Laten we\\Asamenwerken';\r\n white-space: pre;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-family: var(--font-display);\r\n font-size: clamp(5rem, 15vw, 12rem);\r\n font-weight: 900;\r\n color: rgba(255,255,255,0.03);\r\n line-height: 0.9;\r\n pointer-events: none;\r\n text-align: center;\r\n width: 100%;\r\n }\r\n\r\n .contact-section .section-label { color: var(--gold); text-align: center; }\r\n .contact-section .section-title { color: var(--cream); text-align: center; margin-bottom: 0.5rem; }\r\n\r\n .contact-subtitle {\r\n color: rgba(245,240,232,0.5);\r\n font-size: 1rem;\r\n max-width: 420px;\r\n margin: 0 auto 3rem;\r\n }\r\n\r\n .contact-links {\r\n display: flex;\r\n justify-content: center;\r\n gap: 1.5rem;\r\n flex-wrap: wrap;\r\n margin-bottom: 3rem;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .contact-email {\r\n font-family: var(--font-display);\r\n font-style: italic;\r\n font-size: 1.4rem;\r\n color: var(--cream);\r\n text-decoration: none;\r\n border-bottom: 1px solid var(--pink-hot);\r\n padding-bottom: 0.2rem;\r\n transition: color 0.2s;\r\n }\r\n\r\n .contact-email:hover { color: var(--pink-hot); }\r\n\r\n .contact-cta-group {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .btn-call {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n background: var(--pink-hot);\r\n color: #fff;\r\n padding: 1rem 2.5rem;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n transition: all 0.2s;\r\n }\r\n\r\n .btn-call:hover {\r\n background: var(--cream);\r\n color: var(--dark);\r\n }\r\n\r\n .btn-ig {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n border: 1.5px solid rgba(255,255,255,0.3);\r\n color: rgba(255,255,255,0.7);\r\n padding: 1rem 2.5rem;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n transition: all 0.2s;\r\n }\r\n\r\n .btn-ig:hover {\r\n border-color: var(--cream);\r\n color: var(--cream);\r\n }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n background: var(--dark);\r\n border-top: 1px solid rgba(255,255,255,0.08);\r\n padding: 2rem 3rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .footer-brand {\r\n font-family: var(--font-display);\r\n font-style: italic;\r\n color: rgba(245,240,232,0.4);\r\n font-size: 0.9rem;\r\n }\r\n\r\n .footer-copy {\r\n font-size: 0.75rem;\r\n color: rgba(245,240,232,0.3);\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n \/* \u2500\u2500 ARTWORK CAROUSEL \u2500\u2500 *\/\r\n .artwork-canvas {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n .artwork-slide {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n transition: opacity 0.8s ease;\r\n }\r\n\r\n .artwork-slide.active { opacity: 1; }\r\n\r\n \/* Scrolling animation trigger *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.7s ease, transform 0.7s ease;\r\n }\r\n\r\n .reveal.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* \u2500\u2500 MOBILE RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 900px) {\r\n nav { padding: 1.2rem 1.5rem; }\r\n .nav-links { gap: 1.5rem; }\r\n\r\n .hero {\r\n grid-template-columns: 1fr;\r\n padding: 7rem 1.5rem 4rem;\r\n }\r\n\r\n .hero::before { display: none; }\r\n .hero-gallery { height: 340px; }\r\n .hero-img-stack .img-card:nth-child(1) { width: 70%; height: 65%; top: 5%; left: 0; }\r\n .hero-img-stack .img-card:nth-child(3) { display: none; }\r\n\r\n section { padding: 4rem 1.5rem; }\r\n .portfolio { padding: 4rem 1.5rem; }\r\n\r\n .topics-section,\r\n .about-section {\r\n grid-template-columns: 1fr;\r\n gap: 3rem;\r\n }\r\n\r\n .portfolio-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n grid-auto-rows: 200px;\r\n }\r\n\r\n .p-item { grid-column: auto !important; grid-row: auto !important; }\r\n\r\n .project-item {\r\n grid-template-columns: 50px 1fr;\r\n }\r\n\r\n .project-thumb, .thumb-placeholder { display: none; }\r\n\r\n .contact-section { padding: 5rem 1.5rem; }\r\n footer { flex-direction: column; gap: 0.5rem; text-align: center; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2500\u2500 NAVIGATION \u2500\u2500 -->\r\n<nav role=\"navigation\" aria-label=\"Hoofdnavigatie\">\r\n <a href=\"#home\" class=\"nav-logo\" aria-label=\"Indra Bangaru \u2013 Home\">Indra Bangaru<\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#portfolio\">Werk<\/a><\/li>\r\n <li><a href=\"#projecten\">Projecten<\/a><\/li>\r\n <li><a href=\"#over\">Over mij<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n<\/nav>\r\n\r\n<!-- \u2500\u2500 HERO \u2500\u2500 -->\r\n<section id=\"home\" class=\"hero\" aria-label=\"Introductie\">\r\n <div class=\"hero-text reveal\">\r\n <span class=\"hero-eyebrow\">Social Illustrator \u00b7 Eindhoven<\/span>\r\n <h1 class=\"hero-title\">\r\n Indra<br>\r\n <em>Bangaru<\/em>\r\n <\/h1>\r\n <p class=\"hero-subtitle\">\r\n Ik vertaal idee\u00ebn, merken en verhalen naar krachtige, unieke visuals. Gespecialiseerd in diversiteit, migratie en maatschappelijke thema's.\r\n <\/p>\r\n <div class=\"hero-cta\">\r\n <a href=\"tel:+31643769046\" class=\"btn-primary\">Start een project<\/a>\r\n <a href=\"#portfolio\" class=\"btn-secondary\">Bekijk mijn werk<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-gallery\" aria-hidden=\"true\">\r\n <div class=\"hero-img-stack\" id=\"heroStack\">\r\n <!-- Card 1: large left -->\r\n <div class=\"img-card\">\r\n <div class=\"artwork-canvas\" id=\"heroCanvas1\">\r\n <div class=\"artwork-slide active\" style=\"background: #2B4A2E;\">\r\n <div class=\"art-placeholder\">Nowhere at Home<\/div>\r\n <\/div>\r\n <div class=\"artwork-slide\" style=\"background: #7A9B4F;\">\r\n <div class=\"art-placeholder\">Gathari<\/div>\r\n <\/div>\r\n <div class=\"artwork-slide\" style=\"background: #3A6B6B;\">\r\n <div class=\"art-placeholder\">NRC Illustraties<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Card 2: small right bottom -->\r\n <div class=\"img-card\">\r\n <div class=\"artwork-canvas\" id=\"heroCanvas2\">\r\n <div class=\"artwork-slide active\" style=\"background: #D44D6E;\">\r\n <div class=\"art-placeholder\">Cherrytale<\/div>\r\n <\/div>\r\n <div class=\"artwork-slide\" style=\"background: #C8902A;\">\r\n <div class=\"art-placeholder\">Editorial<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Card 3: small right top -->\r\n <div class=\"img-card\">\r\n <div class=\"artwork-canvas\" id=\"heroCanvas3\">\r\n <div class=\"artwork-slide active\" style=\"background: #C8902A;\">\r\n <div class=\"art-placeholder\">Linocut<\/div>\r\n <\/div>\r\n <div class=\"artwork-slide\" style=\"background: #8B4A4A;\">\r\n <div class=\"art-placeholder\">Penwork<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 MARQUEE \u2500\u2500 -->\r\n<div class=\"marquee-wrap\" aria-hidden=\"true\" role=\"presentation\">\r\n <div class=\"marquee-track\" id=\"marqueeTrack\">\r\n <span>Sociale illustratie<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Diversiteit<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Migratie<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Feminisme<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Mentale gezondheid<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Editorial<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Linocuts<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Antropologie<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Sociale illustratie<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Diversiteit<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Migratie<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Feminisme<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Mentale gezondheid<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Editorial<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Linocuts<\/span><span class=\"sep\">\u2726<\/span>\r\n <span>Antropologie<\/span><span class=\"sep\">\u2726<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u2500\u2500 PORTFOLIO GRID \u2500\u2500 -->\r\n<section id=\"portfolio\" class=\"portfolio\" aria-labelledby=\"portfolio-heading\">\r\n <div class=\"portfolio-header\">\r\n <div>\r\n <span class=\"section-label\">Portfolio<\/span>\r\n <h2 class=\"section-title\" id=\"portfolio-heading\">\r\n Geselecteerd <em>werk<\/em>\r\n <\/h2>\r\n <\/div>\r\n <div class=\"portfolio-filter\" role=\"group\" aria-label=\"Filter op categorie\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">Alles<\/button>\r\n <button class=\"filter-btn\" data-filter=\"social\">Sociaal<\/button>\r\n <button class=\"filter-btn\" data-filter=\"editorial\">Editorial<\/button>\r\n <button class=\"filter-btn\" data-filter=\"book\">Boek<\/button>\r\n <button class=\"filter-btn\" data-filter=\"print\">Print<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \r\n ELEMENTOR TIP: Vervang elke .p-item met een afbeeldingswidget.\r\n Voeg jouw illustraties toe als achtergrondafbeelding of <img>.\r\n De grid-column en grid-row CSS bepaalt de asymmetrische layout.\r\n -->\r\n <div class=\"portfolio-grid\" role=\"list\" aria-label=\"Portfolio werken\">\r\n\r\n <article class=\"p-item\" role=\"listitem\" data-cat=\"social\">\r\n <div class=\"p-item-color\" style=\"background: #2B4A2E;\">\r\n <div class=\"p-item-title-block\">Nowhere at Home<\/div>\r\n <div class=\"p-item-cat\">Afstudeerwerkstuk \u00b7 Migratie<\/div>\r\n <\/div>\r\n <div class=\"p-overlay\">\r\n <span style=\"font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;font-style:italic;\">Nowhere at Home<\/span>\r\n <span style=\"font-size:0.7rem;color:rgba(255,255,255,0.6);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.3rem;\">Linocut \u00b7 Pen \u00b7 Interview<\/span>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"p-item\" role=\"listitem\" data-cat=\"editorial\">\r\n <div class=\"p-item-color\" style=\"background: #D44D6E;\">\r\n <div class=\"p-item-title-block\">NRC Leven<\/div>\r\n <div class=\"p-item-cat\">Editorial \u00b7 Krant<\/div>\r\n <\/div>\r\n <div class=\"p-overlay\">\r\n <span style=\"font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;font-style:italic;\">NRC Leven<\/span>\r\n <span style=\"font-size:0.7rem;color:rgba(255,255,255,0.6);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.3rem;\">Weekelijks Editorial<\/span>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"p-item\" role=\"listitem\" data-cat=\"social\">\r\n <div class=\"p-item-color\" style=\"background: #8B3A5A;\">\r\n <div class=\"p-item-title-block\">Cherrytale<\/div>\r\n <div class=\"p-item-cat\">Vrouwenplatform \u00b7 Social media<\/div>\r\n <\/div>\r\n <div class=\"p-overlay\">\r\n <span style=\"font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;font-style:italic;\">Cherrytale<\/span>\r\n <span style=\"font-size:0.7rem;color:rgba(255,255,255,0.6);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.3rem;\">Animatie \u00b7 Design \u00b7 Educatief<\/span>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"p-item\" role=\"listitem\" data-cat=\"editorial\">\r\n <div class=\"p-item-color\" style=\"background: #4A6B2E;\">\r\n <div class=\"p-item-title-block\">NRC Cover<\/div>\r\n <div class=\"p-item-cat\">Editorial \u00b7 Cover<\/div>\r\n <\/div>\r\n <div class=\"p-overlay\">\r\n <span style=\"font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;font-style:italic;\">Vlinders<\/span>\r\n <span style=\"font-size:0.7rem;color:rgba(255,255,255,0.6);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.3rem;\">De scherven bijeenrapen<\/span>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"p-item\" role=\"listitem\" data-cat=\"book\">\r\n <div class=\"p-item-color\" style=\"background: #C8902A;\">\r\n <div class=\"p-item-title-block\">Gathari<\/div>\r\n <div class=\"p-item-cat\">Boekcover \u00b7 Educatief<\/div>\r\n <\/div>\r\n <div class=\"p-overlay\">\r\n <span style=\"font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;font-style:italic;\">Gathari<\/span>\r\n <span style=\"font-size:0.7rem;color:rgba(255,255,255,0.6);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.3rem;\">Hindostaanse roots<\/span>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"p-item\" role=\"listitem\" data-cat=\"print\">\r\n <div class=\"p-item-color\" style=\"background: #3D5C7A;\">\r\n <div class=\"p-item-title-block\">Nergens Thuis<\/div>\r\n <div class=\"p-item-cat\">Linocut \u00b7 Boek<\/div>\r\n <\/div>\r\n <div class=\"p-overlay\">\r\n <span style=\"font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;font-style:italic;\">Nergens Thuis<\/span>\r\n <span style=\"font-size:0.7rem;color:rgba(255,255,255,0.6);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.3rem;\">Linocut \u00b7 Vogel<\/span>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"p-item\" role=\"listitem\" data-cat=\"social\">\r\n <div class=\"p-item-color\" style=\"background: #5A2E4A;\">\r\n <div class=\"p-item-title-block\">Hindostaan<\/div>\r\n <div class=\"p-item-cat\">Culturele identiteit<\/div>\r\n <\/div>\r\n <div class=\"p-overlay\">\r\n <span style=\"font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;font-style:italic;\">Hindostaan of Hindoestaan?<\/span>\r\n <span style=\"font-size:0.7rem;color:rgba(255,255,255,0.6);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.3rem;\">Migratie \u00b7 Identiteit<\/span>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"p-item\" role=\"listitem\" data-cat=\"editorial\">\r\n <div class=\"p-item-color\" style=\"background: #2E4A6B;\">\r\n <div class=\"p-item-title-block\">India Kaart<\/div>\r\n <div class=\"p-item-cat\">Educatief \u00b7 Gathari<\/div>\r\n <\/div>\r\n <div class=\"p-overlay\">\r\n <span style=\"font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;font-style:italic;\">Kleurrijke India<\/span>\r\n <span style=\"font-size:0.7rem;color:rgba(255,255,255,0.6);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.3rem;\">Kaart \u00b7 Illustratie<\/span>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"p-item\" role=\"listitem\" data-cat=\"social\">\r\n <div class=\"p-item-color\" style=\"background: #6B4A2E;\">\r\n <div class=\"p-item-title-block\">Genditiviteit<\/div>\r\n <div class=\"p-item-cat\">Vrouwen \u00b7 Feminisme<\/div>\r\n <\/div>\r\n <div class=\"p-overlay\">\r\n <span style=\"font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;font-style:italic;\">Vrouwen & traditie<\/span>\r\n <span style=\"font-size:0.7rem;color:rgba(255,255,255,0.6);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.3rem;\">Cherrytale<\/span>\r\n <\/div>\r\n <\/article>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 TOPICS WORD CLOUD \u2500\u2500 -->\r\n<section class=\"topics-section\" aria-labelledby=\"topics-heading\">\r\n <div class=\"topics-visual\" aria-hidden=\"true\">\r\n <span class=\"topic-tag t1\">Diversiteit<\/span>\r\n <span class=\"topic-tag t2\">Migratie<\/span>\r\n <span class=\"topic-tag t3\"><em>Feminisme<\/em><\/span>\r\n <span class=\"topic-tag t4\">Sociale thema's<\/span>\r\n <span class=\"topic-tag t5\">Mentale gezondheid<\/span>\r\n <\/div>\r\n <div class=\"topics-text reveal\">\r\n <span class=\"section-label\">Thema's<\/span>\r\n <h2 class=\"section-title\" id=\"topics-heading\">\r\n Werk dat <em>iets<\/em><br>te zeggen heeft\r\n <\/h2>\r\n <p>\r\n Mijn werk gaat over de wereld om ons heen \u2014 de <strong>diversiteit aan culturen, achtergronden en ervaringen<\/strong> die ons allemaal vormen. Ik illustreer voor opdrachtgevers die meer willen dan een mooie visual.\r\n <\/p>\r\n <p>\r\n Of het nu gaat om een educatieve campagne, een boekomslag of een social media serie \u2014 ik denk mee over <strong>boodschap, doelgroep en impact<\/strong>.\r\n <\/p>\r\n <a href=\"tel:+31643769046\" class=\"btn-primary\" style=\"margin-top:1rem;\">Werk samen met mij \u2192<\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 PROJECTEN \u2500\u2500 -->\r\n<section id=\"projecten\" class=\"projects-section\" aria-labelledby=\"projects-heading\">\r\n <span class=\"section-label\">Geselecteerde projecten<\/span>\r\n <h2 class=\"section-title\" id=\"projects-heading\">Recent <em>werk<\/em><\/h2>\r\n\r\n <div class=\"projects-list\" role=\"list\">\r\n\r\n <a href=\"#\" class=\"project-item reveal\" role=\"listitem\" aria-label=\"Project: Nowhere at Home\">\r\n <span class=\"project-number\">01<\/span>\r\n <div class=\"project-info\">\r\n <div class=\"project-title\">Nowhere at Home<\/div>\r\n <div class=\"project-desc\">Afstudeerwerkstuk aan St. Joost over de effecten van migratie \u2014 interviews, linocuts en pentekeningen.<\/div>\r\n <div class=\"project-tags\">\r\n <span class=\"tag\">Linocut<\/span>\r\n <span class=\"tag\">Pen<\/span>\r\n <span class=\"tag\">Migratie<\/span>\r\n <span class=\"tag\">St. Joost<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"thumb-placeholder\" style=\"background:#2B4A2E;\">Artwork \u2192<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"project-item reveal\" role=\"listitem\" aria-label=\"Project: NRC Internship\">\r\n <span class=\"project-number\">02<\/span>\r\n <div class=\"project-info\">\r\n <div class=\"project-title\">NRC \u2014 Redactioneel illustrator<\/div>\r\n <div class=\"project-desc\">Stage bij NRC: wekelijkse editorial illustraties in de krant, waaronder covertekeningen voor de Leven-bijlage.<\/div>\r\n <div class=\"project-tags\">\r\n <span class=\"tag\">Editorial<\/span>\r\n <span class=\"tag\">Krant<\/span>\r\n <span class=\"tag\">NRC<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"thumb-placeholder\" style=\"background:#4A6B2E;\">Artwork \u2192<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"project-item reveal\" role=\"listitem\" aria-label=\"Project: Gathari\">\r\n <span class=\"project-number\">03<\/span>\r\n <div class=\"project-info\">\r\n <div class=\"project-title\">Gathari<\/div>\r\n <div class=\"project-desc\">Roman over een reis naar India met Hindostaanse wortels. Boekomslag, educatieve illustraties en linocuts.<\/div>\r\n <div class=\"project-tags\">\r\n <span class=\"tag\">Boekcover<\/span>\r\n <span class=\"tag\">Linocut<\/span>\r\n <span class=\"tag\">Educatief<\/span>\r\n <span class=\"tag\">India<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"thumb-placeholder\" style=\"background:#C8902A;\">Artwork \u2192<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"project-item reveal\" role=\"listitem\" aria-label=\"Project: Cherrytale\">\r\n <span class=\"project-number\">04<\/span>\r\n <div class=\"project-info\">\r\n <div class=\"project-title\">Cherrytale \u2014 Vrouwenplatform<\/div>\r\n <div class=\"project-desc\">Social media posts, huisstijlontwerp, animaties en educatieve illustraties voor een vrouwengericht platform.<\/div>\r\n <div class=\"project-tags\">\r\n <span class=\"tag\">Social media<\/span>\r\n <span class=\"tag\">Animatie<\/span>\r\n <span class=\"tag\">Design<\/span>\r\n <span class=\"tag\">Feminisme<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"thumb-placeholder\" style=\"background:#8B3A5A;\">Artwork \u2192<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"project-item reveal\" role=\"listitem\" aria-label=\"Project: Nergens Thuis \u2013 boek\">\r\n <span class=\"project-number\">05<\/span>\r\n <div class=\"project-info\">\r\n <div class=\"project-title\">Nergens Thuis<\/div>\r\n <div class=\"project-desc\">Samenwerking met Kaysri Bangaru. Linocut-illustraties voor een boek over culturele identiteit en thuisloosheid.<\/div>\r\n <div class=\"project-tags\">\r\n <span class=\"tag\">Linocut<\/span>\r\n <span class=\"tag\">Boek<\/span>\r\n <span class=\"tag\">Samenwerking<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"thumb-placeholder\" style=\"background:#3D5C7A;\">Artwork \u2192<\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 PRESS \/ CLIENTS \u2500\u2500 -->\r\n<div class=\"press-section\" aria-label=\"Gepubliceerd in\">\r\n <p class=\"press-label\">Gepubliceerd in & gewerkt voor<\/p>\r\n <div class=\"press-logos\">\r\n <span class=\"press-logo\" style=\"font-size:1.8rem;\">nrc<\/span>\r\n <span class=\"press-logo serif\">St. Joost<\/span>\r\n <span class=\"press-logo\">Cherrytale<\/span>\r\n <span class=\"press-logo serif\">Gathari<\/span>\r\n <span class=\"press-logo\">@indrasdrafts<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u2500\u2500 OVER MIJ \u2500\u2500 -->\r\n<section id=\"over\" class=\"about-section\" aria-labelledby=\"about-heading\">\r\n <div class=\"about-photo-wrap\">\r\n <div class=\"about-photo-frame\">\r\n <!-- \r\n ELEMENTOR: Vervang dit placeholder met jouw portretfoto.\r\n Aanbevolen formaat: 420 \u00d7 480 px\r\n -->\r\n <div class=\"about-photo-placeholder\">\r\n Portretfoto hier\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"about-text reveal\">\r\n <span class=\"section-label\">Over mij<\/span>\r\n <h2 class=\"section-title\" id=\"about-heading\">\r\n Illustrator met <em>een verhaal<\/em>\r\n <\/h2>\r\n <p>\r\n Ik ben Indra Bangaru, opgegroeid in Eindhoven. De diversiteit in de wereld fascineert me dagelijks \u2014 de verschillende patronen en representaties van culturen. Ik ben opgegroeid in een cultureel divers milieu, en dat vormt een belangrijk deel van mijn perspectief als illustrator.\r\n <\/p>\r\n <p>\r\n Mijn fascinatie voor sociale kwesties, tradities en antropologie is ook onderdeel hiervan. Ik wil dat mensen vanuit allerlei achtergronden zichzelf kunnen herkennen in mijn illustraties.\r\n <\/p>\r\n <p>\r\n <strong>Ik ben bijzonder goed in het omzetten van gevoel in kunstwerken.<\/strong>\r\n <\/p>\r\n\r\n <div class=\"about-stats\">\r\n <div class=\"stat-block\">\r\n <div class=\"stat-num\">5+<\/div>\r\n <div class=\"stat-label\">Jaar ervaring<\/div>\r\n <\/div>\r\n <div class=\"stat-block\">\r\n <div class=\"stat-num\">20+<\/div>\r\n <div class=\"stat-label\">Projecten gerealiseerd<\/div>\r\n <\/div>\r\n <div class=\"stat-block\">\r\n <div class=\"stat-num\">NRC<\/div>\r\n <div class=\"stat-label\">Gepubliceerd in<\/div>\r\n <\/div>\r\n <div class=\"stat-block\">\r\n <div class=\"stat-num\">BA<\/div>\r\n <div class=\"stat-label\">St. Joost, Breda<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 CONTACT \u2500\u2500 -->\r\n<section id=\"contact\" class=\"contact-section\" aria-labelledby=\"contact-heading\">\r\n <span class=\"section-label\">Contact<\/span>\r\n <h2 class=\"section-title\" id=\"contact-heading\">\r\n Laten we <em>samen<\/em><br>iets moois maken\r\n <\/h2>\r\n <p class=\"contact-subtitle\">\r\n Heb je een project, samenwerking of idee? Ik denk graag met je mee.\r\n <\/p>\r\n\r\n <div class=\"contact-links\">\r\n <a href=\"mailto:indrabangaru1@gmail.com\" class=\"contact-email\" aria-label=\"Stuur een email naar Indra Bangaru\">\r\n indrabangaru1@gmail.com\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"contact-cta-group\">\r\n <a href=\"tel:+31643769046\" class=\"btn-call\" aria-label=\"Bel Indra Bangaru\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.66A2 2 0 012.18 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 7.91a16 16 0 006.29 6.29l1.28-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7a2 2 0 011.72 2.02z\"\/><\/svg>\r\n +31 6 43 76 90 46\r\n <\/a>\r\n <a href=\"https:\/\/www.instagram.com\/indrasdrafts\" class=\"btn-ig\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Bekijk Instagram @indrasdrafts\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"\/><path d=\"M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z\"\/><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/><\/svg>\r\n @indrasdrafts\r\n <\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500 FOOTER \u2500\u2500 -->\r\n<footer role=\"contentinfo\">\r\n <span class=\"footer-brand\">Indra Bangaru \u2014 Illustrator<\/span>\r\n <span class=\"footer-copy\">\u00a9 2025 indrasdrafts.nl \u00b7 Eindhoven, Nederland<\/span>\r\n<\/footer>\r\n\r\n<script>\r\n\/* \u2500\u2500 Scroll reveal \u2500\u2500 *\/\r\nconst reveals = document.querySelectorAll('.reveal');\r\nconst io = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); }\r\n });\r\n}, { threshold: 0.15 });\r\nreveals.forEach(el => io.observe(el));\r\n\r\n\/* \u2500\u2500 Hero artwork carousel \u2500\u2500 *\/\r\nfunction cycleSlides(canvasId) {\r\n const canvas = document.getElementById(canvasId);\r\n if (!canvas) return;\r\n const slides = canvas.querySelectorAll('.artwork-slide');\r\n let current = 0;\r\n setInterval(() => {\r\n slides[current].classList.remove('active');\r\n current = (current + 1) % slides.length;\r\n slides[current].classList.add('active');\r\n }, 3000 + Math.random() * 1000);\r\n}\r\n\r\ncycleSlides('heroCanvas1');\r\nsetTimeout(() => cycleSlides('heroCanvas2'), 1200);\r\nsetTimeout(() => cycleSlides('heroCanvas3'), 2400);\r\n\r\n\/* \u2500\u2500 Portfolio filter \u2500\u2500 *\/\r\nconst filterBtns = document.querySelectorAll('.filter-btn');\r\nfilterBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n filterBtns.forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n const filter = btn.dataset.filter;\r\n document.querySelectorAll('.p-item').forEach(item => {\r\n if (filter === 'all' || item.dataset.cat === filter) {\r\n item.style.opacity = '1';\r\n item.style.pointerEvents = 'auto';\r\n } else {\r\n item.style.opacity = '0.25';\r\n item.style.pointerEvents = 'none';\r\n }\r\n });\r\n });\r\n});\r\n\r\n\/* \u2500\u2500 Subtle parallax on hero cards \u2500\u2500 *\/\r\ndocument.addEventListener('mousemove', (e) => {\r\n const x = (e.clientX \/ window.innerWidth - 0.5) * 12;\r\n const y = (e.clientY \/ window.innerHeight - 0.5) * 8;\r\n const cards = document.querySelectorAll('.img-card');\r\n cards.forEach((card, i) => {\r\n const depth = 1 + i * 0.4;\r\n card.style.transform = `rotate(${i === 0 ? -2 : i === 1 ? 1.5 : 3}deg) translate(${x * depth * 0.1}px, ${y * depth * 0.1}px)`;\r\n });\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Indra Bangaru \u2013 Illustrator & Social Illustrator | indrasdrafts.nl Indra Bangaru Werk Projecten Over mij Contact Social Illustrator \u00b7 Eindhoven Indra Bangaru Ik vertaal idee\u00ebn, merken en verhalen naar krachtige, unieke visuals. Gespecialiseerd in diversiteit, migratie en maatschappelijke thema’s. Start een project Bekijk mijn werk Nowhere at Home Gathari NRC Illustraties Cherrytale Editorial Linocut Penwork […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/indrasdrafts.nl\/index.php?rest_route=\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/indrasdrafts.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/indrasdrafts.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/indrasdrafts.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/indrasdrafts.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"version-history":[{"count":16,"href":"https:\/\/indrasdrafts.nl\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/indrasdrafts.nl\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/indrasdrafts.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}