Small Fixes

src/Components/About/AboutContent.css

@@ -10,7 +10,7 @@
 
 .about .left {
   margin: 4rem;
-  padding: 0.5rem;
+  padding: 0.1rem;
   max-width: 45rem;
 }
 
@@ -23,3 +23,23 @@
   max-width: 700px;
   padding-right: 1rem;
 }
+
+.button-container {
+  display: flex;
+  gap: 1rem; /* Adjust the gap as needed */
+}
+
+@media screen and (max-width: 950px) {
+  .logoPic {
+    width: 350px;
+    height: 350px;
+  }
+  .about .left p {
+    text-align: center;
+  }
+
+  .about .left .button-container {
+    display: flex;
+    justify-content: center;
+  }
+}

src/Components/About/AboutContent.js

@@ -26,12 +26,14 @@ const AboutContent = () => {
           development team. I am eager to continue developing my competencies
           and exploring new opportunities in the software industry.
         </p>
+        <div className="button-container">
           <Link to="/contact">
             <button className="btn">Contact Me</button>
           </Link>
         </div>
+      </div>
       <div className="right">
-        <img src={Logo} alt="React" />
+        <img className="logoPic" src={Logo} alt="React" />
       </div>
     </div>
   );

src/Components/Footer/Footer.css

@@ -28,13 +28,18 @@
   padding: 1rem;
 }
 
