diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..76add878
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
\ No newline at end of file
diff --git a/public/images/Hero/person.png b/public/images/Hero/person.png
new file mode 100644
index 00000000..68a1dca5
Binary files /dev/null and b/public/images/Hero/person.png differ
diff --git a/public/images/Hireme/person.png b/public/images/Hireme/person.png
new file mode 100644
index 00000000..b8aeac7d
Binary files /dev/null and b/public/images/Hireme/person.png differ
diff --git a/public/images/Hireme/person2.png b/public/images/Hireme/person2.png
new file mode 100644
index 00000000..84baa03d
Binary files /dev/null and b/public/images/Hireme/person2.png differ
diff --git a/public/images/Projects/img1.png b/public/images/Projects/img1.png
new file mode 100644
index 00000000..76cacda5
Binary files /dev/null and b/public/images/Projects/img1.png differ
diff --git a/public/images/Projects/img2.png b/public/images/Projects/img2.png
new file mode 100644
index 00000000..828e03f1
Binary files /dev/null and b/public/images/Projects/img2.png differ
diff --git a/public/images/Projects/img3.png b/public/images/Projects/img3.png
new file mode 100644
index 00000000..1768392f
Binary files /dev/null and b/public/images/Projects/img3.png differ
diff --git a/public/images/Projects/person.png b/public/images/Projects/person.png
new file mode 100644
index 00000000..a86b6133
Binary files /dev/null and b/public/images/Projects/person.png differ
diff --git a/public/images/Services/logo1.png b/public/images/Services/logo1.png
new file mode 100644
index 00000000..0ec6d90b
Binary files /dev/null and b/public/images/Services/logo1.png differ
diff --git a/public/images/Services/logo2.png b/public/images/Services/logo2.png
new file mode 100644
index 00000000..863f97a6
Binary files /dev/null and b/public/images/Services/logo2.png differ
diff --git a/public/images/Services/logo3.png b/public/images/Services/logo3.png
new file mode 100644
index 00000000..4a2c25c0
Binary files /dev/null and b/public/images/Services/logo3.png differ
diff --git a/public/images/Skills/figma.png b/public/images/Skills/figma.png
new file mode 100644
index 00000000..38c36437
Binary files /dev/null and b/public/images/Skills/figma.png differ
diff --git a/public/images/Skills/node.png b/public/images/Skills/node.png
new file mode 100644
index 00000000..3c73aab2
Binary files /dev/null and b/public/images/Skills/node.png differ
diff --git a/public/images/Skills/ps.png b/public/images/Skills/ps.png
new file mode 100644
index 00000000..aa23a299
Binary files /dev/null and b/public/images/Skills/ps.png differ
diff --git a/public/images/Skills/python.png b/public/images/Skills/python.png
new file mode 100644
index 00000000..b90a1890
Binary files /dev/null and b/public/images/Skills/python.png differ
diff --git a/public/images/Skills/react.png b/public/images/Skills/react.png
new file mode 100644
index 00000000..1b28bec9
Binary files /dev/null and b/public/images/Skills/react.png differ
diff --git a/public/images/Skills/sketch.png b/public/images/Skills/sketch.png
new file mode 100644
index 00000000..7c522192
Binary files /dev/null and b/public/images/Skills/sketch.png differ
diff --git a/public/images/Testimonials/avatar1.png b/public/images/Testimonials/avatar1.png
new file mode 100644
index 00000000..ee6ab5d5
Binary files /dev/null and b/public/images/Testimonials/avatar1.png differ
diff --git a/public/images/Testimonials/avatar2.png b/public/images/Testimonials/avatar2.png
new file mode 100644
index 00000000..97c88b53
Binary files /dev/null and b/public/images/Testimonials/avatar2.png differ
diff --git a/public/images/Testimonials/avatar3.png b/public/images/Testimonials/avatar3.png
new file mode 100644
index 00000000..7bc28ddc
Binary files /dev/null and b/public/images/Testimonials/avatar3.png differ
diff --git a/public/images/Testimonials/avatar4.png b/public/images/Testimonials/avatar4.png
new file mode 100644
index 00000000..b7513653
Binary files /dev/null and b/public/images/Testimonials/avatar4.png differ
diff --git a/src/Content.js b/src/Content.js
index 756251fb..abcbd37c 100644
--- a/src/Content.js
+++ b/src/Content.js
@@ -1,30 +1,3 @@
-// import images
-import Hero_person from "./assets/images/Hero/person.png";
-
-import figma from "./assets/images/Skills/figma.png";
-import sketch from "./assets/images/Skills/sketch.png";
-import ps from "./assets/images/Skills/ps.png";
-import reactjs from "./assets/images/Skills/react.png";
-import nodejs from "./assets/images/Skills/node.png";
-import python from "./assets/images/Skills/python.png";
-
-import services_logo1 from "./assets/images/Services/logo1.png";
-import services_logo2 from "./assets/images/Services/logo2.png";
-import services_logo3 from "./assets/images/Services/logo3.png";
-
-import project1 from "./assets/images/projects/img1.png";
-import project2 from "./assets/images/projects/img2.png";
-import project3 from "./assets/images/projects/img3.png";
-import person_project from "./assets/images/projects/person.png";
-
-import avatar1 from "./assets/images/Testimonials/avatar1.png";
-import avatar2 from "./assets/images/Testimonials/avatar2.png";
-import avatar3 from "./assets/images/Testimonials/avatar3.png";
-import avatar4 from "./assets/images/Testimonials/avatar4.png";
-
-import Hireme_person from "./assets/images/Hireme/person.png";
-import Hireme_person2 from "./assets/images/Hireme/person2.png";
-
 // import icons from react-icons
 import { GrMail } from "react-icons/gr";
 import { MdArrowForward, MdCall } from "react-icons/md";
