Launch party social proof leverage MVP lean startup creative equity startup direct mailing. Niche market startup paradigm shift learning curve of the skill.

\n","component_path":"text","style":{"margin":[["top","24px"],["bottom","0px"]],"textAlign":"center","color":"#ffffff"},"id":"ssbbl2jw","media":{"tablet":{"style":{"textAlign":"left"}},"mobile":{"style":{"margin":[["top","16px"],["bottom","0px"]]}}}}],"id":"calxtu1w","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","1px"],["bottom","1px"]],"flexBasis":"60%","alignItems":"center","margin":[["bottom","50px"]]},"media":{"tablet":{"style":{"flexBasis":"100%","margin":[["bottom","30px"]],"alignItems":"flex-start"}},"mobile":{"style":{"margin":[["bottom","24px"],["top","0px"]]}}}}],"id":"ddxuq1ib","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","1px"],["left","10px"],["right","10px"],["bottom","1px"]],"flexBasis":"100%","justifyContent":"center","margin":[["bottom",""]],"border":[["width",""],["style","solid"],["color",""],["bottom-width","1px"],["bottom-style","solid"],["bottom-color",{"key":"--color-302","value":"#42424233"}]]},"media":{"tablet":{"style":{"padding":[["top","1px"],["left","0px"],["right","0px"],["bottom","1px"]],"justifyContent":"flex-start"}},"mobile":{"style":{"gap":"0px"}}},"parentType":"section"}],"id":"30ao4zcv","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","1px"],["bottom","1px"]],"flexBasis":"100%","alignItems":"stretch","margin":[["top",""],["bottom","0px"]]}}],"id":"0jil3f9q","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","1px"],["left","0px"],["right","0px"],["bottom","1px"]],"flexBasis":"100%","justifyContent":"center"}}],"id":"5k0x5etj","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"style":{"margin":[["top",""]],"padding":[["top","39px"],["bottom","24px"]],"backgroundColor":"#000000","__backgroundType":"color","backgroundImage":{"gradient":[["type","linear"],["direction","180deg"],["start",["#0E0000","0%"]],["end",["#1A1A1A","100%"]]]}},"media":{"tablet":{"style":{"padding":[["top","60px"],["bottom","24px"],["left","32px"],["right","32px"]]}},"mobile":{"style":{"padding":[["top","40px"],["bottom","24px"],["left","24px"],["right","24px"]]}}},"settings":{"aiConfig":{"category":"footer","prompt":"Design a sleek dark-themed footer for Hasan Salame's cinematography portfolio website, including copyright information, navigation links, and a subtle reaffirmation of his professional identity as a cinematographer","tags":["white_bg"],"id":"65b74395b5cd1c773f6ee8fa"}}}},"header":{"name":"header section","id":"header","data":{"name":"nav","content":[{"name":"Row","type":"row","content":[{"name":"Column","style":{},"content":[{"type":"nav","name":"Navigation","_elType":"ELEMENT","component_path":"nav","brand":{"style":{"width":"201px"},"logo":"https://cdn.cmsfly.com/689df31a3d6d080012ca82e5/images/logo-IH5K9.svg","logoAlt":"Logo","url":"/"},"btn":{"items":[{"id":"yui5jpvx","label":"Contact","style/color":"#3E00EE","style/backgroundColor":"","style/_border":"1px solid #3E00EE","icon":{"visible":"font-awesome","icon":null},"style":{"color":{"key":"--color-201","value":"#ffffff"},"backgroundColor":"","_border":"2px solid var(--color-102)"},"settings":{"hrefType":"page"},"url":"68a329c6edba5b002062b491"}],"gap":"15px","style":{"fontWeight":"500","borderRadius":"5px 5px 5px 5px","padding":[["top","12px"],["bottom","12px"],["left","28px"],["right","28px"]],"_border":"0px solid ","backgroundColor":""}},"links":{"gap":"30px","align":"center","icon":{"gap":"5px","position":"right"},"style":{"textDecoration":{"type":"none"},"color":{"key":"--color-2","value":"#F6EBEB"}},"items":[{"id":"uex4jy0c","label":"Instagram","url":"https://www.instagram.com/hasansalame/","icon":{"visible":"none","icon":null},"settings":{"hrefType":"external"}},{"id":"jrjtnw95","label":"Facebook","url":"https://www.facebook.com/hasansalamepage/","icon":{"visible":"none","icon":null},"settings":{"hrefType":"external"}},{"id":"hqrz6yvb","label":"Vimeo","url":"https://vimeo.com/hasansalame","icon":{"visible":"none","icon":null},"settings":{"hrefType":"external"}},{"id":"raod5uoh","label":"WhatsApp","url":"https://wa.me/96170148190","icon":{"visible":"none","icon":null},"settings":{"hrefType":"external"}},{"id":"bzdz1ay2","label":"Messenger","url":"http://m.me/hasansalamepage","icon":{"visible":"none","icon":null},"settings":{"hrefType":"external"}}]},"style":{"padding":[["top","20px"],["bottom","20px"]],"border":[["width","0px"],["style","solid"],["color",""],["bottom-width","0px"],["bottom-style","solid"],["bottom-color",""]],"margin":[["top","10px"]]},"id":"b6s6s68c","settings":{"sticky":false,"stickyBG":""},"pseudoClass":{"hover":{"links":{"style":{"color":""}},"btn":{"style":{"backgroundColor":""}},"dropdown":{"itemStyle":{"color":{"value":"#136368","key":"--color-7"}}}}},"version":"2.0.0","dropdown":{"style":{"padding":[["top",""],["bottom","16px"],["left","24px"],["right","24px"]],"borderRadius":"5px 5px 5px 5px","backgroundColor":{"key":"--color-102","value":"#ffffff"}},"itemStyle":{"lineHeight":"26px","padding":[["top","16px"]],"color":{"value":"#18181B","key":"--color-6"}},"icon":{"gap":""}},"toggle":{"hamburger-tab":true,"style":{"_border":"1px solid var(--color-7)","padding":[["left","12px"],["right","12px"]],"color":{"key":"--color-102","value":"#ffffff"},"fontSize":""}},"attr":{"id":"blog"},"media":{"tablet":{"toggle":{"style":{"fontSize":"20px"}}}}}],"id":"twk343ot","_elType":"COLUMN","type":"column","component_path":"column","attr":{"__class__columnSize":"1/1"}}],"id":"ix9bqqdc","_elType":"ROW","component_path":"row","style":{"margin":[["bottom","30px"]]}}],"id":"r69479k5","type":"section","_elType":"SECTION","component_path":"section","style":{"backgroundColor":"#000000","__backgroundType":"color","backgroundImage":{"gradient":[["type","linear"],["direction","180deg"],["start",["#0E0000","0%"]],["end",["#1A1A1A","100%"]]]}},"settings":{"aiConfig":{"prompt":"create a navigation section within max 4 navigation links and max 2 buttons. all links and buttons should be within single word","category":"nav","pageInfoJson":"{\"pageTitle\":\"Cinematic Storytelling Through the Lens of Hasan Salame\",\"subject\":\"Hasan Salame Cinematography Portfolio\",\"brandName\":\"Hasan Salame – Cinematographer\",\"language\":\"English\"}","id":"657fdf372766e4699ae5acf4"}}}},"3wxu60oy":{"name":"contact form","id":"3wxu60oy","data":{"name":"contact","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","holder":"container","type":"container","content":[{"name":"Title","titleType":"h2","type":"heading","_elType":"ELEMENT","component_path":"title","content":"Capture Your Vision Together","settings":{"dynamicText":{"_enabled":false}},"dynamicText":{"items":[{"id":"hfgvo35u","content":"Lorem ipsum"},{"id":"hfgvo35i","content":"dolor sit amet"},{"id":"hfgvo35j","content":"consectetur adipiscing"}],"options":{"typeSpeed":50,"loop":true,"backSpeed":40,"showCursor":true,"cursorChar":true}},"id":"wc4vjkyl","style":{"textAlign":"center","color":"#ffffff","margin":[["top","0px"],["bottom","20px"]],"fontSize":""}},{"type":"text","name":"Text","_elType":"ELEMENT","content":"Let's collaborate on creating unforgettable visual narratives that transcend ordinary storytelling and bring your cinematic dreams to life.","component_path":"text","id":"d6ls95ze","style":{"textAlign":"center","color":"#ffffff","margin":[["top","0px"],["bottom","0px"]],"fontSize":""}}],"id":"7je1yu4l","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"stretch","gap":"0px","padding":[["top","0px"],["right","10px"],["bottom","0px"],["left","0px"]],"flexBasis":"60%"},"media":{"mobile":{"style":{"flexBasis":"100%"}}}}],"id":"nn2tdtsm","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","justifyContent":"center","alignItems":"flex-start","gap":"0px","padding":[["top","10px"],["right","10px"],["bottom","10px"],["left","10px"]],"flexBasis":"100%"},"media":{"mobile":{"style":{"padding":[["top","0px"],["right","10px"],["bottom","0px"],["left","10px"]]}}}},{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","holder":"container","type":"container","content":[{"name":"Title","titleType":"h2","type":"heading","_elType":"ELEMENT","component_path":"title","content":"Contact Hasan","settings":{"dynamicText":{"_enabled":false}},"dynamicText":{"items":[{"id":"hfgvo35u","content":"Lorem ipsum"},{"id":"hfgvo35i","content":"dolor sit amet"},{"id":"hfgvo35j","content":"consectetur adipiscing"}],"options":{"typeSpeed":50,"loop":true,"backSpeed":40,"showCursor":true,"cursorChar":true}},"id":"uqf8ydg1","style":{"color":{"key":"--color-201","value":"#ffffff"},"margin":[["top","0px"],["bottom","20px"]],"fontSize":""}},{"type":"text","name":"Text","_elType":"ELEMENT","content":"Connect with a cinematographer who transforms raw moments into extraordinary visual experiences through passionate storytelling.","component_path":"text","id":"1d2959zt","style":{"color":{"key":"--color-203","value":"#FFFFFFCC"},"margin":[["top","0px"],["bottom","0px"]],"fontSize":""}},{"name":"Container","holder":"container","type":"container","content":[{"name":"Container","holder":"container","type":"container","content":[{"name":"Container","holder":"container","type":"container","content":[{"type":"icon","name":"Icon","_elType":"ELEMENT","component_path":"icon","icon":{"size":"24px","color":"#1E3A8A","icon":{"type":"font-awesome","prefix":"far","iconName":"globe"},"visible":"feather","stroke":"2"},"id":"so5bkai8","style":{"backgroundColor":{"key":"--color-102","value":"#ffffff"},"padding":[["top","14px"],["bottom","14px"],["left","16px"],["right","16px"]],"borderRadius":"100px 100px 100px 100px"}}],"id":"jlddvmzi","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"stretch","gap":"0px","padding":[["top","10px"],["right","10px"],["bottom","10px"],["left","10px"]],"flexBasis":"14%"},"media":{"tablet":{"style":{"flexBasis":"25%"}},"mobile":{"style":{"flexBasis":"25%"}}}},{"name":"Container","holder":"container","type":"container","content":[{"name":"Title","titleType":"h5","type":"heading","_elType":"ELEMENT","component_path":"title","content":"Email Me","settings":{"dynamicText":{"_enabled":false}},"dynamicText":{"items":[{"id":"hfgvo35u","content":"Lorem ipsum"},{"id":"hfgvo35i","content":"dolor sit amet"},{"id":"hfgvo35j","content":"consectetur adipiscing"}],"options":{"typeSpeed":50,"loop":true,"backSpeed":40,"showCursor":true,"cursorChar":true}},"id":"ffx6f4dn","style":{"color":{"key":"--color-201","value":"#ffffff"},"margin":[["top","0px"],["bottom","8px"]],"fontSize":""}},{"type":"text","name":"Text","_elType":"ELEMENT","content":"Professional Communication Channel","component_path":"text","id":"y6rxaiqk","style":{"color":{"key":"--color-203","value":"#FFFFFFCC"},"margin":[["top","0px"],["bottom","0px"]],"fontSize":""}}],"id":"psc3d9t5","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"stretch","gap":"0px","padding":[["top","10px"],["right","10px"],["bottom","10px"],["left","10px"]],"flexBasis":"75%"}}],"id":"gy4958dv","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"flex-start","gap":"16px","padding":[["top","0px"],["right","0px"],["bottom","0px"],["left","0px"]],"flexBasis":"100%","margin":[["top","24px"]]}},{"name":"Container","holder":"container","type":"container","content":[{"name":"Container","holder":"container","type":"container","content":[{"type":"icon","name":"Icon","_elType":"ELEMENT","component_path":"icon","icon":{"size":"24px","color":"#1E3A8A","icon":{"type":"font-awesome","prefix":"far","iconName":"compass"},"visible":"feather","stroke":"2"},"id":"wiodypae","style":{"backgroundColor":{"key":"--color-102","value":"#ffffff"},"padding":[["top","14px"],["bottom","14px"],["left","16px"],["right","16px"]],"borderRadius":"100px 100px 100px 100px"}}],"id":"setvgshu","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"stretch","gap":"0px","padding":[["top","10px"],["right","10px"],["bottom","10px"],["left","10px"]],"flexBasis":"14%"},"media":{"tablet":{"style":{"flexBasis":"25%"}},"mobile":{"style":{"flexBasis":"25%"}}}},{"name":"Container","holder":"container","type":"container","content":[{"name":"Title","titleType":"h5","type":"heading","_elType":"ELEMENT","component_path":"title","content":"WhatsApp Direct","settings":{"dynamicText":{"_enabled":false}},"dynamicText":{"items":[{"id":"hfgvo35u","content":"Lorem ipsum"},{"id":"hfgvo35i","content":"dolor sit amet"},{"id":"hfgvo35j","content":"consectetur adipiscing"}],"options":{"typeSpeed":50,"loop":true,"backSpeed":40,"showCursor":true,"cursorChar":true}},"id":"6yg0cfv2","style":{"color":{"key":"--color-201","value":"#ffffff"},"margin":[["top","0px"],["bottom","8px"]],"fontSize":""}},{"type":"text","name":"Text","_elType":"ELEMENT","content":"Instant Creative Conversations","component_path":"text","id":"6xafhzco","style":{"color":{"key":"--color-203","value":"#FFFFFFCC"},"margin":[["top","0px"],["bottom","0px"]],"fontSize":""}}],"id":"j1ikrrnp","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"stretch","gap":"0px","padding":[["top","10px"],["right","10px"],["bottom","10px"],["left","10px"]],"flexBasis":"75%"},"media":{"mobile":{"style":{"flexBasis":"75%"}}}}],"id":"xb61ch6g","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"flex-start","gap":"16px","padding":[["top","0px"],["right","0px"],["bottom","0px"],["left","0px"]],"flexBasis":"100%","margin":[["top","0px"]]}},{"name":"Container","holder":"container","type":"container","content":[{"name":"Container","holder":"container","type":"container","content":[{"type":"icon","name":"Icon","_elType":"ELEMENT","component_path":"icon","icon":{"size":"24px","color":"#1E3A8A","icon":{"type":"font-awesome","prefix":"far","iconName":"globe"},"visible":"feather","stroke":"2"},"id":"jv83tjgc","style":{"backgroundColor":{"key":"--color-102","value":"#ffffff"},"padding":[["top","14px"],["bottom","14px"],["left","16px"],["right","16px"]],"borderRadius":"100px 100px 100px 100px"}}],"id":"twdyvspm","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"stretch","gap":"0px","padding":[["top","10px"],["right","10px"],["bottom","10px"],["left","10px"]],"flexBasis":"14%"},"media":{"tablet":{"style":{"flexBasis":"25%"}},"mobile":{"style":{"flexBasis":"25%"}}}},{"name":"Container","holder":"container","type":"container","content":[{"name":"Title","titleType":"h5","type":"heading","_elType":"ELEMENT","component_path":"title","content":"Send Message","settings":{"dynamicText":{"_enabled":false}},"dynamicText":{"items":[{"id":"hfgvo35u","content":"Lorem ipsum"},{"id":"hfgvo35i","content":"dolor sit amet"},{"id":"hfgvo35j","content":"consectetur adipiscing"}],"options":{"typeSpeed":50,"loop":true,"backSpeed":40,"showCursor":true,"cursorChar":true}},"id":"284vdjys","style":{"color":{"key":"--color-201","value":"#ffffff"},"margin":[["top","0px"],["bottom","8px"]],"fontSize":""}},{"type":"text","name":"Text","_elType":"ELEMENT","content":"Quick Project Inquiry","component_path":"text","id":"0sfkwnr3","style":{"color":{"key":"--color-203","value":"#FFFFFFCC"},"margin":[["top","0px"],["bottom","0px"]],"fontSize":""}}],"id":"oxsjie7e","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"stretch","gap":"0px","padding":[["top","10px"],["right","10px"],["bottom","10px"],["left","10px"]],"flexBasis":"75%"},"media":{"mobile":{"style":{"flexBasis":"75%"}}}}],"id":"mcib3hod","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"flex-start","gap":"16px","padding":[["top","0px"],["right","0px"],["bottom","0px"],["left","0px"]],"flexBasis":"100%","margin":[["top","0px"]]}}],"id":"we6maadk","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"flex-start","gap":"24px","padding":[["top","0px"],["right","0px"],["bottom","0px"],["left","0px"]],"flexBasis":"100%","margin":[["top","24px"]]}}],"id":"ykm419gv","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"stretch","gap":"0px","padding":[["top","64px"],["right","48px"],["bottom","22px"],["left","48px"]],"flexBasis":"50%","backgroundColor":"#00000099","borderRadius":"10px 10px 10px 10px","__backgroundType":"color","backgroundImage":{"gradient":[["type","linear"],["direction","180deg"],["start",["#0E0000","0%"]],["end",["#1A1A1A","100%"]]]}},"media":{"tablet":{"style":{"padding":[["top","48px"],["right","32px"],["bottom","48px"],["left","32px"]],"flexBasis":"50%"}},"mobile":{"style":{"flexBasis":"100%"}}}},{"name":"Container","holder":"container","type":"container","content":[{"type":"contactForm","name":"Contact Form","_elType":"ELEMENT","component_path":"contactForm","fields":{"name":{"_enabled":true,"label":"Name","attr":{"placeholder":"Enter your name"}},"email":{"_enabled":true,"label":"Email","attr":{"placeholder":"Enter your email"}},"phone":{"_enabled":false,"label":"Phone","attr":{"placeholder":"Enter your phone number"}},"message":{"_enabled":true,"label":"Message","attr":{"rows":4,"placeholder":"Write your message..."}},"subject":{"_enabled":true,"label":"Subject","attr":{"placeholder":"Email Subject"}},"button":{"_enabled":true,"text":"SEND A MESSAGE","waitingText":"Please wait..."}},"form":{"gap":"15px","successMessage":"Thank you for your email :-)","labelStyle":{"color":"#ffffff","fontSize":"","padding":[["bottom","10px"]]},"fieldStyle":{"color":"#1E3A8A","fontSize":"","minHeight":"50px","padding":[["left","15px"],["right","15px"],["top","10px"],["bottom","10px"]],"_border":"1px solid var(--color-302)","borderRadius":"5px 5px 5px 5px","backgroundColor":"#FFFFFF"},"buttonStyle":{"color":{"key":"--color-201","value":"#ffffff"},"height":"60px","fontSize":"","padding":[["left","30px"],["right","30px"]],"_border":"0px solid ","borderRadius":"5px 5px 5px 5px","backgroundColor":"#000000","width":"100%","__backgroundType":"color","backgroundImage":{"gradient":[["type","linear"],["direction","45deg"],["start",["#0E0000","0%"]],["end",["#1A1A1A","100%"]]]}},"toEmail":"hello@hasansalame.com","subject":"HS Website"},"id":"or14jmot","pseudoClass":{"hover":{"form":{"buttonStyle":{"backgroundColor":""}}}},"settings":{"service":"email","webhook":""}}],"id":"sjeuqyed","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"stretch","gap":"0px","padding":[["top","40px"],["right","48px"],["bottom","40px"],["left","48px"]],"flexBasis":"50%","backgroundColor":"","borderRadius":"10px 10px 10px 10px","border":[["width","1px"],["style","solid"],["color",{"key":"--color-301","value":"#D9D9D9FF"}]]},"media":{"tablet":{"style":{"padding":[["top","32px"],["right","32px"],["bottom","32px"],["left","32px"]],"flexBasis":"50%"}},"mobile":{"style":{"flexBasis":"100%","margin":[["left","10px"],["right","10px"],["top","30px"]]}}}}],"id":"ht9s6mi0","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","justifyContent":"flex-start","alignItems":"flex-start","gap":"42px","padding":[["top","0px"],["right","0px"],["bottom","0px"],["left","0px"]],"flexBasis":"100%","margin":[["top","40px"]]},"media":{"tablet":{"style":{"gap":"24px"}},"mobile":{"style":{"margin":[["top","30px"]]}}}}],"id":"sg87t82c","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"style":{"padding":[["top","40px"],["bottom","60px"]],"backgroundColor":"#1E3A8A","__backgroundType":"gradient","backgroundImage":{"gradient":[["type","radial"],["direction","179deg"],["start",["#1E3A8A","0%"]],["end",["#000000","70%"]],["shape","circle"],["radialDirection","center"]],"advancedGradient":{"gradientString":"linear-gradient(90deg, rgba(2,0,36,1) 0%,rgba(2,51,89,1) 24%,rgba(1,106,146,1) 50%,rgba(1,131,172,1) 62%,rgba(0,189,231,1) 89%,rgba(0,212,255,1) 100%)","markers":[{"color":"rgba(2,0,36,1)","position":0},{"color":"rgba(2,51,89,1)","position":24},{"color":"rgba(1,106,146,1)","position":50},{"color":"rgba(1,131,172,1)","position":62},{"color":"rgba(0,189,231,1)","position":89},{"color":"rgba(0,212,255,1)","position":100}],"type":"linear-gradient","radial_shape":"circle at","angle":"90deg","centerX":"50%","centerY":"50%"},"image":"https://cdn.cmsfly.com/689df31a3d6d080012ca82e5/images/WhatsAppImage2025-08-26at204746-GflxC.jpeg"},"__gradientType":"simple","backgroundSize":"cover","backgroundPosition":"center","backgroundRepeat":"no-repeat","margin":[["top",""]]},"media":{"tablet":{"style":{"padding":[["bottom","60px"],["bottom","80px"]]}},"mobile":{"style":{"padding":[["top","60px"],["bottom","60px"]]}}},"settings":{"aiConfig":{"category":"contact","prompt":"Develop a professional contact section for Hasan Salame featuring his contact information, including email address and WhatsApp number, integrated with a clean, minimalist contact form that allows potential clients and collaborators to reach out easily","tags":["video_bg"],"id":"65817558dd38e700aedf8070"}}}},"nb9p0ia6":{"name":"Navigation 01","id":"nb9p0ia6","data":{"name":"Navigation","content":[{"name":"Row","type":"row","content":[{"name":"Column","style":{"textAlign":"center","padding":[["left","0px"],["right","0px"]],"margin":[["right","0px"],["left","0px"]]},"content":[{"type":"nav","name":"Navigation","_elType":"ELEMENT","component_path":"nav","brand":{"style":{"width":"80px"},"logo":"","logoAlt":"Logo"},"btn":{"items":[],"gap":"15px","style":{"fontWeight":"500","borderRadius":"85px 85px 85px 85px","padding":[["top","8px"],["bottom","8px"],["left","20px"],["right","20px"]],"color":"#ffffff","_border":" solid #ffffff","backgroundColor":"#c7c7c7"}},"links":{"gap":"30px","align":"center","icon":{"gap":"5px"},"style":{"textDecoration":{"type":"none"},"color":"#55565E"},"items":[{"id":"2suuvmpu","label":"Home","url":"68c81195d882dc004407880c","icon":{"visible":"feather","icon":{"type":"feather","prefix":"feather","iconName":"home"}},"settings":{"hrefType":"page"}},{"id":"jrjtnw95","label":"Portfolio","url":"691a30a61f69de00121ed25e","icon":{"visible":"feather","icon":{"type":"feather","prefix":"feather","iconName":"video"}},"settings":{"hrefType":"page"}},{"id":"bzdz1ay2","label":"Contact","url":"691a46de1f69de0012207f20","icon":{"visible":"feather","icon":{"type":"feather","prefix":"feather","iconName":"phone-call"}},"settings":{"hrefType":"page"}},{"id":"y3esg4k9","label":"Social","icon":{"visible":"feather","icon":{"type":"feather","prefix":"feather","iconName":"users"}},"target":"_blank","settings":{"hrefType":"page"},"url":"691a61ec1f69de0012227642"}]},"style":{"padding":[["top","20px"],["bottom","10px"],["right","0px"],["left","0px"]],"margin":[["left","0px"],["right","0px"]]},"id":"z7pdubi5","settings":{"sticky":true,"stickyBG":"#ffffff"},"pseudoClass":{"hover":{"links":{"style":{"color":"#0a9ba0"}}}},"version":"2.0.0","toggle":{"icon":{"icon":{"prefix":"fas","iconName":"bars","type":"font-awesome"}}},"media":{"mobile":{"btn":{"style":{"fontSize":"15px"}}}}}],"id":"0az02gc4","_elType":"COLUMN","type":"column","component_path":"column","attr":{"__class__columnSize":"1/1"}}],"id":"z7b84vwx","_elType":"ROW","component_path":"row","style":{"padding":[["left","0%"],["right","0%"]]},"wrapper":{"width":""}}],"id":"v5fj8byh","type":"section","_elType":"SECTION","component_path":"section"}},"u4cmz4mr":{"name":"portfolio","id":"u4cmz4mr","data":{"name":"Portfolio","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%"}}},"holder":"container","type":"container","content":[{"type":"code","name":"Custom Code","_elType":"ELEMENT","component_path":"code","id":"mngvi9ez","advanced":{"js":"(function(){\r\n const root = document.getElementById('vimeo-gallery');\r\n if (!root) return;\r\n\r\n const CSV_URL = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSNXtfHJhXOECd3Sd77FRY293nJqcTdyx0UnJrtsBkzb1fSLaacCeEfsdqfRQiVUjx-uCGLGxpwCP9d/pub?output=csv\";\r\n \r\n const filtersContainer = root.querySelector('.vgal__filters-container');\r\n const filtersEl = root.querySelector('.vgal__filters');\r\n const filtersDropdownEl = root.querySelector('.vgal__filters-dropdown');\r\n const grid = root.querySelector('.vgal__grid');\r\n const status = root.querySelector('.vgal__status');\r\n const lightbox = document.getElementById('vimeo-lightbox');\r\n const lightboxContent = lightbox.querySelector('.vgal__lightboxContent');\r\n const lightboxTitle = lightbox.querySelector('#vimeo-title');\r\n const player = lightbox.querySelector('#vimeo-player');\r\n const closeBtn = lightbox.querySelector('.vgal__close');\r\n const descriptionBox = lightbox.querySelector('#vimeo-description');\r\n const prevBtn = lightbox.querySelector('#vimeo-prev');\r\n const nextBtn = lightbox.querySelector('#vimeo-next');\r\n const aboutBtn = lightbox.querySelector('#about-btn');\r\n const rotatePrompt = lightbox.querySelector('#rotate-prompt');\r\n const shareBtn = lightbox.querySelector('#share-btn');\r\n const progressIndicator = lightbox.querySelector('.vgal__progress-indicator');\r\n const progressBar = lightbox.querySelector('.vgal__progress-bar');\r\n const progressPercentage = lightbox.querySelector('.vgal__progress-percentage');\r\n\r\n let lastFocusedElement = null, isClosing = false, isNavigating = false, isFiltering = false;\r\n let allVideosData = [], currentVideoList = [], currentVideoIndex = -1;\r\n let preloadNextFrame = null, preloadPrevFrame = null, lastScrollYPosition = 0;\r\n let progressInterval = null, rotatePromptTimeout = null, intersectionObserver = null;\r\n let preloadFramePool = [], nextFrameIndex = 0;\r\n const POOL_SIZE = 5;\r\n\r\n function parseCSVRow(str) {\r\n const arr = [];\r\n let quote = false;\r\n let col = '';\r\n for (let i = 0; i < str.length; i++) {\r\n let cc = str[i], nc = str[i+1];\r\n if (cc === '\"' && quote && nc === '\"') { col += '\"'; i++; continue; }\r\n if (cc === '\"') { quote = !quote; continue; }\r\n if (cc === ',' && !quote) { arr.push(col); col = ''; continue; }\r\n col += cc;\r\n }\r\n arr.push(col);\r\n return arr.map(s => s.trim().replace(/^\"|\"$/g, ''));\r\n }\r\n\r\n function generateAndInjectSchema(videoData) {\r\n if (!videoData || videoData.length === 0) return;\r\n const allSchema = videoData.map(video => {\r\n const sanitizedTitle = (video.title || 'Untitled Video').replace(/{ requestAnimationFrame(()=>{ document.body.style.overflow = 'hidden'; scroller.scrollTo({top:0, left:0, behavior:'auto'}); }); });\r\n }\r\n\r\n function startProgressSimulation(){\r\n if (!progressIndicator || !progressBar || !progressPercentage || !player) return;\r\n if (progressInterval) clearInterval(progressInterval);\r\n progressIndicator.classList.remove('is-hidden');\r\n progressBar.style.transition = 'width .2s linear';\r\n progressBar.style.width = '0%';\r\n progressPercentage.textContent = '0%';\r\n player.style.opacity = '0';\r\n let current = 0, target = 95, steps = 50, duration = 2500, inc = target/steps, iv = duration/steps;\r\n progressInterval = setInterval(()=>{ current += inc; if(current>=target){ current=target; clearInterval(progressInterval); progressInterval=null; } progressBar.style.width = current+'%'; progressPercentage.textContent = Math.floor(current)+'%'; }, iv);\r\n }\r\n\r\n function completeProgressSimulation(){\r\n if (!progressIndicator || !progressBar || !progressPercentage || !player) return;\r\n if (progressInterval){ clearInterval(progressInterval); progressInterval=null; }\r\n progressBar.style.transition = 'width .3s ease-out';\r\n progressBar.style.width = '100%';\r\n progressPercentage.textContent = '100%';\r\n setTimeout(()=>{ progressIndicator.classList.add('is-hidden'); player.style.opacity = '1'; setTimeout(()=>{ progressBar.style.width='0%'; },300); },300);\r\n }\r\n \r\n async function fetchDataFromCSV(csvUrl) {\r\n try {\r\n const response = await fetch(csvUrl, { cache: 'no-store' });\r\n if (!response.ok) throw new Error(\"Could not fetch the sheet\");\r\n const text = await response.text();\r\n \r\n const lines = text.split('\\n');\r\n const categoriesMap = new Map();\r\n let currentCategoryName = \"General\";\r\n\r\n let startIndex = 0;\r\n if(lines[0] && lines[0].toLowerCase().includes('url')) {\r\n startIndex = 1; \r\n }\r\n\r\n for(let i = startIndex; i < lines.length; i++) {\r\n const cleanLine = lines[i].replace('\\r', '').trim();\r\n if (!cleanLine) continue;\r\n \r\n const parts = parseCSVRow(cleanLine);\r\n \r\n let urlStr = parts.find(p => p && p.includes('http'));\r\n let otherStr = parts.find(p => p && !p.includes('http'));\r\n\r\n if (urlStr) {\r\n let categoryForThisLink = otherStr ? otherStr : currentCategoryName;\r\n if (categoryForThisLink.toLowerCase() === 'category' || categoryForThisLink.toLowerCase() === 'url') {\r\n categoryForThisLink = currentCategoryName;\r\n } else {\r\n currentCategoryName = categoryForThisLink;\r\n }\r\n \r\n if (!categoriesMap.has(categoryForThisLink)) {\r\n categoriesMap.set(categoryForThisLink, { \r\n title: categoryForThisLink, \r\n id: categoryForThisLink.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase(), \r\n sources: [] \r\n });\r\n }\r\n \r\n const catObj = categoriesMap.get(categoryForThisLink);\r\n const showcaseMatch = urlStr.match(/(?:album|showcase)\\/(\\d+)/);\r\n const videoMatch = urlStr.match(/vimeo\\.com\\/(\\d+)/);\r\n \r\n if (showcaseMatch && showcaseMatch[1]) {\r\n catObj.sources.push({ id: showcaseMatch[1], type: 'showcase' });\r\n } else if (videoMatch && videoMatch[1]) {\r\n catObj.sources.push({ id: videoMatch[1], type: 'video' });\r\n }\r\n } else if (parts.length > 0 && parts[0]) {\r\n const catName = parts[0];\r\n if (catName.toLowerCase() !== 'category' && catName.toLowerCase() !== 'url') {\r\n currentCategoryName = catName;\r\n if (!categoriesMap.has(currentCategoryName)) {\r\n categoriesMap.set(currentCategoryName, { \r\n title: currentCategoryName, \r\n id: currentCategoryName.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase(), \r\n sources: [] \r\n });\r\n }\r\n }\r\n }\r\n }\r\n \r\n return Array.from(categoriesMap.values()).filter(cat => cat.sources.length > 0);\r\n } catch (error) {\r\n console.error(\"Error parsing CSV:\", error);\r\n return null;\r\n }\r\n }\r\n\r\n function jsonp(url){ return new Promise((resolve,reject)=>{ const cb='vimeoJSONP_'+Math.random().toString(36).slice(2); window[cb]=(data)=>{ cleanup(); resolve(data); }; const s=document.createElement('script'); s.src = url + (url.includes('?')?'&':'?') + 'callback='+cb+'&_='+Date.now(); s.onerror=()=>{ cleanup(); reject(new Error('JSONP failed')); }; document.body.appendChild(s); function cleanup(){ delete window[cb]; s.remove(); } }); }\r\n\r\n function setStatus(html){ if(status) status.innerHTML = html || ''; }\r\n function shuffleArray(a){ for(let i=a.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [a[i],a[j]]=[a[j],a[i]]; } }\r\n \r\n function getNextPreloadFrame(){ const f = preloadFramePool[nextFrameIndex]; nextFrameIndex = (nextFrameIndex+1)%POOL_SIZE; return f; }\r\n function preloadVideo(video){ if(!video) return; const f=getNextPreloadFrame(); const src=`https://player.vimeo.com/video/${video.id}?autoplay=0&muted=1&controls=0`; if(f.src!==src) f.src=src; }\r\n\r\n function renderGrid(videos) {\r\n grid.innerHTML = '';\r\n videos.forEach(v => {\r\n const section = document.createElement('div');\r\n section.className = 'vgal__section';\r\n \r\n const card = document.createElement('a'); \r\n card.className = 'vgal__card';\r\n card.dataset.showcaseId = v.showcaseId;\r\n card.dataset.videoId = v.id; \r\n card.href = `?video=${v.id}`;\r\n card.innerHTML = `

