redesign about section with image-fill text, simplify contact, overhaul SEO

- About: new ImageFillText component using canvas destination-in compositing,
swaps video for static image; corner icons unchanged
- Contact: remove form fields, keep direct email/LinkedIn/Twitter links only
- Projects: update to 5 real names (Konkani AI, Tiny AYA Mobile, PowerPoint AI,
Multi Model Dataset, ISO Language)
- Marquee: replace Gemini and Ollama with Docker and PostgreSQL
- SEO: add Person + WebSite + ProfessionalService JSON-LD, dynamic OG image
via app/opengraph-image.tsx, theme-color (light/dark), viewport metadata,
sitemap section anchors, expanded keywords and googleBot directives
- Switch canonical URL from reubenfernandes.dev to reuben-fernandes.xyz

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Kanit, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 
@@ -15,28 +15,156 @@ const jetbrainsMono = JetBrains_Mono({
   display: "swap",
 });
 
+const SITE_URL = "https://reuben-fernandes.xyz";
+const SITE_NAME = "Reuben Chagas Fernandes";
+const SITE_TITLE = "Reuben Chagas Fernandes | Full Stack Developer from Goa";
+const SITE_DESCRIPTION =
+  "Reuben Chagas Fernandes is a full-stack developer from Goa, India, specializing in React, Next.js, Flutter, Node.js, Python, and AI/LLM research. Available for freelance and full-time roles.";
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#FFE0D0" },
+    { media: "(prefers-color-scheme: dark)", color: "#0C0C0C" },
+  ],
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 5,
+};
+
 export const metadata: Metadata = {
-  title: "Reuben Chagas Fernandes | Full Stack Developer from Goa",
-  description: "Reuben Chagas Fernandes is a full stack developer from Goa, India, specializing in web development and software engineering.",
-  keywords: ["Reuben Chagas Fernandes", "Reuben Fernandes", "Reuben Chagas", "Full Stack Developer", "Web Developer", "Goa", "India", "Software Engineering"],
-  authors: [{ name: "Reuben Chagas Fernandes" }],
-  creator: "Reuben Chagas Fernandes",
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: SITE_TITLE,
+    template: "%s | Reuben Chagas Fernandes",
+  },
+  description: SITE_DESCRIPTION,
+  applicationName: SITE_NAME,
+  keywords: [
+    "Reuben Chagas Fernandes",
+    "Reuben Fernandes",
+    "Full Stack Developer",
+    "Web Developer",
+    "Next.js Developer",
+    "React Developer",
+    "Flutter Developer",
+    "AI Developer",
+    "LLM Engineer",
+    "Konkani AI",
+    "Goa Developer",
+    "India Developer",
+    "Software Engineer Goa",
+    "Hire Full Stack Developer India",
+  ],
+  authors: [{ name: SITE_NAME, url: SITE_URL }],
+  creator: SITE_NAME,
+  publisher: SITE_NAME,
+  alternates: {
+    canonical: "/",
+  },
+  category: "Technology",
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
   robots: {
     index: true,
     follow: true,
+    nocache: false,
+    googleBot: {
+      index: true,
+      follow: true,
+      noimageindex: false,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+      "max-video-preview": -1,
+    },
   },
   openGraph: {
-    title: "Reuben Chagas Fernandes | Full Stack Developer",
-    description: "Reuben Chagas Fernandes is a full stack developer from Goa, India, specializing in web development and software engineering.",
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    url: SITE_URL,
+    siteName: SITE_NAME,
     type: "website",
     locale: "en_US",
   },
   twitter: {
     card: "summary_large_image",
-    title: "Reuben Chagas Fernandes | Full Stack Developer",
-    description: "Reuben Chagas Fernandes is a full stack developer from Goa, India",
-    images: ["https://portfolio-production-70ab.up.railway.app/reuben.png"],
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    creator: "@18reuchagas",
+    site: "@18reuchagas",
   },
