Update theme colors

Update theme fonts
2026-05-10 18:23:12 +00:00 · 2026-05-10 18:23:06 +00:00 · 2026-05-10 18:22:56 +00:00 · 2026-05-10 18:22:55 +00:00 · 2026-05-10 18:22:51 +00:00 · 2026-05-10 18:22:50 +00:00
4 changed files with 29 additions and 23 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,6 +9,7 @@ import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Nunito_Sans } from "next/font/google";
 import { Montserrat } from "next/font/google";
 import { Roboto } from "next/font/google";
+import { Mulish } from "next/font/google";



@@ -24,10 +25,11 @@ export const metadata: Metadata = {



-const roboto = Roboto({
-  variable: "--font-roboto",
+
+
+const montserrat = Montserrat({
+  variable: "--font-montserrat",
  subsets: ["latin"],
-  weight: ["100", "300", "400", "500", "700", "900"],
 });

 export default function RootLayout({
@@ -38,7 +40,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${roboto.variable} antialiased`}>
+        <body className={`${montserrat.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import SplitAbout from '@/components/sections/about/SplitAbout';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
@@ -49,7 +49,7 @@ export default function LandingPage() {
      tagIcon={Sparkles}
      background={{ variant: "rotated-rays-animated" }}
      carouselItems={[
-        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/portrait-technologically-advanced-female-humanoid_23-2151666363.jpg" },
+        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/portrait-technologically-advanced-female-humanoid_23-2151666363.jpg?_wi=1" },
        { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg" },
        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/abstract-futuristic-digital-technology-background_53876-104787.jpg?_wi=1" },
        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/3d-low-poly-abstract-background-with-shallow-depth-field_1048-10653.jpg?_wi=1" },
@@ -60,15 +60,19 @@ export default function LandingPage() {
  </div>

  <div id="about" data-section="about">
-      <AboutMetric
+      <SplitAbout
      useInvertedBackground={false}
      title="Defining the Digital Frontier"
-      metrics={[
-        { icon: Code2, label: "AI Systems", value: "Advanced" },
-        { icon: Code, label: "Full Stack", value: "Expert" },
-        { icon: Shield, label: "Security", value: "Certified" },
+      description="AI Systems Engineer & Full Stack Developer. Bridging technical precision with creative problem-solving."
+      mediaBadge={{ text: "Available for Work", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-technologically-advanced-female-humanoid_23-2151666363.jpg" }}
+      imageSrc="http://img.b2bpic.net/free-photo/portrait-technologically-advanced-female-humanoid_23-2151666363.jpg?_wi=2"
+      imageAlt="Rayash Albureihi Portrait"
+      textboxLayout="split"
+      bulletPoints={[
+        { title: "AI Systems", description: "Advanced neural architecture integration." },
+        { title: "Full Stack", description: "Expertise in modern web ecosystems." },
+        { title: "Security", description: "Certified resilient system design." },
      ]}
-      metricsAnimation="blur-reveal"
    />
  </div>

--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-roboto), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-roboto), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #000000;
-  --card: #481f1f;
-  --foreground: #ffffff;
-  --primary-cta: #ffffff;
-  --primary-cta-text: #280101;
-  --secondary-cta: #361311;
-  --secondary-cta-text: #f6d4d4;
-  --accent: #51000b;
-  --background-accent: #ff2231;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5fffae6;
+  --primary-cta: #80da9b;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #f5fffae6;
+  --accent: #737373;
+  --background-accent: #737373;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	fed69ee74b	Update theme colors	2026-05-10 18:23:12 +00:00
bender	f6b520df14	Update theme colors	2026-05-10 18:23:06 +00:00
bender	93448bc069	Update theme fonts	2026-05-10 18:22:56 +00:00
bender	91a71da519	Update theme fonts	2026-05-10 18:22:55 +00:00
bender	8c25de42f7	Update theme fonts	2026-05-10 18:22:51 +00:00
bender	74c3562e23	Update theme fonts	2026-05-10 18:22:50 +00:00
bender	381c8a94c9	Update theme colors	2026-05-10 18:22:12 +00:00
bender	3e0d5cc638	Update theme colors	2026-05-10 18:21:59 +00:00
bender	dca8f789f6	Update src/app/page.tsx	2026-05-10 18:19:33 +00:00
bender	f802d8efd2	Update src/app/page.tsx	2026-05-10 18:19:06 +00:00
bender	7e5564880a	Merge version_8 into main Merge version_8 into main	2026-05-10 18:18:11 +00:00
bender	913c460ce7	Merge version_8 into main Merge version_8 into main	2026-05-10 18:17:47 +00:00