{"id":69,"date":"2026-01-26T21:22:50","date_gmt":"2026-01-26T21:22:50","guid":{"rendered":"https:\/\/savvyscopemedia.co.ke\/?page_id=69"},"modified":"2026-02-09T21:53:20","modified_gmt":"2026-02-09T21:53:20","slug":"digital-marketing-project-portfolio","status":"publish","type":"page","link":"https:\/\/savvyscopemedia.co.ke\/index.php\/digital-marketing-project-portfolio\/","title":{"rendered":"Our Portfolio"},"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 \n Portfolio Access | Savvyscope Media Solutions<\/title>\n \n <!-- Google Fonts -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n <!-- Font Awesome -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <style>\n \/* CSS Reset and Base Styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n line-height: 1.6;\n color: #07172d;\n background-color: #ffffff;\n overflow-x: hidden;\n font-size: 16px;\n }\n\n \/* ===== PORTFOLIO ACCESS SECTION ===== *\/\n .portfolio-access-section {\n min-height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, #07172d 0%, #0a1f3a 100%);\n position: relative;\n overflow: hidden;\n padding: 1.5rem 1rem;\n }\n\n \/* Background elements *\/\n .portfolio-bg {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 1;\n }\n\n .portfolio-shape {\n position: absolute;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(3, 196, 161, 0.08) 0%, transparent 70%);\n filter: blur(40px);\n animation: shapeFloat 25s ease-in-out infinite;\n }\n\n .portfolio-shape-1 {\n width: 400px;\n height: 400px;\n top: -200px;\n right: -150px;\n animation-delay: 0s;\n }\n\n .portfolio-shape-2 {\n width: 300px;\n height: 300px;\n bottom: -150px;\n left: -100px;\n animation-delay: 5s;\n }\n\n .portfolio-shape-3 {\n width: 200px;\n height: 200px;\n top: 30%;\n left: 10%;\n animation-delay: 10s;\n }\n\n @keyframes shapeFloat {\n 0%, 100% { transform: translateY(0) scale(1); opacity: 0.08; }\n 50% { transform: translateY(-20px) scale(1.1); opacity: 0.12; }\n }\n\n \/* Grid pattern overlay *\/\n .portfolio-bg::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: \n linear-gradient(rgba(3, 196, 161, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(3, 196, 161, 0.03) 1px, transparent 1px);\n background-size: 40px 40px;\n opacity: 0.3;\n }\n\n \/* Main container *\/\n .portfolio-container {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n width: 100%;\n }\n\n \/* Portfolio access grid *\/\n .portfolio-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n background: rgba(255, 255, 255, 0.98);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);\n }\n\n @media screen and (min-width: 992px) {\n .portfolio-grid {\n grid-template-columns: 1fr 1fr;\n }\n }\n\n \/* Left Side - Portfolio Preview *\/\n .portfolio-preview {\n background: linear-gradient(135deg, #07172d 0%, #0a1f3a 100%);\n padding: 3rem 2rem;\n position: relative;\n overflow: hidden;\n }\n\n .portfolio-preview::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\"><path d=\"M0,0 Q250,100 500,0 T1000,0 V100 H0 Z\" fill=\"%2303c4a1\" opacity=\"0.05\"\/><\/svg>');\n background-size: 100% 120px;\n background-position: bottom;\n background-repeat: no-repeat;\n }\n\n .portfolio-header {\n margin-bottom: 2.5rem;\n position: relative;\n z-index: 2;\n }\n\n .portfolio-subtitle {\n font-family: 'Inter', sans-serif;\n font-weight: 600;\n color: #03c4a1;\n font-size: 0.875rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n margin-bottom: 0.8rem;\n display: block;\n padding: 0.3rem 1rem;\n background: rgba(3, 196, 161, 0.1);\n border-radius: 20px;\n border: 1px solid rgba(3, 196, 161, 0.15);\n width: fit-content;\n }\n\n .portfolio-title {\n font-family: 'Merriweather', serif;\n font-weight: 700;\n color: #ffffff;\n font-size: clamp(1.8rem, 3.5vw, 2.5rem);\n line-height: 1.2;\n margin-bottom: 1rem;\n }\n\n .portfolio-description {\n color: #d1e7ff;\n font-family: 'Inter', sans-serif;\n font-weight: 300;\n font-size: 1rem;\n line-height: 1.6;\n }\n\n \/* Portfolio Categories *\/\n .portfolio-categories {\n margin-top: 3rem;\n position: relative;\n z-index: 2;\n }\n\n .categories-title {\n font-family: 'Merriweather', serif;\n font-weight: 700;\n color: #ffffff;\n font-size: 1.2rem;\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n gap: 0.8rem;\n }\n\n .categories-title i {\n color: #03c4a1;\n }\n\n .categories-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n\n @media screen and (max-width: 768px) {\n .categories-grid {\n grid-template-columns: 1fr;\n }\n }\n\n .category-item {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n padding: 1.25rem;\n border: 1px solid rgba(255, 255, 255, 0.1);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .category-item:hover {\n background: rgba(255, 255, 255, 0.08);\n border-color: rgba(3, 196, 161, 0.3);\n transform: translateY(-4px);\n box-shadow: 0 10px 25px rgba(3, 196, 161, 0.2);\n }\n\n .category-icon {\n width: 45px;\n height: 45px;\n border-radius: 10px;\n background: linear-gradient(135deg, rgba(3, 196, 161, 0.2), rgba(3, 196, 161, 0.1));\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 1rem;\n box-shadow: 0 5px 15px rgba(3, 196, 161, 0.15);\n }\n\n .category-icon i {\n color: #03c4a1;\n font-size: 1.2rem;\n }\n\n .category-item h4 {\n font-family: 'Inter', sans-serif;\n font-weight: 600;\n color: #ffffff;\n font-size: 0.95rem;\n margin-bottom: 0.5rem;\n }\n\n .category-item p {\n color: #d1e7ff;\n font-family: 'Inter', sans-serif;\n font-weight: 300;\n font-size: 0.85rem;\n line-height: 1.4;\n opacity: 0.9;\n }\n\n \/* Portfolio Stats *\/\n .portfolio-stats {\n margin-top: 3rem;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 14px;\n padding: 1.5rem;\n border: 1px solid rgba(255, 255, 255, 0.1);\n position: relative;\n overflow: hidden;\n }\n\n .portfolio-stats::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, #03c4a1, #02a98b);\n }\n\n .stats-title {\n font-family: 'Merriweather', serif;\n font-weight: 700;\n color: #ffffff;\n font-size: 1.1rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.6rem;\n }\n\n .stats-title i {\n color: #03c4a1;\n }\n\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n\n .stat-item {\n text-align: center;\n padding: 1rem;\n }\n\n .stat-number {\n font-family: 'Merriweather', serif;\n font-weight: 700;\n color: #03c4a1;\n font-size: 1.8rem;\n line-height: 1;\n margin-bottom: 0.5rem;\n }\n\n .stat-label {\n color: #d1e7ff;\n font-family: 'Inter', sans-serif;\n font-weight: 300;\n font-size: 0.85rem;\n line-height: 1.3;\n }\n\n \/* Right Side - Access Request Form *\/\n .access-form-section {\n padding: 3rem 2rem;\n background: white;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .access-header {\n margin-bottom: 2.5rem;\n }\n\n .access-title {\n font-family: 'Merriweather', serif;\n font-weight: 700;\n color: #07172d;\n font-size: clamp(1.4rem, 2.5vw, 1.8rem);\n line-height: 1.2;\n margin-bottom: 0.8rem;\n }\n\n .access-subtitle {\n color: #4a5568;\n font-family: 'Inter', sans-serif;\n font-weight: 300;\n font-size: 1rem;\n line-height: 1.5;\n margin-bottom: 2rem;\n }\n\n \/* Process Steps *\/\n .access-process {\n margin-bottom: 2.5rem;\n padding: 1.5rem;\n background: #f8fafc;\n border-radius: 12px;\n border: 1px solid rgba(7, 23, 45, 0.1);\n }\n\n .process-title {\n font-family: 'Merriweather', serif;\n font-weight: 700;\n color: #07172d;\n font-size: 1.1rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.6rem;\n }\n\n .process-title i {\n color: #03c4a1;\n }\n\n .process-steps {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n .step-item {\n display: flex;\n align-items: flex-start;\n gap: 0.8rem;\n }\n\n .step-number {\n width: 28px;\n height: 28px;\n background: #03c4a1;\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Inter', sans-serif;\n font-weight: 600;\n font-size: 0.8rem;\n flex-shrink: 0;\n }\n\n .step-content h4 {\n font-family: 'Inter', sans-serif;\n font-weight: 600;\n color: #07172d;\n font-size: 0.9rem;\n margin-bottom: 0.3rem;\n }\n\n .step-content p {\n color: #4a5568;\n font-family: 'Inter', sans-serif;\n font-weight: 300;\n font-size: 0.85rem;\n line-height: 1.4;\n }\n\n \/* JotForm Container - FIXED FOR SCROLLING *\/\n .jotform-container {\n width: 100%;\n max-width: 100%;\n margin: 0 auto;\n position: relative;\n z-index: 10;\n background: white;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(7, 23, 45, 0.1);\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 600px;\n max-height: 800px;\n }\n\n \/* Scrollable iframe wrapper *\/\n .iframe-wrapper {\n width: 100%;\n height: 100%;\n flex: 1;\n overflow-y: auto;\n border-radius: 12px;\n position: relative;\n }\n\n \/* JotForm Loading State *\/\n .jotform-loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 3rem;\n background: #f8fafc;\n border-radius: 12px;\n min-height: 400px;\n width: 100%;\n height: 100%;\n }\n\n .loading-spinner {\n text-align: center;\n margin-bottom: 1.5rem;\n }\n\n .loading-spinner i {\n color: #03c4a1;\n font-size: 2.5rem;\n animation: spin 1s linear infinite;\n }\n\n .jotform-loading h3 {\n font-family: 'Merriweather', serif;\n font-weight: 700;\n color: #07172d;\n font-size: 1.3rem;\n margin-bottom: 0.8rem;\n }\n\n .jotform-loading p {\n color: #4a5568;\n font-family: 'Inter', sans-serif;\n font-weight: 300;\n font-size: 0.95rem;\n text-align: center;\n max-width: 400px;\n }\n\n \/* JotForm iframe styling - FIXED *\/\n .jotform-container iframe {\n width: 100% !important;\n height: 100% !important;\n min-height: 800px !important;\n border: none !important;\n background: transparent !important;\n display: block !important;\n overflow-y: auto !important;\n }\n\n \/* Custom scrollbar for iframe wrapper *\/\n .iframe-wrapper::-webkit-scrollbar {\n width: 8px;\n }\n\n .iframe-wrapper::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n\n .iframe-wrapper::-webkit-scrollbar-thumb {\n background: #03c4a1;\n border-radius: 4px;\n }\n\n .iframe-wrapper::-webkit-scrollbar-thumb:hover {\n background: #02a98b;\n }\n\n \/* Security Notice *\/\n .security-notice {\n margin-top: 2rem;\n padding: 1rem;\n background: #fff8e1;\n border-radius: 8px;\n border-left: 4px solid #ffc107;\n }\n\n .security-notice p {\n color: #856404;\n font-family: 'Inter', sans-serif;\n font-weight: 300;\n font-size: 0.85rem;\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n }\n\n .security-notice i {\n color: #856404;\n font-size: 1rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n \/* Message Styling *\/\n .message {\n display: none;\n padding: 1.5rem;\n border-radius: 14px;\n text-align: center;\n margin-top: 1.5rem;\n animation: fadeIn 0.5s ease;\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n\n .success-message {\n background: linear-gradient(135deg, #28a745, #218838);\n color: white;\n }\n\n .error-message {\n background: linear-gradient(135deg, #dc3545, #c82333);\n color: white;\n }\n\n .message i {\n font-size: 2.5rem;\n margin-bottom: 0.8rem;\n }\n\n .message h3 {\n font-family: 'Merriweather', serif;\n font-weight: 700;\n font-size: 1.3rem;\n margin-bottom: 0.4rem;\n }\n\n .message p {\n font-size: 0.95rem;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Enhanced Responsive Design *\/\n @media screen and (max-width: 1200px) {\n .portfolio-container {\n max-width: 1000px;\n }\n }\n\n @media screen and (max-width: 991px) {\n .portfolio-access-section {\n padding: 1rem 0.75rem;\n }\n \n .portfolio-preview,\n .access-form-section {\n padding: 2.5rem 1.5rem;\n }\n \n .jotform-container {\n max-height: 700px;\n }\n }\n\n @media screen and (max-width: 767px) {\n .portfolio-preview,\n .access-form-section {\n padding: 2rem 1.25rem;\n }\n \n .categories-grid {\n grid-template-columns: 1fr;\n }\n \n .stats-grid {\n grid-template-columns: 1fr;\n }\n \n .process-steps {\n gap: 0.8rem;\n }\n \n .jotform-container {\n min-height: 500px;\n max-height: 600px;\n }\n \n .jotform-container iframe {\n min-height: 600px !important;\n }\n }\n\n @media screen and (max-width: 575px) {\n .portfolio-access-section {\n padding: 1rem 0.5rem;\n }\n \n .portfolio-preview,\n .access-form-section {\n padding: 1.5rem 1rem;\n }\n \n .portfolio-title {\n font-size: 1.6rem;\n }\n \n .access-title {\n font-size: 1.4rem;\n }\n \n .jotform-container {\n min-height: 450px;\n max-height: 550px;\n }\n \n .jotform-container iframe {\n min-height: 550px !important;\n }\n \n .jotform-loading {\n padding: 2rem 1rem;\n min-height: 350px;\n }\n }\n\n @media screen and (max-width: 400px) {\n .portfolio-subtitle {\n font-size: 0.75rem;\n padding: 0.25rem 0.75rem;\n }\n \n .category-item {\n padding: 1rem;\n }\n \n .stat-item {\n padding: 0.75rem;\n }\n \n .jotform-container {\n min-height: 400px;\n max-height: 500px;\n }\n \n .jotform-container iframe {\n min-height: 500px !important;\n }\n }\n\n @media screen and (max-width: 320px) {\n .jotform-container {\n min-height: 350px;\n max-height: 450px;\n }\n \n .jotform-container iframe {\n min-height: 450px !important;\n }\n }\n\n \/* Accessibility *\/\n @media (prefers-reduced-motion: reduce) {\n .portfolio-shape,\n .category-item,\n .loading-spinner i {\n animation: none;\n transition: none;\n }\n \n .category-item:hover {\n transform: none;\n }\n }\n\n \/* Focus states *\/\n .submit-btn:focus {\n outline: 3px solid rgba(3, 196, 161, 0.8);\n outline-offset: 2px;\n }\n <\/style>\n<\/head>\n<body>\n <!-- Portfolio Access Section -->\n <section class=\"portfolio-access-section\" id=\"portfolio-access\" aria-label=\"Portfolio Access Request\">\n <!-- Background elements -->\n <div class=\"portfolio-bg\">\n <div class=\"portfolio-shape portfolio-shape-1\"><\/div>\n <div class=\"portfolio-shape portfolio-shape-2\"><\/div>\n <div class=\"portfolio-shape portfolio-shape-3\"><\/div>\n <\/div>\n \n <div class=\"portfolio-container\">\n <div class=\"portfolio-grid\">\n <!-- Portfolio Preview Side -->\n <div class=\"portfolio-preview\">\n <div class=\"portfolio-header\">\n <div class=\"portfolio-subtitle\">Exclusive Portfolio<\/div>\n <h1 class=\"portfolio-title\">Our Work Showcase<\/h1>\n <p class=\"portfolio-description\">\n Discover our carefully curated portfolio featuring successful projects, \n innovative solutions, and transformative results for clients across various \n industries. Access is restricted to protect client confidentiality.\n <\/p>\n <\/div>\n \n <!-- Portfolio Categories -->\n <div class=\"portfolio-categories\">\n <div class=\"categories-title\">\n <i class=\"fas fa-th-large\"><\/i>\n Portfolio Categories\n <\/div>\n <div class=\"categories-grid\">\n <!-- Category 1 -->\n <div class=\"category-item\">\n <div class=\"category-icon\">\n <i class=\"fas fa-bullhorn\"><\/i>\n <\/div>\n <h4>Communication Strategy<\/h4>\n <p>Strategic plans that transformed brand messaging and audience engagement<\/p>\n <\/div>\n \n <!-- Category 2 -->\n <div class=\"category-item\">\n <div class=\"category-icon\">\n <i class=\"fas fa-laptop-code\"><\/i>\n <\/div>\n <h4>Digital Marketing<\/h4>\n <p>Campaigns that drove significant ROI and online presence growth<\/p>\n <\/div>\n \n <!-- Category 3 -->\n <div class=\"category-item\">\n <div class=\"category-icon\">\n <i class=\"fas fa-paint-brush\"><\/i>\n <\/div>\n <h4>Graphic Design<\/h4>\n <p>Visual identities and design assets that elevated brand perception<\/p>\n <\/div>\n \n <!-- Category 4 -->\n <div class=\"category-item\">\n <div class=\"category-icon\">\n <i class=\"fas fa-globe\"><\/i>\n <\/div>\n <h4>Web Development<\/h4>\n <p>Responsive websites and web applications with enhanced user experience<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Portfolio Stats -->\n <div class=\"portfolio-stats\">\n <div class=\"stats-title\">\n <i class=\"fas fa-chart-line\"><\/i>\n Portfolio Statistics\n <\/div>\n <div class=\"stats-grid\">\n <div class=\"stat-item\">\n <div class=\"stat-number\">150+<\/div>\n <div class=\"stat-label\">Successful Projects<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">98%<\/div>\n <div class=\"stat-label\">Client Satisfaction<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">40+<\/div>\n <div class=\"stat-label\">Industries Served<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">5+<\/div>\n <div class=\"stat-label\">Years Experience<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Access Request Form Side -->\n <div class=\"access-form-section\">\n <div class=\"access-header\">\n <h2 class=\"access-title\">Request Portfolio Access<\/h2>\n <p class=\"access-subtitle\">\n Our portfolio contains confidential client work. Please request access \n by filling out this form. We'll review your request and grant access \n within 24 hours.\n <\/p>\n <\/div>\n \n <!-- Process Steps -->\n <div class=\"access-process\">\n <div class=\"process-title\">\n <i class=\"fas fa-list-ol\"><\/i>\n Access Process\n <\/div>\n <div class=\"process-steps\">\n <div class=\"step-item\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>Submit Request<\/h4>\n <p>Fill out the form with your details and purpose<\/p>\n <\/div>\n <\/div>\n <div class=\"step-item\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>Review Process<\/h4>\n <p>We review your request for approval (within 24 hours)<\/p>\n <\/div>\n <\/div>\n <div class=\"step-item\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>Get Access<\/h4>\n <p>Receive portfolio access link via email<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- JotForm Integration - FIXED SCROLLING -->\n <div class=\"jotform-container\" id=\"jotformContainer\">\n <!-- Loading State -->\n <div class=\"jotform-loading\" id=\"jotformLoading\">\n <div class=\"loading-spinner\">\n <i class=\"fas fa-spinner\"><\/i>\n <\/div>\n <h3>Loading Request Form<\/h3>\n <p>Please wait while we load the portfolio access request form...<\/p>\n <\/div>\n \n <!-- Scrollable wrapper for iframe -->\n <div class=\"iframe-wrapper\" id=\"iframeWrapper\" style=\"display: none;\"><\/div>\n <\/div>\n \n <!-- Security Notice -->\n <div class=\"security-notice\">\n <p>\n <i class=\"fas fa-shield-alt\"><\/i>\n <span>\n <strong>Security Notice:<\/strong> All portfolio access is logged and monitored. Unauthorized sharing or distribution of portfolio content is strictly prohibited and may result in legal action.\n <\/span>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const jotformContainer = document.getElementById('jotformContainer');\n const jotformLoading = document.getElementById('jotformLoading');\n const iframeWrapper = document.getElementById('iframeWrapper');\n \n \/\/ Function to load JotForm with iframe approach\n function loadJotForm() {\n try {\n \/\/ Create iframe for JotForm\n const iframe = document.createElement('iframe');\n iframe.id = 'jotform-iframe';\n iframe.src = 'https:\/\/form.jotform.com\/260396197456065';\n iframe.frameBorder = '0';\n iframe.marginWidth = '0';\n iframe.marginHeight = '0';\n iframe.scrolling = 'yes';\n iframe.allowFullscreen = true;\n iframe.style.width = '100%';\n iframe.style.height = '100%';\n iframe.style.minHeight = '800px';\n iframe.style.border = 'none';\n \n \/\/ Set proper attributes for iframe\n iframe.setAttribute('allowtransparency', 'true');\n iframe.setAttribute('allow', 'autoplay; encrypted-media');\n \n \/\/ Add iframe to wrapper\n iframeWrapper.appendChild(iframe);\n \n \/\/ Show iframe wrapper, hide loading\n iframeWrapper.style.display = 'block';\n jotformLoading.style.display = 'none';\n \n \/\/ Listen for iframe load\n iframe.onload = function() {\n console.log('JotForm iframe loaded successfully');\n \/\/ Set a timeout to adjust height\n setTimeout(adjustIframeHeight, 1000);\n };\n \n iframe.onerror = function() {\n console.error('Failed to load JotForm iframe');\n showFallbackForm();\n };\n \n } catch (error) {\n console.error('Error loading JotForm iframe:', error);\n showFallbackForm();\n }\n }\n \n \/\/ Function to adjust iframe height based on content\n function adjustIframeHeight() {\n const iframe = document.getElementById('jotform-iframe');\n if (!iframe) return;\n \n try {\n \/\/ For cross-origin iframes, we can't access content directly\n \/\/ So we'll set a reasonable height based on screen size\n const screenHeight = window.innerHeight;\n const containerTop = jotformContainer.getBoundingClientRect().top;\n const availableHeight = screenHeight - containerTop - 100; \/\/ 100px buffer\n \n \/\/ Set iframe height\n const iframeHeight = Math.max(600, Math.min(800, availableHeight));\n iframe.style.height = iframeHeight + 'px';\n iframe.style.minHeight = iframeHeight + 'px';\n \n } catch (error) {\n \/\/ Cross-origin restriction - use default height\n iframe.style.height = '800px';\n iframe.style.minHeight = '800px';\n }\n }\n \n \/\/ Fallback form if JotForm fails\n function showFallbackForm() {\n if (jotformLoading) {\n jotformLoading.innerHTML = `\n <div class=\"loading-spinner\">\n <i class=\"fas fa-exclamation-triangle\" style=\"color: #ffc107;\"><\/i>\n <\/div>\n <h3>Form Loading Issue<\/h3>\n <p>We're experiencing issues loading the form. Please click the button below to access the portfolio request form directly.<\/p>\n <a href=\"https:\/\/form.jotform.com\/260396197456065\" target=\"_blank\" \n style=\"display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2rem; background: linear-gradient(135deg, #03c4a1, #02a98b); border-radius: 10px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: #07172d; text-decoration: none; margin-top: 1.5rem;\">\n <i class=\"fas fa-external-link-alt\"><\/i> Open Request Form\n <\/a>\n `;\n }\n }\n \n \/\/ Initialize JotForm loading\n setTimeout(loadJotForm, 500);\n \n \/\/ Adjust iframe height on window resize\n window.addEventListener('resize', function() {\n setTimeout(adjustIframeHeight, 300);\n });\n \n \/\/ Adjust iframe height after page load\n window.addEventListener('load', function() {\n setTimeout(adjustIframeHeight, 1000);\n });\n \n \/\/ Add animation on scroll\n const scrollObserver = new IntersectionObserver((entries) => {\n entries.forEach((entry, index) => {\n if (entry.isIntersecting) {\n const delay = index * 100;\n setTimeout(() => {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }, delay);\n }\n });\n }, {\n threshold: 0.1,\n rootMargin: '0px 0px -30px 0px'\n });\n \n \/\/ Animate elements\n document.querySelectorAll('.category-item, .stat-item, .step-item').forEach((item, index) => {\n item.style.opacity = '0';\n item.style.transform = 'translateY(20px)';\n item.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;\n scrollObserver.observe(item);\n });\n \n \/\/ Handle mobile scrolling better\n function handleMobileScrolling() {\n const iframe = document.getElementById('jotform-iframe');\n if (!iframe) return;\n \n \/\/ On mobile, we need to ensure the iframe doesn't block scrolling\n const isMobile = window.innerWidth <= 767;\n \n if (isMobile) {\n \/\/ Allow touch scrolling on iframe\n iframe.style.overflowY = 'scroll';\n iframe.style.webkitOverflowScrolling = 'touch';\n \n \/\/ Make the container scrollable too\n iframeWrapper.style.overflowY = 'auto';\n iframeWrapper.style.webkitOverflowScrolling = 'touch';\n }\n }\n \n \/\/ Call mobile scrolling handler\n setTimeout(handleMobileScrolling, 1500);\n \n \/\/ Listen for orientation change on mobile\n window.addEventListener('orientationchange', function() {\n setTimeout(function() {\n adjustIframeHeight();\n handleMobileScrolling();\n }, 500);\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Portfolio Access | Savvyscope Media Solutions Exclusive Portfolio Our Work Showcase Discover our carefully curated portfolio featuring successful projects, innovative […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-69","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Digital Marketing Project Portfolio - Savvyscope Media Solutions<\/title>\n<meta name=\"description\" content=\"Explore our digital marketing project portfolio showcasing websites, campaigns, content, and measurable results for NGOs and SMEs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/savvyscopemedia.co.ke\/index.php\/digital-marketing-project-portfolio\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Digital Marketing Project Portfolio - Savvyscope Media Solutions\" \/>\n<meta property=\"og:description\" content=\"Explore our digital marketing project portfolio showcasing websites, campaigns, content, and measurable results for NGOs and SMEs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/savvyscopemedia.co.ke\/index.php\/digital-marketing-project-portfolio\/\" \/>\n<meta property=\"og:site_name\" content=\"Savvyscope Media Solutions\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-09T21:53:20+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=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/savvyscopemedia.co.ke\\\/index.php\\\/digital-marketing-project-portfolio\\\/\",\"url\":\"https:\\\/\\\/savvyscopemedia.co.ke\\\/index.php\\\/digital-marketing-project-portfolio\\\/\",\"name\":\"Digital Marketing Project Portfolio - Savvyscope Media Solutions\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/savvyscopemedia.co.ke\\\/#website\"},\"datePublished\":\"2026-01-26T21:22:50+00:00\",\"dateModified\":\"2026-02-09T21:53:20+00:00\",\"description\":\"Explore our digital marketing project portfolio showcasing websites, campaigns, content, and measurable results for NGOs and SMEs.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/savvyscopemedia.co.ke\\\/index.php\\\/digital-marketing-project-portfolio\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/savvyscopemedia.co.ke\\\/index.php\\\/digital-marketing-project-portfolio\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/savvyscopemedia.co.ke\\\/index.php\\\/digital-marketing-project-portfolio\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/savvyscopemedia.co.ke\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Our Portfolio\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/savvyscopemedia.co.ke\\\/#website\",\"url\":\"https:\\\/\\\/savvyscopemedia.co.ke\\\/\",\"name\":\"Savvyscope Media Solutions\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/savvyscopemedia.co.ke\\\/?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":"Digital Marketing Project Portfolio - Savvyscope Media Solutions","description":"Explore our digital marketing project portfolio showcasing websites, campaigns, content, and measurable results for NGOs and SMEs.","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:\/\/savvyscopemedia.co.ke\/index.php\/digital-marketing-project-portfolio\/","og_locale":"en_US","og_type":"article","og_title":"Digital Marketing Project Portfolio - Savvyscope Media Solutions","og_description":"Explore our digital marketing project portfolio showcasing websites, campaigns, content, and measurable results for NGOs and SMEs.","og_url":"https:\/\/savvyscopemedia.co.ke\/index.php\/digital-marketing-project-portfolio\/","og_site_name":"Savvyscope Media Solutions","article_modified_time":"2026-02-09T21:53:20+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/savvyscopemedia.co.ke\/index.php\/digital-marketing-project-portfolio\/","url":"https:\/\/savvyscopemedia.co.ke\/index.php\/digital-marketing-project-portfolio\/","name":"Digital Marketing Project Portfolio - Savvyscope Media Solutions","isPartOf":{"@id":"https:\/\/savvyscopemedia.co.ke\/#website"},"datePublished":"2026-01-26T21:22:50+00:00","dateModified":"2026-02-09T21:53:20+00:00","description":"Explore our digital marketing project portfolio showcasing websites, campaigns, content, and measurable results for NGOs and SMEs.","breadcrumb":{"@id":"https:\/\/savvyscopemedia.co.ke\/index.php\/digital-marketing-project-portfolio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/savvyscopemedia.co.ke\/index.php\/digital-marketing-project-portfolio\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/savvyscopemedia.co.ke\/index.php\/digital-marketing-project-portfolio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/savvyscopemedia.co.ke\/"},{"@type":"ListItem","position":2,"name":"Our Portfolio"}]},{"@type":"WebSite","@id":"https:\/\/savvyscopemedia.co.ke\/#website","url":"https:\/\/savvyscopemedia.co.ke\/","name":"Savvyscope Media Solutions","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/savvyscopemedia.co.ke\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/savvyscopemedia.co.ke\/index.php\/wp-json\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savvyscopemedia.co.ke\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/savvyscopemedia.co.ke\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/savvyscopemedia.co.ke\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savvyscopemedia.co.ke\/index.php\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":0,"href":"https:\/\/savvyscopemedia.co.ke\/index.php\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"wp:attachment":[{"href":"https:\/\/savvyscopemedia.co.ke\/index.php\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}