$\"${v.title}$

${v.title}

`;\r\n \r\n card.onclick = (e) => {\r\n e.preventDefault();\r\n openLightbox(v);\r\n };\r\n \r\n section.appendChild(card);\r\n grid.appendChild(section);\r\n });\r\n if(grid.children.length === 0) setStatus('No videos found. Check if your links are valid and your videos are public.');\r\n }\r\n \r\n function loadVideoInLightbox(video){\r\n if(!video || !player || !lightboxContent || !rotatePrompt || !lightboxTitle || !descriptionBox || !aboutBtn) return;\r\n if (rotatePromptTimeout) clearTimeout(rotatePromptTimeout);\r\n const isVertical = video.height > video.width;\r\n lightboxContent.classList.toggle('is-vertical', isVertical);\r\n const isMobile = window.matchMedia(\"(max-width: 768px)\").matches;\r\n const shouldShowPrompt = isMobile && !isVertical;\r\n rotatePrompt.classList.toggle('is-hidden', !shouldShowPrompt);\r\n if (shouldShowPrompt) {\r\n rotatePromptTimeout = setTimeout(() => {\r\n rotatePrompt.classList.add('is-hidden');\r\n }, 3000);\r\n }\r\n player.src = `https://player.vimeo.com/video/${video.id}?autoplay=1`;\r\n lightboxTitle.textContent = video.title;\r\n const hasDesc = video.description && video.description.trim()!=='';\r\n descriptionBox.innerHTML = hasDesc ? video.description : '';\r\n aboutBtn.hidden = !hasDesc;\r\n descriptionBox.classList.remove('is-visible');\r\n }\r\n\r\n function updateNavState(){ if(!prevBtn || !nextBtn) return; prevBtn.hidden = currentVideoIndex<=0; nextBtn.hidden = currentVideoIndex>=currentVideoList.length-1; }\r\n\r\n function openLightbox(video){\r\n if(!video || !lightbox || !shareBtn || !grid) return;\r\n lastFocusedElement = document.activeElement;\r\n lastScrollYPosition = window.scrollY;\r\n scrollToTopThenLockBody();\r\n\r\n if ('orientation' in screen) {\r\n screen.orientation.addEventListener('change', handleOrientationChange);\r\n }\r\n\r\n const url = new URL(window.location.href);\r\n url.searchParams.set('video', video.id);\r\n history.pushState({ videoId: video.id }, '', url);\r\n\r\n const visibleSections = Array.from(grid.querySelectorAll('.vgal__section:not(.is-filtered-out)'));\r\n const visibleCards = visibleSections.map(sec => sec.querySelector('.vgal__card'));\r\n currentVideoList = visibleCards.map(card => allVideosData.find(v => String(v.id)===card.dataset.videoId)).filter(Boolean);\r\n currentVideoIndex = currentVideoList.findIndex(v => v.id === video.id);\r\n \r\n if(player) player.onload = ()=>{ completeProgressSimulation(); updateNavState(); updatePreloadedNavVideos(); player.onload=null; };\r\n startProgressSimulation();\r\n loadVideoInLightbox(video);\r\n lightbox.classList.add('is-open');\r\n lightbox.setAttribute('aria-hidden','false');\r\n setTimeout(()=> shareBtn.focus(), 100);\r\n }\r\n\r\n function closeLightbox(){\r\n if(isClosing || !lightbox) return;\r\n isClosing=true;\r\n if ('orientation' in screen) {\r\n screen.orientation.removeEventListener('change', handleOrientationChange);\r\n }\r\n if (rotatePromptTimeout) clearTimeout(rotatePromptTimeout);\r\n if (rotatePrompt) rotatePrompt.classList.add('is-hidden');\r\n const url = new URL(window.location.href);\r\n url.searchParams.delete('video');\r\n history.pushState({}, '', url);\r\n lightbox.classList.remove('is-open');\r\n setTimeout(()=>{\r\n if(player) player.src='';\r\n if(lightboxTitle) lightboxTitle.textContent='';\r\n if(descriptionBox) { descriptionBox.innerHTML=''; descriptionBox.classList.remove('is-visible'); }\r\n if(lightboxContent) lightboxContent.classList.remove('is-vertical');\r\n lightbox.setAttribute('aria-hidden','true');\r\n if(progressInterval){ clearInterval(progressInterval); progressInterval=null; }\r\n if(progressIndicator) progressIndicator.classList.add('is-hidden');\r\n if(preloadNextFrame){ preloadNextFrame.remove(); preloadNextFrame=null; }\r\n if(preloadPrevFrame){ preloadPrevFrame.remove(); preloadPrevFrame=null; }\r\n document.body.style.overflow='';\r\n if(lastFocusedElement){ lastFocusedElement.focus({preventScroll:true}); }\r\n setTimeout(()=>{ const scroller=document.scrollingElement||document.documentElement; scroller.scrollTo({top:lastScrollYPosition, left:0, behavior:'auto'}); },0);\r\n isClosing=false;\r\n }, 400);\r\n }\r\n\r\n function navigateLightbox(dir){\r\n if(isNavigating) return;\r\n const ni = currentVideoIndex + dir;\r\n if (ni<0 || ni>=currentVideoList.length) return;\r\n isNavigating=true;\r\n currentVideoIndex=ni;\r\n const nextVideo = currentVideoList[currentVideoIndex];\r\n if (nextVideo) {\r\n const url = new URL(window.location.href);\r\n url.searchParams.set('video', nextVideo.id);\r\n history.pushState({ videoId: nextVideo.id }, '', url);\r\n }\r\n if(player) player.onload = ()=>{ completeProgressSimulation(); updateNavState(); updatePreloadedNavVideos(); isNavigating=false; player.onload=null; };\r\n startProgressSimulation();\r\n loadVideoInLightbox(currentVideoList[currentVideoIndex]);\r\n }\r\n\r\n function handleOrientationChange() {\r\n if (!lightbox || !lightbox.classList.contains('is-open')) return;\r\n setTimeout(() => {\r\n const isLandscape = screen.orientation.type.includes('landscape');\r\n if (isLandscape) {\r\n if (player && typeof player.requestFullscreen === 'function' && !document.fullscreenElement) {\r\n player.requestFullscreen().catch(err => console.error(\"Could not enter fullscreen:\", err));\r\n }\r\n } else {\r\n if (document.fullscreenElement && typeof document.exitFullscreen === 'function') {\r\n document.exitFullscreen().catch(err => console.error(\"Could not exit fullscreen:\", err));\r\n }\r\n }\r\n }, 200);\r\n }\r\n\r\n function handleFocusTrap(e){ if(e.key!=='Tab' || !shareBtn || !closeBtn || !aboutBtn || !prevBtn || !nextBtn) return; const f=[shareBtn, closeBtn,aboutBtn,prevBtn,nextBtn].filter(el=>!el.hidden); const first=f[0]; const last=f[f.length-1]; if(e.shiftKey){ if(document.activeElement===first){ last.focus(); e.preventDefault(); } } else { if(document.activeElement===last){ first.focus(); e.preventDefault(); } } }\r\n \r\n function handleGlobalKeydown(e){ if(!lightbox || !lightbox.classList.contains('is-open')) return; if(e.key==='Escape') closeLightbox(); if(e.key==='ArrowLeft'){ e.preventDefault(); navigateLightbox(-1); } if(e.key==='ArrowRight'){ e.preventDefault(); navigateLightbox(1); } handleFocusTrap(e); }\r\n\r\n function handleFilterClick(e) {\r\n const t = e.target; \r\n if(!t.matches('.vgal__filter-btn') || isFiltering || !grid || !filtersDropdownEl) return;\r\n \r\n const stickyEl = root.querySelector('.vgal__filters-sticky');\r\n const stickyOffset = parseFloat(window.getComputedStyle(stickyEl).top) || 0;\r\n const galleryTop = root.getBoundingClientRect().top + window.scrollY;\r\n \r\n if (window.scrollY > galleryTop - stickyOffset) {\r\n window.scrollTo({ top: galleryTop - stickyOffset, behavior: 'smooth' });\r\n }\r\n \r\n isFiltering = true;\r\n const filterId = t.dataset.filterId; \r\n \r\n const allSections = Array.from(grid.querySelectorAll('.vgal__section'));\r\n \r\n const firstPositions = new Map(); \r\n allSections.forEach(section => {\r\n const card = section.querySelector('.vgal__card');\r\n if (card && !section.classList.contains('is-filtered-out')) {\r\n firstPositions.set(section, card.getBoundingClientRect());\r\n }\r\n });\r\n \r\n document.querySelectorAll('.vgal__filter-btn.is-active').forEach(btn => btn.classList.remove('is-active'));\r\n document.querySelectorAll(`.vgal__filter-btn[data-filter-id=\"${filterId}\"]`).forEach(btn => btn.classList.add('is-active'));\r\n \r\n let sectionsToShow = [];\r\n let sectionsToHide = [];\r\n \r\n allSections.forEach(section => {\r\n const card = section.querySelector('.vgal__card');\r\n if (card) {\r\n if (filterId === 'all' || card.dataset.showcaseId === filterId) {\r\n sectionsToShow.push(section);\r\n } else {\r\n sectionsToHide.push(section);\r\n }\r\n }\r\n });\r\n \r\n shuffleArray(sectionsToShow); \r\n \r\n sectionsToHide.forEach(section => {\r\n section.classList.add('is-filtered-out');\r\n });\r\n \r\n sectionsToShow.forEach(section => {\r\n section.classList.remove('is-filtered-out');\r\n grid.appendChild(section); \r\n });\r\n \r\n sectionsToShow.forEach(section => {\r\n const card = section.querySelector('.vgal__card');\r\n const lastPos = card.getBoundingClientRect(); \r\n const firstPos = firstPositions.get(section); \r\n \r\n if (firstPos) { \r\n const dx = firstPos.left - lastPos.left; \r\n const dy = firstPos.top - lastPos.top; \r\n \r\n card.style.transition = 'none'; \r\n card.style.transform = `translate(${dx}px, ${dy}px)`; \r\n card.style.opacity = '1';\r\n \r\n card.offsetHeight; // Force reflow\r\n \r\n card.style.transition = 'transform .6s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .6s ease'; \r\n card.style.transform = 'translate(0,0)'; \r\n } else {\r\n const randomX = (Math.random() - 0.5) * 60;\r\n const randomY = (Math.random() - 0.5) * 60;\r\n \r\n card.style.transition = 'none'; \r\n card.style.opacity = '0'; \r\n card.style.transform = `translate(${randomX}px, ${randomY}px) scale(0.9)`; \r\n \r\n card.offsetHeight; // Force reflow\r\n \r\n card.style.transition = 'transform .6s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .6s ease'; \r\n card.style.opacity = '1'; \r\n card.style.transform = 'translate(0,0) scale(1)'; \r\n } \r\n });\r\n \r\n setTimeout(() => { \r\n isFiltering = false; \r\n setupIntersectionObserver(); \r\n filtersDropdownEl.classList.remove('is-open'); \r\n }, 600);\r\n }\r\n\r\n async function handleShare() {\r\n if (!shareBtn) return;\r\n const video = currentVideoList[currentVideoIndex];\r\n if (!video) return;\r\n const shareData = { title: `Check out this video: ${video.title}`, text: video.title, url: window.location.href };\r\n if (navigator.share) {\r\n try { await navigator.share(shareData); } catch (err) { console.error('Share failed:', err); }\r\n } else {\r\n try {\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = window.location.href;\r\n textArea.style.position = \"fixed\";\r\n document.body.appendChild(textArea);\r\n textArea.focus();\r\n textArea.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(textArea);\r\n const originalContent = shareBtn.innerHTML;\r\n shareBtn.innerHTML = 'Copied!';\r\n shareBtn.style.fontSize = '12px';\r\n setTimeout(() => { shareBtn.innerHTML = originalContent; shareBtn.style.fontSize = ''; }, 2000);\r\n } catch (err) { console.error('Failed to copy link:', err); alert('Could not copy link to clipboard.'); }\r\n }\r\n }\r\n\r\n function updatePreloadedNavVideos(){ const nextVideo=currentVideoList[currentVideoIndex+1]; if(nextVideo){ if(!preloadNextFrame){ preloadNextFrame=document.createElement('iframe'); preloadNextFrame.style.display='none'; preloadNextFrame.ariaHidden='true'; document.body.appendChild(preloadNextFrame);} const expected=`https://player.vimeo.com/video/${nextVideo.id}?autoplay=0&muted=1&controls=0`; if(preloadNextFrame.src!==expected) preloadNextFrame.src=expected; } else if(preloadNextFrame){ preloadNextFrame.remove(); preloadNextFrame=null; } const prevVideo=currentVideoList[currentVideoIndex-1]; if(prevVideo){ if(!preloadPrevFrame){ preloadPrevFrame=document.createElement('iframe'); preloadPrevFrame.style.display='none'; preloadPrevFrame.ariaHidden='true'; document.body.appendChild(preloadPrevFrame);} const expected2=`https://player.vimeo.com/video/${prevVideo.id}?autoplay=0&muted=1&controls=0`; if(preloadPrevFrame.src!==expected2) preloadPrevFrame.src=expected2; } else if(preloadPrevFrame){ preloadPrevFrame.remove(); preloadPrevFrame=null; } }\r\n \r\n function setupIntersectionObserver(){ if(intersectionObserver) intersectionObserver.disconnect(); if(!grid) return; const Observer = window.IntersectionObserver; if(!Observer) return; const opts={root:null, rootMargin:'300px', threshold:0}; intersectionObserver = new Observer((entries,obs)=>{ entries.forEach(entry=>{ if(entry.isIntersecting){ const card=entry.target.querySelector('.vgal__card'); if(card){ const videoId=card.dataset.videoId; const toPreload=allVideosData.find(v=>String(v.id)===videoId); if(toPreload) preloadVideo(toPreload); } obs.unobserve(entry.target); } }); }, opts); grid.querySelectorAll('.vgal__section:not(.is-filtered-out)').forEach(section=>intersectionObserver.observe(section)); }\r\n\r\n async function init(){\r\n setStatus('

