Refocus portfolio for job and freelance positioning

src/App.jsx

@@ -1,11 +1,13 @@
 import React, { Suspense, lazy } from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import Seo from "./components/Seo";
 import ScrollToTop from "./components/ScrollToTop";
 import ErrorBoundary from "./components/ErrorBoundary";
 import AnimatedBackground from "./components/ui/AnimatedBackground";
+import InteractiveEffects from "./components/ui/InteractiveEffects";
 import "./App.css";
 
 const Hero = lazy(() => import("./components/HeroSection"));
@@ -35,38 +37,66 @@ function RouteFallback() {
   );
 }
 
+function AppRoutes() {
+  const location = useLocation();
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={location.pathname}
+        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 14, scale: 0.992 }}
+        animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 }}
+        exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -10, scale: 0.996 }}
+        transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
+        className="route-scene"
+        data-route-root={location.pathname.split("/")[1] || "home"}
+      >
+        <Routes location={location}>
+          <Route path="/" element={<Hero />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/projects" element={<ProjectsPage />} />
+          <Route path="/projects/:slug" element={<ProjectDetail />} />
+          <Route path="/journey" element={<JourneyPage />} />
+          <Route path="/rewards" element={<RewardsPage />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="/problems" element={<ProblemsHome />} />
+          <Route path="/problems/:platform/:slug" element={<ProblemDetailPage />} />
+          <Route path="/codebase" element={<CodebasePage />} />
+          <Route path="/codebase/:platform/:slug" element={<CodebaseDetailPage />} />
+          <Route path="/dashboard" element={<DashboardPage />} />
+          <Route path="/achievements" element={<AchievementsPage />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+function AppShell() {
+  return (
+    <ErrorBoundary>
+      <div className="app-frame">
+        <Seo />
+        <ScrollToTop />
+        <AnimatedBackground />
+        <InteractiveEffects />
+        <div className="app-layer">
+          <Navbar />
+          <Suspense fallback={<RouteFallback />}>
+            <AppRoutes />
+          </Suspense>
+          <Footer />
+        </div>
+      </div>
+    </ErrorBoundary>
+  );
+}
+
 function App() {
   return (
     <BrowserRouter>
-      <ErrorBoundary>
-        <div className="app-frame">
-          <Seo />
-          <ScrollToTop />
-          <AnimatedBackground />
-          <div className="app-layer">
-            <Navbar />
-            <Suspense fallback={<RouteFallback />}>
-              <Routes>
-                <Route path="/" element={<Hero />} />
-                <Route path="/about" element={<About />} />
-                <Route path="/projects" element={<ProjectsPage />} />
-                <Route path="/projects/:slug" element={<ProjectDetail />} />
-                <Route path="/journey" element={<JourneyPage />} />
-                <Route path="/rewards" element={<RewardsPage />} />
-                <Route path="/contact" element={<Contact />} />
-                <Route path="/problems" element={<ProblemsHome />} />
-                <Route path="/problems/:platform/:slug" element={<ProblemDetailPage />} />
-                <Route path="/codebase" element={<CodebasePage />} />
-                <Route path="/codebase/:platform/:slug" element={<CodebaseDetailPage />} />
-                <Route path="/dashboard" element={<DashboardPage />} />
-                <Route path="/achievements" element={<AchievementsPage />} />
-                <Route path="*" element={<NotFound />} />
-              </Routes>
-            </Suspense>
-            <Footer />
-          </div>
-        </div>
-      </ErrorBoundary>
+      <AppShell />
     </BrowserRouter>
   );
 }

src/components/AboutPage.jsx

@@ -10,16 +10,16 @@ export default function AboutPage() {
   return (
     <main className="page-shell">
       <PageHeader
-        eyebrow="About SunilCraft"
-        title="Builder profile, craft, and credibility"
-        description={`A premium overview of ${profile.name}: product thinking, frontend craft, full-stack execution, and the rewards that reflect that growth.`}
+        eyebrow="About"
+        title="Background, skills, and the kind of work I’m looking for"
+        description={`${profile.name} is an MCA student at Bangalore University building practical web apps, verified coding systems, and recruiter-trustworthy portfolio work.`}
         align="left"
       />
 
       <SectionPanel
         eyebrow="Profile"
         title="About"
-        description="Frontend polish, full-stack execution, and consistent learning in public."
+        description="A concise view of my transition into software development, the kind of work I enjoy, and the strengths I’m actively building."
         className="embedded-section-panel"
       >
         <AboutSection />
@@ -28,7 +28,7 @@ export default function AboutPage() {
       <SectionPanel
         eyebrow="Capability"
         title="Skills"
-        description="Core frontend, backend, and tooling strengths that support the portfolio and coding-journal workflow."
+        description="Frontend, backend, and workflow skills that support product-style builds, coding-journal sync, and practical implementation work."
         className="embedded-section-panel"
       >
         <SkillsSection />
@@ -37,7 +37,7 @@ export default function AboutPage() {
       <SectionPanel
         eyebrow="Recognition"
         title="Rewards & Certificates"
-        description="A compact archive of professional recognition and performance highlights."
+        description="Certificates and rewards that support the learning journey behind the portfolio."
         className="embedded-section-panel"
       >
         <CertificateGallery />

src/components/AboutSection.jsx

@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 import { profile, services } from "../data/profile";
 import Badge from "./ui/Badge";
 import "../styles/AboutSection.css";
-import profilePic from "/assets/images/profile.png";
+import profilePic from "/assets/images/SunilKumar.png";
 
 const AboutSection = () => {
   return (
@@ -17,22 +17,16 @@ const AboutSection = () => {
       >
         <div className="card-row about-badges">
           <Badge tone="accent">{profile.location}</Badge>
-          <Badge>MCA Journey</Badge>
-          <Badge tone="success">Production Focus</Badge>
+          <Badge>MCA at Bangalore University</Badge>
+          <Badge tone="success">Open to remote work</Badge>
         </div>
-        <h2 className="about-title">Building thoughtful interfaces with engineering depth</h2>
+        <h2 className="about-title">I build practical web apps while growing into stronger frontend and full-stack work</h2>
 
         <p className="about-description">
-          Hello! I&apos;m <strong>{profile.name}</strong>, a developer from India who likes turning
-          ambitious ideas into clean interfaces, practical full-stack features, and transparent
-          developer systems. SunilCraft now sits at the center of that work: portfolio storytelling,
-          coding-journal sync, verified solutions, and engineering dashboards in one place.
+          I&apos;m <strong>{profile.name}</strong>, an MCA student at Bangalore University who moved from a non-software work background into web development through steady project building, coding practice, and learning in public. SunilCraft is where that work is documented in a way recruiters and clients can actually inspect.
         </p>
         <p className="about-description">
-          My strongest areas are frontend architecture, UI/UX refinement, routing and state cleanup,
-          API integration, debugging, and shipping improvements that make products feel calmer and
-          more intentional. I&apos;m especially motivated by projects that need both polish and
-          structure.
+          I enjoy frontend implementation, UI cleanup, responsive layout work, React architecture, API integration, debugging, and the kind of product thinking that turns a rough idea into something usable. I&apos;m currently looking for remote internships, part-time roles, and freelance web app work where I can keep shipping and improving.
         </p>
 
         <div className="about-pillars">
@@ -46,16 +40,16 @@ const AboutSection = () => {
 
         <div className="about-details">
           <div className="about-card">
-            <h3>10+</h3>
-            <p>Projects built and iterated</p>
+            <h3>React</h3>
+            <p>Frontend systems, dashboards, and portfolio interfaces</p>
           </div>
           <div className="about-card">
-            <h3>3+</h3>
-            <p>Live deployments maintained</p>
+            <h3>Node.js</h3>
+            <p>Workflow APIs, data sync, and practical full-stack support</p>
           </div>
           <div className="about-card">
-            <h3>2+</h3>
-            <p>Years of hands-on growth</p>
+            <h3>GitHub + coding-journal</h3>
+            <p>Real projects, verified solutions, and source-backed proof</p>
           </div>
         </div>
       </motion.div>
@@ -68,10 +62,10 @@ const AboutSection = () => {
         transition={{ duration: 0.7, ease: "easeOut", delay: 0.3 }}
       >
         <div className="about-image-frame">
-          <img src={profilePic} alt="About Me" />
+          <img src={profilePic} alt="Sunil Kumar K V" />
           <div className="about-image-note">
             <strong>{profile.role}</strong>
-            <span>Clean UI, reliable routing, live developer data, and product-minded iteration.</span>
+            <span>Clean UI, reliable implementation, and real portfolio proof backed by synced project data.</span>
           </div>
         </div>
       </motion.div>

src/components/ContactSection.jsx

@@ -80,27 +80,27 @@ const ContactSection = () => {
     <main className="page-shell">
       <PageHeader
         eyebrow="Contact"
-        title="Let’s build something useful and well-crafted"
-        description="For frontend polish, dashboard architecture, portfolio systems, and production-ready React work, this page is designed to make the next step easy."
+        title="Open to remote internships, part-time roles, and freelance work"
+        description="If you need React, frontend, or full-stack help for a real product, portfolio, or workflow, this page is meant to make reaching out straightforward."
         align="left"
       />
 
       <SectionPanel
         eyebrow="Collaboration"
         title="Start a conversation"
-        description="Reach out with a feature idea, UI cleanup request, portfolio upgrade, or product concept. I’m most helpful when the work needs both technical structure and visual refinement."
+        description="Reach out for frontend builds, UI cleanup, portfolio work, coding workflow ideas, or product-style web app features. I’m especially useful when the work needs both implementation and polish."
       >
         <div className="contact-layout">
           <div className="contact-column contact-summary">
             <div className="card-row">
-              <Badge tone="accent">Frontend Systems</Badge>
-              <Badge>React + Vite</Badge>
-              <Badge tone="success">Available</Badge>
+              <Badge tone="success">Available for freelance</Badge>
+              <Badge tone="accent">Remote / part-time ready</Badge>
+              <Badge>React + Node.js</Badge>
             </div>
 
             <div className="contact-intro">
               <h3>Best fit engagements</h3>
-              <p>Developer portfolios, engineering dashboards, routing cleanup, mobile-first UI refinement, and production-ready frontend/full-stack features.</p>
+              <p>Frontend development, React product work, UI cleanup, mobile-first refinement, portfolio builds, and practical full-stack features for web apps.</p>
             </div>
 
             <div className="contact-methods">
@@ -115,7 +115,7 @@ const ContactSection = () => {
                 <FaGithub />
                 <div>
                   <strong>GitHub</strong>
-                  <span>See active builds and coding-journal sync</span>
+                  <span>See synced projects, code history, and active builds</span>
                 </div>
               </a>
               <a href={profile.linkedin} target="_blank" rel="noreferrer" className="contact-method">
@@ -136,16 +136,16 @@ const ContactSection = () => {
 
             <div className="contact-trust-grid">
               <article className="glass-card">
-                <h3>UI/UX Cleanup</h3>
-                <p>Turning cluttered flows into clearer, more premium product surfaces.</p>
+                <h3>Frontend & React Work</h3>
+                <p>Landing pages, product UI, responsive interfaces, and practical component systems.</p>
               </article>
               <article className="glass-card">
-                <h3>Developer Platforms</h3>
-                <p>Problems, codebase, analytics, and synced engineering views built around live data.</p>
+                <h3>Portfolio & Product Builds</h3>
+                <p>Personal websites, recruiter-focused portfolios, and product-style web apps with stronger structure.</p>
               </article>
               <article className="glass-card">
-                <h3>Production Mindset</h3>
-                <p>Routing, responsive layouts, build safety, and implementation detail all treated seriously.</p>
+                <h3>Implementation + Cleanup</h3>
+                <p>Routing fixes, mobile layout cleanup, build-safe delivery, and thoughtful iteration before launch.</p>
               </article>
             </div>
           </div>
@@ -172,7 +172,7 @@ const ContactSection = () => {
                   ) : (
                     <textarea
                       name="message"
-                      placeholder="Tell me what you’re building, where it feels stuck, and what kind of help you need."
+                      placeholder="Tell me about the role, project, or freelance work you have in mind."
                       value={formData.message}
                       onChange={handleChange}
                       rows="7"