From b7787cc4036f6d20e2aa69a38d1342a909114058 Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Fri, 22 May 2026 12:40:57 +0700 Subject: [PATCH] Add animated background to all hero sections - Homepage: 3 animated orbs, 8 floating particles, 3 moving lines - Service pages: 2 animated orbs, 4 particles, 2 moving lines - About page: 2 animated orbs, 3 particles, 2 moving lines - Portfolio page: 2 animated orbs, 4 particles, 2 moving lines - Blog page: 2 animated orbs, 4 particles, 2 moving lines All animations use yellow (#fed400) glow effects on dark background --- src/pages/about.astro | 80 ++++++++++++++++++++++ src/pages/blog/index.astro | 79 +++++++++++++++++++++ src/pages/portfolio.astro | 77 +++++++++++++++++++++ src/pages/services/[slug].astro | 118 ++++++++++++++++++++++++++++++++ 4 files changed, 354 insertions(+) diff --git a/src/pages/about.astro b/src/pages/about.astro index 7c42414..f44d15e 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -11,8 +11,20 @@ import Footer from '../components/Footer.astro'; HERO SECTION ============================================= -->
+
+
+
+
+
+
+
+
+
+
+
+
@@ -170,6 +182,7 @@ import Footer from '../components/Footer.astro'; .hero-bg { position: absolute; inset: 0; + overflow: hidden; } .hero-grid { @@ -181,6 +194,73 @@ import Footer from '../components/Footer.astro'; background-size: 60px 60px; } + /* Animated Orbs */ + .orb { + position: absolute; + border-radius: 50%; + filter: blur(60px); + opacity: 0.4; + } + .orb-1 { + width: 300px; + height: 300px; + background: rgba(254, 212, 0, 0.3); + top: -50px; + right: 10%; + animation: orbFloat1 8s ease-in-out infinite; + } + .orb-2 { + width: 200px; + height: 200px; + background: rgba(254, 212, 0, 0.2); + bottom: 20%; + left: 5%; + animation: orbFloat2 10s ease-in-out infinite; + } + @keyframes orbFloat1 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(-40px, 30px) scale(1.1); } + } + @keyframes orbFloat2 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(50px, -30px) scale(1.15); } + } + + /* Particles */ + .particles { position: absolute; inset: 0; overflow: hidden; } + .particle { + position: absolute; + width: 4px; + height: 4px; + background: #fed400; + border-radius: 50%; + opacity: 0; + } + .p-1 { top: 30%; left: 15%; animation: particleFloat 7s ease-in-out infinite; } + .p-2 { top: 50%; left: 75%; animation: particleFloat 8s ease-in-out infinite; animation-delay: 2s; } + .p-3 { top: 70%; left: 30%; animation: particleFloat 6s ease-in-out infinite; animation-delay: 1s; } + @keyframes particleFloat { + 0% { opacity: 0; transform: translateY(50px) scale(0); } + 20% { opacity: 0.8; } + 80% { opacity: 0.8; } + 100% { opacity: 0; transform: translateY(-50px) scale(1); } + } + + /* Lines */ + .lines { position: absolute; inset: 0; overflow: hidden; } + .line { + position: absolute; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(254, 212, 0, 0.3), transparent); + animation: lineMove 12s linear infinite; + } + .line-1 { width: 50%; top: 35%; left: -50%; animation-delay: 0s; } + .line-2 { width: 40%; top: 65%; left: -40%; animation-delay: 6s; } + @keyframes lineMove { + 0% { left: -50%; } + 100% { left: 110%; } + } + .hero-content { position: relative; z-index: 2; diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 3353828..4fae8cb 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -17,6 +17,18 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
+
+
+
+
+
+
+
+
+
+
+
+
@@ -143,8 +155,10 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date .hero-bg { position: absolute; inset: 0; + overflow: hidden; } + .hero-grid { position: absolute; inset: 0; @@ -154,6 +168,71 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date background-size: 60px 60px; } + + + .orb { + position: absolute; + border-radius: 50%; + filter: blur(60px); + opacity: 0.4; + } + .orb-1 { + width: 300px; + height: 300px; + background: rgba(254, 212, 0, 0.3); + top: -50px; + right: 10%; + animation: orbFloat1 8s ease-in-out infinite; + } + .orb-2 { + width: 200px; + height: 200px; + background: rgba(254, 212, 0, 0.2); + bottom: 20%; + left: 5%; + animation: orbFloat2 10s ease-in-out infinite; + } + @keyframes orbFloat1 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(-40px, 30px) scale(1.1); } + } + @keyframes orbFloat2 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(50px, -30px) scale(1.15); } + } + .particles { position: absolute; inset: 0; overflow: hidden; } + .particle { + position: absolute; + width: 4px; + height: 4px; + background: #fed400; + border-radius: 50%; + opacity: 0; + } + .p-1 { top: 30%; left: 15%; animation: particleFloat 7s ease-in-out infinite; } + .p-2 { top: 50%; left: 75%; animation: particleFloat 8s ease-in-out infinite; animation-delay: 2s; } + .p-3 { top: 70%; left: 30%; animation: particleFloat 6s ease-in-out infinite; animation-delay: 1s; } + .p-4 { top: 20%; left: 60%; animation: particleFloat 9s ease-in-out infinite; animation-delay: 3s; } + @keyframes particleFloat { + 0% { opacity: 0; transform: translateY(50px) scale(0); } + 20% { opacity: 0.8; } + 80% { opacity: 0.8; } + 100% { opacity: 0; transform: translateY(-50px) scale(1); } + } + .lines { position: absolute; inset: 0; overflow: hidden; } + .line { + position: absolute; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(254, 212, 0, 0.3), transparent); + animation: lineMove 12s linear infinite; + } + .line-1 { width: 50%; top: 35%; left: -50%; animation-delay: 0s; } + .line-2 { width: 40%; top: 65%; left: -40%; animation-delay: 6s; } + @keyframes lineMove { + 0% { left: -50%; } + 100% { left: 110%; } + } + .hero-content { position: relative; z-index: 2; diff --git a/src/pages/portfolio.astro b/src/pages/portfolio.astro index 1a400f7..f27ab07 100644 --- a/src/pages/portfolio.astro +++ b/src/pages/portfolio.astro @@ -14,6 +14,18 @@ import { portfolioItems } from '../data/portfolio';
+
+
+
+
+
+
+
+
+
+
+
+
@@ -111,8 +123,10 @@ import { portfolioItems } from '../data/portfolio'; .hero-bg { position: absolute; inset: 0; + overflow: hidden; } + .hero-grid { position: absolute; inset: 0; @@ -122,6 +136,69 @@ import { portfolioItems } from '../data/portfolio'; background-size: 60px 60px; } + .orb { + position: absolute; + border-radius: 50%; + filter: blur(60px); + opacity: 0.4; + } + .orb-1 { + width: 300px; + height: 300px; + background: rgba(254, 212, 0, 0.3); + top: -50px; + right: 10%; + animation: orbFloat1 8s ease-in-out infinite; + } + .orb-2 { + width: 200px; + height: 200px; + background: rgba(254, 212, 0, 0.2); + bottom: 20%; + left: 5%; + animation: orbFloat2 10s ease-in-out infinite; + } + @keyframes orbFloat1 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(-40px, 30px) scale(1.1); } + } + @keyframes orbFloat2 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(50px, -30px) scale(1.15); } + } + .particles { position: absolute; inset: 0; overflow: hidden; } + .particle { + position: absolute; + width: 4px; + height: 4px; + background: #fed400; + border-radius: 50%; + opacity: 0; + } + .p-1 { top: 30%; left: 15%; animation: particleFloat 7s ease-in-out infinite; } + .p-2 { top: 50%; left: 75%; animation: particleFloat 8s ease-in-out infinite; animation-delay: 2s; } + .p-3 { top: 70%; left: 30%; animation: particleFloat 6s ease-in-out infinite; animation-delay: 1s; } + .p-4 { top: 20%; left: 60%; animation: particleFloat 9s ease-in-out infinite; animation-delay: 3s; } + @keyframes particleFloat { + 0% { opacity: 0; transform: translateY(50px) scale(0); } + 20% { opacity: 0.8; } + 80% { opacity: 0.8; } + 100% { opacity: 0; transform: translateY(-50px) scale(1); } + } + .lines { position: absolute; inset: 0; overflow: hidden; } + .line { + position: absolute; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(254, 212, 0, 0.3), transparent); + animation: lineMove 12s linear infinite; + } + .line-1 { width: 50%; top: 35%; left: -50%; animation-delay: 0s; } + .line-2 { width: 40%; top: 65%; left: -40%; animation-delay: 6s; } + @keyframes lineMove { + 0% { left: -50%; } + 100% { left: 110%; } + } + .hero-content { position: relative; z-index: 2; diff --git a/src/pages/services/[slug].astro b/src/pages/services/[slug].astro index 2c81b27..1ff36ca 100644 --- a/src/pages/services/[slug].astro +++ b/src/pages/services/[slug].astro @@ -149,6 +149,24 @@ const data = serviceData[slug] || serviceData['webdev']; HERO SECTION - CLEAN DESIGN ============================================= -->
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -448,16 +466,116 @@ const data = serviceData[slug] || serviceData['webdev']; SERVICE HERO - CLEAN DESIGN ============================================= */ + /* ============================================= + SERVICE HERO - CLEAN DESIGN + ============================================= */ + .service-hero { background: #0F172A; padding: 140px 0 100px; + position: relative; + overflow: hidden; } + .hero-bg { + position: absolute; + inset: 0; + overflow: hidden; + } + + + .hero-grid { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(254, 212, 0, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(254, 212, 0, 0.03) 1px, transparent 1px); + background-size: 60px 60px; + } + + .hero-gradient { + position: absolute; + inset: 0; + background: radial-gradient(ellipse at 50% 0%, rgba(254, 212, 0, 0.1) 0%, transparent 50%); + } + + /* Animated Orbs */ + .orb { + position: absolute; + border-radius: 50%; + filter: blur(60px); + opacity: 0.4; + } + .orb-1 { + width: 300px; + height: 300px; + background: rgba(254, 212, 0, 0.3); + top: -50px; + right: 10%; + animation: orbFloat1 8s ease-in-out infinite; + } + .orb-2 { + width: 200px; + height: 200px; + background: rgba(254, 212, 0, 0.2); + bottom: 20%; + left: 5%; + animation: orbFloat2 10s ease-in-out infinite; + } + @keyframes orbFloat1 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(-40px, 30px) scale(1.1); } + } + @keyframes orbFloat2 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(50px, -30px) scale(1.15); } + } + + /* Particles */ + .particles { position: absolute; inset: 0; overflow: hidden; } + .particle { + position: absolute; + width: 4px; + height: 4px; + background: #fed400; + border-radius: 50%; + opacity: 0; + } + .p-1 { top: 30%; left: 15%; animation: particleFloat 7s ease-in-out infinite; } + .p-2 { top: 50%; left: 75%; animation: particleFloat 8s ease-in-out infinite; animation-delay: 2s; } + .p-3 { top: 70%; left: 30%; animation: particleFloat 6s ease-in-out infinite; animation-delay: 1s; } + .p-4 { top: 20%; left: 60%; animation: particleFloat 9s ease-in-out infinite; animation-delay: 3s; } + @keyframes particleFloat { + 0% { opacity: 0; transform: translateY(50px) scale(0); } + 20% { opacity: 0.8; } + 80% { opacity: 0.8; } + 100% { opacity: 0; transform: translateY(-50px) scale(1); } + } + + + /* Lines */ + .lines { position: absolute; inset: 0; overflow: hidden; } + .line { + position: absolute; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(254, 212, 0, 0.3), transparent); + animation: lineMove 12s linear infinite; + } + .line-1 { width: 50%; top: 35%; left: -50%; animation-delay: 0s; } + .line-2 { width: 40%; top: 65%; left: -40%; animation-delay: 6s; } + @keyframes lineMove { + 0% { left: -50%; } + 100% { left: 110%; } + } + + .service-hero .container { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: start; + position: relative; + z-index: 2; } .hero-content {