+  verification: {
+    // Add Google Search Console verification token here when you set it up:
+    // google: "your-google-verification-code",
+  },
+};
+
+const personJsonLd = {
+  "@context": "https://schema.org",
+  "@type": "Person",
+  "@id": `${SITE_URL}/#person`,
+  name: SITE_NAME,
+  alternateName: "Reuben Fernandes",
+  jobTitle: "Full Stack Developer",
+  description: SITE_DESCRIPTION,
+  url: SITE_URL,
+  image: `${SITE_URL}/opengraph-image`,
+  email: "mailto:18reuchagasfernandes@gmail.com",
+  sameAs: [
+    "https://www.linkedin.com/in/reuben-chagas-fernandes/",
+    "https://x.com/18reuchagas",
+  ],
+  address: {
+    "@type": "PostalAddress",
+    addressLocality: "Goa",
+    addressCountry: "IN",
+  },
+  nationality: {
+    "@type": "Country",
+    name: "India",
+  },
+  knowsAbout: [
+    "React",
+    "Next.js",
+    "Flutter",
+    "Node.js",
+    "Python",
+    "TypeScript",
+    "Large Language Models",
+    "Artificial Intelligence",
+    "Konkani Language Technology",
+    "Full Stack Development",
+    "Web Development",
+    "UI/UX Design",
+  ],
+  knowsLanguage: ["English", "Konkani", "Hindi"],
+};
+
+const websiteJsonLd = {
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "@id": `${SITE_URL}/#website`,
+  url: SITE_URL,
+  name: SITE_NAME,
+  description: SITE_DESCRIPTION,
+  publisher: { "@id": `${SITE_URL}/#person` },
+  inLanguage: "en-US",
+};
+
+const professionalServiceJsonLd = {
+  "@context": "https://schema.org",
+  "@type": "ProfessionalService",
+  "@id": `${SITE_URL}/#service`,
+  name: `${SITE_NAME} — Full Stack Development`,
+  url: SITE_URL,
+  image: `${SITE_URL}/opengraph-image`,
+  description:
+    "Full-stack web and mobile development services: React, Next.js, Flutter, Node.js, Python, and AI/LLM integration.",
+  provider: { "@id": `${SITE_URL}/#person` },
+  areaServed: { "@type": "Country", name: "Worldwide" },
+  serviceType: ["Web Development", "Mobile App Development", "AI Integration"],
 };
 
 export default function RootLayout({
@@ -49,6 +177,20 @@ export default function RootLayout({
       <body
         className={`${kanit.variable} ${jetbrainsMono.variable} font-sans antialiased`}
       >
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(personJsonLd) }}
+        />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteJsonLd) }}
+        />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(professionalServiceJsonLd),
+          }}
+        />
         {children}
       </body>
     </html>

app/opengraph-image.tsx

@@ -0,0 +1,87 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+export const alt = "Reuben Chagas Fernandes — Full Stack Developer";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+
+export default async function OpengraphImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          background:
+            "linear-gradient(180deg, #FFE0D0 0%, #F15A24 55%, #C42D0B 100%)",
+          padding: "80px",
+          justifyContent: "space-between",
+          fontFamily: "sans-serif",
+        }}
+      >
+        <div
+          style={{
+            fontSize: 26,
+            color: "#1A0F08",
+            fontWeight: 600,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            display: "flex",
+          }}
+        >
+          Hi, I&apos;m Reuben — Full-Stack Developer
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            lineHeight: 0.88,
+          }}
+        >
+          <div
+            style={{
+              fontSize: 170,
+              color: "#FFE0D0",
+              fontWeight: 900,
+              letterSpacing: "-0.02em",
+            }}
+          >
+            Reuben
+          </div>
+          <div
+            style={{
+              fontSize: 170,
+              color: "#FFE0D0",
+              fontWeight: 900,
+              letterSpacing: "-0.02em",
+              display: "flex",
+            }}
+          >
+            Fernandes
+            <span style={{ color: "#FF8C4C" }}>.</span>
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end",
+            fontSize: 24,
+            color: "#1A0F08",
+            fontWeight: 600,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+          }}
+        >
+          <div style={{ display: "flex" }}>Based in Goa, India</div>
+          <div style={{ display: "flex" }}>reuben-fernandes.xyz</div>
+        </div>
+      </div>
+    ),
+    { ...size }
+  );
+}