@@ -62,7 +35,7 @@ export const content = {
     firstName: "JOHN",
     LastName: "ALEX",
     btnText: "Hire Me",
-    image: Hero_person,
+    image: "/images/Hero/person.png",
     hero_content: [
       {
         count: "8+",
@@ -81,32 +54,32 @@ export const content = {
       {
         name: "Figma",
         para: "Lorem ipsum text  dummy",
-        logo: figma,
+        logo: "/images/Skills/figma.png",
       },
       {
         name: "Node js",
         para: "Lorem ipsum text  dummy",
-        logo: nodejs,
+        logo: "/images/Skills/node.png",
       },
       {
         name: "Adobe Photoshop",
         para: "Lorem ipsum text  dummy",
-        logo: ps,
+        logo: "/images/Skills/ps.png",
       },
       {
         name: "React js",
         para: "Lorem ipsum text  dummy",
-        logo: reactjs,
+        logo: "/images/Skills/react.png",
       },
       {
         name: "Sketch",
         para: "Lorem ipsum text  dummy",
-        logo: sketch,
+        logo: "/images/Skills/sketch.png",
       },
       {
         name: "Python",
         para: "Lorem ipsum text  dummy",
-        logo: python,
+        logo: "/images/Skills/python.png",
       },
     ],
     icon: MdArrowForward,
@@ -118,36 +91,36 @@ export const content = {
       {
         title: "Web Development",
         para: "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document elying on mean",
-        logo: services_logo1,
+        logo: "/images/Services/logo1.png",
       },
       {
         title: "ui / ux DESIGNING",
         para: "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document elying on mean",
-        logo: services_logo2,
+        logo: "/images/Services/logo2.png",
       },
       {
         title: "PhotoShop Editing",
         para: "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document elying on mean",
-        logo: services_logo3,
+        logo: "/images/Services/logo3.png",
       },
     ],
   },
   Projects: {
     title: "Projects",
     subtitle: "MY CREATION",
-    image: person_project,
+    image: "/images/projects/person.png",
     project_content: [
       {
         title: "Gym Website",
-        image: project1,
+        image: "/images/projects/img1.png",
       },
       {
         title: "Social Media web",
-        image: project2,
+        image: "/images/projects/img2.png",
       },
       {
         title: "Creative Website",
-        image: project3,
+        image: "/images/projects/img3.png",
       },
     ],
   },
@@ -158,25 +131,25 @@ export const content = {
       {
         review:
           "“In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstra”",
-        img: avatar1,
+        img: "/images/Testimonials/avatar1.png",
         name: "JOHN DOE",
       },
       {
         review:
           "“In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstra”",
-        img: avatar2,
+        img: "/images/Testimonials/avatar2.png",
         name: "Tom Alex",
       },
       {
         review:
           "“In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstra”",
-        img: avatar3,
+        img: "/images/Testimonials/avatar3.png",
         name: "Johnny",
       },
       {
         review:
           "“In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstra”",
-        img: avatar4,
+        img: "/images/Testimonials/avatar4.png",
         name: "ROBBIN",
       },
     ],
@@ -184,8 +157,8 @@ export const content = {
   Hireme: {
     title: "Hire Me",
     subtitle: "FOR YOUR PROJECTS",
-    image1: Hireme_person,
-    image2: Hireme_person2,
+    image1: "/assets/images/Hireme/person.png",
+    image2: "/images/Hireme/person2.png",
     para: "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document elying on mean",
     btnText: "Hire Me",
   },