');\r\n \r\n const csvCategories = await fetchDataFromCSV(CSV_URL);\r\n \r\n if(!csvCategories || csvCategories.length===0){ \r\n setStatus('Could not load menu from Google Sheet. Please check the URL.'); \r\n return; \r\n }\r\n try{\r\n const allPromises = csvCategories.flatMap(cat => cat.sources.map(src => { \r\n const url = (src.type==='showcase') ? `https://vimeo.com/api/v2/album/${src.id}/videos.json` : `https://vimeo.com/api/v2/video/${src.id}.json`; \r\n return jsonp(url)\r\n .then(videos => ({categoryId:cat.id, categoryTitle:cat.title, videos}))\r\n .catch(err => {\r\n console.warn(`Skipping invalid or private Vimeo link (ID: ${src.id})`);\r\n return null; \r\n }); \r\n }));\r\n \r\n const allFetched = (await Promise.all(allPromises)).filter(res => res !== null);\r\n \r\n const byCat = {};\r\n allFetched.forEach(res => { \r\n if(!byCat[res.categoryId]) byCat[res.categoryId] = []; \r\n const tagged = Array.isArray(res.videos) ? res.videos.map(v=>({...v, showcaseId:res.categoryId, showcaseTitle:res.categoryTitle})) : [{...res.videos, showcaseId:res.categoryId, showcaseTitle:res.categoryTitle}]; \r\n byCat[res.categoryId].push(...tagged); \r\n });\r\n \r\n let finalData = [];\r\n csvCategories.forEach(cat => { \r\n const list = byCat[cat.id]; \r\n if(list){ shuffleArray(list); finalData.push(...list); } \r\n });\r\n allVideosData = finalData;\r\n\r\n generateAndInjectSchema(allVideosData);\r\n\r\n const staticContent = document.getElementById('static-seo-content');\r\n if (staticContent) {\r\n staticContent.remove();\r\n }\r\n\r\n if (filtersEl) { \r\n let desktopFilterHtml = ''; \r\n let categoryFilterHtml = ''; \r\n csvCategories.forEach(cat => { categoryFilterHtml += ``; }); \r\n desktopFilterHtml += categoryFilterHtml; \r\n filtersEl.innerHTML = desktopFilterHtml; \r\n }\r\n \r\n if (filtersDropdownEl) { \r\n let categoryFilterHtml = ''; \r\n csvCategories.forEach(cat => { categoryFilterHtml += ``; }); \r\n let dropdownHtml = ``; \r\n filtersDropdownEl.innerHTML = dropdownHtml; \r\n }\r\n \r\n setStatus('');\r\n renderGrid(allVideosData);\r\n \r\n if(allVideosData.length === 0) {\r\n setStatus('No public videos found. Check if your links are valid and set to \"Public\" or \"Hide from Vimeo\".');\r\n }\r\n \r\n for(let i=0;i String(v.id) === videoIdToOpen); \r\n if (videoToOpen){ openLightbox(videoToOpen); } \r\n }\r\n } catch(err){ \r\n console.error('Vimeo Gallery Error:', err); \r\n setStatus('A critical error occurred while loading the gallery.'); \r\n }\r\n }\r\n\r\n if (closeBtn) closeBtn.addEventListener('click', closeLightbox);\r\n if (prevBtn) prevBtn.addEventListener('click', ()=>navigateLightbox(-1));\r\n if (nextBtn) nextBtn.addEventListener('click', ()=>navigateLightbox(1));\r\n if (shareBtn) shareBtn.addEventListener('click', handleShare);\r\n \r\n if (filtersContainer) {\r\n filtersContainer.addEventListener('click', (e) => {\r\n if (e.target.closest('.vgal__filters-dropdown-toggle')) {\r\n filtersDropdownEl.classList.toggle('is-open');\r\n return;\r\n }\r\n handleFilterClick(e);\r\n });\r\n }\r\n\r\n if (lightbox) lightbox.addEventListener('click', e=>{ if(e.target===lightbox) closeLightbox(); });\r\n document.addEventListener('keydown', handleGlobalKeydown);\r\n \r\n if (aboutBtn) {\r\n const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);\r\n if (isTouchDevice) { aboutBtn.addEventListener('click', () => { if(descriptionBox) descriptionBox.classList.toggle('is-visible'); }); } \r\n else {\r\n aboutBtn.addEventListener('mouseenter', () => { if(descriptionBox) descriptionBox.classList.add('is-visible'); });\r\n aboutBtn.addEventListener('mouseleave', () => { if(descriptionBox) descriptionBox.classList.remove('is-visible'); });\r\n }\r\n }\r\n\r\n window.onpopstate = function(event) {\r\n if (!lightbox) return;\r\n const params = new URLSearchParams(window.location.search);\r\n const videoId = params.get('video');\r\n if (videoId && allVideosData.length > 0) {\r\n const videoToOpen = allVideosData.find(v => String(v.id) === videoId);\r\n const isLightboxOpen = lightbox.classList.contains('is-open');\r\n const currentVideo = isLightboxOpen ? currentVideoList[currentVideoIndex] : null;\r\n if (videoToOpen && (!isLightboxOpen || (currentVideo && String(currentVideo.id) !== videoId))) {\r\n if (isLightboxOpen) {\r\n const newIndex = currentVideoList.findIndex(v => String(v.id) === videoId);\r\n if (newIndex !== -1 && newIndex !== currentVideoIndex) {\r\n isNavigating = true;\r\n currentVideoIndex = newIndex;\r\n if(player) player.onload = ()=>{ completeProgressSimulation(); updateNavState(); updatePreloadedNavVideos(); isNavigating=false; player.onload=null; };\r\n startProgressSimulation();\r\n loadVideoInLightbox(currentVideoList[currentVideoIndex]);\r\n }\r\n } else { openLightbox(videoToOpen); }\r\n }\r\n } else { if (lightbox.classList.contains('is-open')) { closeLightbox(); } }\r\n };\r\n \r\n init();\r\n})();","html":"\r\n\r\n\r\n\r\n

