{"id":40,"date":"2025-12-24T11:04:00","date_gmt":"2025-12-24T11:04:00","guid":{"rendered":"https:\/\/nexasoul.com\/site\/?page_id=40"},"modified":"2026-01-28T11:42:09","modified_gmt":"2026-01-28T11:42:09","slug":"articles","status":"publish","type":"page","link":"https:\/\/nexasoul.com\/site\/","title":{"rendered":"Articles"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n Nexa Soul - Articles & Insights<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/unpkg.com\/phosphor-icons\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n width: 100vw;\r\n height: calc(var(--vh, 1vh) * 100);\r\n color: white;\r\n z-index: 99;\r\n position: absolute;\r\n width: 100%;\r\n margin: 0px auto;\r\n font-family: 'Inter', sans-serif;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* 3D Canvas Container *\/\r\n #threejs-container {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n }\r\n\r\n \/* Header *\/\r\n .header {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 100;\r\n padding: 0;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, \r\n rgba(9, 174, 184, 0.1) 0%, \r\n rgba(5, 6, 15, 0.8) 50%, \r\n rgba(9, 174, 184, 0.05) 100%);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(9, 174, 184, 0.2);\r\n opacity: 0;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n\r\n .nav {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 1.5rem 4rem;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .logo {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n background: linear-gradient(45deg, #09AEB8, #ffffff, #09AEB8);\r\n background-size: 200% 200%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: logoShimmer 3s ease-in-out infinite;\r\n position: relative;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .logo::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -5px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, #09AEB8, #ffffff);\r\n transition: width 0.3s ease;\r\n }\r\n\r\n .logo:hover::after {\r\n width: 100%;\r\n }\r\n\r\n .logo:hover {\r\n transform: scale(1.05);\r\n filter: drop-shadow(0 0 15px rgba(9, 174, 184, 0.5));\r\n }\r\n\r\n @keyframes logoShimmer {\r\n 0%, 100% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n list-style: none;\r\n gap: 0.5rem;\r\n background: rgba(9, 174, 184, 0.1);\r\n border-radius: 50px;\r\n padding: 0.5rem !important;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(9, 174, 184, 0.2);\r\n }\r\n\r\n .nav-links li {\r\n position: relative;\r\n }\r\n\r\n .nav-links a {\r\n color: rgba(255, 255, 255, 0.8);\r\n text-decoration: none !important;\r\n padding: 0.8rem 1.5rem !important;\r\n border-radius: 25px;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n letter-spacing: 0.5px;\r\n overflow: hidden;\r\n }\r\n\r\n .nav-links a::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, \r\n transparent, \r\n rgba(9, 174, 184, 0.3), \r\n transparent);\r\n transition: left 0.5s ease;\r\n }\r\n\r\n .nav-links a:hover {\r\n color: #ffffff;\r\n background: rgba(9, 174, 184, 0.2);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(9, 174, 184, 0.3);\r\n }\r\n\r\n \/* Navigation Click Effects *\/\r\n .nav-links a.clicked {\r\n animation: navClickEffect 0.6s ease-out;\r\n }\r\n\r\n @keyframes navClickEffect {\r\n 0% {\r\n transform: translateY(-2px) scale(1);\r\n box-shadow: 0 5px 15px rgba(9, 174, 184, 0.3);\r\n }\r\n 25% {\r\n transform: translateY(-2px) scale(1.1);\r\n box-shadow: 0 10px 30px rgba(9, 174, 184, 0.6);\r\n }\r\n 50% {\r\n transform: translateY(-2px) scale(1.05);\r\n box-shadow: 0 15px 40px rgba(9, 174, 184, 0.8);\r\n }\r\n 100% {\r\n transform: translateY(-2px) scale(1);\r\n box-shadow: 0 5px 15px rgba(9, 174, 184, 0.3);\r\n }\r\n }\r\n\r\n .nav-toggle {\r\n display: none;\r\n background: none;\r\n border: none;\r\n color: white;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n border-radius: 8px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-toggle:hover {\r\n background: rgba(9, 174, 184, 0.2);\r\n transform: scale(1.1);\r\n }\r\n \r\n \r\n .nav-toggle:focus {\r\n background: rgba(9, 174, 184, 0.2);\r\n color: white;\r\n outline: 2px solid #09AEB8;\r\n outline-offset: 2px;\r\n }\r\n\r\n \/* Main Content *\/\r\n .main-content {\r\n position: relative;\r\n z-index: 50;\r\n padding-top: 120px;\r\n padding-bottom: 80px;\r\n min-height: 100vh;\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n }\r\n\r\n \/* Page Header *\/\r\n .page-header {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n }\r\n\r\n .page-title {\r\n font-size: 4rem;\r\n font-weight: 700;\r\n background: linear-gradient(45deg, #09AEB8, #ffffff, #40E0D0);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 1rem;\r\n animation: fadeInDown 1s ease;\r\n }\r\n\r\n .page-subtitle {\r\n font-size: 1.3rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n animation: fadeInUp 1s ease 0.2s backwards;\r\n }\r\n\r\n \r\n \/* Articles Grid *\/\r\n .articles-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 30px;\r\n margin-bottom: 60px;\r\n }\r\n\r\n .article-card {\r\n background: rgba(9, 174, 184, 0.08);\r\n border: 1px solid rgba(9, 174, 184, 0.25);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n backdrop-filter: blur(10px);\r\n transition: all 0.5s ease;\r\n animation: fadeInUp 0.8s ease backwards;\r\n }\r\n\r\n .article-card:nth-child(1) { animation-delay: 0.1s; }\r\n .article-card:nth-child(2) { animation-delay: 0.2s; }\r\n .article-card:nth-child(3) { animation-delay: 0.3s; }\r\n .article-card:nth-child(4) { animation-delay: 0.4s; }\r\n .article-card:nth-child(5) { animation-delay: 0.5s; }\r\n .article-card:nth-child(6) { animation-delay: 0.6s; }\r\n .article-card:nth-child(7) { animation-delay: 0.7s; }\r\n .article-card:nth-child(8) { animation-delay: 0.8s; }\r\n .article-card:nth-child(9) { animation-delay: 0.9s; }\r\n\r\n .article-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 40px rgba(9, 174, 184, 0.25);\r\n border-color: #09AEB8;\r\n background: rgba(9, 174, 184, 0.12);\r\n }\r\n\r\n .article-thumb {\r\n background: linear-gradient(135deg, rgba(9, 174, 184, 0.2), rgba(64, 224, 208, 0.1));\r\n height: 200px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .article-thumb img {\r\n transition: transform 0.6s ease;\r\n }\r\n\r\n .article-icon {\r\n font-size: 4rem;\r\n color: #09AEB8;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n .article-card:hover .article-icon {\r\n transform: scale(1.2) rotate(10deg);\r\n }\r\n\r\n .article-card:hover .article-thumb img {\r\n transform: scale(1.08);\r\n }\r\n\r\n .article-body {\r\n padding: 2rem;\r\n }\r\n\r\n .article-category {\r\n display: inline-block;\r\n background: rgba(9, 174, 184, 0.2);\r\n color: #09AEB8;\r\n padding: 5px 15px;\r\n border-radius: 50px;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n margin-bottom: 1rem;\r\n border: 1px solid rgba(9, 174, 184, 0.3);\r\n }\r\n\r\n .article-title {\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n color: white;\r\n margin-bottom: 1rem;\r\n line-height: 1.3;\r\n }\r\n\r\n .article-excerpt {\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 1.5rem;\r\n font-size: 0.95rem;\r\n line-height: 1.6;\r\n }\r\n\r\n .article-meta {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding-top: 1rem;\r\n border-top: 1px solid rgba(9, 174, 184, 0.2);\r\n }\r\n\r\n .article-date {\r\n color: rgba(255, 255, 255, 0.5);\r\n font-size: 0.85rem;\r\n }\r\n\r\n .article-read-time {\r\n color: rgba(255, 255, 255, 0.5);\r\n font-size: 0.85rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n\r\n .article-link {\r\n color: #09AEB8;\r\n text-decoration: none !important;\r\n font-weight: 600;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 5px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .article-link:hover {\r\n gap: 10px;\r\n color:white !important;\r\n }\r\n\r\n .article-link:visited {\r\n color: #09AEB8;\r\n }\r\n\r\n .article-link i {\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .article-link:hover i {\r\n transform: translateX(3px);\r\n }\r\n\r\n \/* Load More Button *\/\r\n .load-more-container {\r\n text-align: center;\r\n margin-top: 40px;\r\n }\r\n\r\n .load-more-btn {\r\n background: linear-gradient(45deg, #09AEB8, #40E0D0);\r\n border: none;\r\n padding: 15px 40px;\r\n border-radius: 50px;\r\n color: white;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 1rem;\r\n }\r\n\r\n .load-more-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 30px rgba(9, 174, 184, 0.5);\r\n color: white;\r\n }\r\n\r\n \/* Animations *\/\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n @keyframes fadeInDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n @keyframes float {\r\n 0%, 100% {\r\n transform: translateY(0);\r\n }\r\n 50% {\r\n transform: translateY(-20px);\r\n }\r\n }\r\n\r\n \/* Loading Screen *\/\r\n .loading-screen {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: #000;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 9999;\r\n transition: opacity 1s ease-out;\r\n }\r\n\r\n .loading-screen.hidden {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .loader {\r\n width: 60px;\r\n height: 60px;\r\n border: 3px solid rgba(9, 174, 184, 0.3);\r\n border-top: 3px solid #09AEB8;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n margin-bottom: 20px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .loading-text {\r\n color: #09AEB8;\r\n font-size: 1.2rem;\r\n font-weight: 500;\r\n }\r\n\r\n #ast-mobile-header{\r\n display:none !important;\r\n }\r\n\r\n #ast-scroll-top {\r\n display:none !important;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1024px) {\r\n\r\n .articles-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .page-title {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .page-subtitle {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .articles-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .nav-links {\r\n position: absolute;\r\n top: 100%;\r\n right: 0;\r\n background: rgba(9, 174, 184, 0.1);\r\n flex-direction: column;\r\n width: 100%;\r\n padding: 0.5rem 2rem;\r\n border-radius: 0;\r\n transform: translateX(100%);\r\n transition: transform 0.3s ease;\r\n z-index:999;\r\n }\r\n\r\n .hero-content{\r\n z-index:1;\r\n }\r\n\r\n .nav-links li {\r\n width: 100%;\r\n margin: 0.5rem 0;\r\n }\r\n\r\n .nav-links a {\r\n display: block;\r\n width: 100%;\r\n padding: 1rem;\r\n border-radius: 0;\r\n font-size: 1.1rem;\r\n color: rgba(255, 255, 255, 0.85);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-links a:hover {\r\n background: rgba(9, 174, 184, 0.2);\r\n color: #fff;\r\n box-shadow: inset 0 0 10px rgba(9, 174, 184, 0.5);\r\n }\r\n\r\n .nav-links.active {\r\n transform: translateX(0);\r\n }\r\n\r\n .nav-toggle {\r\n display: block;\r\n }\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <!-- 3D Background -->\r\n <div id=\"threejs-container\"><\/div>\r\n <!-- Header -->\r\n <header class=\"header\" id=\"header\">\r\n <div class=\"hero-glow-top-right\"><\/div>\r\n <div class=\"hero-glow-bottom-left\"><\/div>\r\n <nav class=\"nav\">\r\n <a href=\"https:\/\/nexasoul.com\/\" class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/nexasoul.com\/logo.png\" alt=\"Nexa Soul Logo\" class=\"logo\" height=\"auto\" width=\"65\">\r\n <\/a>\r\n\r\n <!-- Mobile Menu Toggle (hamburger) -->\r\n <button class=\"nav-toggle\" id=\"nav-toggle\" aria-label=\"Toggle menu\">\r\n \u2630\r\n <\/button>\r\n\r\n <ul class=\"nav-links\" id=\"nav-links\">\r\n <li><a href=\"https:\/\/nexasoul.com\/\">Home<\/a><\/li>\r\n <li><a href=\"https:\/\/nexasoul.com\/#services\">Services<\/a><\/li>\r\n <li><a href=\"https:\/\/nexasoul.com\/#projects\">Clients<\/a><\/li>\r\n <li><a href=\"https:\/\/nexasoul.com\/#contact\">Contact<\/a><\/li>\r\n <li><a href=\"https:\/\/nexasoul.com\/site\">Articles<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/header><!-- Main Content -->\r\n <main class=\"main-content\">\r\n <div class=\"container\"><!-- Page Header -->\r\n <div class=\"page-header\">\r\n <h1 class=\"page-title\">Articles & Insights<\/h1>\r\n <p class=\"page-subtitle\">Explore the latest trends, best practices,\r\nand insights in technology, design, and digital innovation.<\/p>\r\n <\/div>\r\n <!-- Articles Grid -->\r\n <div class=\"articles-grid\" id=\"articlesGrid\"><\/div>\r\n <!-- Load More Button -->\r\n <div class=\"load-more-container\"><button class=\"load-more-btn\" id=\"loadMoreBtn\"> Load More <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n <script>\r\n \/\/ Three.js Space Background\r\n let scene, camera, renderer;\r\n let objects = [];\r\n let animationId;\r\n let mouse = { x: 0, y: 0 };\r\n\r\n function initThreeJS() {\r\n const container = document.getElementById('threejs-container');\r\n \r\n \/\/ Scene\r\n scene = new THREE.Scene();\r\n scene.fog = new THREE.FogExp2(0x000011, 0.0008);\r\n \r\n \/\/ Camera\r\n camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 2000);\r\n camera.position.set(0, 20, 100);\r\n \r\n \/\/ Renderer\r\n renderer = new THREE.WebGLRenderer({ \r\n antialias: true, \r\n alpha: true \r\n });\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n renderer.setClearColor(0x000011, 1);\r\n \r\n container.appendChild(renderer.domElement);\r\n \r\n \/\/ Lighting\r\n setupLighting();\r\n \r\n \/\/ Create space scene\r\n createSpaceScene();\r\n \r\n \/\/ Create starfield\r\n createStarfield();\r\n \r\n \/\/ Start animation\r\n animate();\r\n \r\n \/\/ Hide loading screen\r\n setTimeout(() => {\r\n document.getElementById('loadingScreen').classList.add('hidden');\r\n }, 2000);\r\n }\r\n\r\n function setupLighting() {\r\n const ambientLight = new THREE.AmbientLight(0x09AEB8, 0.2);\r\n scene.add(ambientLight);\r\n }\r\n\r\n function createSpaceScene() {\r\n \/\/ Create floating cyan particles\r\n for (let i = 0; i < 150; i++) {\r\n const size = 0.2 + Math.random() * 0.5;\r\n const geometry = new THREE.SphereGeometry(size, 8, 8);\r\n const material = new THREE.MeshBasicMaterial({\r\n color: 0x09AEB8,\r\n transparent: true,\r\n opacity: 0.5 + Math.random() * 0.5\r\n });\r\n const particle = new THREE.Mesh(geometry, material);\r\n \r\n particle.position.set(\r\n (Math.random() - 0.5) * 500,\r\n (Math.random() - 0.5) * 500,\r\n (Math.random() - 0.5) * 500\r\n );\r\n \r\n particle.userData = {\r\n velocity: {\r\n x: (Math.random() - 0.5) * 0.15,\r\n y: (Math.random() - 0.5) * 0.15,\r\n z: (Math.random() - 0.5) * 0.15\r\n },\r\n pulseSpeed: 0.8 + Math.random() * 2,\r\n baseOpacity: 0.5 + Math.random() * 0.5\r\n };\r\n \r\n scene.add(particle);\r\n objects.push(particle);\r\n }\r\n }\r\n\r\n function createStarfield() {\r\n \/\/ Create multiple layers of stars with cyan, white, and blue colors\r\n const layers = [\r\n { count: 2500, distance: 600, colorIntensity: 1.0, sizeRange: [1.5, 3] },\r\n { count: 2000, distance: 800, colorIntensity: 0.9, sizeRange: [1, 2.5] },\r\n { count: 1500, distance: 1000, colorIntensity: 0.7, sizeRange: [0.8, 2] }\r\n ];\r\n\r\n layers.forEach(layer => {\r\n const positions = new Float32Array(layer.count * 3);\r\n const colors = new Float32Array(layer.count * 3);\r\n const sizes = new Float32Array(layer.count);\r\n \r\n const cyanColor = new THREE.Color(0x09AEB8);\r\n const whiteColor = new THREE.Color(0xffffff);\r\n const blueColor = new THREE.Color(0x4169E1);\r\n const lightCyanColor = new THREE.Color(0x40E0D0);\r\n \r\n for (let i = 0; i < layer.count; i++) {\r\n const i3 = i * 3;\r\n const radius = layer.distance + Math.random() * 200;\r\n const theta = Math.random() * Math.PI * 2;\r\n const phi = Math.acos(2 * Math.random() - 1);\r\n \r\n positions[i3] = radius * Math.sin(phi) * Math.cos(theta);\r\n positions[i3 + 1] = radius * Math.sin(phi) * Math.sin(theta);\r\n positions[i3 + 2] = radius * Math.cos(phi);\r\n \r\n \/\/ Mix of cyan, white, blue and light cyan stars\r\n const rand = Math.random();\r\n let color;\r\n if (rand < 0.4) {\r\n color = cyanColor;\r\n } else if (rand < 0.7) {\r\n color = whiteColor;\r\n } else if (rand < 0.85) {\r\n color = blueColor;\r\n } else {\r\n color = lightCyanColor;\r\n }\r\n \r\n colors[i3] = color.r * layer.colorIntensity;\r\n colors[i3 + 1] = color.g * layer.colorIntensity;\r\n colors[i3 + 2] = color.b * layer.colorIntensity;\r\n \r\n sizes[i] = layer.sizeRange[0] + Math.random() * (layer.sizeRange[1] - layer.sizeRange[0]);\r\n }\r\n \r\n const geometry = new THREE.BufferGeometry();\r\n geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\r\n geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));\r\n geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));\r\n \r\n const material = new THREE.ShaderMaterial({\r\n uniforms: {\r\n time: { value: 0 }\r\n },\r\n vertexShader: `\r\n attribute float size;\r\n varying vec3 vColor;\r\n uniform float time;\r\n \r\n void main() {\r\n vColor = color;\r\n vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);\r\n \r\n \/\/ Twinkling effect\r\n float twinkle = sin(time * 3.0 + position.x * 0.02) * 0.5 + 0.5;\r\n \r\n gl_PointSize = size * (300.0 \/ -mvPosition.z) * (0.6 + twinkle * 0.4);\r\n gl_Position = projectionMatrix * mvPosition;\r\n }\r\n `,\r\n fragmentShader: `\r\n varying vec3 vColor;\r\n \r\n void main() {\r\n float distanceToCenter = distance(gl_PointCoord, vec2(0.5));\r\n float alpha = 1.0 - smoothstep(0.0, 0.5, distanceToCenter);\r\n \r\n gl_FragColor = vec4(vColor, alpha * 0.9);\r\n }\r\n `,\r\n transparent: true,\r\n vertexColors: true,\r\n blending: THREE.AdditiveBlending,\r\n depthWrite: false\r\n });\r\n \r\n const stars = new THREE.Points(geometry, material);\r\n scene.add(stars);\r\n objects.push(stars);\r\n });\r\n }\r\n\r\n function animate() {\r\n animationId = requestAnimationFrame(animate);\r\n \r\n const elapsedTime = performance.now() * 0.001;\r\n \r\n \/\/ Animate particles with gentle floating motion\r\n objects.forEach(object => {\r\n if (object.userData.velocity) {\r\n \/\/ Floating particles\r\n object.position.x += object.userData.velocity.x;\r\n object.position.y += object.userData.velocity.y;\r\n object.position.z += object.userData.velocity.z;\r\n \r\n \/\/ Wrap around if too far\r\n if (Math.abs(object.position.x) > 250) object.position.x *= -1;\r\n if (Math.abs(object.position.y) > 250) object.position.y *= -1;\r\n if (Math.abs(object.position.z) > 250) object.position.z *= -1;\r\n \r\n \/\/ Pulsing opacity\r\n if (object.material && object.material.opacity !== undefined) {\r\n const baseOpacity = object.userData.baseOpacity || 0.5;\r\n object.material.opacity = baseOpacity + Math.sin(elapsedTime * object.userData.pulseSpeed) * 0.3;\r\n }\r\n }\r\n \r\n \/\/ Update shader time for twinkling stars\r\n if (object.material && object.material.uniforms && object.material.uniforms.time) {\r\n object.material.uniforms.time.value = elapsedTime;\r\n }\r\n });\r\n \r\n \/\/ Gentle camera movement with mouse\r\n camera.position.x += (mouse.x * 3 - camera.position.x) * 0.01;\r\n camera.position.y += (mouse.y * 3 - camera.position.y) * 0.01;\r\n camera.lookAt(0, 0, 0);\r\n \r\n renderer.render(scene, camera);\r\n }\r\n\r\n \/\/ Mouse movement\r\n document.addEventListener('mousemove', (event) => {\r\n mouse.x = (event.clientX \/ window.innerWidth) * 2 - 1;\r\n mouse.y = -(event.clientY \/ window.innerHeight) * 2 + 1;\r\n });\r\n\r\n \/\/ Handle resize\r\n window.addEventListener('resize', () => {\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n });\r\n\r\n \/\/ Load more functionality\r\n let currentPage = 1;\r\n\r\n document.getElementById('loadMoreBtn').addEventListener('click', async function () {\r\n currentPage++;\r\n this.textContent = 'Loading...';\r\n await loadArticles(currentPage);\r\n this.textContent = 'Load More';\r\n });\r\n\r\n \/\/ Toggle menu open\/close\r\n document.getElementById(\"nav-toggle\").addEventListener(\"click\", function() {\r\n document.getElementById(\"nav-links\").classList.toggle(\"active\");\r\n });\r\n\r\n \/\/ Close menu when any nav link is clicked\r\n document.querySelectorAll(\"#nav-links a\").forEach(link => {\r\n link.addEventListener(\"click\", () => {\r\n document.getElementById(\"nav-links\").classList.remove(\"active\");\r\n });\r\n });\r\n\r\n \/\/ Sound effects using Web Audio API\r\n function createSoundEffect(frequency = 800, duration = 200, type = 'sine') {\r\n try {\r\n const audioContext = new (window.AudioContext || window.webkitAudioContext)();\r\n const oscillator = audioContext.createOscillator();\r\n const gainNode = audioContext.createGain();\r\n \r\n oscillator.connect(gainNode);\r\n gainNode.connect(audioContext.destination);\r\n \r\n oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);\r\n oscillator.type = type;\r\n \r\n gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);\r\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration \/ 1000);\r\n \r\n oscillator.start(audioContext.currentTime);\r\n oscillator.stop(audioContext.currentTime + duration \/ 1000);\r\n } catch (error) {\r\n console.log('Audio not supported');\r\n }\r\n }\r\n\r\n function setupEnhancedNavigation() {\r\n const navLinks = document.querySelectorAll('.nav-links a');\r\n \r\n navLinks.forEach(link => {\r\n link.addEventListener('click', (e) => {\r\n \r\n link.classList.add('clicked');\r\n setTimeout(() => {\r\n link.classList.remove('clicked');\r\n }, 600);\r\n \r\n createSoundEffect(1200, 150, 'sine');\r\n });\r\n \r\n });\r\n }\r\n\r\n const API_URL = 'https:\/\/nexasoul.com\/site\/wp-json\/wp\/v2\/posts?_embed&per_page=9&page=1';\r\n \r\n async function loadArticles(page = 1) {\r\n try {\r\n const res = await fetch(`https:\/\/nexasoul.com\/site\/wp-json\/wp\/v2\/posts?_embed&per_page=9&page=${page}`);\r\n \r\n console.log('Response status:', res.status);\r\n console.log('Content-Type:', res.headers.get('content-type'));\r\n \r\n if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);\r\n if (!res.headers.get('content-type')?.includes('application\/json')) {\r\n throw new Error('Expected JSON, got HTML or something else');\r\n }\r\n \r\n const posts = await res.json();\r\n \r\n const grid = document.getElementById('articlesGrid');\r\n const loadMoreBtn = document.getElementById('loadMoreBtn');\r\n\r\n if (posts.length === 0) {\r\n loadMoreBtn.style.display = 'none';\r\n return;\r\n }\r\n \r\n posts.forEach(post => {\r\n const image =\r\n post._embedded?.['wp:featuredmedia']?.[0]?.source_url || '';\r\n \r\n const category =\r\n post._embedded?.['wp:term']?.[0]?.[0]?.name || 'Article';\r\n \r\n const date = new Date(post.date).toLocaleDateString('en-US', {\r\n month: 'short',\r\n day: 'numeric',\r\n year: 'numeric'\r\n });\r\n \r\n const card = document.createElement('article');\r\n card.className = 'article-card';\r\n \r\n card.innerHTML = `\r\n <div class=\"article-thumb\">\r\n ${image ? `<img decoding=\"async\" src=\"${image}\" alt=\"${post.title.rendered}\" style=\"width:100%;height:100%;object-fit:cover;\">`\r\n : `<i class=\"ph-article article-icon\"><\/i>`}\r\n <\/div>\r\n \r\n <div class=\"article-body\">\r\n <span class=\"article-category\">${category}<\/span>\r\n \r\n <h3 class=\"article-title\">\r\n ${post.title.rendered}\r\n <\/h3>\r\n \r\n <p class=\"article-excerpt\">\r\n ${post.excerpt.rendered.replace(\/<[^>]+>\/g, '')}\r\n <\/p>\r\n \r\n <div class=\"article-meta\">\r\n <span class=\"article-date\">${date}<\/span>\r\n <\/div>\r\n \r\n <a href=\"${post.link}\" class=\"article-link\">\r\n Read More <i class=\"ph-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n `;\r\n \r\n grid.appendChild(card);\r\n });\r\n \r\n } catch (err) {\r\n console.error('Failed to load articles', err);\r\n }\r\n }\r\n\r\n \/\/ Initialize\r\n document.addEventListener('DOMContentLoaded', async () => {\r\n initThreeJS();\r\n await loadArticles();\r\n setupEnhancedNavigation();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nexa Soul – Articles & Insights \u2630 Home Services Clients Contact Articles Articles & Insights Explore the latest trends, best […]<\/p>\n","protected":false},"author":1,"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":"disabled","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-40","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nexasoul.com\/site\/wp-json\/wp\/v2\/pages\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nexasoul.com\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nexasoul.com\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nexasoul.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nexasoul.com\/site\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":41,"href":"https:\/\/nexasoul.com\/site\/wp-json\/wp\/v2\/pages\/40\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/nexasoul.com\/site\/wp-json\/wp\/v2\/pages\/40\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/nexasoul.com\/site\/wp-json\/wp\/v2\/media?parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}