app/sitemap.xml

@@ -1,9 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
-    <loc>https://reubenfernandes.dev</loc>
-    <lastmod>2025-01-27</lastmod>
+    <loc>https://reuben-fernandes.xyz/</loc>
+    <lastmod>2026-04-22</lastmod>
     <changefreq>monthly</changefreq>
     <priority>1.0</priority>
   </url>
-</urlset> 
+  <url>
+    <loc>https://reuben-fernandes.xyz/#about</loc>
+    <lastmod>2026-04-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://reuben-fernandes.xyz/#projects</loc>
+    <lastmod>2026-04-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://reuben-fernandes.xyz/#contact</loc>
+    <lastmod>2026-04-22</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+</urlset>

components/portfolio/ImageFillText.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useRef, useEffect, useCallback } from 'react';
+import { useScroll } from 'motion/react';
+
+const CANVAS_W = 700;
+const CANVAS_H = Math.round(CANVAS_W * (9 / 16));
+const FONT_SIZE = Math.round(CANVAS_W * 0.024);
+const LINE_HEIGHT = FONT_SIZE * 1.65;
+const PADDING_X = CANVAS_W * 0.08;
+const MAX_TEXT_W = CANVAS_W - PADDING_X * 2;
+const FONT_STR = `500 ${FONT_SIZE}px Kanit, sans-serif`;
+const FALLBACK_FILL = '#FFE0D0';
+
+function clamp(v: number, lo: number, hi: number) {
+  return Math.min(hi, Math.max(lo, v));
+}
+
+interface CharPos {
+  char: string;
+  x: number;
+  y: number;
+  index: number;
+}
+
+function buildPositions(ctx: CanvasRenderingContext2D, text: string): CharPos[] {
+  ctx.font = FONT_STR;
+
+  const words = text.split(' ');
+  const lines: string[] = [];
+  let line = '';
+
+  for (const word of words) {
+    const test = line ? `${line} ${word}` : word;
+    if (ctx.measureText(test).width > MAX_TEXT_W && line) {
+      lines.push(line);
+      line = word;
+    } else {
+      line = test;
+    }
+  }
+  if (line) lines.push(line);
+
+  const totalH = lines.length * LINE_HEIGHT;
+  let y = (CANVAS_H - totalH) / 2;
+  const positions: CharPos[] = [];
+  let idx = 0;
+
+  for (const lineText of lines) {
+    const lineW = ctx.measureText(lineText).width;
+    let x = (CANVAS_W - lineW) / 2;
+    for (const char of lineText) {
+      positions.push({ char, x, y, index: idx++ });
+      x += ctx.measureText(char).width;
+    }
+    y += LINE_HEIGHT;
+  }
+
+  return positions;
+}
+
+export function ImageFillText({ text, imageSrc }: { text: string; imageSrc: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mainCanvasRef = useRef<HTMLCanvasElement>(null);
+  const maskCanvasRef = useRef<HTMLCanvasElement>(null);
+  const imageRef = useRef<HTMLImageElement | null>(null);
+  const scrollRef = useRef(0);
+  const charPosRef = useRef<CharPos[]>([]);
+
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ['start 0.8', 'end 0.2'],
+  });
+
+  const drawFrame = useCallback(() => {
+    const main = mainCanvasRef.current;
+    const mask = maskCanvasRef.current;
+    if (!main || !mask) return;
+
+    const mCtx = main.getContext('2d');
+    const maskCtx = mask.getContext('2d');
+    if (!mCtx || !maskCtx) return;
+
+    if (charPosRef.current.length === 0) {
+      charPosRef.current = buildPositions(maskCtx, text);
+    }
+
+    const chars = charPosRef.current;
+    const total = chars.length;
+    const progress = scrollRef.current;
+
+    // Mask canvas: transparent bg, white text at scroll-driven alpha
+    maskCtx.clearRect(0, 0, CANVAS_W, CANVAS_H);
+    maskCtx.globalCompositeOperation = 'source-over';
+    maskCtx.font = FONT_STR;
+    maskCtx.textBaseline = 'top';
+    maskCtx.fillStyle = 'white';
+
+    for (const { char, x, y, index } of chars) {
+      const start = index / total;
+      const end = Math.min(start + 2 / total, 1);
+      const range = Math.max(end - start, 0.001);
+      maskCtx.globalAlpha = clamp((progress - start) / range, 0.15, 1);
+      maskCtx.fillText(char, x, y);
+    }
+    maskCtx.globalAlpha = 1;
+
+    // Main canvas: draw image (or fallback fill), clip to mask
+    mCtx.clearRect(0, 0, CANVAS_W, CANVAS_H);
+    const img = imageRef.current;
+    if (img && img.naturalWidth > 0) {
+      mCtx.drawImage(img, 0, 0, CANVAS_W, CANVAS_H);
+    } else {
+      mCtx.fillStyle = FALLBACK_FILL;
+      mCtx.fillRect(0, 0, CANVAS_W, CANVAS_H);
+    }
+    mCtx.globalCompositeOperation = 'destination-in';
+    mCtx.drawImage(mask, 0, 0, CANVAS_W, CANVAS_H);
+    mCtx.globalCompositeOperation = 'source-over';
+  }, [text]);
+
+  // Preload image and draw once ready
+  useEffect(() => {
+    const img = new Image();
+    const handleLoad = () => {
+      imageRef.current = img;
+      drawFrame();
+    };
+    const handleError = () => {
+      imageRef.current = null;
+      drawFrame();
+    };
+    img.onload = handleLoad;
+    img.onerror = handleError;
+    img.src = imageSrc;
+    if (img.complete && img.naturalWidth > 0) handleLoad();
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [imageSrc, drawFrame]);
+
+  // Redraw on scroll change instead of continuous rAF
+  useEffect(() => {
+    const unsub = scrollYProgress.on('change', (v) => {
+      scrollRef.current = v;
+      drawFrame();
+    });
+    drawFrame(); // initial render
+    return unsub;
+  }, [scrollYProgress, drawFrame]);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        position: 'relative',
+        aspectRatio: '16/9',
+        maxWidth: CANVAS_W,
+        margin: '0 auto',
+        width: '100%',
+      }}
+    >
+      <canvas ref={maskCanvasRef} width={CANVAS_W} height={CANVAS_H} style={{ display: 'none' }} />
+      <canvas
+        ref={mainCanvasRef}
+        width={CANVAS_W}
+        height={CANVAS_H}
+        style={{ width: '100%', height: '100%', display: 'block' }}
+      />
+    </div>
+  );
+}

