{"id":49,"date":"2026-10-22T12:51:37","date_gmt":"2026-10-22T12:51:37","guid":{"rendered":"https:\/\/issudeenshemeer.com\/?page_id=49"},"modified":"2026-10-22T13:09:22","modified_gmt":"2026-10-22T13:09:22","slug":"issudeen","status":"publish","type":"page","link":"https:\/\/issudeenshemeer.com\/?page_id=49","title":{"rendered":"Issudeen"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Issudeen Shemeer | Graphic Designer & Video Editor<\/title>\r\n \r\n <!-- Tailwind CSS CDN -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <!-- Font Awesome Icons -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <!-- Google Fonts -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Syne:wght@600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n <!-- Custom Tailwind Configuration -->\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n brand: {\r\n black: '#080b09',\r\n dark: '#0f1712',\r\n card: '#131c16',\r\n border: '#1f3326',\r\n green: '#10b981',\r\n accent: '#00ff88',\r\n glow: 'rgba(0, 255, 136, 0.2)',\r\n lightGreen: '#34d399',\r\n muted: '#9ca3af'\r\n }\r\n },\r\n fontFamily: {\r\n heading: ['Syne', 'sans-serif'],\r\n body: ['Plus Jakarta Sans', 'sans-serif']\r\n },\r\n animation: {\r\n 'pulse-glow': 'pulseGlow 4s infinite alternate',\r\n 'float': 'float 6s ease-in-out infinite',\r\n 'spin-slow': 'spin 20s linear infinite',\r\n },\r\n keyframes: {\r\n pulseGlow: {\r\n '0%': { opacity: '0.4', transform: 'scale(0.95)' },\r\n '100%': { opacity: '0.85', transform: 'scale(1.05)' }\r\n },\r\n float: {\r\n '0%, 100%': { transform: 'translateY(0px)' },\r\n '50%': { transform: 'translateY(-12px)' }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root {\r\n --bg-base: #060907;\r\n --aura-color1: rgba(0, 255, 136, 0.18);\r\n --aura-color2: rgba(16, 185, 129, 0.14);\r\n }\r\n\r\n body {\r\n background-color: var(--bg-base);\r\n color: #f3f4f6;\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n overflow-x: hidden;\r\n transition: background-color 0.5s ease;\r\n }\r\n\r\n \/* Dynamic Rich Background Aura Mesh *\/\r\n .bg-mesh-aura {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n pointer-events: none;\r\n z-index: 0;\r\n background: \r\n radial-gradient(circle at 15% 20%, var(--aura-color1) 0%, transparent 45%),\r\n radial-gradient(circle at 85% 65%, var(--aura-color2) 0%, transparent 50%),\r\n radial-gradient(circle at 50% 90%, rgba(52, 211, 153, 0.1) 0%, transparent 40%);\r\n transition: all 0.5s ease;\r\n }\r\n\r\n .bg-mesh-aura.intense-mode {\r\n --aura-color1: rgba(0, 255, 136, 0.32);\r\n --aura-color2: rgba(16, 185, 129, 0.28);\r\n background-color: #030604;\r\n }\r\n\r\n \/* Gradient Typography *\/\r\n .text-gradient {\r\n background: linear-gradient(135deg, #ffffff 0%, #34d399 50%, #00ff88 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .text-gradient-green {\r\n background: linear-gradient(135deg, #00ff88 0%, #10b981 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n \/* Glassmorphism styling *\/\r\n .glass-card {\r\n background: rgba(15, 23, 18, 0.72);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n border: 1px solid rgba(0, 255, 136, 0.15);\r\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .glass-card:hover {\r\n border-color: rgba(0, 255, 136, 0.45);\r\n box-shadow: 0 12px 35px -10px rgba(0, 255, 136, 0.2);\r\n transform: translateY(-4px);\r\n }\r\n\r\n .glass-nav {\r\n background: rgba(6, 9, 7, 0.88);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(0, 255, 136, 0.1);\r\n }\r\n\r\n \/* Glow effects *\/\r\n .glow-btn {\r\n position: relative;\r\n transition: all 0.3s ease;\r\n }\r\n .glow-btn:hover {\r\n box-shadow: 0 0 25px rgba(0, 255, 136, 0.55);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* Custom Scrollbar *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #060907;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #182e21;\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #00ff88;\r\n }\r\n\r\n \/* Canvas Overlay *\/\r\n #bg-canvas {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n \/* Reveal Animation Utility *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal.active {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"relative selection:bg-brand-accent selection:text-black\">\r\n\r\n <!-- Interactive Mesh Aura & Canvas Background -->\r\n <div id=\"mesh-aura\" class=\"bg-mesh-aura\"><\/div>\r\n <canvas id=\"bg-canvas\"><\/canvas>\r\n\r\n <!-- Navigation Bar -->\r\n <nav class=\"fixed top-0 left-0 w-full z-50 glass-nav transition-all duration-300 py-4 px-6 md:px-12\">\r\n <div class=\"max-w-7xl mx-auto flex items-center justify-between\">\r\n <a href=\"#hero\" class=\"font-heading text-xl sm:text-2xl font-bold tracking-wider text-white flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-brand-accent inline-block animate-ping\"><\/span>\r\n ISSUDEEN<span class=\"text-brand-accent\">.<\/span>\r\n <\/a>\r\n\r\n <!-- Desktop Links -->\r\n <div class=\"hidden md:flex items-center gap-8 font-medium text-sm text-gray-300\">\r\n <a href=\"#about\" class=\"hover:text-brand-accent transition-colors\">About<\/a>\r\n <a href=\"#experience\" class=\"hover:text-brand-accent transition-colors\">Experience<\/a>\r\n <a href=\"#skills\" class=\"hover:text-brand-accent transition-colors\">Skills<\/a>\r\n <a href=\"#portfolio\" class=\"hover:text-brand-accent transition-colors\">Portfolio<\/a>\r\n <a href=\"#education\" class=\"hover:text-brand-accent transition-colors\">Education<\/a>\r\n <a href=\"#contact\" class=\"hover:text-brand-accent transition-colors\">Contact<\/a>\r\n <\/div>\r\n\r\n <!-- Header Tools & Quick Actions -->\r\n <div class=\"hidden md:flex items-center gap-4\">\r\n <!-- Aura Color Toggle Button -->\r\n <button id=\"bg-toggle-btn\" title=\"Toggle Background Glow Intensity\" class=\"w-10 h-10 rounded-full glass-card flex items-center justify-center text-brand-accent hover:border-brand-accent transition-all\">\r\n <i class=\"fa-solid fa-circle-half-stroke\"><\/i>\r\n <\/button>\r\n\r\n <a href=\"https:\/\/wa.me\/916235005769\" target=\"_blank\" class=\"glow-btn bg-brand-accent text-black font-bold px-5 py-2.5 rounded-full text-sm flex items-center gap-2\">\r\n <i class=\"fa-brands fa-whatsapp text-lg\"><\/i>\r\n <span>Quick Chat<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Mobile Buttons -->\r\n <div class=\"flex items-center gap-3 md:hidden\">\r\n <button id=\"bg-toggle-btn-mobile\" class=\"w-9 h-9 rounded-full glass-card flex items-center justify-center text-brand-accent\">\r\n <i class=\"fa-solid fa-circle-half-stroke text-sm\"><\/i>\r\n <\/button>\r\n <button id=\"menu-toggle\" class=\"text-white text-2xl focus:outline-none\">\r\n <i class=\"fa-solid fa-bars\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Mobile Menu Dropdown -->\r\n <div id=\"mobile-menu\" class=\"hidden md:hidden absolute top-full left-0 w-full glass-nav p-6 flex flex-col gap-4 text-center text-lg border-b border-brand-border\">\r\n <a href=\"#about\" class=\"mobile-link text-gray-300 hover:text-brand-accent\">About<\/a>\r\n <a href=\"#experience\" class=\"mobile-link text-gray-300 hover:text-brand-accent\">Experience<\/a>\r\n <a href=\"#skills\" class=\"mobile-link text-gray-300 hover:text-brand-accent\">Skills<\/a>\r\n <a href=\"#portfolio\" class=\"mobile-link text-gray-300 hover:text-brand-accent\">Portfolio<\/a>\r\n <a href=\"#education\" class=\"mobile-link text-gray-300 hover:text-brand-accent\">Education<\/a>\r\n <a href=\"#contact\" class=\"mobile-link text-gray-300 hover:text-brand-accent\">Contact<\/a>\r\n <a href=\"https:\/\/wa.me\/916235005769\" target=\"_blank\" class=\"bg-brand-accent text-black font-semibold py-3 rounded-xl mt-2 flex items-center justify-center gap-2\">\r\n <i class=\"fa-brands fa-whatsapp text-xl\"><\/i> Chat on WhatsApp\r\n <\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- Main Container -->\r\n <main class=\"relative z-10 max-w-7xl mx-auto px-6 md:px-12 pt-28\">\r\n\r\n <!-- HERO SECTION -->\r\n <section id=\"hero\" class=\"min-h-[88vh] flex flex-col justify-center items-center text-center relative py-12\">\r\n <!-- Pulsing Background Aura Circle -->\r\n <div class=\"absolute w-[350px] md:w-[650px] h-[350px] md:h-[650px] bg-brand-accent\/20 rounded-full blur-[130px] pointer-events-none top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 animate-pulse-glow\"><\/div>\r\n\r\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card text-brand-lightGreen text-xs md:text-sm font-semibold mb-6 border border-brand-accent\/30 animate-float\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-brand-accent animate-ping\"><\/span>\r\n <span>Graphic Designer & Video Editor \u2022 Oman & Global<\/span>\r\n <\/div>\r\n\r\n <h1 class=\"font-heading text-4xl sm:text-6xl md:text-8xl font-extrabold tracking-tight mb-6 leading-tight\">\r\n Crafting Visuals That <br class=\"hidden sm:inline\" \/>\r\n <span class=\"text-gradient\">Leave an Impact.<\/span>\r\n <\/h1>\r\n\r\n <p class=\"text-gray-300 text-base sm:text-xl max-w-2xl font-light mb-10 leading-relaxed\">\r\n Hi, I'm <span class=\"text-white font-semibold\">Issudeen Shemeer<\/span> \u2014 a creative Visual Content Creator specializing in high-converting brand identity, social video campaigns, motion graphics, and strategic design.\r\n <\/p>\r\n\r\n <div class=\"flex flex-wrap justify-center items-center gap-4 w-full max-w-md\">\r\n <a href=\"#portfolio\" class=\"glow-btn flex-1 min-w-[160px] bg-brand-accent text-black font-bold py-4 px-6 rounded-2xl transition-all text-center flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-layer-group\"><\/i> View Portfolio\r\n <\/a>\r\n <a href=\"#contact\" class=\"flex-1 min-w-[160px] glass-card hover:bg-brand-card text-white font-semibold py-4 px-6 rounded-2xl transition-all text-center border border-brand-accent\/30 flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-paper-plane text-brand-accent\"><\/i> Contact Me\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Floating Quick Direct Contact Links -->\r\n <div class=\"mt-14 pt-8 border-t border-brand-border\/60 w-full max-w-4xl flex flex-wrap items-center justify-around gap-6 text-gray-300 text-sm\">\r\n <a href=\"https:\/\/wa.me\/916235005769\" target=\"_blank\" class=\"hover:text-brand-accent transition-colors flex items-center gap-2\">\r\n <i class=\"fa-brands fa-whatsapp text-brand-accent text-lg\"><\/i> +91 6235005769\r\n <\/a>\r\n <a href=\"tel:+96879122765\" class=\"hover:text-brand-accent transition-colors flex items-center gap-2\">\r\n <i class=\"fa-solid fa-phone text-brand-accent text-lg\"><\/i> +968 79122765\r\n <\/a>\r\n <a href=\"https:\/\/instagram.com\/issudeenshemeer\" target=\"_blank\" class=\"hover:text-brand-accent transition-colors flex items-center gap-2\">\r\n <i class=\"fa-brands fa-instagram text-brand-accent text-lg\"><\/i> @issudeenshemeer_\r\n <\/a>\r\n <a href=\"mailto:issudeenshemeer@gmail.com\" class=\"hover:text-brand-accent transition-colors flex items-center gap-2\">\r\n <i class=\"fa-regular fa-envelope text-brand-accent text-lg\"><\/i> Email Me\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ABOUT ME SECTION -->\r\n <section id=\"about\" class=\"py-20 reveal\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 items-center\">\r\n <!-- Visual Box -->\r\n <div class=\"lg:col-span-5 relative\">\r\n <div class=\"relative mx-auto max-w-md glass-card rounded-3xl p-8 border border-brand-accent\/30 overflow-hidden\">\r\n <div class=\"absolute -top-10 -right-10 w-44 h-44 bg-brand-accent\/20 rounded-full blur-3xl\"><\/div>\r\n <div class=\"flex flex-col items-center text-center\">\r\n <div class=\"w-32 h-32 rounded-full bg-brand-card border-2 border-brand-accent flex items-center justify-center mb-6 shadow-xl shadow-brand-accent\/20 relative\">\r\n <i class=\"fa-solid fa-wand-magic-sparkles text-5xl text-brand-accent\"><\/i>\r\n <div class=\"absolute bottom-1 right-1 w-5 h-5 bg-brand-accent rounded-full border-2 border-brand-dark\"><\/div>\r\n <\/div>\r\n <h3 class=\"font-heading text-2xl font-bold text-white mb-1\">Issudeen Shemeer<\/h3>\r\n <p class=\"text-brand-accent font-medium text-xs tracking-wide uppercase mb-4\">Graphic Designer & Video Editor<\/p>\r\n <p class=\"text-xs text-gray-300 leading-relaxed mb-6\">\r\n B.A. Visual Communication graduate with extensive hands-on expertise in digital branding, video editing, motion media, and commercial print design.\r\n <\/p>\r\n <div class=\"flex gap-3 w-full\">\r\n <a href=\"https:\/\/www.linkedin.com\/in\/issudeenshemeer\" target=\"_blank\" class=\"flex-1 py-2.5 rounded-xl bg-white\/5 hover:bg-brand-accent hover:text-black text-xs text-gray-200 font-semibold flex items-center justify-center gap-2 transition-all border border-white\/10\">\r\n <i class=\"fa-brands fa-linkedin\"><\/i> LinkedIn\r\n <\/a>\r\n <a href=\"https:\/\/instagram.com\/issudeenshemeer\" target=\"_blank\" class=\"flex-1 py-2.5 rounded-xl bg-white\/5 hover:bg-brand-accent hover:text-black text-xs text-gray-200 font-semibold flex items-center justify-center gap-2 transition-all border border-white\/10\">\r\n <i class=\"fa-brands fa-instagram\"><\/i> Instagram\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Text Content -->\r\n <div class=\"lg:col-span-7 space-y-6\">\r\n <div class=\"inline-block\">\r\n <span class=\"text-brand-accent font-semibold tracking-wider text-xs uppercase bg-brand-accent\/10 px-3 py-1 rounded-full border border-brand-accent\/20\">About Me<\/span>\r\n <\/div>\r\n <h2 class=\"font-heading text-3xl sm:text-5xl font-bold text-white leading-tight\">\r\n Transforming Ideas Into High-Impact Visual Stories\r\n <\/h2>\r\n <p class=\"text-gray-300 text-base leading-relaxed\">\r\n I am a passionate and detail-oriented Graphic Designer & Video Editor holding a Bachelor of Arts in Visual Communication from Mahatma Gandhi University (St. Joseph College of Communication).\r\n <\/p>\r\n <p class=\"text-gray-400 text-sm leading-relaxed\">\r\n My career spans corporate graphic design, advertising agency projects, commercial videography, and news reporting. I specialize in delivering high-converting brand identities, social reels, promotional videos, and print assets.\r\n <\/p>\r\n\r\n <!-- Key Stats Highlights -->\r\n <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-4 pt-4\">\r\n <div class=\"glass-card p-4 rounded-2xl border border-brand-accent\/20\">\r\n <span class=\"font-heading text-2xl md:text-3xl font-extrabold text-brand-accent block\">3+<\/span>\r\n <span class=\"text-xs text-gray-400\">Years Experience<\/span>\r\n <\/div>\r\n <div class=\"glass-card p-4 rounded-2xl border border-brand-accent\/20\">\r\n <span class=\"font-heading text-2xl md:text-3xl font-extrabold text-brand-accent block\">50+<\/span>\r\n <span class=\"text-xs text-gray-400\">Projects Executed<\/span>\r\n <\/div>\r\n <div class=\"glass-card p-4 rounded-2xl border border-brand-accent\/20 col-span-2 sm:col-span-1\">\r\n <span class=\"font-heading text-2xl md:text-3xl font-extrabold text-brand-accent block\">100%<\/span>\r\n <span class=\"text-xs text-gray-400\">Client Focus<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- EXPERIENCE TIMELINE SECTION -->\r\n <section id=\"experience\" class=\"py-20 reveal\">\r\n <div class=\"text-center max-w-3xl mx-auto mb-16\">\r\n <span class=\"text-brand-accent font-semibold tracking-wider text-xs uppercase bg-brand-accent\/10 px-3 py-1 rounded-full border border-brand-accent\/20\">Career Journey<\/span>\r\n <h2 class=\"font-heading text-3xl sm:text-5xl font-bold text-white mt-4\">Professional Experience<\/h2>\r\n <p class=\"text-gray-400 mt-3 text-sm\">Corporate design, agency workflows, multimedia creation, and broadcast internships.<\/p>\r\n <\/div>\r\n\r\n <div class=\"relative border-l border-brand-border\/80 max-w-4xl mx-auto pl-6 sm:pl-10 space-y-10\">\r\n \r\n <!-- Timeline Item 1 -->\r\n <div class=\"relative group\">\r\n <div class=\"absolute -left-[31px] sm:-left-[47px] top-2 w-6 h-6 rounded-full bg-brand-black border-2 border-brand-accent flex items-center justify-center group-hover:scale-125 transition-transform\">\r\n <div class=\"w-2 h-2 rounded-full bg-brand-accent\"><\/div>\r\n <\/div>\r\n <div class=\"glass-card p-6 md:p-8 rounded-3xl\">\r\n <div class=\"flex flex-wrap justify-between items-start gap-2 mb-3\">\r\n <div>\r\n <h3 class=\"font-heading text-xl font-bold text-white\">KV Group of Companies<\/h3>\r\n <p class=\"text-brand-accent font-semibold text-sm\">Graphic Designer & Media Editor<\/p>\r\n <\/div>\r\n <div class=\"text-left md:text-right\">\r\n <span class=\"text-xs bg-brand-accent\/10 text-brand-lightGreen px-3 py-1 rounded-full border border-brand-accent\/30 font-semibold\">Apr 2025 \u2013 Present<\/span>\r\n <p class=\"text-xs text-gray-400 mt-1\"><i class=\"fa-solid fa-location-dot text-brand-accent\"><\/i> Muscat, Oman<\/p>\r\n <\/div>\r\n <\/div>\r\n <ul class=\"text-gray-300 text-sm space-y-2 mt-4 list-disc list-inside font-light\">\r\n <li>Design marketing collateral, flyers, banners, and promotional social media campaigns.<\/li>\r\n <li>Create multimedia video edits, reels, and product advertisements.<\/li>\r\n <li>Develop high-impact visual creative work for major brands: <span class=\"text-white font-medium\">Fayha Fresh Delights, Anhar Al Fayha, Suhol Al Fayha, Kovic Homes, Packovic, and Fayha Fresh Supermarket & Hypermarket<\/span>.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Timeline Item 2 -->\r\n <div class=\"relative group\">\r\n <div class=\"absolute -left-[31px] sm:-left-[47px] top-2 w-6 h-6 rounded-full bg-brand-black border-2 border-brand-accent\/50 flex items-center justify-center group-hover:scale-125 transition-transform\">\r\n <div class=\"w-2 h-2 rounded-full bg-brand-accent\/50\"><\/div>\r\n <\/div>\r\n <div class=\"glass-card p-6 md:p-8 rounded-3xl\">\r\n <div class=\"flex flex-wrap justify-between items-start gap-2 mb-3\">\r\n <div>\r\n <h3 class=\"font-heading text-xl font-bold text-white\">Asia Softlab Pvt Ltd<\/h3>\r\n <p class=\"text-brand-accent font-semibold text-sm\">Graphic Designer<\/p>\r\n <\/div>\r\n <div>\r\n <span class=\"text-xs bg-white\/5 text-gray-300 px-3 py-1 rounded-full border border-white\/10 font-medium\">Aug 2024 \u2013 Jan 2025<\/span>\r\n <p class=\"text-xs text-gray-400 mt-1\"><i class=\"fa-solid fa-location-dot\"><\/i> Kerala, India<\/p>\r\n <\/div>\r\n <\/div>\r\n <ul class=\"text-gray-300 text-sm space-y-2 mt-4 list-disc list-inside font-light\">\r\n <li>Designed corporate marketing materials, brochures, web visuals, and social media media identity kits.<\/li>\r\n <li>Collaborated with tech teams to create client-facing digital presentation assets.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Timeline Item 3 -->\r\n <div class=\"relative group\">\r\n <div class=\"absolute -left-[31px] sm:-left-[47px] top-2 w-6 h-6 rounded-full bg-brand-black border-2 border-brand-accent\/50 flex items-center justify-center group-hover:scale-125 transition-transform\">\r\n <div class=\"w-2 h-2 rounded-full bg-brand-accent\/50\"><\/div>\r\n <\/div>\r\n <div class=\"glass-card p-6 md:p-8 rounded-3xl\">\r\n <div class=\"flex flex-wrap justify-between items-start gap-2 mb-3\">\r\n <div>\r\n <h3 class=\"font-heading text-xl font-bold text-white\">Lotus Production<\/h3>\r\n <p class=\"text-brand-accent font-semibold text-sm\">Graphic Designer & Video Editor<\/p>\r\n <\/div>\r\n <div>\r\n <span class=\"text-xs bg-white\/5 text-gray-300 px-3 py-1 rounded-full border border-white\/10 font-medium\">Nov 2023 \u2013 May 2024<\/span>\r\n <p class=\"text-xs text-gray-400 mt-1\"><i class=\"fa-solid fa-house-laptop\"><\/i> Remote \/ Project Based<\/p>\r\n <\/div>\r\n <\/div>\r\n <ul class=\"text-gray-300 text-sm space-y-2 mt-4 list-disc list-inside font-light\">\r\n <li>Produced promotional commercial video graphics, digital banners, and motion intros.<\/li>\r\n <li>Executed video post-production editing, color grading, and video assembly.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Timeline Item 4 -->\r\n <div class=\"relative group\">\r\n <div class=\"absolute -left-[31px] sm:-left-[47px] top-2 w-6 h-6 rounded-full bg-brand-black border-2 border-brand-accent\/50 flex items-center justify-center group-hover:scale-125 transition-transform\">\r\n <div class=\"w-2 h-2 rounded-full bg-brand-accent\/50\"><\/div>\r\n <\/div>\r\n <div class=\"glass-card p-6 md:p-8 rounded-3xl\">\r\n <div class=\"flex flex-wrap justify-between items-start gap-2 mb-3\">\r\n <div>\r\n <h3 class=\"font-heading text-xl font-bold text-white\">Kairali News<\/h3>\r\n <p class=\"text-brand-accent font-semibold text-sm\">News Reporter Intern<\/p>\r\n <\/div>\r\n <div>\r\n <span class=\"text-xs bg-white\/5 text-gray-300 px-3 py-1 rounded-full border border-white\/10 font-medium\">Dec 2023 \u2013 Jan 2024<\/span>\r\n <p class=\"text-xs text-gray-400 mt-1\"><i class=\"fa-solid fa-newspaper\"><\/i> Trivandrum, Kerala<\/p>\r\n <\/div>\r\n <\/div>\r\n <ul class=\"text-gray-300 text-sm space-y-2 mt-4 list-disc list-inside font-light\">\r\n <li>Gained hands-on experience in daily broadcast journalism, interview gathering, and media production editing.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Timeline Item 5 -->\r\n <div class=\"relative group\">\r\n <div class=\"absolute -left-[31px] sm:-left-[47px] top-2 w-6 h-6 rounded-full bg-brand-black border-2 border-brand-accent\/50 flex items-center justify-center group-hover:scale-125 transition-transform\">\r\n <div class=\"w-2 h-2 rounded-full bg-brand-accent\/50\"><\/div>\r\n <\/div>\r\n <div class=\"glass-card p-6 md:p-8 rounded-3xl\">\r\n <div class=\"flex flex-wrap justify-between items-start gap-2 mb-3\">\r\n <div>\r\n <h3 class=\"font-heading text-xl font-bold text-white\">Freelance Creative Practice<\/h3>\r\n <p class=\"text-brand-accent font-semibold text-sm\">Photographer, Video Editor & Graphic Designer<\/p>\r\n <\/div>\r\n <div>\r\n <span class=\"text-xs bg-white\/5 text-gray-300 px-3 py-1 rounded-full border border-white\/10 font-medium\">Ongoing<\/span>\r\n <\/div>\r\n <\/div>\r\n <ul class=\"text-gray-300 text-sm space-y-2 mt-4 list-disc list-inside font-light\">\r\n <li>Delivering brand identities, typography vectors, portrait photography retouching, and video edits for diverse clients.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- INTERACTIVE SKILLS SECTION -->\r\n <section id=\"skills\" class=\"py-20 reveal\">\r\n <div class=\"text-center max-w-3xl mx-auto mb-12\">\r\n <span class=\"text-brand-accent font-semibold tracking-wider text-xs uppercase bg-brand-accent\/10 px-3 py-1 rounded-full border border-brand-accent\/20\">Capabilities<\/span>\r\n <h2 class=\"font-heading text-3xl sm:text-5xl font-bold text-white mt-4\">Skills & Tools<\/h2>\r\n <p class=\"text-gray-400 mt-3 text-sm\">Interactive overview of software suites and domain design proficiencies.<\/p>\r\n <\/div>\r\n\r\n <!-- Filter Switcher Buttons -->\r\n <div class=\"flex justify-center gap-3 mb-10\">\r\n <button id=\"btn-soft-skills\" onclick=\"switchSkillTab('software')\" class=\"px-6 py-2.5 rounded-full text-xs font-bold transition-all bg-brand-accent text-black shadow-lg shadow-brand-accent\/20\">\r\n Software Tools\r\n <\/button>\r\n <button id=\"btn-prof-skills\" onclick=\"switchSkillTab('professional')\" class=\"px-6 py-2.5 rounded-full text-xs font-bold transition-all glass-card text-gray-300 hover:text-white\">\r\n Core Design Domains\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Software Skills Container -->\r\n <div id=\"tab-software\" class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <!-- Photoshop -->\r\n <div class=\"glass-card p-5 rounded-2xl\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <span class=\"text-sm font-semibold text-white flex items-center gap-3\">\r\n <i class=\"fa-regular fa-image text-brand-accent text-lg\"><\/i> Adobe Photoshop\r\n <\/span>\r\n <span class=\"text-xs font-extrabold text-brand-accent\">95%<\/span>\r\n <\/div>\r\n <div class=\"w-full bg-black\/60 h-2.5 rounded-full overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-brand-green to-brand-accent h-full rounded-full transition-all duration-1000\" style=\"width: 95%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Illustrator -->\r\n <div class=\"glass-card p-5 rounded-2xl\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <span class=\"text-sm font-semibold text-white flex items-center gap-3\">\r\n <i class=\"fa-solid fa-bezier-curve text-brand-accent text-lg\"><\/i> Adobe Illustrator\r\n <\/span>\r\n <span class=\"text-xs font-extrabold text-brand-accent\">92%<\/span>\r\n <\/div>\r\n <div class=\"w-full bg-black\/60 h-2.5 rounded-full overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-brand-green to-brand-accent h-full rounded-full transition-all duration-1000\" style=\"width: 92%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Premiere Pro -->\r\n <div class=\"glass-card p-5 rounded-2xl\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <span class=\"text-sm font-semibold text-white flex items-center gap-3\">\r\n <i class=\"fa-solid fa-film text-brand-accent text-lg\"><\/i> Adobe Premiere Pro\r\n <\/span>\r\n <span class=\"text-xs font-extrabold text-brand-accent\">88%<\/span>\r\n <\/div>\r\n <div class=\"w-full bg-black\/60 h-2.5 rounded-full overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-brand-green to-brand-accent h-full rounded-full transition-all duration-1000\" style=\"width: 88%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- After Effects -->\r\n <div class=\"glass-card p-5 rounded-2xl\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <span class=\"text-sm font-semibold text-white flex items-center gap-3\">\r\n <i class=\"fa-solid fa-clapperboard text-brand-accent text-lg\"><\/i> Adobe After Effects\r\n <\/span>\r\n <span class=\"text-xs font-extrabold text-brand-accent\">83%<\/span>\r\n <\/div>\r\n <div class=\"w-full bg-black\/60 h-2.5 rounded-full overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-brand-green to-brand-accent h-full rounded-full transition-all duration-1000\" style=\"width: 83%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- DaVinci Resolve -->\r\n <div class=\"glass-card p-5 rounded-2xl\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <span class=\"text-sm font-semibold text-white flex items-center gap-3\">\r\n <i class=\"fa-solid fa-sliders text-brand-accent text-lg\"><\/i> DaVinci Resolve\r\n <\/span>\r\n <span class=\"text-xs font-extrabold text-brand-accent\">80%<\/span>\r\n <\/div>\r\n <div class=\"w-full bg-black\/60 h-2.5 rounded-full overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-brand-green to-brand-accent h-full rounded-full transition-all duration-1000\" style=\"width: 80%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Adobe Lightroom -->\r\n <div class=\"glass-card p-5 rounded-2xl\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <span class=\"text-sm font-semibold text-white flex items-center gap-3\">\r\n <i class=\"fa-solid fa-sun text-brand-accent text-lg\"><\/i> Adobe Lightroom\r\n <\/span>\r\n <span class=\"text-xs font-extrabold text-brand-accent\">85%<\/span>\r\n <\/div>\r\n <div class=\"w-full bg-black\/60 h-2.5 rounded-full overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-brand-green to-brand-accent h-full rounded-full transition-all duration-1000\" style=\"width: 85%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Adobe InDesign -->\r\n <div class=\"glass-card p-5 rounded-2xl\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <span class=\"text-sm font-semibold text-white flex items-center gap-3\">\r\n <i class=\"fa-solid fa-book-open text-brand-accent text-lg\"><\/i> Adobe InDesign\r\n <\/span>\r\n <span class=\"text-xs font-extrabold text-brand-accent\">85%<\/span>\r\n <\/div>\r\n <div class=\"w-full bg-black\/60 h-2.5 rounded-full overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-brand-green to-brand-accent h-full rounded-full transition-all duration-1000\" style=\"width: 85%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Reaper Audio -->\r\n <div class=\"glass-card p-5 rounded-2xl\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <span class=\"text-sm font-semibold text-white flex items-center gap-3\">\r\n <i class=\"fa-solid fa-wave-square text-brand-accent text-lg\"><\/i> Reaper Audio\r\n <\/span>\r\n <span class=\"text-xs font-extrabold text-brand-accent\">75%<\/span>\r\n <\/div>\r\n <div class=\"w-full bg-black\/60 h-2.5 rounded-full overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-brand-green to-brand-accent h-full rounded-full transition-all duration-1000\" style=\"width: 75%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Professional Skills Container (Hidden by Default) -->\r\n <div id=\"tab-professional\" class=\"hidden grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\">\r\n <div class=\"glass-card p-6 rounded-3xl flex flex-col justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-brand-accent\/10 border border-brand-accent\/20 flex items-center justify-center text-brand-accent text-2xl mb-4\">\r\n <i class=\"fa-solid fa-camera\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-lg font-bold text-white mb-1\">Photography<\/h4>\r\n <p class=\"text-xs text-gray-400 leading-relaxed\">Studio portraiture, product shooting, lighting setups, and color grading.<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-card p-6 rounded-3xl flex flex-col justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-brand-accent\/10 border border-brand-accent\/20 flex items-center justify-center text-brand-accent text-2xl mb-4\">\r\n <i class=\"fa-solid fa-video\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-lg font-bold text-white mb-1\">Video Editing & Motion<\/h4>\r\n <p class=\"text-xs text-gray-400 leading-relaxed\">Engaging social media reels, promo ads, cut transitions, and audio sync.<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-card p-6 rounded-3xl flex flex-col justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-brand-accent\/10 border border-brand-accent\/20 flex items-center justify-center text-brand-accent text-2xl mb-4\">\r\n <i class=\"fa-solid fa-palette\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-lg font-bold text-white mb-1\">Branding & Identity<\/h4>\r\n <p class=\"text-xs text-gray-400 leading-relaxed\">Logo systems, color palettes, brand guidelines, and vector icon artwork.<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-card p-6 rounded-3xl flex flex-col justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-brand-accent\/10 border border-brand-accent\/20 flex items-center justify-center text-brand-accent text-2xl mb-4\">\r\n <i class=\"fa-solid fa-bullhorn\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-lg font-bold text-white mb-1\">Advertising Campaigns<\/h4>\r\n <p class=\"text-xs text-gray-400 leading-relaxed\">High-converting social media marketing flyers, roll-ups, and store banners.<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-card p-6 rounded-3xl flex flex-col justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-brand-accent\/10 border border-brand-accent\/20 flex items-center justify-center text-brand-accent text-2xl mb-4\">\r\n <i class=\"fa-solid fa-print\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-lg font-bold text-white mb-1\">Print Layout & Prepress<\/h4>\r\n <p class=\"text-xs text-gray-400 leading-relaxed\">Brochure publishing, CMYK color profiles, catalog layouts, and packaging graphics.<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-card p-6 rounded-3xl flex flex-col justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-brand-accent\/10 border border-brand-accent\/20 flex items-center justify-center text-brand-accent text-2xl mb-4\">\r\n <i class=\"fa-solid fa-hashtag\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-lg font-bold text-white mb-1\">Social Content Strategy<\/h4>\r\n <p class=\"text-xs text-gray-400 leading-relaxed\">Creative direction, content hooks, and viral visual formats for digital channels.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- PORTFOLIO SHOWCASE SECTION -->\r\n <section id=\"portfolio\" class=\"py-20 reveal\">\r\n <div class=\"text-center max-w-3xl mx-auto mb-16\">\r\n <span class=\"text-brand-accent font-semibold tracking-wider text-xs uppercase bg-brand-accent\/10 px-3 py-1 rounded-full border border-brand-accent\/20\">Selected Work<\/span>\r\n <h2 class=\"font-heading text-3xl sm:text-5xl font-bold text-white mt-4\">Design & Video Portfolio<\/h2>\r\n <p class=\"text-gray-400 mt-3 text-sm\">Explore my creative portfolio collection hosted directly on Google Drive.<\/p>\r\n <\/div>\r\n\r\n <!-- Portfolio Feature Card -->\r\n <div class=\"glass-card rounded-3xl p-8 md:p-12 border border-brand-accent\/30 relative overflow-hidden max-w-4xl mx-auto\">\r\n <div class=\"absolute -right-20 -bottom-20 w-80 h-80 bg-brand-accent\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n\r\n <div class=\"flex flex-col md:flex-row items-center justify-between gap-8\">\r\n <div class=\"space-y-4 text-center md:text-left\">\r\n <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-accent\/10 text-brand-accent text-xs font-semibold\">\r\n <i class=\"fa-solid fa-folder-closed\"><\/i> Verified Google Drive Repository\r\n <\/div>\r\n <h3 class=\"font-heading text-2xl sm:text-4xl font-extrabold text-white\">\r\n Complete Work Catalogue\r\n <\/h3>\r\n <p class=\"text-gray-300 text-sm max-w-lg leading-relaxed\">\r\n Includes brand identity projects, high-resolution graphic posters, video campaigns, product packaging designs, and motion reels.\r\n <\/p>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/drive.google.com\/file\/d\/1kDnOb8kzcE9EWgmJmHnksTMmjyjnxtLV\/view?usp=sharing\" target=\"_blank\" class=\"glow-btn bg-brand-accent text-black font-extrabold py-5 px-8 rounded-2xl whitespace-nowrap flex items-center gap-3 text-sm hover:scale-105 transition-all\">\r\n <span>Open Drive Portfolio<\/span>\r\n <i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- EDUCATION & LANGUAGES SECTION -->\r\n <section id=\"education\" class=\"py-20 reveal\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-12 gap-12\">\r\n <!-- Education Column -->\r\n <div class=\"md:col-span-7 space-y-6\">\r\n <div>\r\n <span class=\"text-brand-accent font-semibold tracking-wider text-xs uppercase bg-brand-accent\/10 px-3 py-1 rounded-full border border-brand-accent\/20\">Academic Background<\/span>\r\n <h2 class=\"font-heading text-3xl sm:text-4xl font-bold text-white mt-3\">Education<\/h2>\r\n <\/div>\r\n\r\n <div class=\"space-y-4\">\r\n <!-- Degree -->\r\n <div class=\"glass-card p-6 rounded-3xl border-l-4 border-l-brand-accent\">\r\n <div class=\"flex justify-between items-start flex-wrap gap-2\">\r\n <div>\r\n <h3 class=\"font-heading text-lg font-bold text-white\">Bachelor of Arts in Visual Communication<\/h3>\r\n <p class=\"text-brand-accent text-sm font-medium\">St. Joseph College of Communication (MG University)<\/p>\r\n <p class=\"text-xs text-gray-400 mt-1\">Changanassery, Kerala<\/p>\r\n <\/div>\r\n <span class=\"bg-brand-accent\/10 text-brand-lightGreen px-3 py-1 rounded-full text-xs font-semibold border border-brand-accent\/20\">CGPA: 6.01 \/ 10<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- GHSS -->\r\n <div class=\"glass-card p-6 rounded-3xl border-l-4 border-l-brand-border\">\r\n <div class=\"flex justify-between items-start flex-wrap gap-2\">\r\n <div>\r\n <h3 class=\"font-heading text-lg font-bold text-white\">Higher Secondary Education<\/h3>\r\n <p class=\"text-gray-300 text-sm\">Government Higher Secondary School<\/p>\r\n <p class=\"text-xs text-gray-400 mt-1\">Kottayam, Kerala<\/p>\r\n <\/div>\r\n <span class=\"bg-white\/5 text-gray-300 px-3 py-1 rounded-full text-xs font-medium border border-white\/10\">CGPA: 7.9 \/ 10<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MYCA -->\r\n <div class=\"glass-card p-6 rounded-3xl border-l-4 border-l-brand-border\">\r\n <div class=\"flex justify-between items-start flex-wrap gap-2\">\r\n <div>\r\n <h3 class=\"font-heading text-lg font-bold text-white\">Secondary Education (SSLC)<\/h3>\r\n <p class=\"text-gray-300 text-sm\">MYCA English Medium High School<\/p>\r\n <p class=\"text-xs text-gray-400 mt-1\">Kanjirappally, Kerala<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Languages Column -->\r\n <div class=\"md:col-span-5 space-y-6\">\r\n <div>\r\n <span class=\"text-brand-accent font-semibold tracking-wider text-xs uppercase bg-brand-accent\/10 px-3 py-1 rounded-full border border-brand-accent\/20\">Communication<\/span>\r\n <h2 class=\"font-heading text-3xl sm:text-4xl font-bold text-white mt-3\">Languages<\/h2>\r\n <\/div>\r\n\r\n <div class=\"space-y-4\">\r\n <div class=\"glass-card p-5 rounded-2xl flex items-center justify-between\">\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-11 h-11 rounded-xl bg-brand-accent\/10 flex items-center justify-center text-brand-accent text-xl\">\r\n <i class=\"fa-solid fa-language\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-sm font-bold text-white\">Malayalam<\/h4>\r\n <p class=\"text-xs text-gray-400\">Mother Tongue<\/p>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-xs text-brand-accent font-bold\">Native<\/span>\r\n <\/div>\r\n\r\n <div class=\"glass-card p-5 rounded-2xl flex items-center justify-between\">\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-11 h-11 rounded-xl bg-brand-accent\/10 flex items-center justify-center text-brand-accent text-xl\">\r\n <i class=\"fa-solid fa-globe\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-sm font-bold text-white\">English<\/h4>\r\n <p class=\"text-xs text-gray-400\">Professional Working<\/p>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-xs text-brand-accent font-bold\">Fluent<\/span>\r\n <\/div>\r\n\r\n <div class=\"glass-card p-5 rounded-2xl flex items-center justify-between\">\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-11 h-11 rounded-xl bg-white\/5 flex items-center justify-center text-gray-400 text-xl\">\r\n <i class=\"fa-solid fa-comments\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-sm font-bold text-white\">Tamil<\/h4>\r\n <p class=\"text-xs text-gray-400\">Conversational<\/p>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-xs text-gray-400 font-medium\">Basic<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CONTACT & DIRECT ACTIONS SECTION -->\r\n <section id=\"contact\" class=\"py-20 reveal\">\r\n <div class=\"glass-card rounded-3xl p-8 md:p-14 border border-brand-accent\/30 relative overflow-hidden\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12\">\r\n <div class=\"lg:col-span-6 space-y-6\">\r\n <span class=\"text-brand-accent font-semibold tracking-wider text-xs uppercase bg-brand-accent\/10 px-3 py-1 rounded-full border border-brand-accent\/20\">Let's Connect<\/span>\r\n <h2 class=\"font-heading text-3xl sm:text-5xl font-extrabold text-white leading-tight\">\r\n Have a Project in Mind? <br \/>\r\n <span class=\"text-gradient-green\">Let's Talk Design.<\/span>\r\n <\/h2>\r\n <p class=\"text-gray-300 text-sm leading-relaxed\">\r\n Reach out directly via WhatsApp, Direct Call, Email, or Instagram for graphic design and video editing collaborations.\r\n <\/p>\r\n\r\n <!-- Direct Interactive Call-to-Actions Grid -->\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4\">\r\n <!-- WhatsApp Redirect -->\r\n <a href=\"https:\/\/wa.me\/916235005769\" target=\"_blank\" class=\"p-4 rounded-2xl bg-emerald-950\/40 border border-emerald-500\/30 hover:border-emerald-400 flex items-center gap-4 transition-all group\">\r\n <div class=\"w-12 h-12 rounded-xl bg-emerald-500\/20 flex items-center justify-center text-emerald-400 text-2xl group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-xs text-gray-400 block\">WhatsApp Me<\/span>\r\n <span class=\"text-sm font-bold text-white group-hover:text-emerald-400\">+91 6235005769<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Call Direct -->\r\n <a href=\"tel:+96879122765\" class=\"p-4 rounded-2xl bg-white\/5 border border-white\/10 hover:border-brand-accent flex items-center gap-4 transition-all group\">\r\n <div class=\"w-12 h-12 rounded-xl bg-brand-accent\/10 flex items-center justify-center text-brand-accent text-xl group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-phone\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-xs text-gray-400 block\">Call Direct (Oman)<\/span>\r\n <span class=\"text-sm font-bold text-white group-hover:text-brand-accent\">+968 79122765<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Instagram Redirect -->\r\n <a href=\"https:\/\/instagram.com\/issudeenshemeer\" target=\"_blank\" class=\"p-4 rounded-2xl bg-white\/5 border border-white\/10 hover:border-brand-accent flex items-center gap-4 transition-all group\">\r\n <div class=\"w-12 h-12 rounded-xl bg-brand-accent\/10 flex items-center justify-center text-brand-accent text-xl group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-brands fa-instagram\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-xs text-gray-400 block\">Instagram<\/span>\r\n <span class=\"text-sm font-bold text-white group-hover:text-brand-accent\">@issudeenshemeer_<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Email Redirect -->\r\n <a href=\"mailto:issudeenshemeer@gmail.com\" class=\"p-4 rounded-2xl bg-white\/5 border border-white\/10 hover:border-brand-accent flex items-center gap-4 transition-all group\">\r\n <div class=\"w-12 h-12 rounded-xl bg-brand-accent\/10 flex items-center justify-center text-brand-accent text-xl group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-regular fa-envelope\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-xs text-gray-400 block\">Email Address<\/span>\r\n <span class=\"text-xs font-bold text-white group-hover:text-brand-accent truncate block\">issudeenshemeer@...<\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Interactive Quick Message Form -->\r\n <div class=\"lg:col-span-6 glass-card p-6 md:p-8 rounded-3xl border border-white\/10\">\r\n <h3 class=\"font-heading text-xl font-bold text-white mb-4\">Send a Quick Inquiry<\/h3>\r\n <form id=\"contact-form\" class=\"space-y-4\" onsubmit=\"handleFormSubmit(event)\">\r\n <div>\r\n <label class=\"text-xs text-gray-400 block mb-1\">Your Name<\/label>\r\n <input type=\"text\" required placeholder=\"John Doe\" class=\"w-full bg-black\/50 border border-white\/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-brand-accent transition-colors\">\r\n <\/div>\r\n <div>\r\n <label class=\"text-xs text-gray-400 block mb-1\">Your Email or Phone<\/label>\r\n <input type=\"text\" required placeholder=\"email@domain.com or phone\" class=\"w-full bg-black\/50 border border-white\/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-brand-accent transition-colors\">\r\n <\/div>\r\n <div>\r\n <label class=\"text-xs text-gray-400 block mb-1\">Project Details<\/label>\r\n <textarea rows=\"3\" required placeholder=\"Describe your graphic design or video editing needs...\" class=\"w-full bg-black\/50 border border-white\/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-brand-accent transition-colors resize-none\"><\/textarea>\r\n <\/div>\r\n <button type=\"submit\" class=\"glow-btn w-full bg-brand-accent text-black font-bold py-3.5 rounded-xl transition-all flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-paper-plane\"><\/i> Send Message\r\n <\/button>\r\n <\/form>\r\n <div id=\"form-response\" class=\"hidden mt-4 p-3 rounded-xl bg-brand-accent\/20 border border-brand-accent text-brand-accent text-xs text-center font-medium\">\r\n Thank you! Your inquiry has been sent. I will reply shortly.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n <!-- FOOTER -->\r\n <footer class=\"border-t border-brand-border\/60 py-8 px-6 text-center text-xs text-gray-400 relative z-10\">\r\n <div class=\"max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4\">\r\n <p>© <span id=\"year\"><\/span> Issudeen Shemeer. All rights reserved.<\/p>\r\n <div class=\"flex gap-6 text-base\">\r\n <a href=\"https:\/\/wa.me\/916235005769\" target=\"_blank\" class=\"hover:text-brand-accent transition-colors\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\r\n <a href=\"https:\/\/instagram.com\/issudeenshemeer\" target=\"_blank\" class=\"hover:text-brand-accent transition-colors\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n <a href=\"https:\/\/www.linkedin.com\/in\/issudeenshemeer\" target=\"_blank\" class=\"hover:text-brand-accent transition-colors\"><i class=\"fa-brands fa-linkedin\"><\/i><\/a>\r\n <a href=\"mailto:issudeenshemeer@gmail.com\" class=\"hover:text-brand-accent transition-colors\"><i class=\"fa-regular fa-envelope\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- JAVASCRIPT LOGIC -->\r\n <script>\r\n \/\/ Set Year\r\n document.getElementById('year').textContent = new Date().getFullYear();\r\n\r\n \/\/ Background Aura Intensity Toggle\r\n const meshAura = document.getElementById('mesh-aura');\r\n const bgToggleBtn = document.getElementById('bg-toggle-btn');\r\n const bgToggleBtnMobile = document.getElementById('bg-toggle-btn-mobile');\r\n\r\n function toggleAura() {\r\n meshAura.classList.toggle('intense-mode');\r\n }\r\n\r\n if (bgToggleBtn) bgToggleBtn.addEventListener('click', toggleAura);\r\n if (bgToggleBtnMobile) bgToggleBtnMobile.addEventListener('click', toggleAura);\r\n\r\n \/\/ Mobile Menu Toggle\r\n const menuToggle = document.getElementById('menu-toggle');\r\n const mobileMenu = document.getElementById('mobile-menu');\r\n menuToggle.addEventListener('click', () => {\r\n mobileMenu.classList.toggle('hidden');\r\n });\r\n\r\n document.querySelectorAll('.mobile-link').forEach(link => {\r\n link.addEventListener('click', () => {\r\n mobileMenu.classList.add('hidden');\r\n });\r\n });\r\n\r\n \/\/ Skills Filter Switcher Logic\r\n function switchSkillTab(type) {\r\n const tabSoft = document.getElementById('tab-software');\r\n const tabProf = document.getElementById('tab-professional');\r\n const btnSoft = document.getElementById('btn-soft-skills');\r\n const btnProf = document.getElementById('btn-prof-skills');\r\n\r\n if (type === 'software') {\r\n tabSoft.classList.remove('hidden');\r\n tabProf.classList.add('hidden');\r\n btnSoft.className = 'px-6 py-2.5 rounded-full text-xs font-bold transition-all bg-brand-accent text-black shadow-lg shadow-brand-accent\/20';\r\n btnProf.className = 'px-6 py-2.5 rounded-full text-xs font-bold transition-all glass-card text-gray-300 hover:text-white';\r\n } else {\r\n tabProf.classList.remove('hidden');\r\n tabSoft.classList.add('hidden');\r\n btnProf.className = 'px-6 py-2.5 rounded-full text-xs font-bold transition-all bg-brand-accent text-black shadow-lg shadow-brand-accent\/20';\r\n btnSoft.className = 'px-6 py-2.5 rounded-full text-xs font-bold transition-all glass-card text-gray-300 hover:text-white';\r\n }\r\n }\r\n\r\n \/\/ Contact Form Mock Handler\r\n function handleFormSubmit(e) {\r\n e.preventDefault();\r\n const form = document.getElementById('contact-form');\r\n const response = document.getElementById('form-response');\r\n form.reset();\r\n response.classList.remove('hidden');\r\n setTimeout(() => {\r\n response.classList.add('hidden');\r\n }, 5000);\r\n }\r\n\r\n \/\/ Scroll Reveal Animations\r\n const revealElements = document.querySelectorAll('.reveal');\r\n const revealOnScroll = () => {\r\n const windowHeight = window.innerHeight;\r\n revealElements.forEach(el => {\r\n const elementTop = el.getBoundingClientRect().top;\r\n if (elementTop < windowHeight - 80) {\r\n el.classList.add('active');\r\n }\r\n });\r\n };\r\n window.addEventListener('scroll', revealOnScroll);\r\n\r\n \/\/ Particle Canvas Background Script\r\n const canvas = document.getElementById('bg-canvas');\r\n const ctx = canvas.getContext('2d');\r\n\r\n let particlesArray = [];\r\n let width = canvas.width = window.innerWidth;\r\n let height = canvas.height = window.innerHeight;\r\n\r\n window.addEventListener('resize', () => {\r\n width = canvas.width = window.innerWidth;\r\n height = canvas.height = window.innerHeight;\r\n initParticles();\r\n });\r\n\r\n class Particle {\r\n constructor() {\r\n this.x = Math.random() * width;\r\n this.y = Math.random() * height;\r\n this.size = Math.random() * 2 + 0.5;\r\n this.speedX = (Math.random() - 0.5) * 0.45;\r\n this.speedY = (Math.random() - 0.5) * 0.45;\r\n this.alpha = Math.random() * 0.5 + 0.2;\r\n }\r\n\r\n update() {\r\n this.x += this.speedX;\r\n this.y += this.speedY;\r\n\r\n if (this.x < 0) this.x = width;\r\n if (this.x > width) this.x = 0;\r\n if (this.y < 0) this.y = height;\r\n if (this.y > height) this.y = 0;\r\n }\r\n\r\n draw() {\r\n ctx.fillStyle = `rgba(0, 255, 136, ${this.alpha})`;\r\n ctx.beginPath();\r\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n }\r\n\r\n function initParticles() {\r\n particlesArray = [];\r\n const numberOfParticles = Math.floor((width * height) \/ 16000);\r\n for (let i = 0; i < numberOfParticles; i++) {\r\n particlesArray.push(new Particle());\r\n }\r\n }\r\n\r\n function animateParticles() {\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n for (let i = 0; i < particlesArray.length; i++) {\r\n particlesArray[i].update();\r\n particlesArray[i].draw();\r\n\r\n for (let j = i + 1; j < particlesArray.length; j++) {\r\n const dx = particlesArray[i].x - particlesArray[j].x;\r\n const dy = particlesArray[i].y - particlesArray[j].y;\r\n const distance = Math.sqrt(dx * dx + dy * dy);\r\n\r\n if (distance < 110) {\r\n ctx.strokeStyle = `rgba(0, 255, 136, ${0.14 - distance \/ 1100})`;\r\n ctx.lineWidth = 0.5;\r\n ctx.beginPath();\r\n ctx.moveTo(particlesArray[i].x, particlesArray[i].y);\r\n ctx.lineTo(particlesArray[j].x, particlesArray[j].y);\r\n ctx.stroke();\r\n }\r\n }\r\n }\r\n requestAnimationFrame(animateParticles);\r\n }\r\n\r\n window.onload = function () {\r\n initParticles();\r\n animateParticles();\r\n revealOnScroll();\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>Issudeen Shemeer | Graphic Designer & Video Editor ISSUDEEN. About Experience Skills Portfolio Education Contact Quick Chat About Experience Skills […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","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-49","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/issudeenshemeer.com\/index.php?rest_route=\/wp\/v2\/pages\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/issudeenshemeer.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/issudeenshemeer.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/issudeenshemeer.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/issudeenshemeer.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=49"}],"version-history":[{"count":5,"href":"https:\/\/issudeenshemeer.com\/index.php?rest_route=\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/issudeenshemeer.com\/index.php?rest_route=\/wp\/v2\/pages\/49\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/issudeenshemeer.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}