Website Layout w/o Images

src/Components/About/AboutContent.css

@@ -9,7 +9,7 @@
 }
 
 .about .left{
-  margin: auto;
+  margin: 4rem;
   padding: 0.5rem;
   max-width: 45rem;
 }
@@ -20,29 +20,5 @@
 
 .about .right{
   max-width: 700px;
-}
+  padding-right: 1rem;
-
-.right .img-container{
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  align-items: center;
-  text-align: center;
-}
-
-.right .img{
-  max-width: 90%;
-  border: 1px solid #333;
-}
-
-.right .top{
-  grid-column: 1 / span 8;
-  grid-row: 1;
-  padding-top: 20%;
-  z-index: 6;
-}
-
-.right .bottom {
-  grid-column: 4 / -1;
-  grid-row: 1;
-  z-index: 5;
 }

src/Components/About/AboutContent.js

@@ -3,8 +3,7 @@ import "./AboutContent.css";
 
 import React from "react";
 
-import React1 from "../../assets/react1.jpg";
+import Logo from "../../assets/logo.svg";
-import React2 from "../../assets/react2.webp";
 
 const AboutContent = () => {
   return (
@@ -14,32 +13,25 @@ const AboutContent = () => {
         <p>
           I am a Software Engineering student from Portugal, I am passionate
           about learning and applying new technologies and frameworks to create
-          innovative and engaging applications. I am currently pursuing my
+          innovative and engaging applications. As mentioned, I am currently
-          Bachelor of Engineering in Information Technology, after completing a
+          pursuing my Bachelor on Software Engineering after completing having
-          CTeSP in programming, where I gained a solid foundation in C, .NET,
+          completed a CTeSP in programming, where I gained a solid foundation in
-          PHP, Java, and MySQL. I have also enhanced my skills and knowledge by
+          C, .NET, PHP, Java, and MySQL. I have also enhanced my skills and
-          taking online courses in Unity 3D, Swift/SwiftUI, Cypress, Git, and
+          knowledge by taking online courses in Unity 3D, Swift/SwiftUI,
-          React, and by working as a QA/QC at VOID Software, a leading software
+          Cypress, Git, and React, and by working as a QA/QC at VOID Software, a
-          development company, for five months. There, I contributed to the
+          leading software development company, for five months. There, I
-          testing and quality assurance of several projects, using Cypress and
+          contributed to the testing and quality assurance of several projects,
-          Cucumber to automate and streamline the testing process, and Git to
+          using Cypress and Cucumber to automate and streamline the testing
-          manage the source code and collaborate with the development team. I am
+          process, and Git to manage the source code and collaborate with the
-          eager to continue developing my competencies and exploring new
+          development team. I am eager to continue developing my competencies
-          opportunities in the software industry.
+          and exploring new opportunities in the software industry.
         </p>
         <Link to="/contact">
           <button className="btn">Contact Me</button>
         </Link>
       </div>
       <div className="right">
-        <div className="img-container">
+        <img src={Logo} alt="React" />
-          <div className="img-stack top">
-            <img src={React1} className="img" alt="true" />
-          </div>
-          <div className="img-stack bottom">
-            <img src={React2} className="img" alt="true" />
-          </div>
-        </div>
       </div>
     </div>
   );

src/Components/Hero/Hero.js

@@ -1,7 +1,7 @@
 import "./Hero.css";
 import React from "react";
 
-import IntroImg from "../../assets/intro-bg.jpg";
+import IntroImg from "../../assets/code-bg.jpg";
 import { Link } from "react-router-dom";
 
 const Hero = () => {

src/Components/WorkCard/WorkCard.js

@@ -1,20 +1,28 @@
 import "./WorkCard.css";
 
 import React from "react";
-import { NavLink } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
 
 const WorkCard = (props) => {
+  const location = useLocation();
+
   return (
     <div className="project-card">
-      <img src={props.imgsrc} alt="im" />
       <h2 className="project-title">{props.title}</h2>
       <div className="pro-details">
         <p>{props.text}</p>
       </div>
       <div className="pro-btns">
-        <NavLink to={props.view} className="btn">
+        {(props.view && props.view !== "/") ||
-          View
+        (props.view && location.pathname !== "/") ? (
-        </NavLink>
+          <NavLink to={props.view} className="btn">
+            View
+          </NavLink>
+        ) : (
+          <button disabled className="btn">
+            View
+          </button>
+        )}
       </div>
     </div>
   );

src/Components/WorkData/AcademicProjects.js

@@ -4,22 +4,19 @@ import pro3 from "../../assets/project3.png";
 
 const AcademicProjectCardData = [
   {
-    imgsrc: umbBot,
     title: "Stuff&Go Web Store",
     text: "Stuff&Go is a web application dedicated to a supermarket chain. It allows the user to create an account, add items to a cart, and checkout. It also allows the user to see the history of their purchases. The application was developed using PHP, with the Yii2 framework, and a MySQL database. It also hosts a REST API, which implements the MQTT Broker for connection to the Mobile App.",
     view: "https://github.com/FernandoJVideira/PL2-G7_ProjetoPlatSI",
   },
   {
-    imgsrc: pro2,
     title: "Stuff&Go Mobile App",
-    text: "Stuff&Go is a mobile application dedicated to a supermarket chain. It allows the user to login to their account, add items to a cart, and checkout. It also allows the user to see the history of their purchases. The application was developed using Android Studio, with the Java language, and connects to the REST API of the Web Store.",
+    text: "Stuff&Go is a mobile application dedicated to a supermarket chain. It allows the user to login to their account, add items to a cart, and checkout. It also allows the user to see the history of their purchases as well as taking a ticket to store queues. The application was developed using Android Studio, with the Java language, and connects to the REST API of the Web Store.",
     view: "https://github.com/FernandoJVideira/PL2-G7_ProjetoAMSI",
   },
   {
-    imgsrc: pro3,
+    title: "RestGest",
-    title: "Project 3",
+    text: "This application was developed as part of my 2 year CTeSP course. It is a restaurant management application, which allows the user to manage the restaurant's menu, orders and payments. It also allows the user to manage the employees, and their salaries. The application was developed using C#, with the .NET framework, Entity Framework, and a SQL Server database.",
-    text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, quibusdam, tempora, voluptates voluptate dolores officia quas quae dolorum natus labore? Quisquam voluptatum, quibusdam, tempora, voluptates voluptate dolores officia quas quae dolorum natus labore?",
+    view: "https://github.com/FernandoJVideira/PSI_DA_PL2_G",
-    view: "https://github.com/FernandoJVideira/UmbreonBot",
   },
 ];
 export default AcademicProjectCardData;

src/Components/WorkData/PersonalProjects.js

@@ -1,25 +1,21 @@
-import umbBot from "../../assets/umbreonbot.jpg";
+import UmBot from "../../assets/umbreonbot.jpg";
-import pro2 from "../../assets/project2.png";
+import MyLogo from "../../assets/logo.svg";
 import pro3 from "../../assets/project3.png";
 
 const PersonalProjectCardData = [
   {
-    imgsrc: umbBot,
     title: "Umbreon Discord Bot",
-    text: "Umbreon bot is a general-purpose discord bot made in python. It is equiped with commands from moderation to playing music. It does so by connecting to a Lavalink server and using it to stream the songs. (And yes, it supports Youtube playback).",
+    text: "Umbreon Discord Bot is a versatile tool developed in Python, designed to enhance server management and user interaction on Discord. It offers a range of features from moderation to music playback. The bot connects to a Lavalink server to stream music, supporting YouTube playback, deonstrating my willingness to constantly learn new technologies and frameworks, adapting to the needs of the project.",
     view: "https://github.com/FernandoJVideira/UmbreonBot",
   },
   {
-    imgsrc: pro2,
+    title: "My Portfolio",
-    title: "Stuff&Go",
+    text: "This portfolio website, built with ReactJS and React Router, showcases my software development skills, projects, and experiences. It features a user-friendly interface with easy navigation. Each project in the portfolio section includes a brief description and a link to the GitHub repository for more details. The website is designed to provide a seamless experience across various devices.",
-    text: "Stu",
+    view: "/",
-    view: "https://github.com/FernandoJVideira/UmbreonBot",
   },
   {
-    imgsrc: pro3,
+    title: "Casa dos Óculos Web Store",
-    title: "Project 3",
+    text: "Currently I'm also working on a web store for a local business, Casa dos Óculos. The web store is being developed using ReactJS. It also hosts a REST API, developed in GOLang and using a PostgreSQL database, implementing the use of the Stripe API for payment processing. This project is still in its early stages, but I'm excited to see it through.",
-    text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, quibusdam, tempora, voluptates voluptate dolores officia quas quae dolorum natus labore? Quisquam voluptatum, quibusdam, tempora, voluptates voluptate dolores officia quas quae dolorum natus labore?",
-    view: "https://github.com/FernandoJVideira/UmbreonBot",
   },
 ];
 export default PersonalProjectCardData;

src/routes/Project.js

@@ -11,7 +11,10 @@ const Project = () => {
   return (
     <div>
       <Navbar />
-      <HeroSec heading="Projects" paragraph="Some of my recent work" />
+      <HeroSec
+        heading="Projects"
+        paragraph="Some of my Personal and Academic work"
+      />
       <Work title="Personal Projects" workcardData={PersonalProjects} />
       <Work title="Academic Projects" workcardData={AcademicProjects} />
       <Footer />