components/portfolio/sections/AboutSection.tsx

@@ -3,9 +3,13 @@
 import React from 'react';
 import Image from 'next/image';
 import { motion } from 'motion/react';
-import { AnimatedText } from '../AnimatedText';
-import { ContactButton } from '../ContactButton';
 import { FadeIn } from '../FadeIn';
+import { ContactButton } from '../ContactButton';
+import { ImageFillText } from '../ImageFillText';
+
+const ABOUT_IMAGE_URL = '/about.png';
+const ABOUT_TEXT =
+  "I'm a Computer Science and Engineering graduate passionate about full-stack development, AI, and UI/UX design. I work across React, Next.js, Flutter, Node.js, and Python, with a growing focus on Large Language Models and AI research. I'm also building a Konkani language project to preserve my native tongue through technology. Let's build something incredible together!";
 
 export function AboutSection() {
   return (
@@ -46,22 +50,21 @@ export function AboutSection() {
         </motion.div>
       </FadeIn>
 
-      <FadeIn y={30} duration={0.8}>
-        <h2 className="font-black uppercase leading-none tracking-tight text-center text-[clamp(3rem,12vw,160px)] inline-block text-transparent bg-clip-text bg-gradient-to-b from-[#FFE0D0] to-[#FF8C4C] mb-10 sm:mb-14 md:mb-16">
-          About me
-        </h2>
-      </FadeIn>
+      <div className="flex flex-col items-center w-full gap-10 sm:gap-14 md:gap-16">
+        <FadeIn y={40} duration={0.8}>
+          <h2 className="font-black uppercase leading-none tracking-tight text-center text-[clamp(3rem,12vw,160px)] inline-block text-transparent bg-clip-text bg-gradient-to-b from-[#FFE0D0] to-[#FF8C4C]">
+            About me
+          </h2>
+        </FadeIn>
 
-      <div className="max-w-[600px] text-center mb-16 sm:mb-20 md:mb-24">
-        <AnimatedText
-          text="I'm a Computer Engineering graduate who loves building for the web. My toolkit includes React Next.js Flutter Node.js and Python. Right now I am exploring AI and building things with it. I am also into human languages which is why I built a Konkani LLM to bring my mother tongue into the future. If you have something worth building I'd love to make it with you."
-          className="text-[#D7E2EA] font-medium leading-relaxed text-[clamp(1rem,2vw,1.35rem)]"
-        />
+        <ImageFillText text={ABOUT_TEXT} imageSrc={ABOUT_IMAGE_URL} />
       </div>
 
-      <FadeIn y={20} delay={0.4} duration={0.8}>
-        <ContactButton />
-      </FadeIn>
+      <div className="mt-16 sm:mt-20 md:mt-24">
+        <FadeIn y={20} delay={0.4} duration={0.8}>
+          <ContactButton />
+        </FadeIn>
+      </div>
     </section>
   );
 }

components/portfolio/sections/ContactSection.tsx

@@ -4,6 +4,8 @@ import React from 'react';
 import { FadeIn } from '../FadeIn';
 import { Mail, Linkedin, Twitter } from 'lucide-react';
 
+const CONTACT_EMAIL = '18reuchagasfernandes@gmail.com';
+
 export function ContactSection() {
   return (
     <section id="contact" className="bg-[#FFE0D0] rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px] -mt-10 sm:-mt-12 md:-mt-14 relative z-30 px-5 sm:px-8 md:px-10 py-20 sm:py-24 md:py-32">
@@ -13,79 +15,35 @@ export function ContactSection() {
         </h2>
       </FadeIn>
 
-      <div className="max-w-6xl mx-auto flex flex-col md:flex-row gap-16 md:gap-10">
-        <div className="flex-1 flex flex-col gap-10">
-          <FadeIn delay={0.2} duration={0.8}>
-            <p className="text-[#1A0F08] font-medium text-[clamp(1.5rem,3vw,2.5rem)] leading-tight max-w-md">
-              Have a project in mind? Let&apos;s build something incredible together.
-            </p>
-          </FadeIn>
-          <FadeIn delay={0.4} duration={0.8}>
-            <div className="flex flex-col gap-6">
-              <a href="mailto:18reuchagasfernandes@gmail.com" className="flex items-center gap-4 text-[#1A0F08] hover:text-[#E63F19] transition-colors group">
-                <div className="w-12 h-12 rounded-full border-2 border-[#1A0F08] flex items-center justify-center group-hover:border-[#E63F19] transition-colors">
-                  <Mail size={20} />
-                </div>
-                <span className="font-medium uppercase tracking-wider text-sm sm:text-base">18reuchagasfernandes@gmail.com</span>
-              </a>
-              <a href="https://www.linkedin.com/in/reuben-chagas-fernandes/" target="_blank" rel="noreferrer" className="flex items-center gap-4 text-[#1A0F08] hover:text-[#E63F19] transition-colors group">
-                <div className="w-12 h-12 rounded-full border-2 border-[#1A0F08] flex items-center justify-center group-hover:border-[#E63F19] transition-colors">
-                  <Linkedin size={20} />
-                </div>
-                <span className="font-medium uppercase tracking-wider text-sm sm:text-base">LinkedIn</span>
-              </a>
-              <a href="https://x.com/18reuchagas" target="_blank" rel="noreferrer" className="flex items-center gap-4 text-[#1A0F08] hover:text-[#E63F19] transition-colors group">
-                <div className="w-12 h-12 rounded-full border-2 border-[#1A0F08] flex items-center justify-center group-hover:border-[#E63F19] transition-colors">
-                  <Twitter size={20} />
-                </div>
-                <span className="font-medium uppercase tracking-wider text-sm sm:text-base">Twitter / X</span>
-              </a>
-            </div>
-          </FadeIn>
-        </div>
+      <div className="max-w-xl mx-auto flex flex-col items-center gap-10">
+        <FadeIn delay={0.2} duration={0.8}>
+          <p className="text-[#1A0F08] font-medium text-[clamp(1.5rem,3vw,2.5rem)] leading-tight text-center">
+            Have a project in mind? Let&apos;s build something incredible together.
+          </p>
+        </FadeIn>
 
-        <div className="flex-1">
-          <FadeIn delay={0.6} duration={0.8}>
-            <form className="flex flex-col gap-8 sm:gap-10" onSubmit={(e) => e.preventDefault()}>
-              <div className="relative">
-                <input
-                  type="text"
-                  id="name"
-                  placeholder="Your Name"
-                  className="w-full bg-transparent border-b-2 border-[rgba(26,15,8,0.2)] py-4 text-[#1A0F08] placeholder:text-[#1A0F08]/50 outline-none focus:border-[#E63F19] transition-colors peer text-lg font-medium"
-                  required
-                />
+        <FadeIn delay={0.4} duration={0.8}>
+          <div className="flex flex-col gap-6">
+            <a href={`mailto:${CONTACT_EMAIL}`} className="flex items-center gap-4 text-[#1A0F08] hover:text-[#E63F19] transition-colors group">
+              <div className="w-12 h-12 rounded-full border-2 border-[#1A0F08] flex items-center justify-center group-hover:border-[#E63F19] transition-colors">
+                <Mail size={20} />
               </div>
-              <div className="relative">
-                <input
-                  type="email"
-                  id="email"
-                  placeholder="Your Email"
-                  className="w-full bg-transparent border-b-2 border-[rgba(26,15,8,0.2)] py-4 text-[#1A0F08] placeholder:text-[#1A0F08]/50 outline-none focus:border-[#E63F19] transition-colors peer text-lg font-medium"
-                  required
-                />
+              <span className="font-medium uppercase tracking-wider text-sm sm:text-base">{CONTACT_EMAIL}</span>
+            </a>
+            <a href="https://www.linkedin.com/in/reuben-chagas-fernandes/" target="_blank" rel="noreferrer" className="flex items-center gap-4 text-[#1A0F08] hover:text-[#E63F19] transition-colors group">
+              <div className="w-12 h-12 rounded-full border-2 border-[#1A0F08] flex items-center justify-center group-hover:border-[#E63F19] transition-colors">
+                <Linkedin size={20} />
               </div>
-              <div className="relative">
-                <textarea
-                  id="message"
-                  placeholder="Your Message..."
-                  rows={4}
-                  className="w-full bg-transparent border-b-2 border-[rgba(26,15,8,0.2)] py-4 text-[#1A0F08] placeholder:text-[#1A0F08]/50 outline-none focus:border-[#E63F19] transition-colors peer text-lg font-medium resize-none"
-                  required
-                ></textarea>
+              <span className="font-medium uppercase tracking-wider text-sm sm:text-base">LinkedIn</span>
+            </a>
+            <a href="https://x.com/18reuchagas" target="_blank" rel="noreferrer" className="flex items-center gap-4 text-[#1A0F08] hover:text-[#E63F19] transition-colors group">
+              <div className="w-12 h-12 rounded-full border-2 border-[#1A0F08] flex items-center justify-center group-hover:border-[#E63F19] transition-colors">
+                <Twitter size={20} />
               </div>
-              <button
-                type="submit"
-                className="self-start relative group overflow-hidden rounded-full border-2 border-[#1A0F08] px-8 py-4 sm:px-10 sm:py-4 transition-colors"
-              >
-                <div className="absolute inset-0 bg-[#E63F19] translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out z-0"></div>
-                <span className="relative z-10 text-[#1A0F08] font-bold uppercase tracking-widest text-sm sm:text-base group-hover:text-[#FFE0D0] transition-colors duration-300">
-                  Submit Message
-                </span>
-              </button>
-            </form>
-          </FadeIn>
-        </div>
+              <span className="font-medium uppercase tracking-wider text-sm sm:text-base">Twitter / X</span>
+            </a>
+          </div>
+        </FadeIn>
       </div>
     </section>
   );

components/portfolio/sections/HeroSection.tsx

@@ -38,9 +38,8 @@ export function HeroSection() {
 
           <nav className="flex w-full md:w-auto justify-between md:justify-center flex-1 gap-2 sm:gap-6 md:gap-8">
             <a href="#about" className="text-[#1A0F08] font-black md:font-medium uppercase tracking-wider text-[11px] sm:text-xs md:text-sm hover:opacity-60 transition-opacity duration-200">About</a>
-            <a href="#projects" className="text-[#1A0F08] font-black md:font-medium uppercase tracking-wider text-[11px] sm:text-xs md:text-sm hover:opacity-60 transition-opacity duration-200 underline underline-offset-4 decoration-2">Projects</a>
-            <a href="#resume" className="text-[#1A0F08] font-black md:font-medium uppercase tracking-wider text-[11px] sm:text-xs md:text-sm hover:opacity-60 transition-opacity duration-200">Resume</a>
-            <a href="#contact" className="text-[#1A0F08] font-black md:font-medium uppercase tracking-wider text-[11px] sm:text-xs md:text-sm hover:opacity-60 transition-opacity duration-200">Contact</a>
+            <a href="#projects" className="text-[#1A0F08] font-black md:font-medium uppercase tracking-wider text-[11px] sm:text-xs md:text-sm hover:opacity-60 transition-opacity duration-200">Projects</a>
+            <a href="/resume.pdf" target="_blank" rel="noreferrer" className="text-[#1A0F08] font-black md:font-medium uppercase tracking-wider text-[11px] sm:text-xs md:text-sm hover:opacity-60 transition-opacity duration-200">Resume</a>
           </nav>
 
           <div className="hidden md:flex flex-1 justify-end">
@@ -67,7 +66,6 @@ export function HeroSection() {
           <FadeIn delay={0.6} y={20} duration={0.7} className="md:hidden mt-4">
             <div className="flex flex-col items-start gap-1">
               <p className="text-[#FFE0D0] font-medium text-[10px] uppercase tracking-wider opacity-80 drop-shadow-md">Based in Goa, India</p>
-              <p className="text-[#FFE0D0] font-medium text-[10px] uppercase tracking-wider opacity-80 drop-shadow-md">Available worldwide</p>
             </div>
           </FadeIn>
         </div>
@@ -93,7 +91,6 @@ export function HeroSection() {
       <FadeIn delay={0.6} y={20} duration={0.7} className="hidden md:flex z-10 absolute bottom-20 right-10">
         <div className="flex flex-col items-end gap-1">
           <p className="text-[#FFE0D0] font-medium text-sm uppercase tracking-wider text-right opacity-90 drop-shadow-md">Based in Goa, India</p>
-          <p className="text-[#FFE0D0] font-medium text-sm uppercase tracking-wider text-right opacity-90 drop-shadow-md">Available worldwide</p>
         </div>
       </FadeIn>
     </section>

components/portfolio/sections/MarqueeSection.tsx

@@ -2,12 +2,8 @@
 /* eslint-disable @next/next/no-img-element */
 
 import React, { useEffect, useState } from 'react';
-import OpenAI from '@lobehub/icons/es/OpenAI/components/Mono';
-import Anthropic from '@lobehub/icons/es/Anthropic/components/Mono';
 import Claude from '@lobehub/icons/es/Claude/components/Mono';
-import Gemini from '@lobehub/icons/es/Gemini/components/Mono';
 import HuggingFace from '@lobehub/icons/es/HuggingFace/components/Mono';
-import Ollama from '@lobehub/icons/es/Ollama/components/Mono';
 
 type TechItem = {
   name: string;
@@ -28,12 +24,10 @@ const row1: TechItem[] = [
 const row2: TechItem[] = [
   { name: 'Firebase', icon: <img src="https://cdn.simpleicons.org/firebase/D7E2EA" alt="Firebase" referrerPolicy="no-referrer" className="w-14 h-14" /> },
   { name: 'MongoDB', icon: <img src="https://cdn.simpleicons.org/mongodb/D7E2EA" alt="MongoDB" referrerPolicy="no-referrer" className="w-14 h-14" /> },
-  { name: 'OpenAI', icon: <OpenAI size={56} style={{ color: '#D7E2EA' }} /> },
-  { name: 'Anthropic', icon: <Anthropic size={56} style={{ color: '#D7E2EA' }} /> },
   { name: 'Claude', icon: <Claude size={56} style={{ color: '#D7E2EA' }} /> },
-  { name: 'Gemini', icon: <Gemini size={56} style={{ color: '#D7E2EA' }} /> },
+  { name: 'Docker', icon: <img src="https://cdn.simpleicons.org/docker/D7E2EA" alt="Docker" referrerPolicy="no-referrer" className="w-14 h-14" /> },
   { name: 'Hugging Face', icon: <HuggingFace size={56} style={{ color: '#D7E2EA' }} /> },
-  { name: 'Ollama', icon: <Ollama size={56} style={{ color: '#D7E2EA' }} /> },
+  { name: 'PostgreSQL', icon: <img src="https://cdn.simpleicons.org/postgresql/D7E2EA" alt="PostgreSQL" referrerPolicy="no-referrer" className="w-14 h-14" /> },
 ];
 
 export function MarqueeSection() {

components/portfolio/sections/ProjectsSection.tsx

@@ -14,19 +14,29 @@ type Project = {
 const projects: Project[] = [
   {
     id: '01',
-    title: 'Konkani Language Project (Personal)',
+    title: 'Konkani AI',
     videoId: 'dQw4w9WgXcQ',
   },
   {
     id: '02',
-    title: 'AI / LLM Research Project (Personal)',
+    title: 'Tiny AYA Mobile',
     videoId: 'M7lc1UVf-VE',
   },
   {
     id: '03',
-    title: 'Android App (Professional)',
+    title: 'PowerPoint AI',
     videoId: 'jNQXAC9IVRw',
   },
+  {
+    id: '04',
+    title: 'Multi Model Dataset',
+    videoId: 'dQw4w9WgXcQ',
+  },
+  {
+    id: '05',
+    title: 'ISO Language',
+    videoId: 'M7lc1UVf-VE',
+  },
 ];
 
 export function ProjectsSection() {

public/robots.txt

@@ -2,7 +2,7 @@ User-agent: *
 Allow: /
 
 # Sitemap
-Sitemap: https://reubenfernandes.dev/sitemap.xml
+Sitemap: https://reuben-fernandes.xyz/sitemap.xml
 
 # Specific crawl instructions for major search engines
 User-agent: Googlebot