Added CV Pdf + Small fixes
This commit is contained in:
Binary file not shown.
@@ -1,4 +1,4 @@
|
||||
.about{
|
||||
.about {
|
||||
width: 100%;
|
||||
margin: 3rem 0;
|
||||
display: flex;
|
||||
@@ -8,26 +8,30 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.about .left{
|
||||
.about .left {
|
||||
margin: 4rem;
|
||||
padding: 0.1rem;
|
||||
max-width: 45rem;
|
||||
}
|
||||
|
||||
.about .left p{
|
||||
.about .left p {
|
||||
margin: 1.2rem 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.about .right{
|
||||
.about .right {
|
||||
max-width: 700px;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 950px) {
|
||||
.button-container {
|
||||
display: flex;
|
||||
gap: 1rem; /* Adjust the gap as needed */
|
||||
}
|
||||
|
||||
.logoPic{
|
||||
@media screen and (max-width: 950px) {
|
||||
.logoPic {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,9 +26,18 @@ const AboutContent = () => {
|
||||
development team. I am eager to continue developing my competencies
|
||||
and exploring new opportunities in the software industry.
|
||||
</p>
|
||||
<Link to="/contact">
|
||||
<button className="btn">Contact Me</button>
|
||||
</Link>
|
||||
<div className="button-container">
|
||||
<Link to="/contact">
|
||||
<button className="btn">Contact Me</button>
|
||||
</Link>
|
||||
<a
|
||||
href="/CV_Fernando_Videira.pdf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="btn">View CV</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
<img className="logoPic" src={Logo} alt="React" />
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
.hero-img p {
|
||||
font-size: 1.2rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
+20
-11
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user