diff --git a/README.md b/README.md
index a0537962f..50eab859f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Portfolio of Vinayak Singh
+# Portfolio of Hamid Hussain
 
 <img src ="https://github.com/CodeVinayak/CodeVinayak/blob/5920a79f4c5977332a67caf91125241cf0fc46b5/www.vinayaksingh.in.png" />
  
diff --git a/package.json b/package.json
index cf044e26f..6686f8de2 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react-scripts": "^5.0.1",
     "react-toastify": "^8.1.0",
     "react-tsparticles": "^1.37.5",
+    "typewriter-effect": "^2.20.1",
     "styled-components": "^5.3.3",
     "typescript": "^4.4.2",
     "validator": "^13.7.0",
diff --git a/public/index.html b/public/index.html
index 25c7770b7..2033a3b18 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
     <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
 
-    <title>Vinayak Singh | Portfolio</title>
+    <title>Hamid Hussain | Portfolio</title>
     <meta charset="utf-8" />
     <meta property="og:title" content="Vinayak Singh | Portfolio">
     <meta name="keywords" content="Vinayak Singh,Vinayak,Code Vinayak,Portfolio Vinayak Singh,Freelance website developer">
diff --git a/src/assets/HamidHussain.png b/src/assets/HamidHussain.png
new file mode 100644
index 000000000..8a185be84
Binary files /dev/null and b/src/assets/HamidHussain.png differ
diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
index 09d8d6f17..45de6ec37 100644
--- a/src/components/About/About.tsx
+++ b/src/components/About/About.tsx
@@ -1,5 +1,5 @@
 import { Container } from "./styles";
-import VinayakSingh from "../../assets/VinayakSingh.png";
+import HamidHussain from "../../assets/HamidHussain.png";
 import wordpress from "../../assets/wordpress.svg";
 import shopify from "../../assets/shopify.svg";
 import htmlIcon from "../../assets/html-icon.svg";