\r\n \r\n\r\n

\r\n

\r\n \r\n \r\n

\r\n

\r\n \r\n

\r\n

\r\n\r\n"}}],"id":"c2t2xbyx","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","0px"],["bottom","10px"]],"flexBasis":"100%","alignItems":"stretch"}}],"id":"z0qdahip","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","0px"],["left","10px"],["right","10px"],["bottom","10px"]],"flexBasis":"100%","justifyContent":"center","width":""}}],"id":"f07fk250","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}}}},"bsf0gvwg":{"name":"social media","id":"bsf0gvwg","data":{"name":"Social Media","content":[{"name":"Container","holder":"root","type":"container","content":[{"name":"Container","media":{"mobile":{"style":{"flexBasis":"100%"}}},"holder":"container","type":"container","content":[{"type":"code","name":"Custom Code","_elType":"ELEMENT","component_path":"code","id":"8u3sk2j9","advanced":{"html":"\r\n\r\n\r\n\r\n

\r\n

\r\n\r\n \r\n $\"TikTok\"$ \r\n \r\n\r\n \r\n $\"Facebook\"$ \r\n \r\n\r\n \r\n $\"YouTube\"$ \r\n \r\n\r\n \r\n $\"Vimeo\"$ \r\n \r\n\r\n \r\n $\"Messenger\"$ \r\n \r\n\r\n \r\n $\"X\"$ \r\n \r\n\r\n \r\n $\"LinkedIn\"$ \r\n \r\n\r\n \r\n $\"WhatsApp\"$ \r\n \r\n\r\n \r\n $\"Instagram\"$ \r\n \r\n\r\n

\r\n

\r\n","js":"document.addEventListener('DOMContentLoaded', () => {\r\n const container = document.getElementById('icon-container');\r\n\r\n if (!container) return;\r\n\r\n const icons = Array.from(container.children);\r\n\r\n // Fisher–Yates Shuffle\r\n for (let i = icons.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [icons[i], icons[j]] = [icons[j], icons[i]];\r\n }\r\n\r\n container.innerHTML = '';\r\n\r\n icons.forEach(icon => container.appendChild(icon));\r\n});\r\n"}}],"id":"9w6qn46l","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"column","flexWrap":"wrap","padding":[["top","10px"],["bottom","10px"]],"flexBasis":"100%","alignItems":"stretch"}}],"id":"pzykhwy4","_elType":"CONTAINER","component_path":"container","style":{"display":"flex","flexDirection":"row","flexWrap":"wrap","padding":[["top","10px"],["left","10px"],["right","10px"],["bottom","10px"]],"flexBasis":"100%","justifyContent":"center","width":""}}],"id":"1ccrkrv6","type":"section","_elType":"SECTION","component_path":"section","pseudoClass":{"before":{"style":{"__gradientType":"simple"}}},"style":{"padding":[["top","0px"]]}}}}}

My Video Portfolio