feat: Added personal website
This commit is contained in:
Lino Silva
@@ -0,0 +1,243 @@
|
||||
.landing {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.landing--container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.landing--img {
|
||||
--img-size: 400px;
|
||||
position: absolute;
|
||||
left: 35%;
|
||||
transform: translateX(-50%);
|
||||
width: var(--img-size);
|
||||
height: var(--img-size);
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.landing--container-left {
|
||||
flex: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.lcl--content {
|
||||
margin: 3rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.landing--social {
|
||||
font-size: 35px;
|
||||
margin: 0 1rem;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.landing--social:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.landing--container-right {
|
||||
flex: 65%;
|
||||
height: 100%;
|
||||
background-color: #eaeaea;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lcr--content {
|
||||
width: 45%;
|
||||
margin-right: 7rem;
|
||||
font-family: var(--primaryFont);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.lcr--content h6 {
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: -0.85rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.lcr--content h1 {
|
||||
font-weight: 600;
|
||||
font-size: 3.25rem;
|
||||
line-height: 110%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.lcr--content p {
|
||||
margin-top: 1.45rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.15rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.lcr-buttonContainer {
|
||||
margin-top: 2rem;
|
||||
width: 350px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-family: "var(--primaryFont)", sans-serif;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.landing--img {
|
||||
--img-size: 350px;
|
||||
}
|
||||
.lcl--content {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.lcr--content h6 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.lcr--content h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.lcr--content p {
|
||||
margin-top: 0.3rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.lcr-buttonContainer {
|
||||
margin-top: 1rem;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.landing--img {
|
||||
--img-size: 300px;
|
||||
}
|
||||
|
||||
.landing--social {
|
||||
font-size: 30px;
|
||||
}
|
||||
.lcr--content {
|
||||
width: 60%;
|
||||
margin-top: 10%;
|
||||
margin-right: 6%;
|
||||
}
|
||||
|
||||
.lcr-buttonContainer {
|
||||
margin-top: 1rem;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.lcr-buttonContainer button:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.landing--container {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.landing--img {
|
||||
--img-size: 200px;
|
||||
left: 50%;
|
||||
top: 30%;
|
||||
border: 8px solid #eaeaea;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.landing--container-left {
|
||||
flex: initial;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
}
|
||||
.landing--social {
|
||||
display: none;
|
||||
}
|
||||
.landing--container-right {
|
||||
box-sizing: border-box;
|
||||
padding: 0 2rem;
|
||||
flex: initial;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
background-color: #eaeaea;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
.lcr--content {
|
||||
margin-top: 20%;
|
||||
margin-right: initial;
|
||||
width: 100%;
|
||||
}
|
||||
.lcr--content h6 {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.lcr--content h1 {
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.lcr--content p {
|
||||
font-size: 0.95rem;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
}
|
||||
.lcr-buttonContainer {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.lcr-buttonContainer button {
|
||||
margin-top: -20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.lcr--content {
|
||||
margin-top: 35%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 370px) {
|
||||
.lcr--content {
|
||||
margin-top: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {
|
||||
.landing {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.landing--img {
|
||||
--img-size: 150px;
|
||||
left: 50%;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
import React, { useContext } from "react";
|
||||
import { Button } from "@material-ui/core";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
import "./Landing.css";
|
||||
import { ThemeContext } from "../../contexts/ThemeContext";
|
||||
import { headerData } from "../../data/headerData";
|
||||
import { socialsData } from "../../data/socialsData";
|
||||
import { ReactComponent as PrintablesLogo } from "../../assets/svg/printables.svg";
|
||||
|
||||
import {
|
||||
FaTwitter,
|
||||
FaLinkedin,
|
||||
FaGithub,
|
||||
FaMastodon,
|
||||
FaTwitch,
|
||||
FaYoutube,
|
||||
FaBlogger,
|
||||
FaStackOverflow,
|
||||
} from "react-icons/fa";
|
||||
|
||||
function Landing() {
|
||||
const { theme, drawerOpen } = useContext(ThemeContext);
|
||||
|
||||
const useStyles = makeStyles((t) => ({
|
||||
resumeBtn: {
|
||||
color: theme.primary,
|
||||
borderRadius: "30px",
|
||||
textTransform: "inherit",
|
||||
textDecoration: "none",
|
||||
width: "150px",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "500",
|
||||
height: "50px",
|
||||
fontFamily: "var(--primaryFont)",
|
||||
border: `3px solid ${theme.primary}`,
|
||||
transition: "100ms ease-out",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.tertiary,
|
||||
color: theme.secondary,
|
||||
border: `3px solid ${theme.tertiary}`,
|
||||
},
|
||||
[t.breakpoints.down("sm")]: {
|
||||
width: "180px",
|
||||
},
|
||||
},
|
||||
contactBtn: {
|
||||
backgroundColor: theme.primary,
|
||||
color: theme.secondary,
|
||||
borderRadius: "30px",
|
||||
textTransform: "inherit",
|
||||
textDecoration: "none",
|
||||
width: "150px",
|
||||
height: "50px",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "500",
|
||||
fontFamily: "var(--primaryFont)",
|
||||
border: `3px solid ${theme.primary}`,
|
||||
transition: "100ms ease-out",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.secondary,
|
||||
color: theme.tertiary,
|
||||
border: `3px solid ${theme.tertiary}`,
|
||||
},
|
||||
[t.breakpoints.down("sm")]: {
|
||||
display: "none",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<div className="landing">
|
||||
<div className="landing--container">
|
||||
<div
|
||||
className="landing--container-left"
|
||||
style={{ backgroundColor: theme.primary }}
|
||||
>
|
||||
<div className="lcl--content">
|
||||
{socialsData.linkedIn && (
|
||||
<a href={socialsData.linkedIn} target="_blank" rel="noreferrer">
|
||||
<FaLinkedin
|
||||
className="landing--social"
|
||||
style={{ color: theme.secondary }}
|
||||
aria-label="LinkedIn"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{socialsData.github && (
|
||||
<a href={socialsData.github} target="_blank" rel="noreferrer">
|
||||
<FaGithub
|
||||
className="landing--social"
|
||||
style={{ color: theme.secondary }}
|
||||
aria-label="GitHub"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{socialsData.stackOverflow && (
|
||||
<a
|
||||
href={socialsData.stackOverflow}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<FaStackOverflow
|
||||
className="landing--social"
|
||||
style={{ color: theme.secondary }}
|
||||
aria-label="Stack Overflow"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{socialsData.twitter && (
|
||||
<a href={socialsData.twitter} target="_blank" rel="noreferrer">
|
||||
<FaTwitter
|
||||
className="landing--social"
|
||||
style={{ color: theme.secondary }}
|
||||
aria-label="Twitter"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{socialsData.youtube && (
|
||||
<a href={socialsData.youtube} target="_blank" rel="noreferrer">
|
||||
<FaYoutube
|
||||
className="landing--social"
|
||||
style={{ color: theme.secondary }}
|
||||
aria-label="YouTube"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{socialsData.blogger && (
|
||||
<a href={socialsData.blogger} target="_blank" rel="noreferrer">
|
||||
<FaBlogger
|
||||
className="landing--social"
|
||||
style={{ color: theme.secondary }}
|
||||
aria-label="Blogger"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{socialsData.mastodon && (
|
||||
<a href={socialsData.mastodon} target="_blank" rel="noreferrer">
|
||||
<FaMastodon
|
||||
className="landing--social"
|
||||
style={{ color: theme.secondary }}
|
||||
aria-label="Mastodon"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{socialsData.twitch && (
|
||||
<a href={socialsData.twitch} target="_blank" rel="noreferrer">
|
||||
<FaTwitch
|
||||
className="landing--social"
|
||||
style={{ color: theme.secondary }}
|
||||
aria-label="TwFaTwitch"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{socialsData.printables && (
|
||||
<a href={socialsData.printables} target="_blank" rel="noreferrer">
|
||||
<PrintablesLogo
|
||||
className="landing--social"
|
||||
style={{ color: theme.secondary }}
|
||||
aria-label="Printables"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src={headerData.image}
|
||||
alt=""
|
||||
className="landing--img"
|
||||
style={{
|
||||
opacity: `${drawerOpen ? "0" : "1"}`,
|
||||
borderColor: theme.secondary,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="landing--container-right"
|
||||
style={{ backgroundColor: theme.secondary }}
|
||||
>
|
||||
<div className="lcr--content" style={{ color: theme.tertiary }}>
|
||||
<h6>{headerData.title}</h6>
|
||||
<h1>{headerData.name}</h1>
|
||||
<p>{headerData.description}</p>
|
||||
<p>{headerData.description2}</p>
|
||||
|
||||
<div className="lcr-buttonContainer">
|
||||
{headerData.resumePdf && (
|
||||
<a
|
||||
href={headerData.resumePdf}
|
||||
download="resume"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Button className={classes.resumeBtn}>Download CV</Button>
|
||||
</a>
|
||||
)}
|
||||
<a href="mailto:me@lino.cooking">
|
||||
<Button className={classes.contactBtn}>Contact</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Landing;
|
||||
@@ -0,0 +1,86 @@
|
||||
.navbar {
|
||||
height: 6.5rem;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar--container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 3rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.navbar--container > h1 {
|
||||
font-family: 'BestermindRegular';
|
||||
color: var(--primary-2);
|
||||
font-size: 2.5rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.navLink--container {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.drawer > .MuiBackdrop-root {
|
||||
background: rgba(33, 33, 33, 0.15) !important;
|
||||
backdrop-filter: blur(20px) !important;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:1100px) {
|
||||
.navbar--container{
|
||||
padding: 0 2rem;
|
||||
}
|
||||
.navbar--container > h1{
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
.nav-menu{
|
||||
font-size: 2.2rem;
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:800px) {
|
||||
.navLink--container {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:600px) {
|
||||
.nav-menu{
|
||||
color: var(--primary-2);
|
||||
}
|
||||
.navbar--container > h1{
|
||||
font-size: 2rem;
|
||||
}
|
||||
.nav-menu:hover{
|
||||
color: var(--primary-2);
|
||||
}
|
||||
.MuiDrawer-paper{
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width:
|
||||
480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {
|
||||
.navbar {
|
||||
height: 5rem;
|
||||
}
|
||||
.navbar--container {
|
||||
padding: 0 1rem;
|
||||
margin-top: 0rem;
|
||||
}
|
||||
.navbar--container > h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import React, { useContext } from "react";
|
||||
|
||||
import "./Navbar.css";
|
||||
import { headerData } from "../../data/headerData";
|
||||
import { ThemeContext } from "../../contexts/ThemeContext";
|
||||
|
||||
function Navbar() {
|
||||
const { theme } = useContext(ThemeContext);
|
||||
|
||||
const shortname = (name) => {
|
||||
if (name.length > 12) {
|
||||
return name.split(" ")[0];
|
||||
} else {
|
||||
return name;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="navbar">
|
||||
<div className="navbar--container">
|
||||
<h1 style={{ color: theme.secondary }}>{shortname(headerData.name)}</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as Navbar } from "./Navbar/Navbar";
|
||||
export { default as Landing } from "./Landing/Landing";
|
||||
Reference in New Issue
Block a user