@@ -88,9 +88,9 @@ export function About() {
           </div>
         </div>
       </div>
-      <div className="about-image">
-        <ScrollAnimation animateIn="fadeInRight" delay={0.20 * 1000}>
-          <img src={VinayakSingh} alt="Vinayak Singh" />
+      <div>
+        <ScrollAnimation animateIn="fadeInRight" delay={0.20 * 1000} className="about-image">
+          <img src={HamidHussain} alt="Hamid Hussain" />
         </ScrollAnimation>
       </div>
     </Container>
diff --git a/src/components/About/styles.ts b/src/components/About/styles.ts
index 105c8fc90..f91e22c59 100644
--- a/src/components/About/styles.ts
+++ b/src/components/About/styles.ts
@@ -46,9 +46,9 @@ export const Container = styled.section`
   
 
   .about-image{
-    text-align: center;
    img{
-     margin-top: 2rem;
+    border:2px solid blue;
+    //  margin-top: 2rem;
      width: 75%;
      filter: grayscale(0);
      transition: filter 0.5s;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 7613ccfa6..8ff4521d3 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -16,8 +16,8 @@ export function Header() {
     <Container className="header-fixed">
       <Router>
         <HashLink smooth to="#home" className="logo">
-          <span>{"<Vinayak "}</span>
-          <span>{" Singh/>"}</span>
+          <span>{"<H "}</span>
+          <span>{" H/>"}</span>
         </HashLink>
         <input
           onChange={toggleTheme}
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
index bacac6994..759c10d81 100644
--- a/src/components/Hero/Hero.tsx
+++ b/src/components/Hero/Hero.tsx
@@ -8,6 +8,7 @@ import githubIcon from '../../assets/github.svg'
 import whatsapp from '../../assets/whatsapp.svg'
 import Hello from '../../assets/Hello.gif'
 import telegram from '../../assets/telegram.svg'
+import Typed from "../Typed/Typed"
 export function Hero() {
   return (
     <Container id="home">
@@ -16,13 +17,14 @@ export function Hero() {
           <p>Hello <img src={Hello} alt="Hello" width="20px"/>, I'm</p>
         </ScrollAnimation>
         <ScrollAnimation animateIn="fadeInUp" delay={0.2 * 1000}>
-          <h1>Vinayak Singh</h1>
-        </ScrollAnimation>
-        <ScrollAnimation animateIn="fadeInUp" delay={0.4 * 1000}>
-          <h3>Full Stack Developer</h3>
+          <h1>Hamid_Hussain</h1>
         </ScrollAnimation>
+        <Typed/> 
+        {/* <ScrollAnimation animateIn="fadeInUp" delay={0.4 * 1000}>
+          <h3>React Native Developer</h3>
+        </ScrollAnimation> */}
         <ScrollAnimation animateIn="fadeInUp" delay={0.6 * 1000}>
-          <p className="small-resume">4 Years of Experience</p>
+          <p className="small-resume">1 Years of Experience</p>
         </ScrollAnimation>
         <ScrollAnimation animateIn="fadeInUp" delay={0.8 * 1000}>
           <BrowserRouter>
diff --git a/src/components/Project/Project.tsx b/src/components/Project/Project.tsx
index 8b8ab4ade..f41b18044 100644
--- a/src/components/Project/Project.tsx
+++ b/src/components/Project/Project.tsx
@@ -24,7 +24,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>Serverless Voting Application for Programming Languages</h3>
-              <p> Developed a serverless voting app using React, AWS Lambda, API Gateway, and DynamoDB, enabling users to view programming languages, cast votes, and access details through an interactive UI, leveraging serverless architecture for scalability and cost-efficiency. </p>
+              <p className="cardText"> Developed a serverless voting app using React, AWS Lambda, API Gateway, and DynamoDB, enabling users to view programming languages, cast votes, and access details through an interactive UI, leveraging serverless architecture for scalability and cost-efficiency. </p>
             </div>
             <footer> <ul className="tech-list"> <li>AWS Lambda</li> <li>API Gateway</li> <li>DynamoDB</li> </ul> </footer>
           </div>
@@ -43,7 +43,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>GeniusBot: AI-Powered Assistance with PDF Insight</h3>
-              <p>
+              <p className="cardText">
                 Developed an interactive chatbot application using Streamlit, OpenAI's GPT-3.5-turbo language model, and PyPDF2 for PDF text extraction, enabling users to ask context-based questions on uploaded PDFs and general queries.
               </p>
             </div>
@@ -75,7 +75,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>Credit Risk Analysis Project</h3>
-              <p>
+              <p className="cardText">
                 Developed a highly accurate credit risk classification model using XGBoost, achieving 100% precision, recall, and F1-scores for predicting loan defaults.Implemented rigorous data preprocessing, feature engineering, and hyperparameter tuning on imbalanced credit risk data, employing ensemble methods, cross-validation, and model interpretation techniques.
               </p>
             </div>
@@ -104,7 +104,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>MediBook: Medical Appointment Scheduler with Health History</h3>
-              <p>Developed a secure medical appointment management platform with CRUD functionality, utilizing role-based access control, encryption techniques, and a robust MySQL database with normalized schema design and stored procedures for efficient scheduling, data privacy, and reliable retrieval of patient records.</p>
+              <p className ="cardText">Developed a secure medical appointment management platform with CRUD functionality, utilizing role-based access control, encryption techniques, and a robust MySQL database with normalized schema design and stored procedures for efficient scheduling, data privacy, and reliable retrieval of patient records.</p>
             </div>
             <footer>
               <ul className="tech-list">
@@ -135,7 +135,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>Real-Time Hand Gesture-Driven 3D Object Manipulation</h3>
-              <p>Developed a real-time hand gesture recognition system for intuitive 3D object manipulation. Leveraged a multimodal approach integrating OpenCV for video processing, MediaPipe for hand detection/landmark extraction, and scikit-learn for machine learning model training. Achieved 95.2% accuracy in hand gesture classification with efficient real-time performance.</p>
+              <p className ="cardText" >Developed a real-time hand gesture recognition system for intuitive 3D object manipulation. Leveraged a multimodal approach integrating OpenCV for video processing, MediaPipe for hand detection/landmark extraction, and scikit-learn for machine learning model training. Achieved 95.2% accuracy in hand gesture classification with efficient real-time performance.</p>
             </div>
             <footer>
               <ul className="tech-list">
@@ -159,7 +159,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>VeloCityAI</h3>
-              <p>
+              <p className ="cardText">
                 VelocityAI is a website that allows users to get instant answers to any question and generate stunning AI pictures using OpenAI's GPT-3 and DALL-E model.With VelocityAI, users can type in text-based prompts and receive a corresponding response.
               </p>
             </div>
diff --git a/src/components/Project/styles.ts b/src/components/Project/styles.ts
index 0a4139d89..1ddf8878e 100644
--- a/src/components/Project/styles.ts
+++ b/src/components/Project/styles.ts
@@ -63,7 +63,18 @@ export const Container = styled.section`
           }
         }
       }
-
+      .cardText {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3; /* Change this to the number of lines you want to show */
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+          position: relative;
+          max-height: calc(1.2em * 3); /* Adjust '3' to the number of lines you want */
+          line-height: 1.2em;
+          // border:2px solid red;
+      }
       footer{
         margin-top: auto;
         .tech-list{
diff --git a/src/components/Typed/Typed.tsx b/src/components/Typed/Typed.tsx
new file mode 100644
index 000000000..ac32964e7
--- /dev/null
+++ b/src/components/Typed/Typed.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Typewriter from 'typewriter-effect';
+import '../Typed/typed.css'
+
+const Typed: React.FC = () => {
+  return (
+    <div className="TypeEffect">
+      <Typewriter
+        options={{
+          strings: ['<strong>HAMID <span style="color: #27ae60;">Hello</span> World!</strong>', 'RN Front-end Developer'],
+          autoStart: true,
+          loop: true,
+          delay: 70,
+          deleteSpeed: 20,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Typed;
diff --git a/src/components/Typed/typed.css b/src/components/Typed/typed.css
new file mode 100644
index 000000000..f7dad824b
--- /dev/null
+++ b/src/components/Typed/typed.css
@@ -0,0 +1,3 @@
+.TypeEffect {
+    color: green;
+}
\ No newline at end of file