Fixed root paths for images

package.json

@@ -28,6 +28,6 @@
     "eslint-plugin-react-refresh": "^0.4.9",
     "gh-pages": "^6.1.1",
     "globals": "^15.9.0",
-    "vite": "^5.4.1"
+    "vite": "^5.4.8"
   }
 }

src/components/Home.jsx

@@ -23,7 +23,7 @@ export default function Home() {
           <button><a href="/contact">Contact</a></button>
         </div>
       </section> 
-      <img className="CheekyCode" src="./public/assets/coderFunction.png" alt="C# code snipet of an object of the Coder class defining variables that align with my hard/soft skills"/>
+      <img className="CheekyCode" src="/assets/coderFunction.png" alt="C# code snipet of an object of the Coder class defining variables that align with my hard/soft skills"/>
     </div>
   );
 }

src/components/Layout.jsx

@@ -15,7 +15,7 @@ export default function Layout() {
     <section>
       <div className="header">
         <div className="header-components">
-          <img className="logo" src="public\assets\logo2.png" alt="Logo"></img>
+          <img className="logo" src="/assets/logo2.png" alt="Logo"></img>
           <h1>MARTA POLISHCHUK</h1>
         </div>
         <nav>

src/components/about.jsx

@@ -10,7 +10,7 @@ import '../index.css'
 export default function About() {
   return (
     <section className="about-wrapper">
-      <img src="./public/assets/headshot.jpg" alt="Headshot of Marta Polishchuk"></img>
+      <img src="/assets/headshot.jpg" alt="Headshot of Marta Polishchuk"></img>
       <div className="about-text">
         <h2>About Me</h2>
           <p>

src/components/contact.jsx

@@ -22,11 +22,11 @@ export default function Contact() {
         <div>
             <ul>
               <li>
-                <img src="./public/assets/linkedin.png" alt="LinkedIn" />
+                <img src="/assets/linkedin.png" alt="LinkedIn" />
                 <a href="https://www.linkedin.com/in/marta-polishchuk/">LinkedIn</a>
               </li>
               <li>
-                <img src="./public/assets/github.png" alt="GitHub" />
+                <img src="/assets/github.png" alt="GitHub" />
                 <a href="https://github.com/martapolii">GitHub</a>
               </li>
             </ul>

src/components/project.jsx

@@ -13,21 +13,21 @@ export default function Project() {
 
   //Image files are in array because I wantd to make a carousel - will implement this in my own time.
   const proj1Imgs = [
-    '/public/assets/project1.png',
-    '/public/assets/project1b.png',
-    '/public/assets/project1c.png'
+    '/assets/project1.png',
+    '/assets/project1b.png',
+    '/assets/project1c.png'
   ];
 
   const proj2Imgs = [
-    '/public/assets/project2.png',
-    '/public/assets/project2b.png',
-    '/public/assets/project2c.png',
+    '/assets/project2.png',
+    '/assets/project2b.png',
+    '/assets/project2c.png',
   ];
 
   const proj3Imgs = [
-    '/public/assets/project3.png',
-    '/public/assets/project3b.png',
-    '/public/assets/project3c.png'
+    '/assets/project3.png',
+    '/assets/project3b.png',
+    '/assets/project3c.png'
   ];
 
     return (

src/components/service.jsx

@@ -14,37 +14,37 @@ export default function Service() {
       <h2>Services Offered</h2>
       <ul>
         <li>
-          <img src="./public/assets/c-sharp.png" alt="csharp icon"></img>
+          <img src="/assets/c-sharp.png" alt="csharp icon"></img>
           <h3>C# Application Development</h3>
           {/*<a href="https://www.flaticon.com/free-icons/database-management" title="database management icons">Database management icons created by Design Circle - Flaticon</a> */}
           <p>Proficient in building both <span className="bold">console</span> and <span className="bold">GUI applications</span> using <span className="bold">C#</span> and <span className="bold">Visual Studio</span>. Whether you need a simple console application or a more complex user interface, I can help bring your software ideas to life.</p>
         </li>
         <li>
-        <img src="./public/assets/java-script.png" alt="javascript icon"></img>
+        <img src="/assets/java-script.png" alt="javascript icon"></img>
           <h3>JavaScript & Web Development</h3>
           {/*<a href="https://www.flaticon.com/free-icons/javascript" title="javascript icons">Javascript icons created by UIUX Mall - Flaticon</a> */}
           <p>Skilled in <span className="bold">JavaScript</span> and <span className="bold">front-end development</span>, applying <span className="bold">DOM manipulation</span>, <span className="bold">event handling</span>, and <span className="bold">responsive design</span> to create dynamic, interactive websites. I specialize in crafting <span className="bold">responsive</span>, <span className="bold">user-friendly</span> web experiences.</p>
         </li>
         <li>
-        <img src="./public/assets/database-management.png" alt="database icon"></img>
+        <img src="/assets/database-management.png" alt="database icon"></img>
           <h3>Database Management & Integration</h3>
           {/*<a href="https://www.flaticon.com/free-icons/database-management" title="database management icons">Database management icons created by Design Circle - Flaticon</a>*/}
           <p>Proficient in <span className="bold">SQL query design</span>, <span className="bold">database creation</span>, and <span className="bold">integrating databases</span> into software applications. I ensure efficient <span className="bold">data storage</span>, <span className="bold">retrieval</span>, and <span className="bold">manipulation</span> for both small and large-scale projects.</p>
         </li>
         <li>
-        <img src="./public/assets/brain.png" alt="brain icon"></img>
+        <img src="/assets/brain.png" alt="brain icon"></img>
           <h3>Analytical Problem Solving</h3>
           {/*<a href="https://www.flaticon.com/free-icons/brain" title="brain icons">Brain icons created by Freepik - Flaticon</a>*/}
           <p>Strong <span className="bold">problem-solving skills</span> in <span className="bold">Discrete Mathematics</span>, including <span className="bold">logic</span>, <span className="bold">set theory</span>, and <span className="bold">Boolean algebra</span>. I apply these <span className="bold">analytical abilities</span> to optimize <span className="bold">software development processes</span> and solve complex problems.</p>
         </li>
         <li>
-        <img src="./public/assets/linux.png" alt="linux icon"></img>
+        <img src="/assets/linux.png" alt="linux icon"></img>
           <h3>Unix/Linux Environments</h3>
           {/*<a href="https://www.flaticon.com/free-icons/linux" title="linux icons">Linux icons created by Freepik - Flaticon</a> */}
           <p>Experienced in <span className="bold">scripting</span>, <span className="bold">file management</span>, and <span className="bold">basic system administration</span> in <span className="bold">Unix/Linux environments</span>. I can help <span className="bold">automate tasks</span>, <span className="bold">manage files</span>, and <span className="bold">maintain system stability</span> for server or desktop environments.</p>
         </li>
         <li>
-        <img src="./public/assets/social.png" alt="git icon"></img>
+        <img src="/assets/social.png" alt="git icon"></img>
           <h3>Version Control & Collaboration</h3>
           {/*<a href="https://www.flaticon.com/free-icons/git" title="git icons">Git icons created by pocike - Flaticon</a> */}
           <p>Proficient in <span className="bold">Git</span> for <span className="bold">version control</span> and <span className="bold">collaborative software development</span>. I ensure <span className="bold">clean</span>, <span className="bold">organized codebases</span> and <span className="bold">seamless collaboration</span> for development teams.</p>

vite.config.js

@@ -3,6 +3,5 @@ import react from '@vitejs/plugin-react-swc'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: '/PORTFOLIO/', // set base path
   plugins: [react()],
 })