fix: text visibility and tag background issues on mobile

src/app/globals.css

@@ -13,6 +13,11 @@
   --text-secondary: #475569;
   --nav-bg: rgba(248, 250, 252, 0.8);
   --nav-border: rgba(0, 0, 0, 0.06);
+
+  /* Tag/Badge Colors */
+  --badge-bg: rgba(37, 99, 235, 0.05);
+  --badge-border: rgba(37, 99, 235, 0.15);
+  --badge-text: #2563eb;
 }
 
 :root.dark {
@@ -28,6 +33,11 @@
   --text-secondary: #94a3b8;
   --nav-bg: rgba(11, 15, 25, 0.8);
   --nav-border: rgba(31, 41, 55, 0.55);
+
+  /* Tag/Badge Colors */
+  --badge-bg: rgba(59, 130, 246, 0.12);
+  --badge-border: rgba(59, 130, 246, 0.25);
+  --badge-text: #3b82f6;
 }
 
 @theme {
@@ -164,3 +174,9 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+.project-tag {
+  background-color: var(--badge-bg);
+  border: 1px solid var(--badge-border);
+  color: var(--badge-text);
+}

src/components/Hero/Hero.tsx

@@ -31,14 +31,14 @@ export default function Hero() {
       ></div>
 
       {/* Hero Text content */}
-      <div className="flex flex-col items-start text-left z-10 max-w-[600px] mx-auto lg:mx-0 opacity-0 animate-fade-in">
+      <div className="flex flex-col items-start text-left z-10 max-w-[600px] mx-auto lg:mx-0 animate-fade-in">
         <div className="text-xs uppercase tracking-widest font-semibold text-primary mb-4 flex items-center gap-2">
           <span className="inline-block w-1.5 h-1.5 bg-primary rounded-full shadow-[0_0_6px_var(--color-primary)]"></span>
           Aspiring Intern
         </div>
         <h1 className="text-5xl sm:text-7xl font-extrabold mb-6 leading-[1.05] tracking-tighter text-text-primary">
-          Hi, I am <span className="bg-gradient-to-r from-text-primary to-text-secondary bg-clip-text text-transparent">Bui Minh Quan</span>
-          <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent block">Backend Developer</span>
+          Hi, I am <span className="gradient-text">Bui Minh Quan</span>
+          <span className="gradient-accent-text block">Backend Developer</span>
         </h1>
         <p className="text-base sm:text-lg text-text-secondary mb-8 leading-relaxed max-w-[500px]">
           Information Technology student at PTIT HCMC specializing in Software Engineering. 

src/components/Projects/Projects.tsx

@@ -143,7 +143,7 @@ export default function Projects() {
               </p>
               <div className="flex flex-wrap gap-2 mb-6">
                 {project.tags.slice(0, 3).map((tag, idx) => (
-                  <span key={idx} className="bg-primary/5 border border-primary/20 px-2.5 py-1 rounded-md text-[11px] font-semibold text-primary">
+                  <span key={idx} className="project-tag px-2.5 py-1 rounded-md text-[11px] font-semibold">
                     {tag}
                   </span>
                 ))}