-.social{
-  margin-top: 1rem;
+.socials {
+  margin-top: 0.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.github {
+  padding-top: 0.5rem;
 }
 
 h4 {
   font-size: 1.2rem;
-  padding-bottom: 0.7rem;
+  padding-bottom: 0.2rem;
 }
 
 p {
@@ -45,4 +50,8 @@ p{
   .footer-container {
     grid-template-columns: 1fr;
   }
+  h4 {
+    font-size: 1rem;
+    padding-bottom: 0.2rem;
+  }
 }

src/Components/Footer/Footer.js

@@ -1,10 +1,4 @@
-import {
-  FaGithub,
-  FaLinkedin,
-  FaMailBulk,
-  FaPhone,
-  FaTwitter,
-} from "react-icons/fa";
+import { FaGithub, FaLinkedin, FaMailBulk, FaTwitter } from "react-icons/fa";
 import "./Footer.css";
 
 import React from "react";
@@ -14,22 +8,63 @@ const Footer = () => {
     <div className="footer">
       <div className="footer-container">
         <div className="left">
-          <div className="phone">
-            <h4>
-              <FaPhone
-                size={20}
-                style={{ color: "#fff", marginRight: "2rem" }}
-              />
-              (Not yet available)
-            </h4>
-          </div>
           <div className="email">
             <h4>
+              <a href="mailto:[email protected]">
                 <FaMailBulk
-                size={20}
+                  size={25}
                   style={{ color: "#fff", marginRight: "2rem" }}
                 />
                 info@fernandovideira.com
+              </a>
+            </h4>
+          </div>
+          <div className="socials github">
+            <h4>
+              <a
+                href="https://github.com/FernandoJVideira"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaGithub
+                  size={25}
+                  style={{ color: "#fff", marginRight: "2rem" }}
+                  cursor={"pointer"}
+                />
+                @FernandoJVideira
+              </a>
+            </h4>
+          </div>
+          <div className="socials twitter">
+            <h4>
+              <a
+                href="https://twitter.com/fernandoj_02_"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaTwitter
+                  size={25}
+                  style={{ color: "#fff", marginRight: "2rem" }}
+                  cursor={"pointer"}
+                />
+                @fernandoj_02_
+              </a>
+            </h4>
+          </div>
+          <div className="socials linkedin">
+            <h4>
+              <a
+                href="https://www.linkedin.com/in/fernando-videira-info/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FaLinkedin
+                  size={25}
+                  style={{ color: "#fff", marginRight: "2rem" }}
+                  cursor={"pointer"}
+                />
+                Fernando Videira
+              </a>
             </h4>
           </div>
         </div>
@@ -40,41 +75,6 @@ const Footer = () => {
             looking for some new projects and challenges and oportunities to
             learn new things about the programming world!
           </p>
-          <div className="social">
-            <a
-              href="https://github.com/FernandoJVideira"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FaGithub
-                size={30}
-                style={{ color: "#fff", marginRight: "2rem" }}
-                cursor={"pointer"}
-              />
-            </a>
-            <a
-              href="https://twitter.com/fernandoj_02_"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FaTwitter
-                size={30}
-                style={{ color: "#fff", marginRight: "2rem" }}
-                cursor={"pointer"}
-              />
-            </a>
-            <a
-              href="https://www.linkedin.com/in/fernando-videira-info/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FaLinkedin
-                size={30}
-                style={{ color: "#fff", marginRight: "2rem" }}
-                cursor={"pointer"}
-              />
-            </a>
-          </div>
         </div>
       </div>
     </div>

src/Components/HeroSec/HeroSec.css

@@ -7,7 +7,8 @@
 
 .hero-img::before {
   content: "";
-  background: url("https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") repeat 0 0;
+  background: url("https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
+    repeat 0 0;
   background-size: cover;
   background-position: center top;
   height: 100%;
@@ -40,4 +41,9 @@
   .hero-img h1 {
     font-size: 2rem;
   }
+  .hero-img p {
+    font-size: 1.2rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
 }

src/Components/WorkCard/WorkCard.css

@@ -13,8 +13,14 @@
 }
 
 .project-card {
-  background: #1a1919;
-  padding: 1.2rem 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between; /* Ensures the button is at the bottom */
+  height: 100%; /* Make sure the card takes the full height */
+  padding: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .project-card img {
@@ -22,14 +28,15 @@
 }
 
 .project-title {
+  font-size: 1.9rem;
   color: #fff;
   padding: 1rem 0;
 }
 
 .pro-details p {
-  padding-bottom: 1rem;
   font-size: 1.1rem;
   text-align: justify;
+  flex-grow: 1; /* Takes up remaining space */
 }
 
 .pro-btns {

src/Components/WorkData/PersonalProjects.js

@@ -1,17 +1,23 @@
 const PersonalProjectCardData = [
   {
-    title: "Umbreon Discord Bot",
-    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",
+    title: "Velox Discord Bot",
+    text: "Velox Discord Bot is an open-source general purpose discord bot developed in Python. It offers a range of features such as moderation, music, and fun commands. The bot is designed to be easy to use and configure, and it is fully customizable. It is built using the discord.py library.",
+    view: "https://github.com/FernandoJVideira/VeloxDiscordBot",
   },
   {
     title: "My Portfolio",
-    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: "This portfolio website was built with ReactJS and React Router. It showcases my projects, skills, and contact information as well as a brief introduction about myself. The website is fully responsive and features a clean and modern design.",
     view: "/",
   },
   {
-    title: "Casa dos Óculos Web Store",
-    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.",
+    title: " Velox Web Framework",
+    text: "Velox is a lightweight Laravel like framework built from scratch in Go. It is designed to simplify the development of web applications by providing a set of tools and features to streamline the process. The framework includes a router, middleware, and a template engine, among other components.",
+    view: "https://github.com/FernandoJVideira/velox",
+  },
+  {
+    title: "LK Results Website",
+    text: "LK Results is the landing page for my Marketing/Web Development business. It is built using ReactJS and features a clean and modern design. The website includes information about the services offered as well as a contact form for potential clients.",
+    view: "https://lk-results.com",
   },
 ];
 export default PersonalProjectCardData;

src/index.css

@@ -1,17 +1,20 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: 'Outfit', sans-serif;
+  font-family: "Outfit", sans-serif;
 }
 
 body {
   background: #000;
 }
 
-h1, h4, p, a{
+h1,
+h4,
+p,
+a {
   color: #fff;
   text-decoration: none;
 }
@@ -41,3 +44,9 @@ ul{
   color: #fff;
   transition: 0.3s;
 }
+
+@media screen and (max-width: 640px) {
+  .btn {
+    font-size: x-small;
+  }
+}