{"id":2,"date":"2026-05-12T16:14:45","date_gmt":"2026-05-12T16:14:45","guid":{"rendered":"https:\/\/vincenzo.co.za\/?page_id=2"},"modified":"2026-05-12T16:22:03","modified_gmt":"2026-05-12T16:22:03","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/vincenzo.co.za\/","title":{"rendered":"Home"},"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\n\n\n\n\nVINCENZO \u2014 Art Director<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap\" rel=\"stylesheet\">\n<style>\n*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}\n:root{\n --gold:#c9a84c;\n --gold-l:#e8c97a;\n --s1bg:#e8e6e1; --s1tx:#1a1a1a;\n --s2bg:#1a1a1a; --s2tx:#e8e6e1;\n --s3bg:#f0ede8; --s3tx:#1a1a1a;\n --s4bg:#1a1a1a; --s4tx:#e8e6e1;\n --s5bg:#0d0d0d; --s5tx:#e8e6e1;\n}\nhtml,body{width:100%;height:100%;overflow:hidden;}\nbody{font-family:'DM Sans',sans-serif;font-weight:300;cursor:none;background:var(--s1bg);}\n\n\/* CURSOR *\/\n#cur{position:fixed;width:12px;height:12px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1),background .25s;}\n#cur.big{width:52px;height:52px;background:var(--gold);opacity:.7;}\n#cur.inv{background:var(--gold-l);}\n\n\/* NAV *\/\nnav{position:fixed;top:0;left:0;right:0;z-index:200;padding:1.8rem 4rem;display:flex;justify-content:space-between;align-items:center;}\n.nl{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.15em;color:var(--gold);text-decoration:none;}\n.nr{display:flex;gap:2.5rem;list-style:none;}\n.nr a{color:var(--gold);text-decoration:none;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;opacity:.65;transition:opacity .35s ease;}\n.nr a:hover{opacity:1;}\n\n\/* ZOOM OVERLAY *\/\n#zo{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;background:transparent;}\n#zt{font-family:'Bebas Neue',sans-serif;font-size:11vw;line-height:1;letter-spacing:.02em;white-space:nowrap;transform:scale(1);transform-origin:center center;}\n\n\/* SECTIONS *\/\n.sec{position:fixed;inset:0;opacity:0;pointer-events:none;overflow:hidden;z-index:10;transition:opacity .15s ease;}\n.sec.on{opacity:1;pointer-events:all;}\n\n\/* ===== S1 HERO ===== *\/\n#s1{background:var(--s1bg);}\n.h-wrap{position:absolute;inset:0;}\n.h-sharp,.h-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;}\n.h-sharp{z-index:1;image-rendering:crisp-edges;}\n.h-blur{z-index:2;opacity:0 !important;}\n#bc{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;image-rendering:crisp-edges;}\n.h-ov{display:none;}\n.h-con{position:absolute;z-index:5;bottom:8rem;left:4rem;right:4rem;}\n.h-eye{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;opacity:0;animation:fu .8s .4s forwards;}\n.h-nm{font-family:'Bebas Neue',sans-serif;line-height:.88;overflow:hidden;}\n.h-l1{font-size:clamp(6rem,15vw,18rem);display:block;opacity:0;transform:translateY(108%);animation:lu 1.1s cubic-bezier(.16,1,.3,1) .55s forwards;color:#1a1a1a;text-shadow:0 2px 20px rgba(232,230,225,.4);}\n.h-l2{font-size:clamp(1.4rem,2.8vw,3.8rem);letter-spacing:.08em;display:block;opacity:0;transform:translateY(108%);animation:lu 1.1s cubic-bezier(.16,1,.3,1) .75s forwards;color:var(--gold);}\n.h-sub{margin-top:2rem;display:flex;justify-content:space-between;align-items:flex-end;opacity:0;animation:fu .8s 1.1s forwards;}\n.h-tl{font-size:clamp(.78rem,1vw,.92rem);color:rgba(26,26,26,.85);line-height:1.85;max-width:290px;}\n.h-sc{position:absolute;bottom:5rem;left:50%;transform:translateX(-50%);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#1a1a1a;display:flex;flex-direction:column;align-items:center;gap:.4rem;white-space:nowrap;z-index:6;}\n.scl{width:1px;height:40px;background:#1a1a1a;}\n.h-hint{position:absolute;z-index:5;bottom:2rem;left:3rem;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.9;animation:pulse 2s infinite;}\n\n\/* ===== S2 ABOUT ===== *\/\n#s2{background:var(--s2bg);display:flex;align-items:center;justify-content:center;padding:5rem 4rem;}\n.a-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;max-width:1200px;width:100%;}\n.a-tag{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;opacity:0;}\n.a-hl{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.5rem,7.5vw,8.5rem);line-height:.88;color:var(--s2tx);overflow:hidden;}\n.a-w{display:block;opacity:0;transform:translateY(100%);}\n.a-w.gd{color:var(--gold);}\n.a-body{opacity:0;}\n.a-body p{font-size:clamp(.82rem,1.05vw,.97rem);line-height:1.92;color:rgba(232,230,225,.72);margin-bottom:1.2rem;}\n.a-body p strong{color:var(--s2tx);font-weight:500;}\n\n\/* ===== S3 WORK ===== *\/\n#s3{background:var(--s3bg);overflow-y:auto;padding:7rem 4rem 4rem;}\n.wh{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(26,26,26,.1);padding-top:2rem;margin-bottom:5rem;}\n.w-hl{font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,9vw,10rem);line-height:.88;color:var(--s3tx);overflow:hidden;}\n.w-hl span{display:block;opacity:0;transform:translateY(100%);}\n.wc{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,26,26,.55);}\n.wg{display:flex;flex-direction:column;gap:5rem;}\n.wi{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);}\n.wi.vis{opacity:1;transform:translateY(0);}\n.wi:nth-child(even){direction:rtl;}\n.wi:nth-child(even)>*{direction:ltr;}\n.wt{position:relative;overflow:hidden;aspect-ratio:16\/10;background:#1a1a1a;}\n.wt img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transform:scale(1.18);transition:transform .85s cubic-bezier(.16,1,.3,1);}\n.wt:hover img{transform:scale(1.04);}\n.wtg{position:absolute;top:1rem;left:1rem;background:var(--gold);color:#fff;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;padding:.28rem .65rem;font-weight:500;}\n.wi-info{padding:1rem 0;}\n.wi-ag{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem;}\n.wi-nm{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,3.8vw,4.2rem);line-height:.92;color:var(--s3tx);margin-bottom:.9rem;}\n.wi-ds{font-size:.8rem;color:rgba(26,26,26,.62);line-height:1.8;max-width:360px;margin-bottom:1.4rem;}\n.wi-lk{display:inline-flex;align-items:center;gap:.55rem;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--s3tx);text-decoration:none;border-bottom:1px solid rgba(26,26,26,.2);padding-bottom:.28rem;transition:border-color .2s,gap .2s,color .2s;}\n.wi-lk:hover{border-color:var(--gold);color:var(--gold);gap:.9rem;}\n\n\/* ===== S4 HISTORY ===== *\/\n#s4{background:var(--s4bg);display:flex;align-items:center;justify-content:center;padding:5rem 4rem;}\n.hi{max-width:980px;width:100%;}\n.hh{border-top:1px solid rgba(232,230,225,.07);padding-top:2rem;margin-bottom:4rem;display:flex;justify-content:space-between;align-items:baseline;}\n.h-hl{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.5rem,7.5vw,8.5rem);line-height:.88;color:var(--s4tx);overflow:hidden;}\n.h-hl span{display:block;opacity:0;transform:translateY(100%);}\n.hl{list-style:none;}\n.hli{position:relative;padding:1.8rem 0;border-bottom:1px solid rgba(232,230,225,.05);overflow:hidden;cursor:default;transition:border-color .4s ease;}\n.hli:hover{border-color:var(--gold);}\n.hbg{position:absolute;inset:0;opacity:0;transition:opacity .5s;z-index:0;}\n.hli:hover .hbg{opacity:1;}\n.hr{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto auto;align-items:start;gap:2rem;}\n.h-ag{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.8rem,3.5vw,3.2rem);line-height:1;color:var(--s4tx);transition:color .3s;}\n.hli:hover .h-ag{color:var(--gold);}\n.h-ro{font-size:.68rem;color:rgba(232,230,225,.5);text-align:right;line-height:1.6;padding-top:.35rem;transition:color .3s;}\n.hli:hover .h-ro{color:rgba(232,230,225,.72);}\n.h-yr{font-size:.6rem;color:var(--gold);letter-spacing:.12em;white-space:nowrap;text-align:right;padding-top:.55rem;}\n.h-de{position:relative;z-index:1;font-size:.76rem;color:rgba(232,230,225,.45);line-height:1.78;margin-top:.55rem;max-width:560px;transition:color .3s;}\n.hli:hover .h-de{color:rgba(232,230,225,.62);}\n\n\/* ===== S5 CONTACT ===== *\/\n#s5{background:var(--s5bg);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:4.5rem 4rem 0;}\n.c-tag{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem;opacity:0;transform:translateY(12px);transition:opacity .6s .1s ease,transform .6s .1s ease;}\n.c-tag.cr-visible{opacity:1;transform:translateY(0);}\n.c-hl{font-family:'Bebas Neue',sans-serif;font-size:clamp(4.5rem,12vw,14rem);line-height:.84;text-align:center;color:var(--s5tx);overflow:hidden;margin-bottom:3rem;}\n.c-hl span{display:block;opacity:0;transform:translateY(100%);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}\n.c-hl.cr-visible span:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.15s;}\n.c-hl.cr-visible span:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.3s;}\n.c-hl.cr-visible span:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.45s;}\n.c-icons{display:flex;gap:2.8rem;align-items:center;margin-bottom:3.5rem;opacity:0;transform:translateY(16px);transition:opacity .7s .65s ease,transform .7s .65s ease;}\n.c-icons.cr-visible{opacity:1;transform:translateY(0);}\n.ci{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-decoration:none;color:var(--s5tx);opacity:.35;transition:opacity .25s,color .25s;}\n.ci:hover{opacity:1;color:var(--gold);}\n.ci svg{width:24px;height:24px;fill:currentColor;}\n.ci span{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;}\n\n\/* GALLERY *\/\n.g-wrap{width:100%;border-top:1px solid rgba(232,230,225,.05);padding-top:1.8rem;}\n.g-lbl{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(232,230,225,.45);text-align:center;margin-bottom:1.4rem;}\n.g-out{position:relative;width:100%;overflow:hidden;}\n.g-out::before,.g-out::after{content:'';position:absolute;top:0;bottom:0;width:18%;z-index:2;pointer-events:none;}\n.g-out::before{left:0;background:linear-gradient(to right,var(--s5bg),transparent);}\n.g-out::after{right:0;background:linear-gradient(to left,var(--s5bg),transparent);}\n.g-strip{display:flex;gap:.7rem;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none;cursor:grab;user-select:none;}\n.g-strip::-webkit-scrollbar{display:none;}\n\/* LIGHTBOX *\/\n#lb{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;gap:1.2rem;pointer-events:none;transition:background .35s ease;}\n#lb.open{background:rgba(0,0,0,.92);pointer-events:all;}\n#lb-img{max-width:82vw;max-height:88vh;object-fit:contain;transform:scale(0.08);opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s ease;border-radius:2px;flex-shrink:0;}\n#lb.open #lb-img{transform:scale(1);opacity:1;}\n#lb-close{position:absolute;top:1.5rem;right:2rem;font-size:1.8rem;color:rgba(232,230,225,.6);cursor:none;transition:color .2s,opacity .3s;font-family:sans-serif;font-weight:300;line-height:1;opacity:0;pointer-events:none;}\n#lb-close:hover{color:var(--gold);}\n#lb.open #lb-close{opacity:1;pointer-events:all;}\n#lb-prev,#lb-next{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:rgba(13,13,13,.7);border:1px solid rgba(201,168,76,.35);color:var(--gold);font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:none;transition:background .2s,border-color .2s,opacity .3s;opacity:0;pointer-events:none;}\n#lb-prev:hover,#lb-next:hover{background:rgba(201,168,76,.18);border-color:var(--gold);}\n#lb.open #lb-prev,#lb.open #lb-next{opacity:1;pointer-events:all;}\n.gi{flex:0 0 290px;height:182px;overflow:hidden;filter:grayscale(65%) brightness(.55);transition:filter .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);cursor:grab;}\n.gi.cf{filter:grayscale(0%) brightness(1);transform:scale(1.06);}\n.gi img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transform:scale(1.18);}\nfooter{width:100%;border-top:1px solid rgba(232,230,225,.1);padding:1.4rem 0;display:flex;flex-direction:column;gap:1.5rem;font-size:.58rem;color:rgba(232,230,225,.4);letter-spacing:.1em;text-transform:uppercase;margin-top:1.4rem;background:#0d0d0d;}\n.footer-top{display:flex;justify-content:space-between;width:100%;}\n.icon-strip{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;width:100%;padding-bottom:.5rem;}\n.icon-strip img{height:40px;width:40px;object-fit:contain;opacity:.7;transition:opacity .25s,transform .25s;border-radius:8px;}\n.icon-strip img:hover{opacity:1;transform:scale(1.12);}\n\n\/* KEYFRAMES *\/\n@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}\n@keyframes lu{from{opacity:0;transform:translateY(108%)}to{opacity:1;transform:translateY(0)}}\n@keyframes pulse{0%,100%{opacity:.22}50%{opacity:.58}}\n\n\/* SECTION ENTER ANIMS *\/\n.s-in .a-tag{animation:fu .6s .08s forwards;}\n.s-in .a-w:nth-child(1){animation:lu .8s .12s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .a-w:nth-child(2){animation:lu .8s .26s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .a-w:nth-child(3){animation:lu .8s .4s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .a-w:nth-child(4){animation:lu .8s .54s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .a-body{animation:fu .75s .65s forwards;}\n.s-in .w-hl span:nth-child(1){animation:lu .8s .08s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .w-hl span:nth-child(2){animation:lu .8s .22s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .h-hl span:nth-child(1){animation:lu .8s .08s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .h-hl span:nth-child(2){animation:lu .8s .22s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .c-tag{animation:fu .6s .08s forwards;}\n.s-in .c-hl span:nth-child(1){animation:lu .9s .12s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .c-hl span:nth-child(2){animation:lu .9s .28s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .c-hl span:nth-child(3){animation:lu .9s .44s cubic-bezier(.16,1,.3,1) forwards;}\n.s-in .c-icons{animation:fu .7s .65s forwards;}\n\n@media(max-width:768px){\n .a-grid,.wi{grid-template-columns:1fr;}\n .wi:nth-child(even){direction:ltr;}\n nav{padding:1rem 1.5rem;}\n .nr{display:none;}\n #s2,#s3,#s4,#s5{padding:5rem 1.5rem 2rem;}\n .hr{grid-template-columns:1fr;}\n}\n<\/style>\n<\/head>\n<body>\n\n<div id=\"cur\"><\/div>\n\n<nav>\n <a href=\"#\" class=\"nl\" onclick=\"gto(0);return false;\">VVB<\/a>\n <ul class=\"nr\">\n <li><a href=\"#\" onclick=\"gto(1);return false;\">About<\/a><\/li>\n <li><a href=\"#\" onclick=\"gto(2);return false;\">Work<\/a><\/li>\n <li><a href=\"#\" onclick=\"gto(3);return false;\">History<\/a><\/li>\n <li><a href=\"#\" onclick=\"gto(3);return false;\">Contact<\/a><\/li>\n <\/ul>\n<\/nav>\n\n<div id=\"zo\"><div id=\"zt\"><\/div><\/div>\n\n<!-- S1 HERO -->\n<div id=\"s1\" class=\"sec on\">\n <div class=\"h-wrap\">\n <img decoding=\"async\" class=\"h-sharp\" src=\"images\/hero\/reveal.jpg\" alt=\"Vincenzo\">\n <img decoding=\"async\" class=\"h-blur\" id=\"blurImg\" src=\"images\/hero\/blur.jpg\" alt=\"\">\n <canvas id=\"bc\"><\/canvas>\n <\/div>\n <div class=\"h-ov\"><\/div>\n <div class=\"h-con\">\n <p class=\"h-eye\">Creative Director  ·  Art Director  ·  Concept Creator<\/p>\n <h1 class=\"h-nm\">\n <span class=\"h-l1\">VINCENZO<\/span>\n <span class=\"h-l2\">AKA VINCENT VAN DER BYL<\/span>\n <\/h1>\n <div class=\"h-sub\">\n <p class=\"h-tl\">A decade of real world advertising.<br>Ideas that sell. Work that moves.<\/p>\n <\/div>\n <div class=\"h-sc\"><span class=\"scl\"><\/span>Scroll to explore<\/div>\n <\/div>\n <p class=\"h-hint\">Move cursor over image to reveal<\/p>\n<\/div>\n\n<!-- S2 ABOUT -->\n<div id=\"s2\" class=\"sec\">\n <div class=\"a-grid\">\n <div>\n <p class=\"a-tag\">About Creative<\/p>\n <h2 class=\"a-hl\">\n <span class=\"a-w\">BUILT FROM<\/span>\n <span class=\"a-w\">THE REAL<\/span>\n <span class=\"a-w gd\">WORLD.<\/span>\n <\/h2>\n <\/div>\n <div class=\"a-body\">\n <p>They will tell you I lack experience. What they mean is I lack years in a seat.<\/p>\n <p>I started on real shoots, with real clients, under people who built real businesses. No safety net. No brief handed down. Just the work and what it needed to do.<\/p>\n <p>A decade later I have pitched, budgeted, produced and delivered across some of the biggest brands in South Africa. The difference between me and someone who grew up in agency is simple. <strong>I know what it costs when the work does not sell.<\/strong><\/p>\n <p>Creativity without commercial impact is decoration. I do not decorate. I build ideas that move people and deliver for the people who paid for them.<\/p>\n <p><strong>That is not ego. It is experience.<\/strong><\/p>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- S3 WORK -->\n<div id=\"s3\" class=\"sec\">\n <div class=\"wh\">\n <h2 class=\"w-hl\"><span>SELECTED<\/span><span>WORK<\/span><\/h2>\n <span class=\"wc\">Career Highlights   2021 \u2014 2025<\/span>\n <\/div>\n <div class=\"wg\">\n <div class=\"wi\">\n <div class=\"wt\"><img decoding=\"async\" src=\"images\/work\/betking.png\" alt=\"BetKing\"><span class=\"wtg\">Film \/ TVC<\/span><\/div>\n <div class=\"wi-info\">\n <p class=\"wi-ag\">Grid Worldwide JHB<\/p>\n <h3 class=\"wi-nm\">THAT WORLD<br>KUP FEELING<\/h3>\n <p class=\"wi-ds\">Off the BetKing \"That Feeling\" platform, we launched a World Cup campaign that captured the raw emotion of the game and took it to global audiences.<\/p>\n <a href=\"https:\/\/www.behance.net\/gallery\/216028813\/BETKING-Football-Worldcup-TVC\" target=\"_blank\" class=\"wi-lk\">View on Behance →<\/a>\n <\/div>\n <\/div>\n <div class=\"wi\">\n <div class=\"wt\"><img decoding=\"async\" src=\"images\/work\/okgroup.png\" alt=\"OK Group\"><span class=\"wtg\">TVC \/ Retail<\/span><\/div>\n <div class=\"wi-info\">\n <p class=\"wi-ag\">Ogilvy Cape Town<\/p>\n <h3 class=\"wi-nm\">WIN A<br>BAKKIE TVC<\/h3>\n <p class=\"wi-ds\">Using the hype of an annual event to build excitement around a bakkie giveaway for OK Group across South Africa and Swaziland.<\/p>\n <a href=\"https:\/\/www.behance.net\/gallery\/135870585\/OK-Group-Win-A-Bakkie-Season-(SASwazi)\" target=\"_blank\" class=\"wi-lk\">View on Behance →<\/a>\n <\/div>\n <\/div>\n <div class=\"wi\">\n <div class=\"wt\"><img decoding=\"async\" src=\"images\/work\/cansa.png\" alt=\"CANSA\"><span class=\"wtg\">Purpose \/ OOH<\/span><\/div>\n <div class=\"wi-info\">\n <p class=\"wi-ag\">Grid Cape Town<\/p>\n <h3 class=\"wi-nm\">CHECK THEM<br>OUT<\/h3>\n <p class=\"wi-ds\">A campaign that used fruit and stickers to highlight breast cancer awareness. While customers checked out their produce, they were reminded to check themselves.<\/p>\n <a href=\"https:\/\/www.behance.net\/gallery\/235859795\/Breast-Cancer-Awareness-Campaign\" target=\"_blank\" class=\"wi-lk\">View on Behance →<\/a>\n <\/div>\n <\/div>\n <div class=\"wi\">\n <div class=\"wt\"><img decoding=\"async\" src=\"images\/work\/loeries.png\" alt=\"Loeries\"><span class=\"wtg\">Brand Identity<\/span><\/div>\n <div class=\"wi-info\">\n <p class=\"wi-ag\">Grid Cape Town<\/p>\n <h3 class=\"wi-nm\">BLOOD SWEAT<br>AND TEARS<\/h3>\n <p class=\"wi-ds\">A rebrand and relaunch of the Loeries Awards. Loeries Silver winner. Collateral that showed how hard work and craft pays off.<\/p>\n <a href=\"https:\/\/www.behance.net\/gallery\/235859461\/Loeries-refresh-2023\" target=\"_blank\" class=\"wi-lk\">View on Behance →<\/a>\n <\/div>\n <\/div>\n <div class=\"wi\">\n <div class=\"wt\"><img decoding=\"async\" src=\"images\/work\/rmb.png\" alt=\"RMB\"><span class=\"wtg\">Campaign<\/span><\/div>\n <div class=\"wi-info\">\n <p class=\"wi-ag\">Grid Cape Town<\/p>\n <h3 class=\"wi-nm\">TALENT IS HOW<br>WE DO BOTH<\/h3>\n <p class=\"wi-ds\">Showcasing how RMB Private Wealth seamlessly integrates two key business elements to drive exceptional client outcomes.<\/p>\n <a href=\"https:\/\/www.behance.net\/gallery\/235858277\/RMB-Private-Wealth-Talent-is-how-we-do-both\" target=\"_blank\" class=\"wi-lk\">View on Behance →<\/a>\n <\/div>\n <\/div>\n <div class=\"wi\">\n <div class=\"wt\"><img decoding=\"async\" src=\"images\/work\/arts.png\" alt=\"Standard Bank Arts\"><span class=\"wtg\">Brand System<\/span><\/div>\n <div class=\"wi-info\">\n <p class=\"wi-ag\">M+C Saatchi Abel JHB<\/p>\n <h3 class=\"wi-nm\">STANDARD BANK<br>ARTS<\/h3>\n <p class=\"wi-ds\">Rebrand and redesign of the Standard Bank arts portfolio. Three major events launched: National Arts Festival, SB ArtsLAB and Joy of Jazz.<\/p>\n <a href=\"https:\/\/www.behance.net\/gallery\/239883167\/Standard-Bank-Brand-Arts-Sponsorship\" target=\"_blank\" class=\"wi-lk\">View on Behance →<\/a>\n <\/div>\n <\/div>\n <div class=\"wi\">\n <div class=\"wt\"><img decoding=\"async\" src=\"images\/work\/dstv.png\" alt=\"DStv\"><span class=\"wtg\">Digital \/ Retail<\/span><\/div>\n <div class=\"wi-info\">\n <p class=\"wi-ag\">Grid Worldwide<\/p>\n <h3 class=\"wi-nm\">DSTV FESTIVE<br>CAMPAIGN<\/h3>\n <p class=\"wi-ds\">Ad of the month winner. Retail heavy comms driving awareness of new DStv products and pushing signups across the festive season.<\/p>\n <a href=\"https:\/\/www.behance.net\/gallery\/235859097\/DSTV-Festive-campaign-2024\" target=\"_blank\" class=\"wi-lk\">View on Behance →<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- S4 HISTORY + CONTACT + GALLERY (one scrollable dark section) -->\n<div id=\"s4\" class=\"sec\" style=\"overflow-y:auto;display:block;padding:7rem 4rem 0;background:#1a1a1a;\">\n <!-- HISTORY -->\n <div class=\"hi\" style=\"max-width:980px;margin:0 auto 6rem;\">\n <div class=\"hh\">\n <h2 class=\"h-hl\"><span>WORK<\/span><span>HISTORY<\/span><\/h2>\n <span class=\"wc\" style=\"color:rgba(232,230,225,.25)\">2016 \u2014 2025<\/span>\n <\/div>\n <ul class=\"hl\">\n <li class=\"hli\">\n <div class=\"hbg\" style=\"background:linear-gradient(105deg,rgba(201,168,76,.1),transparent 55%);\"><\/div>\n <div class=\"hr\"><p class=\"h-ag\">M+C Saatchi Abel<\/p><div class=\"h-ro\">Mid Concept Creative<br>Johannesburg<\/div><div class=\"h-yr\">2025<\/div><\/div>\n <p class=\"h-de\">Joined the Standard Bank Arts portfolio, reshaped the visual direction within six months and delivered a complete design system across three flagship events including Joy of Jazz.<\/p>\n <\/li>\n <li class=\"hli\">\n <div class=\"hbg\" style=\"background:linear-gradient(105deg,rgba(201,168,76,.1),transparent 55%);\"><\/div>\n <div class=\"hr\"><p class=\"h-ag\">Grid Worldwide<\/p><div class=\"h-ro\">Concept Creative \/ Art Director<br>Cape Town + Johannesburg<\/div><div class=\"h-yr\">2022 \u2014 2025<\/div><\/div>\n <p class=\"h-de\">One of the first creatives in the Cape Town office. Worked across JHB and CPT on RMB, FNB, Absa, BetKing, Loeries and MultiChoice Group. Helped shape agency culture through creative excellence committees.<\/p>\n <\/li>\n <li class=\"hli\">\n <div class=\"hbg\" style=\"background:linear-gradient(105deg,rgba(201,168,76,.1),transparent 55%);\"><\/div>\n <div class=\"hr\"><p class=\"h-ag\">Ogilvy SA<\/p><div class=\"h-ro\">Graduate Art Director<br>Johannesburg<\/div><div class=\"h-yr\">2021 \u2014 2022<\/div><\/div>\n <p class=\"h-de\">Graduate Art Director on Castle, Carling Black Label, Audi, PEP and OK Group. Contributed to brainstorming and campaign rollouts while absorbing everything possible from world class creative leadership.<\/p>\n <\/li>\n <li class=\"hli\">\n <div class=\"hbg\" style=\"background:linear-gradient(105deg,rgba(201,168,76,.1),transparent 55%);\"><\/div>\n <div class=\"hr\"><p class=\"h-ag\">UJFM 95.4<\/p><div class=\"h-ro\">Brand Manager \/ Content Creator<br>Johannesburg<\/div><div class=\"h-yr\">2020<\/div><\/div>\n <p class=\"h-de\">Redesigned and developed the UJFM brand language across all digital touchpoints. During the COVID lockdown, created online content to keep the brand active and engaged when the station could not air.<\/p>\n <\/li>\n <li class=\"hli\">\n <div class=\"hbg\" style=\"background:linear-gradient(105deg,rgba(201,168,76,.1),transparent 55%);\"><\/div>\n <div class=\"hr\"><p class=\"h-ag\">The Bowery JHB<\/p><div class=\"h-ro\">Brand Manager \/ Food Photographer<br>Johannesburg<\/div><div class=\"h-yr\">2016 \u2014 2018<\/div><\/div>\n <p class=\"h-de\">Brand manager and food photographer under a mentor from advertising. Menu design, logo design, food photography, client service and event space design. Later managed the Tuckshop branch inside Ogilvy JHB.<\/p>\n <\/li>\n <\/ul>\n <\/div>\n\n <!-- CONTACT -->\n <div style=\"display:flex;flex-direction:column;align-items:center;padding:2rem 0 3rem;border-top:1px solid rgba(232,230,225,.06);\">\n <p class=\"c-tag\" id=\"contactTag\">Available for opportunities<\/p>\n <h2 class=\"c-hl\" id=\"contactHl\" style=\"margin-bottom:3rem;\"><span>LET'S<\/span><span>MAKE<\/span><span>WORK<\/span><\/h2>\n <div class=\"c-icons\" id=\"contactIcons\">\n <a href=\"https:\/\/www.behance.net\/vincentvander4\" target=\"_blank\" class=\"ci\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 7h-7V5h7v2zm1.726 10c-.442 1.297-2.029 3-5.101 3-3.074 0-5.564-1.729-5.564-5.675 0-3.91 2.325-5.92 5.466-5.92 3.082 0 4.964 1.782 5.375 4.426.078.506.109 1.188.095 2.14H15.97c.13 3.211 3.483 3.312 4.588 2.029H23.72zm-7.726-3h3.427c-.123-1.979-1.043-2.402-1.701-2.402-.726 0-1.565.506-1.726 2.402zM8 10H5V5h3c1.993 0 3 .97 3 2.5S9.993 10 8 10zm-3 1h3.5c2.311 0 3.5 1.134 3.5 3 0 1.98-1.373 3-3.5 3H5v-6z\"\/><\/svg>\n <span>Behance<\/span>\n <\/a>\n <a href=\"https:\/\/www.linkedin.com\/in\/vincent-van-der-byl-10047b132\/\" target=\"_blank\" class=\"ci\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/><\/svg>\n <span>LinkedIn<\/span>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/justhandsome_unreel\/\" target=\"_blank\" class=\"ci\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"\/><\/svg>\n <span>Instagram<\/span>\n <\/a>\n <a href=\"mailto:vincentvanderbyl@gmail.com\" class=\"ci\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 010 19.366V5.457c0-.401.144-.777.401-1.066l8.91 6.682L12 13.09l2.69-2.016 8.909-6.682c.257.289.401.665.401 1.066zM12 10.458L2.636 3.818h18.728L12 10.458z\"\/><\/svg>\n <span>Email<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- GALLERY -->\n <div class=\"g-wrap\">\n <p class=\"g-lbl\">More Work<\/p>\n <div class=\"g-out\">\n <div class=\"g-strip\" id=\"gs\">\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g1.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g2.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g3.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g4.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g5.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g6.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g7.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g8.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g9.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g10.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g11.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g12.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g13.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g14.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g15.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g16.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g17.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g18.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g19.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g20.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g21.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g22.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g23.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g24.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g25.png\" alt=\"\"><\/div>\n <div class=\"gi\"><img decoding=\"async\" src=\"images\/gallery\/g26.png\" alt=\"\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <footer>\n <div class=\"icon-strip\">\n <img decoding=\"async\" src=\"images\/icons\/icon01.png\" alt=\"Adobe CC\">\n <img decoding=\"async\" src=\"images\/icons\/icon02.png\" alt=\"InDesign\">\n <img decoding=\"async\" src=\"images\/icons\/icon03.png\" alt=\"After Effects\">\n <img decoding=\"async\" src=\"images\/icons\/icon04.png\" alt=\"Illustrator\">\n <img decoding=\"async\" src=\"images\/icons\/icon05.png\" alt=\"Photoshop\">\n <img decoding=\"async\" src=\"images\/icons\/icon06.png\" alt=\"Premiere\">\n <img decoding=\"async\" src=\"images\/icons\/icon07.png\" alt=\"Claude\">\n <img decoding=\"async\" src=\"images\/icons\/icon08.png\" alt=\"Google\">\n <img decoding=\"async\" src=\"images\/icons\/icon09.png\" alt=\"Higgsfield\">\n <img decoding=\"async\" src=\"images\/icons\/icon10.png\" alt=\"KREA\">\n <img decoding=\"async\" src=\"images\/icons\/icon11.png\" alt=\"Suno\">\n <img decoding=\"async\" src=\"images\/icons\/icon12.png\" alt=\"Inkscape\">\n <img decoding=\"async\" src=\"images\/icons\/icon13.png\" alt=\"FL Studio\">\n <img decoding=\"async\" src=\"images\/icons\/icon14.png\" alt=\"Virtual DJ\">\n <img decoding=\"async\" src=\"images\/icons\/icon15.png\" alt=\"Canva\">\n <img decoding=\"async\" src=\"images\/icons\/icon16.png\" alt=\"Figma\">\n <img decoding=\"async\" src=\"images\/icons\/icon17.png\" alt=\"Keynote\">\n <img decoding=\"async\" src=\"images\/icons\/icon18.png\" alt=\"PowerPoint\">\n <\/div>\n <div class=\"footer-top\">\n <span>© 2025 Vincent Van Der Byl<\/span>\n <span>JHB  ·  SA<\/span>\n <\/div>\n<\/footer>\n<\/div>\n\n<!-- LIGHTBOX -->\n<div id=\"lb\">\n <span id=\"lb-close\">×<\/span>\n <button id=\"lb-prev\">←<\/button>\n <img decoding=\"async\" id=\"lb-img\" src=\"\" alt=\"\">\n <button id=\"lb-next\">→<\/button>\n<\/div>\n\n<script>\n\/\/ ===== CURSOR =====\nconst cur=document.getElementById('cur');\nlet mx=-200,my=-200;\ndocument.addEventListener('mousemove',e=>{mx=e.clientX;my=e.clientY;cur.style.left=mx+'px';cur.style.top=my+'px';});\ndocument.querySelectorAll('a,button,.wt,.hli,.gi').forEach(el=>{\n el.addEventListener('mouseenter',()=>cur.classList.add('big'));\n el.addEventListener('mouseleave',()=>cur.classList.remove('big'));\n});\n\n\/\/ ===== SECTION CONFIG =====\nconst SIDS=['s1','s2','s3','s4'];\nconst BGS=['#e8e6e1','#1a1a1a','#f0ede8','#1a1a1a'];\n\/\/ zoom text, text color, flood color when zooming OUT of this section\nconst ZC=[\n {t:'VINCENZO', tc:'#1a1a1a', fc:'#1a1a1a'},\n {t:'ABOUT', tc:'#e8e6e1', fc:'#f0ede8'},\n {t:'THE WORK', tc:'#1a1a1a', fc:'#1a1a1a'},\n {t:'HISTORY', tc:'#c9a84c', fc:'#0d0d0d'},\n];\n\nlet cur_s=0, busy=false;\n\n\/\/ ===== ZOOM TRANSITION =====\nconst zo=document.getElementById('zo');\nconst zt=document.getElementById('zt');\n\nfunction h2r(h){const r=parseInt(h.slice(1,3),16),g=parseInt(h.slice(3,5),16),b=parseInt(h.slice(5,7),16);return[r,g,b];}\n\nfunction zoomGo(from,to){\n busy=true;\n const cfg=ZC[from];\n zt.textContent=cfg.t;\n zt.style.color=cfg.tc;\n zo.style.opacity='1';\n zo.style.background='transparent';\n zt.style.transform='scale(1)';\n zt.style.opacity='1';\n\n const [r,g,b]=h2r(cfg.fc);\n const dur1=700, start1=performance.now();\n\n function p1(now){\n const t=Math.min((now-start1)\/dur1,1);\n const e3=t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)\/2;\n const sc=1+e3*32;\n const ta=t<.55?1:1-((t-.55)\/.45);\n zt.style.transform=`scale(${sc})`;\n zt.style.opacity=ta;\n const ba=Math.min(t*2.2,1);\n zo.style.background=`rgba(${r},${g},${b},${ba})`;\n if(t<1){requestAnimationFrame(p1);}\n else{\n \/\/ swap\n document.getElementById(SIDS[from]).classList.remove('on');\n document.body.style.background=BGS[to];\n const nel=document.getElementById(SIDS[to]);\n nel.classList.add('on');\n nel.classList.remove('s-in');\n void nel.offsetWidth;\n nel.classList.add('s-in');\n updateNav(to);\n if(to===2) initWO();\n if(to===3) { setTimeout(()=>{\n const ct=document.getElementById('contactTag');\n const ch=document.getElementById('contactHl');\n const ci=document.getElementById('contactIcons');\n if(ct){ct.classList.remove('cr-visible');void ct.offsetWidth;ct.classList.add('cr-visible');}\n if(ch){ch.classList.remove('cr-visible');void ch.offsetWidth;ch.classList.add('cr-visible');}\n if(ci){ci.classList.remove('cr-visible');void ci.offsetWidth;ci.classList.add('cr-visible');}\n }, 600); }\n \/\/ phase 2 fade out\n const start2=performance.now(), dur2=500;\n function p2(n2){\n const t2=Math.min((n2-start2)\/dur2,1);\n zo.style.opacity=1-t2;\n if(t2<1){requestAnimationFrame(p2);}\n else{zo.style.opacity='0';zo.style.background='transparent';zt.style.transform='scale(1)';busy=false;}\n }\n requestAnimationFrame(p2);\n }\n }\n requestAnimationFrame(p1);\n}\n\nfunction gto(idx){if(busy||idx===cur_s||idx<0||idx>=SIDS.length)return;const f=cur_s;cur_s=idx;zoomGo(f,idx);}\n\n\/\/ ===== SCROLL =====\nlet lw=0;\nwindow.addEventListener('wheel',e=>{\n const now=Date.now();\n if(now-lw<850)return;\n const a=document.getElementById(SIDS[cur_s]);\n const sc=a.scrollHeight>a.clientHeight+2;\n if(sc){\n const ab=a.scrollTop+a.clientHeight>=a.scrollHeight-4;\n const at=a.scrollTop<=4;\n if(e.deltaY>0&&!ab)return;\n if(e.deltaY<0&&!at)return;\n }\n lw=now;\n if(e.deltaY>30)gto(cur_s+1);\n else if(e.deltaY<-30)gto(cur_s-1);\n},{passive:true});\n\nlet ty=0;\nwindow.addEventListener('touchstart',e=>{ty=e.touches[0].clientY;},{passive:true});\nwindow.addEventListener('touchend',e=>{const d=ty-e.changedTouches[0].clientY;if(Math.abs(d)>55){if(d>0)gto(cur_s+1);else gto(cur_s-1);}});\n\n\/\/ ===== BLUR REVEAL =====\n\/\/ Stack: REVEAL.jpg (bottom, z-index 1) \u2192 BLUR.jpg img (z-index 2) \u2192 canvas (z-index 3)\n\/\/ The canvas starts fully transparent \u2014 showing BLUR.jpg through the img tag.\n\/\/ As cursor moves, we make the BLUR img transparent at those spots using CSS clip\/opacity trick.\n\/\/ BETTER approach: canvas acts as an alpha mask drawn OVER the blur img.\n\/\/ We draw the blur image onto the canvas, then cut holes into it.\n\/\/ The holes reveal the REVEAL.jpg img underneath.\n\nconst bc = document.getElementById('bc');\nconst bx2 = bc.getContext('2d');\nconst blurImg = document.getElementById('blurImg');\n\n\/\/ maskCanvas = permanent record of all holes cut so far\nconst maskCanvas = document.createElement('canvas');\nconst mCtx = maskCanvas.getContext('2d');\n\nlet bpx = -999, bpy = -999, bph = false;\nlet blurLoaded = false;\n\nfunction rbc() {\n const W = window.innerWidth, H = window.innerHeight;\n bc.width = W; bc.height = H;\n maskCanvas.width = W; maskCanvas.height = H;\n \/\/ mask starts fully opaque black = blur img fully visible\n mCtx.fillStyle = 'rgba(0,0,0,1)';\n mCtx.fillRect(0, 0, W, H);\n}\nrbc();\nwindow.addEventListener('resize', () => { rbc(); });\n\n\/\/ Hide the blur img \u2014 we'll draw it ourselves onto canvas\nblurImg.style.opacity = '0';\n\nfunction cutHole(x, y, r) {\n mCtx.save();\n mCtx.globalCompositeOperation = 'destination-out';\n const g = mCtx.createRadialGradient(x, y, 0, x, y, r);\n g.addColorStop(0, 'rgba(0,0,0,1)');\n g.addColorStop(0.5, 'rgba(0,0,0,0.9)');\n g.addColorStop(0.85, 'rgba(0,0,0,0.2)');\n g.addColorStop(1, 'rgba(0,0,0,0)');\n mCtx.fillStyle = g;\n mCtx.beginPath(); mCtx.arc(x, y, r, 0, Math.PI * 2); mCtx.fill();\n mCtx.restore();\n}\n\nconst s1e = document.getElementById('s1');\ns1e.addEventListener('mousemove', e => {\n bpx = e.clientX; bpy = e.clientY; bph = true;\n \/\/ Cut a permanent hole in the mask\n cutHole(bpx, bpy, 170);\n \/\/ Scatter smaller holes for a soft organic edge\n if (Math.random() > 0.5) {\n cutHole(bpx + (Math.random() - 0.5) * 80, bpy + (Math.random() - 0.5) * 80, 55 + Math.random() * 55);\n }\n});\ns1e.addEventListener('mouseleave', () => { bph = false; });\n\nfunction bloop() {\n const W = bc.width, H = bc.height;\n bx2.clearRect(0, 0, W, H);\n\n if (blurImg.complete && blurImg.naturalWidth > 0) {\n \/\/ Draw blur image using object-fit:cover center center math\n const iw = blurImg.naturalWidth, ih = blurImg.naturalHeight;\n const scale = Math.max(W \/ iw, H \/ ih);\n const dw = iw * scale, dh = ih * scale;\n const dx = (W - dw) \/ 2, dy = (H - dh) \/ 2;\n bx2.drawImage(blurImg, dx, dy, dw, dh);\n \/\/ Apply the persistent mask \u2014 punches out holes where cursor has been\n bx2.save();\n bx2.globalCompositeOperation = 'destination-in';\n bx2.drawImage(maskCanvas, 0, 0);\n bx2.restore();\n \/\/ Extra live cursor glow (temporary, softens the edge around cursor right now)\n if (bph) {\n bx2.save();\n bx2.globalCompositeOperation = 'destination-out';\n bx2.globalAlpha = 0.4;\n const g = bx2.createRadialGradient(bpx, bpy, 0, bpx, bpy, 110);\n g.addColorStop(0, 'rgba(0,0,0,0.6)');\n g.addColorStop(0.6, 'rgba(0,0,0,0.15)');\n g.addColorStop(1, 'rgba(0,0,0,0)');\n bx2.fillStyle = g;\n bx2.beginPath(); bx2.arc(bpx, bpy, 110, 0, Math.PI * 2); bx2.fill();\n bx2.restore();\n }\n } else {\n \/\/ Blur image not loaded yet \u2014 draw solid cover\n bx2.fillStyle = 'rgba(232,230,225,1)';\n bx2.fillRect(0, 0, W, H);\n }\n requestAnimationFrame(bloop);\n}\nblurImg.addEventListener('load', () => { blurLoaded = true; });\nbloop();\n\n\/\/ ===== WORK OBS =====\nfunction initWO(){\n const items=document.querySelectorAll('.wi');\n const ob=new IntersectionObserver(es=>{es.forEach((e,i)=>{if(e.isIntersecting)setTimeout(()=>e.target.classList.add('vis'),i*90);});},{threshold:.1,root:document.getElementById('s3')});\n items.forEach(i=>ob.observe(i));\n}\ninitWO();\n\n\/\/ ===== GALLERY =====\nconst gs=document.getElementById('gs');\nlet gAuto=true;\n\nfunction gFocus(){\n const items=gs.querySelectorAll('.gi');\n const cc=gs.scrollLeft+gs.clientWidth\/2;\n let cl=null,cd=Infinity;\n items.forEach(i=>{const ic=i.offsetLeft+i.offsetWidth\/2;const d=Math.abs(ic-cc);if(d<cd){cd=d;cl=i;}});\n items.forEach(i=>i.classList.toggle('cf',i===cl));\n}\ngs.addEventListener('scroll',gFocus,{passive:true});\n\nfunction gRun(){\n if(gAuto&&cur_s===3){\n gs.scrollLeft+=.9;\n if(gs.scrollLeft>=gs.scrollWidth-gs.clientWidth)gs.scrollLeft=0;\n gFocus();\n }\n requestAnimationFrame(gRun);\n}\ngRun();\ngFocus();\n\n\/\/ \u2500\u2500 CLICK-HOLD-DRAG \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet isDragging=false,dragStartX=0,dragScrollStart=0,totalDrag=0;\nconst DRAG_THRESHOLD=6;\n\ngs.addEventListener('mousedown',e=>{\n isDragging=true;\n gAuto=false;\n dragStartX=e.clientX;\n dragScrollStart=gs.scrollLeft;\n totalDrag=0;\n gs.style.cursor='grabbing';\n e.preventDefault();\n});\n\nwindow.addEventListener('mousemove',e=>{\n if(!isDragging)return;\n const dx=e.clientX-dragStartX;\n totalDrag=Math.abs(dx);\n gs.scrollLeft=dragScrollStart-dx;\n gFocus();\n});\n\nwindow.addEventListener('mouseup',e=>{\n if(!isDragging)return;\n gs.style.cursor='grab';\n const wasTap=totalDrag<DRAG_THRESHOLD;\n isDragging=false;\n setTimeout(()=>{gAuto=true;},2000);\n if(wasTap){\n const target=e.target.closest('.gi');\n if(target){const img=target.querySelector('img');if(img)openLB(img.src);}\n }\n});\n\nlet tDragStartX=0,tScrollStart=0,tTotalDrag=0;\ngs.addEventListener('touchstart',e=>{\n gAuto=false;\n tDragStartX=e.touches[0].clientX;\n tScrollStart=gs.scrollLeft;\n tTotalDrag=0;\n},{passive:true});\ngs.addEventListener('touchmove',e=>{\n const dx=e.touches[0].clientX-tDragStartX;\n tTotalDrag=Math.abs(dx);\n gs.scrollLeft=tScrollStart-dx;\n gFocus();\n},{passive:true});\ngs.addEventListener('touchend',e=>{\n setTimeout(()=>{gAuto=true;},2000);\n if(tTotalDrag<DRAG_THRESHOLD){\n const target=e.target.closest('.gi');\n if(target){const img=target.querySelector('img');if(img)openLB(img.src);}\n }\n});\n\ngs.addEventListener('mouseleave',()=>{if(!isDragging)gAuto=true;});\n\n\/\/ \u2500\u2500 LIGHTBOX \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst lb=document.getElementById('lb');\nconst lbImg=document.getElementById('lb-img');\nconst lbClose=document.getElementById('lb-close');\n\n\/\/ Build ordered list of gallery image sources for lightbox nav\nconst giImgs=[...document.querySelectorAll('.gi img')].map(i=>i.src);\nlet lbCurrent=0;\n\nfunction openLB(src){\n lbCurrent=giImgs.indexOf(src);\n if(lbCurrent===-1)lbCurrent=0;\n lbImg.src=giImgs[lbCurrent];\n lb.classList.add('open');\n}\nfunction closeLB(){\n lb.classList.remove('open');\n setTimeout(()=>{lbImg.src='';},400);\n}\nfunction lbPrev(){\n lbCurrent=(lbCurrent-1+giImgs.length)%giImgs.length;\n lbImg.style.opacity='0';\n setTimeout(()=>{lbImg.src=giImgs[lbCurrent];lbImg.style.opacity='1';},180);\n}\nfunction lbNext(){\n lbCurrent=(lbCurrent+1)%giImgs.length;\n lbImg.style.opacity='0';\n setTimeout(()=>{lbImg.src=giImgs[lbCurrent];lbImg.style.opacity='1';},180);\n}\n\nconst lbPrevBtn=document.getElementById('lb-prev');\nconst lbNextBtn=document.getElementById('lb-next');\nlbPrevBtn.addEventListener('click',e=>{e.stopPropagation();lbPrev();});\nlbNextBtn.addEventListener('click',e=>{e.stopPropagation();lbNext();});\n[lbPrevBtn,lbNextBtn].forEach(b=>{\n b.addEventListener('mouseenter',()=>cur.classList.add('big'));\n b.addEventListener('mouseleave',()=>cur.classList.remove('big'));\n});\n\nlbClose.addEventListener('click',closeLB);\nlb.addEventListener('click',e=>{if(e.target===lb)closeLB();});\ndocument.addEventListener('keydown',e=>{\n if(e.key==='Escape')closeLB();\n if(e.key==='ArrowLeft')lbPrev();\n if(e.key==='ArrowRight')lbNext();\n});\n\ndocument.body.style.background=BGS[0];\n\n\/\/ Hide nav on hero, show on all other sections\nfunction updateNav(idx) {\n document.querySelector('nav').style.opacity = idx === 0 ? '0' : '1';\n document.querySelector('nav').style.pointerEvents = idx === 0 ? 'none' : 'all';\n}\nupdateNav(0);\n\n\/\/ nav updated inside zoomGo directly\n\ndocument.getElementById('s4').addEventListener('scroll',function(){\n var ct=document.getElementById('contactTag');\n if(!ct)return;\n if(ct.getBoundingClientRect().top<window.innerHeight*.95){\n ct.classList.add('cr-visible');\n var ch=document.getElementById('contactHl');\n var ci=document.getElementById('contactIcons');\n if(ch)ch.classList.add('cr-visible');\n if(ci)ci.classList.add('cr-visible');\n }\n},{passive:true});\n\n<\/script>\n<\/body>\n<\/html>\n\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>VINCENZO \u2014 Art Director VVB About Work History Contact Creative Director  ·  Art Director  ·  Concept Creator VINCENZO AKA VINCENT VAN DER BYL A decade of real world advertising.Ideas that sell. Work that moves. Scroll to explore Move cursor over image to reveal About Creative BUILT FROM THE REAL WORLD. They will tell you I […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - Vincenzo<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vincenzo.co.za\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - Vincenzo\" \/>\n<meta property=\"og:description\" content=\"VINCENZO \u2014 Art Director VVB About Work History Contact Creative Director  ·  Art Director  ·  Concept Creator VINCENZO AKA VINCENT VAN DER BYL A decade of real world advertising.Ideas that sell. Work that moves. Scroll to explore Move cursor over image to reveal About Creative BUILT FROM THE REAL WORLD. They will tell you I […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vincenzo.co.za\/\" \/>\n<meta property=\"og:site_name\" content=\"Vincenzo\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-12T16:22:03+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vincenzo.co.za\\\/\",\"url\":\"https:\\\/\\\/vincenzo.co.za\\\/\",\"name\":\"Home - Vincenzo\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vincenzo.co.za\\\/#website\"},\"datePublished\":\"2026-05-12T16:14:45+00:00\",\"dateModified\":\"2026-05-12T16:22:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vincenzo.co.za\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vincenzo.co.za\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vincenzo.co.za\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vincenzo.co.za\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vincenzo.co.za\\\/#website\",\"url\":\"https:\\\/\\\/vincenzo.co.za\\\/\",\"name\":\"Vincenzo\",\"description\":\"AKA VINCENT VAN DER BYL\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vincenzo.co.za\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - Vincenzo","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vincenzo.co.za\/","og_locale":"en_US","og_type":"article","og_title":"Home - Vincenzo","og_description":"VINCENZO \u2014 Art Director VVB About Work History Contact Creative Director  ·  Art Director  ·  Concept Creator VINCENZO AKA VINCENT VAN DER BYL A decade of real world advertising.Ideas that sell. Work that moves. Scroll to explore Move cursor over image to reveal About Creative BUILT FROM THE REAL WORLD. They will tell you I […]","og_url":"https:\/\/vincenzo.co.za\/","og_site_name":"Vincenzo","article_modified_time":"2026-05-12T16:22:03+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/vincenzo.co.za\/","url":"https:\/\/vincenzo.co.za\/","name":"Home - Vincenzo","isPartOf":{"@id":"https:\/\/vincenzo.co.za\/#website"},"datePublished":"2026-05-12T16:14:45+00:00","dateModified":"2026-05-12T16:22:03+00:00","breadcrumb":{"@id":"https:\/\/vincenzo.co.za\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vincenzo.co.za\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vincenzo.co.za\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vincenzo.co.za\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/vincenzo.co.za\/#website","url":"https:\/\/vincenzo.co.za\/","name":"Vincenzo","description":"AKA VINCENT VAN DER BYL","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vincenzo.co.za\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/vincenzo.co.za\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vincenzo.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vincenzo.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vincenzo.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vincenzo.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":7,"href":"https:\/\/vincenzo.co.za\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/vincenzo.co.za\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/vincenzo.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}