Website Layout w/o Images
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
padding-right: 1rem;
|
||||
}
|
||||
@@ -3,8 +3,7 @@ import "./AboutContent.css";
|
||||
|
||||
import React from "react";
|
||||
|
||||
import React1 from "../../assets/react1.jpg";
|
||||
import React2 from "../../assets/react2.webp";
|
||||
import Logo from "../../assets/logo.svg";
|
||||
|
||||
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
|
||||
Bachelor of Engineering in Information Technology, after completing a
|
||||
CTeSP in programming, where I gained a solid foundation in C, .NET,
|
||||
PHP, Java, and MySQL. I have also enhanced my skills and knowledge by
|
||||
taking online courses in Unity 3D, Swift/SwiftUI, Cypress, Git, and
|
||||
React, and by working as a QA/QC at VOID Software, a leading software
|
||||
development company, for five months. There, I contributed to the
|
||||
testing and quality assurance of several projects, using Cypress and
|
||||
Cucumber to automate and streamline the testing process, and Git to
|
||||
manage the source code and collaborate with the development team. I am
|
||||
eager to continue developing my competencies and exploring new
|
||||
opportunities in the software industry.
|
||||
innovative and engaging applications. As mentioned, I am currently
|
||||
pursuing my Bachelor on Software Engineering after completing having
|
||||
completed a CTeSP in programming, where I gained a solid foundation in
|
||||
C, .NET, PHP, Java, and MySQL. I have also enhanced my skills and
|
||||
knowledge by taking online courses in Unity 3D, Swift/SwiftUI,
|
||||
Cypress, Git, and React, and by working as a QA/QC at VOID Software, a
|
||||
leading software development company, for five months. There, I
|
||||
contributed to the testing and quality assurance of several projects,
|
||||
using Cypress and Cucumber to automate and streamline the testing
|
||||
process, and Git to manage the source code and collaborate with the
|
||||
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>
|
||||
<div className="right">
|
||||
<div className="img-container">
|
||||
<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>
|
||||
<img src={Logo} alt="React" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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 = () => {
|
||||
|
||||
@@ -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">
|
||||
View
|
||||
</NavLink>
|
||||
{(props.view && props.view !== "/") ||
|
||||
(props.view && location.pathname !== "/") ? (
|
||||
<NavLink to={props.view} className="btn">
|
||||
View
|
||||
</NavLink>
|
||||
) : (
|
||||
<button disabled className="btn">
|
||||
View
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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: "Project 3",
|
||||
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",
|
||||
title: "RestGest",
|
||||
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.",
|
||||
view: "https://github.com/FernandoJVideira/PSI_DA_PL2_G",
|
||||
},
|
||||
];
|
||||
export default AcademicProjectCardData;
|
||||
|
||||
@@ -1,25 +1,21 @@
|
||||
import umbBot from "../../assets/umbreonbot.jpg";
|
||||
import pro2 from "../../assets/project2.png";
|
||||
import UmBot from "../../assets/umbreonbot.jpg";
|
||||
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: "Stuff&Go",
|
||||
text: "Stu",
|
||||
view: "https://github.com/FernandoJVideira/UmbreonBot",
|
||||
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.",
|
||||
view: "/",
|
||||
},
|
||||
{
|
||||
imgsrc: pro3,
|
||||
title: "Project 3",
|
||||
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",
|
||||
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.",
|
||||
},
|
||||
];
|
||||
export default PersonalProjectCardData;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
@@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user