diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
index eb2e4c5..58aa0cd 100644
--- a/src/Components/Footer/Footer.css
+++ b/src/Components/Footer/Footer.css
@@ -1,10 +1,10 @@
-.footer{
+.footer {
width: 100%;
padding: 6rem 0;
- background-color: rgba(19,19,19,0.8);
+ background-color: rgba(19, 19, 19, 0.8);
}
-.footer-container{
+.footer-container {
max-width: 1140px;
margin: auto;
display: grid;
@@ -12,7 +12,7 @@
grid-gap: 40px;
}
-.left{
+.left {
height: 100%;
max-width: 100%;
display: flex;
@@ -20,7 +20,7 @@
padding: 1rem;
}
-.right{
+.right {
height: 100%;
max-width: 100%;
display: flex;
@@ -28,21 +28,21 @@
padding: 1rem;
}
-.socials{
+.socials {
margin-top: 0.1rem;
margin-bottom: 0.5rem;
}
-.github{
- padding-top: .5rem;
+.github {
+ padding-top: 0.5rem;
}
-h4{
+h4 {
font-size: 1.2rem;
padding-bottom: 0.2rem;
}
-p{
+p {
font-size: 1.2rem;
}
@@ -50,4 +50,8 @@ p{
.footer-container {
grid-template-columns: 1fr;
}
-}
\ No newline at end of file
+ h4 {
+ font-size: 1rem;
+ padding-bottom: 0.2rem;
+ }
+}
diff --git a/src/Components/HeroSec/HeroSec.css b/src/Components/HeroSec/HeroSec.css
index 9ac332f..56dc8a1 100644
--- a/src/Components/HeroSec/HeroSec.css
+++ b/src/Components/HeroSec/HeroSec.css
@@ -1,13 +1,14 @@
-.hero-img{
+.hero-img {
width: 100%;
- background: rgba(0,0,0,0.5);
+ background: rgba(0, 0, 0, 0.5);
height: 60vh;
position: relative;
}
-.hero-img::before{
+.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%;
@@ -18,7 +19,7 @@
z-index: -1;
}
-.heading{
+.heading {
display: flex;
width: 100%;
height: 100%;
@@ -27,7 +28,7 @@
align-items: center;
}
-.hero-img h1{
+.hero-img h1 {
font-size: 2.4rem;
}
@@ -37,7 +38,12 @@
}
@media screen and (max-width: 640px) {
- .hero-img h1{
+ .hero-img h1 {
font-size: 2rem;
}
-}
\ No newline at end of file
+ .hero-img p {
+ font-size: 1.2rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+}
diff --git a/src/Components/WorkCard/WorkCard.css b/src/Components/WorkCard/WorkCard.css
index 4025fd0..4ad0baf 100644
--- a/src/Components/WorkCard/WorkCard.css
+++ b/src/Components/WorkCard/WorkCard.css
@@ -1,4 +1,4 @@
-.project-heading{
+.project-heading {
text-align: center;
padding: 4rem 0 2rem 0;
}
@@ -12,27 +12,34 @@
padding-bottom: 5rem;
}
-.project-card{
- background: #1a1919;
- padding: 1.2rem 1rem;
+.project-card {
+ 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{
+.project-card img {
width: 100%;
}
-.project-title{
+.project-title {
+ font-size: 1.9rem;
color: #fff;
padding: 1rem 0;
}
-.pro-details p{
- padding-bottom: 1rem;
+.pro-details p {
font-size: 1.1rem;
text-align: justify;
+ flex-grow: 1; /* Takes up remaining space */
}
-.pro-btns{
+.pro-btns {
display: flex;
justify-content: space-between;
align-items: center;
@@ -43,10 +50,10 @@
padding: 0.5rem 1rem;
}
-@media screen and (max-width: 950px){
- .project-container{
+@media screen and (max-width: 950px) {
+ .project-container {
max-width: 90%;
margin: auto;
grid-template-columns: 1fr;
}
-}
\ No newline at end of file
+}
diff --git a/src/Components/WorkData/PersonalProjects.js b/src/Components/WorkData/PersonalProjects.js
index 62cad57..8bffdec 100644
--- a/src/Components/WorkData/PersonalProjects.js
+++ b/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;
diff --git a/src/index.css b/src/index.css
index 1729545..7e63ca5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,29 +1,32 @@
-@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{
+body {
background: #000;
}
-h1, h4, p, a{
+h1,
+h4,
+p,
+a {
color: #fff;
text-decoration: none;
}
-ul{
+ul {
list-style: none;
}
-.btn{
+.btn {
padding: 12px 32px;
font: 1rem;
- background: rgb(248,217,15);
+ background: rgb(248, 217, 15);
color: #222;
border: 1px solid #fff;
text-transform: uppercase;
@@ -31,13 +34,19 @@ ul{
cursor: pointer;
}
-.btn-light{
+.btn-light {
background: transparent;
color: #fff;
}
-.btn:hover{
- background: rgba(255, 255, 255,0.2);
+.btn:hover {
+ background: rgba(255, 255, 255, 0.2);
color: #fff;
transition: 0.3s;
}
+
+@media screen and (max-width: 640px) {
+ .btn {
+ font-size: x-small;
+ }
+}