codebucks27 · tuhinkairi · Jul 28, 2025 · Jul 28, 2025 · Jul 28, 2025 · Jul 29, 2025
diff --git a/public/index.html b/public/index.html
@@ -33,7 +33,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>CodeBucks | Awesome portfolio built with React JS</title>
+    <title>Tuhin Kairi</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -11,9 +11,23 @@ import BlogPage from "./components/BlogPage";
 import WorkPage from "./components/WorkPage";
 import MySkillsPage from "./components/MySkillsPage";
 import SoundBar from "./subComponents/SoundBar";
+import { useEffect } from "react";
+import { userData } from "./config";
 
 function App() {
   const location = useLocation();
+  useEffect(()=>{
+    document.title = userData.meta_Title;
+    const metaDescription = document.querySelector('meta[name="description"]');
+    if (metaDescription) {
+      metaDescription.setAttribute("content", userData.meta_description);
+    } else {
+      const meta = document.createElement('meta');
+      meta.name = "description";
+      meta.content = userData.meta_description;
+      document.head.appendChild(meta);
+    }
+  })
   return (
     <>
       <GlobalStyle />

diff --git a/src/assets/Images/profile-img.png b/src/assets/Images/profile-img.png
diff --git a/src/components/AboutPage.js b/src/components/AboutPage.js
@@ -1,40 +1,39 @@
-import React from 'react'
-import styled, { keyframes, ThemeProvider } from 'styled-components'
-import {DarkTheme} from './Themes';
+import React from "react";
+import styled, { keyframes, ThemeProvider } from "styled-components";
+import { DarkTheme } from "./Themes";
 
-
-import LogoComponent from '../subComponents/LogoComponent';
-import SocialIcons from '../subComponents/SocialIcons';
-import PowerButton from '../subComponents/PowerButton';
-import ParticleComponent from '../subComponents/ParticleComponent';
-import BigTitle from '../subComponents/BigTitlte'
-import astronaut from '../assets/Images/spaceman.png'
+import LogoComponent from "../subComponents/LogoComponent";
+import SocialIcons from "../subComponents/SocialIcons";
+import PowerButton from "../subComponents/PowerButton";
+import ParticleComponent from "../subComponents/ParticleComponent";
+import BigTitle from "../subComponents/BigTitlte";
+import astronaut from "../assets/Images/spaceman.png";
 
 const Box = styled.div`
-background-color: ${props => props.theme.body};
-width: 100vw;
-height:100vh;
-position: relative;
-overflow: hidden;
-`
+  background-color: ${(props) => props.theme.body};
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+`;
 const float = keyframes`
 0% { transform: translateY(-10px) }
 50% { transform: translateY(15px) translateX(15px) }
 100% { transform: translateY(-10px) }
 
-`
+`;
 const Spaceman = styled.div`
-position: absolute;
-top: 10%;
-right: 5%;
-width: 20vw;
-animation: ${float} 4s ease infinite;
-img{
+  position: absolute;
+  top: 10%;
+  right: 5%;
+  width: 20vw;
+  animation: ${float} 4s ease infinite;
+  img {
     width: 100%;
     height: auto;
-}
-`
-const Main =  styled.div`
+  }
+`;
+const Main = styled.div`
   border: 2px solid ${(props) => props.theme.text};
   color: ${(props) => props.theme.text};
   padding: 2rem;
@@ -46,47 +45,46 @@ const Main =  styled.div`
   justify-content: center;
   align-items: center;
   font-size: calc(0.6rem + 1vw);
- backdrop-filter: blur(4px);
-  
+  backdrop-filter: blur(4px);
+
   position: absolute;
   left: calc(5rem + 5vw);
   top: 10rem;
-  font-family: 'Ubuntu Mono', monospace;
+  font-family: "Ubuntu Mono", monospace;
   font-style: italic;
-`
-
-
-
+`;
 
 const AboutPage = () => {
-    return (
-        <ThemeProvider theme={DarkTheme}>
-<Box>
-
-<LogoComponent theme='dark'/>
-<SocialIcons theme='dark'/>
-<PowerButton />
-<ParticleComponent theme='dark' />
+  return (
+    <ThemeProvider theme={DarkTheme}>
+      <Box>
+        <LogoComponent theme="dark" />
+        <SocialIcons theme="dark" />
+        <PowerButton />
+        <ParticleComponent theme="dark" />
 
         <Spaceman>
-            <img src={astronaut} alt="spaceman" />
-        </Spaceman>    
+          <img src={astronaut} alt="spaceman" />
+        </Spaceman>
         <Main>
-        I'm a front-end developer located in India. I love to create simple yet beautiful websites with great user experience.
-<br /> <br/>
-I'm interested in the whole frontend stack Like trying new things and building great projects. I'm an independent freelancer and blogger. I love to write blogs and read books.
-<br/> <br/>
-I believe everything is an Art when you put your consciousness in it. You can connect with me via social links.
+          I'm Tuhin Kairi a full-stack developer from West Bengal, India, specializing in
+          MERN/NEXT.js and AI-powered solutions. I love integrating cutting-edge
+          technologies to solve real-world problems.
+          <br />
+          <br />
+          From academic publishing platforms to intelligent recruitment systems,
+          I turn complex ideas into elegant, user-friendly experiences. I
+          believe in writing clean code that makes a difference.
+          <br />
+          <br />
+          Every line of code is an opportunity to create something meaningful.
+          Let's build something amazing together.
         </Main>
 
         <BigTitle text="ABOUT" top="10%" left="5%" />
+      </Box>
+    </ThemeProvider>
+  );
+};
 
-
-        </Box>
-
-        </ThemeProvider>
-
-    )
-}
-
-export default AboutPage
+export default AboutPage;
diff --git a/src/components/Intro.js b/src/components/Intro.js
@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import {motion} from 'framer-motion'
 import Me from '../assets/Images/profile-img.png'
+import { userData } from '../config'
 
 
 const Box = styled(motion.div)`
@@ -44,7 +45,7 @@ display: flex;
     bottom: 0;
     left: 50%;
     transform: translate(-50%,0%);
-    width: 100%;
+    max-height:450px;
     height: auto;
 }
 `
@@ -80,8 +81,8 @@ const Intro = () => {
             <SubBox>
                 <Text>
                     <h1>Hi,</h1>
-                    <h3>I'm CodeBucks.</h3>
-                    <h6>I design and Code simple yet beautiful websites.</h6>
+                    <h3>I'm {userData.name}.</h3>
+                    <h6>{userData.description}</h6>
                 </Text>
             </SubBox>
             <SubBox>

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { NavLink } from 'react-router-dom'
 import styled, { keyframes } from 'styled-components'
 import LogoComponent from '../subComponents/LogoComponent'
@@ -8,6 +8,7 @@ import SocialIcons from '../subComponents/SocialIcons'
 import { YinYang } from './AllSvgs'
 import Intro from './Intro'
 ;
+import { userData } from '../config'
 
 
 const MainContainer = styled.div`
@@ -145,7 +146,7 @@ const Main = () => {
                 <span>click here</span>
             </Center>
 
-            <Contact target="_blank" href="mailto:[email protected]">
+            <Contact target="_blank" href={`mailto:${userData.mail}`}>
                 <motion.h2
                 initial={{
                     y:-200,