feat: Added personal website
This commit is contained in:
Lino Silva
Generated
+22967
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "developer-portfolio",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.12.2",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"axios": "^0.21.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-fast-marquee": "^1.2.1",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-icons": "^4.2.0",
|
||||
"react-reveal": "^1.2.2",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-router-hash-link": "^2.4.3",
|
||||
"react-scripts": "^4.0.3",
|
||||
"react-slick": "^0.28.1",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"validator": "^13.6.0",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
|
||||
"build": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
|
||||
"deploy": "export SET NODE_OPTIONS=--openssl-legacy-provider && scp -r build/* root@10.0.2.15:/data/swag/config/www",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
/* /index.html 200
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 493 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Lino Silva" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<meta name="description" content="Lino Silva - Personal Website" />
|
||||
<meta property="og:image" content="Lino Silva - Personal Website">
|
||||
<meta property="og:site_name" content="Lino Silva - Personal Website"/>
|
||||
<meta property="og:title" content="Lino Silva"/>
|
||||
<meta property="og:url" content="https://lino.cooking"/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="Lino Silva - Personal Website"/>
|
||||
|
||||
<meta itemprop="name" content="Lino Silva"/>
|
||||
<meta itemprop="url" content="https://lino.cooking"/>
|
||||
<meta itemprop="description" content="Lino Silva - Personal Website"/>
|
||||
<meta itemprop="thumbnailUrl" content=""/>
|
||||
|
||||
<meta name="twitter:url" content="https://lino.cooking"/>
|
||||
<meta name="twitter:title" content="Lino Silva">
|
||||
<meta name="twitter:description" content="Lino Silva - Personal Website">
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
|
||||
<title>Lino Silva</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "Lino Silva",
|
||||
"name": "Lino Silva - Personal Website",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "favicon.png",
|
||||
"type": "image/png",
|
||||
"sizes": "64x64"
|
||||
},
|
||||
{
|
||||
"src": "favicon512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@@ -0,0 +1,6 @@
|
||||
:root {
|
||||
--primaryFont: 'Poppins', sans-serif;
|
||||
/* --primaryFont: 'Montserrat', sans-serif; */
|
||||
/* --primaryFont: 'Raleway', sans-serif; */
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
// import React, { useContext } from 'react';
|
||||
import React from "react";
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Route,
|
||||
Switch,
|
||||
Redirect,
|
||||
} from "react-router-dom";
|
||||
|
||||
import { Main } from "./pages";
|
||||
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route path="/" exact component={Main} />
|
||||
|
||||
<Redirect to="/" />
|
||||
</Switch>
|
||||
</Router>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 777 KiB |
Binary file not shown.
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="35" viewBox="0 0 24 35" fill="currentColor"><g><path d="m0 35 12.172-7L0 21ZM12.172 0 0 7l12.172 7v14l12.172-7V7Z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 191 B |
@@ -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";
|
||||
@@ -0,0 +1,27 @@
|
||||
import React, { createContext, useState } from 'react'
|
||||
|
||||
import { themeData } from '../data/themeData'
|
||||
|
||||
export const ThemeContext = createContext()
|
||||
|
||||
function ThemeContextProvider(props) {
|
||||
// eslint-disable-next-line
|
||||
const [theme, setTheme] = useState(themeData.theme)
|
||||
const [drawerOpen, setDrawerOpen] = useState(false)
|
||||
|
||||
const setHandleDrawer = () => {
|
||||
setDrawerOpen(!drawerOpen)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const value = { theme, drawerOpen, setHandleDrawer }
|
||||
return (
|
||||
<ThemeContext.Provider value={value}>
|
||||
{props.children}
|
||||
</ThemeContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default ThemeContextProvider
|
||||
@@ -0,0 +1,13 @@
|
||||
import resume from "../assets/pdf/Lino_Silva_-_Resume.pdf";
|
||||
import image from "../assets/jpeg/profile.jpeg";
|
||||
|
||||
export const headerData = {
|
||||
name: "Lino Silva",
|
||||
title: "",
|
||||
description:
|
||||
"I'm an Engineer and tinkerer at heart, with over 15 years of experience on the tech / e-commerce / fashion / luxury / retail / crypto market.",
|
||||
description2:
|
||||
"Currently self-employed and not actively looking for new opportunities, but always open to connect with like-minded professionals.",
|
||||
image: image,
|
||||
resumePdf: resume,
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
export const socialsData = {
|
||||
github: "https://github.com/lino-silva",
|
||||
linkedIn: "https://www.linkedin.com/in/linosilva/",
|
||||
stackOverflow: "https://stackoverflow.com/users/717007/lino-silva",
|
||||
mastodon: "https://social.lino.cooking/@lino",
|
||||
twitch: "https://www.twitch.tv/linosilva",
|
||||
printables: "https://www.printables.com/@linosilva_87854",
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
/* eslint-disable */
|
||||
import {
|
||||
greenThemeLight, greenThemeDark, bwThemeLight, bwThemeDark, blueThemeLight, blueThemeDark, redThemeLight, redThemeDark, orangeThemeLight, orangeThemeDark, purpleThemeLight, purpleThemeDark, pinkThemeLight, pinkThemeDark, yellowThemeLight, yellowThemeDark
|
||||
} from '../theme/theme'
|
||||
|
||||
|
||||
export const themeData = {
|
||||
theme: orangeThemeDark
|
||||
}
|
||||
|
||||
|
||||
// Choose theme from above
|
||||
@@ -0,0 +1,63 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@100;300;400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,200;1,300;1,400&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap');
|
||||
|
||||
@font-face {
|
||||
font-family: 'BestermindRegular';
|
||||
src: url('./assets/fonts/Bestermind/BestermindRegular.ttf');
|
||||
src: url('./assets/fonts/Bestermind/BestermindRegular.ttf') format('embedded-opentype'),
|
||||
url('./assets/fonts/Bestermind/BestermindRegular.ttf') format('truetype'),
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* scrollBar */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #555;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #555;
|
||||
border-radius: 10px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
img{
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@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) {
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import ThemeContextProvider from './contexts/ThemeContext'
|
||||
|
||||
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
ReactDOM.render(
|
||||
<ThemeContextProvider>
|
||||
<App />
|
||||
</ThemeContextProvider>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
|
||||
reportWebVitals();
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
import { Helmet } from "react-helmet";
|
||||
|
||||
import { Navbar, Landing } from "../../components";
|
||||
import { headerData } from "../../data/headerData";
|
||||
|
||||
function Main() {
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>{headerData.name} - Software Engineer</title>
|
||||
</Helmet>
|
||||
<Navbar />
|
||||
<Landing />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Main;
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Main } from "./Main/Main";
|
||||
@@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
@@ -0,0 +1,266 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export const greenThemeLight = {
|
||||
type: "light",
|
||||
primary: "#3fc337",
|
||||
primary400: "#57d750",
|
||||
primary600: "#29c51f",
|
||||
primary80: "#3fc337cc",
|
||||
primary50: "#3fc33780",
|
||||
primary30: "#3fc3374d",
|
||||
secondary: "#EAEAEA",
|
||||
secondary70: "#EAEAEAb3",
|
||||
secondary50: "#EAEAEA80",
|
||||
tertiary: "#212121",
|
||||
tertiary80: "#212121cc",
|
||||
tertiary70: "#212121b3",
|
||||
tertiary50: "#21212180",
|
||||
};
|
||||
|
||||
export const greenThemeDark = {
|
||||
type: "dark",
|
||||
primary: "#3fc337",
|
||||
primary400: "#57d750",
|
||||
primary600: "#29c51f",
|
||||
primary80: "#3fc337cc",
|
||||
primary50: "#3fc33780",
|
||||
primary30: "#3fc3374d",
|
||||
secondary: "#212121",
|
||||
secondary70: "#212121b3",
|
||||
secondary50: "#21212180",
|
||||
tertiary: "#eaeaea",
|
||||
tertiary80: "#eaeaeacc",
|
||||
tertiary70: "#eaeaeab3",
|
||||
tertiary50: "#eaeaea80",
|
||||
};
|
||||
export const bwThemeLight = {
|
||||
type: "light",
|
||||
primary: "#000000",
|
||||
primary400: "#000000",
|
||||
primary600: "#000000",
|
||||
primary80: "#000000cc",
|
||||
primary50: "#00000080",
|
||||
primary30: "#0000004d",
|
||||
secondary: "#EAEAEA",
|
||||
secondary70: "#EAEAEAb3",
|
||||
secondary50: "#EAEAEA80",
|
||||
tertiary: "#212121",
|
||||
tertiary80: "#212121cc",
|
||||
tertiary70: "#212121b3",
|
||||
tertiary50: "#21212180",
|
||||
};
|
||||
export const bwThemeDark = {
|
||||
type: "dark",
|
||||
primary: "#B6B6B6",
|
||||
primary400: "#B6B6B6",
|
||||
primary600: "#B6B6B6",
|
||||
primary80: "#B6B6B6cc",
|
||||
primary50: "#B6B6B680",
|
||||
primary30: "#B6B6B64d",
|
||||
secondary: "#212121",
|
||||
secondary70: "#212121b3",
|
||||
secondary50: "#21212180",
|
||||
tertiary: "#eaeaea",
|
||||
tertiary80: "#eaeaeacc",
|
||||
tertiary70: "#eaeaeab3",
|
||||
tertiary50: "#eaeaea80",
|
||||
};
|
||||
|
||||
export const blueThemeLight = {
|
||||
type: "light",
|
||||
primary: "#545fc4",
|
||||
primary400: "#6e76c7",
|
||||
primary600: "#3644c9",
|
||||
primary80: "#545fc4cc",
|
||||
primary50: "#545fc480",
|
||||
primary30: "#545fc44d",
|
||||
secondary: "#eaeaea",
|
||||
secondary70: "#eaeaeab3",
|
||||
secondary50: "#eaeaea80",
|
||||
tertiary: "#212121",
|
||||
tertiary80: "#212121cc",
|
||||
tertiary70: "#212121b3",
|
||||
tertiary50: "#21212180",
|
||||
};
|
||||
export const blueThemeDark = {
|
||||
type: "dark",
|
||||
primary: "#545fc4",
|
||||
primary400: "#6e76c7",
|
||||
primary600: "#3644c9",
|
||||
primary80: "#545fc4cc",
|
||||
primary50: "#545fc480",
|
||||
primary30: "#545fc44d",
|
||||
secondary: "#212121",
|
||||
secondary70: "#212121b3",
|
||||
secondary50: "#21212180",
|
||||
tertiary: "#eaeaea",
|
||||
tertiary80: "#eaeaeacc",
|
||||
tertiary70: "#eaeaeab3",
|
||||
tertiary50: "#eaeaea80",
|
||||
};
|
||||
|
||||
export const redThemeLight = {
|
||||
type: "light",
|
||||
primary: "#f03939",
|
||||
primary400: "#dd4d4d",
|
||||
primary600: "#ea2424",
|
||||
primary80: "#f03939cc",
|
||||
primary50: "#f0393980",
|
||||
primary30: "#f039394d",
|
||||
secondary: "#eaeaea",
|
||||
secondary70: "#eaeaeab3",
|
||||
secondary50: "#eaeaea80",
|
||||
tertiary: "#212121",
|
||||
tertiary80: "#212121cc",
|
||||
tertiary70: "#212121b3",
|
||||
tertiary50: "#21212180",
|
||||
};
|
||||
export const redThemeDark = {
|
||||
type: "dark",
|
||||
primary: "#f03939",
|
||||
primary400: "#dd4d4d",
|
||||
primary600: "#ea2424",
|
||||
primary80: "#f03939cc",
|
||||
primary50: "#f0393980",
|
||||
primary30: "#f039394d",
|
||||
secondary: "#212121",
|
||||
secondary70: "#212121b3",
|
||||
secondary50: "#21212180",
|
||||
tertiary: "#eaeaea",
|
||||
tertiary80: "#eaeaeacc",
|
||||
tertiary70: "#eaeaeab3",
|
||||
tertiary50: "#eaeaea80",
|
||||
};
|
||||
|
||||
export const orangeThemeLight = {
|
||||
type: "light",
|
||||
primary: "#f56539",
|
||||
primary400: "#ff764d",
|
||||
primary600: "#fa5624",
|
||||
primary80: "#f56539cc",
|
||||
primary50: "#f5653980",
|
||||
primary30: "#f565394d",
|
||||
secondary: "#eaeaea",
|
||||
secondary70: "#eaeaeab3",
|
||||
secondary50: "#eaeaea80",
|
||||
tertiary: "#212121",
|
||||
tertiary80: "#212121cc",
|
||||
tertiary70: "#212121b3",
|
||||
tertiary50: "#21212180",
|
||||
};
|
||||
export const orangeThemeDark = {
|
||||
type: "dark",
|
||||
primary: "#f56539",
|
||||
primary400: "#ff764d",
|
||||
primary600: "#fa5624",
|
||||
primary80: "#f56539cc",
|
||||
primary50: "#f5653980",
|
||||
primary30: "#f565394d",
|
||||
secondary: "#212121",
|
||||
secondary70: "#212121b3",
|
||||
secondary50: "#21212180",
|
||||
tertiary: "#eaeaea",
|
||||
tertiary80: "#eaeaeacc",
|
||||
tertiary70: "#eaeaeab3",
|
||||
tertiary50: "#eaeaea80",
|
||||
};
|
||||
|
||||
export const purpleThemeLight = {
|
||||
type: "light",
|
||||
primary: "#823ae0",
|
||||
primary400: "#9456e5",
|
||||
primary600: "#762ad9",
|
||||
primary80: "#823ae0cc",
|
||||
primary50: "#823ae080",
|
||||
primary30: "#823ae04d",
|
||||
secondary: "#eaeaea",
|
||||
secondary70: "#eaeaeab3",
|
||||
secondary50: "#eaeaea80",
|
||||
tertiary: "#212121",
|
||||
tertiary80: "#212121cc",
|
||||
tertiary70: "#212121b3",
|
||||
tertiary50: "#21212180",
|
||||
};
|
||||
export const purpleThemeDark = {
|
||||
type: "dark",
|
||||
primary: "#823ae0",
|
||||
primary400: "#9456e5",
|
||||
primary600: "#762ad9",
|
||||
primary80: "#823ae0cc",
|
||||
primary50: "#823ae080",
|
||||
primary30: "#823ae04d",
|
||||
secondary: "#212121",
|
||||
secondary70: "#212121b3",
|
||||
secondary50: "#21212180",
|
||||
tertiary: "#eaeaea",
|
||||
tertiary80: "#eaeaeacc",
|
||||
tertiary70: "#eaeaeab3",
|
||||
tertiary50: "#eaeaea80",
|
||||
};
|
||||
|
||||
export const pinkThemeLight = {
|
||||
type: "light",
|
||||
primary: "#ff4f93",
|
||||
primary400: "#e56f9d",
|
||||
primary600: "#e14381",
|
||||
primary80: "#ff4f93cc",
|
||||
primary50: "#ff4f9380",
|
||||
primary30: "#ff4f934d",
|
||||
secondary: "#eaeaea",
|
||||
secondary70: "#eaeaeab3",
|
||||
secondary50: "#eaeaea80",
|
||||
tertiary: "#212121",
|
||||
tertiary80: "#212121cc",
|
||||
tertiary70: "#212121b3",
|
||||
tertiary50: "#21212180",
|
||||
};
|
||||
export const pinkThemeDark = {
|
||||
type: "dark",
|
||||
primary: "#ff4f93",
|
||||
primary400: "#e56f9d",
|
||||
primary600: "#e14381",
|
||||
primary80: "#ff4f93cc",
|
||||
primary50: "#ff4f9380",
|
||||
primary30: "#ff4f934d",
|
||||
secondary: "#212121",
|
||||
secondary70: "#212121b3",
|
||||
secondary50: "#21212180",
|
||||
tertiary: "#eaeaea",
|
||||
tertiary80: "#eaeaeacc",
|
||||
tertiary70: "#eaeaeab3",
|
||||
tertiary50: "#eaeaea80",
|
||||
};
|
||||
|
||||
export const yellowThemeLight = {
|
||||
type: "light",
|
||||
primary: "#E9AD35",
|
||||
primary400: "#e8b44c",
|
||||
primary600: "#eeac2a",
|
||||
primary80: "#E9AD35cc",
|
||||
primary50: "#E9AD3580",
|
||||
primary30: "#E9AD354d",
|
||||
secondary: "#eaeaea",
|
||||
secondary70: "#eaeaeab3",
|
||||
secondary50: "#eaeaea80",
|
||||
tertiary: "#212121",
|
||||
tertiary80: "#212121cc",
|
||||
tertiary70: "#212121b3",
|
||||
tertiary50: "#21212180",
|
||||
};
|
||||
|
||||
export const yellowThemeDark = {
|
||||
type: "dark",
|
||||
primary: "#E9AD35",
|
||||
primary400: "#e8b44c",
|
||||
primary600: "#eeac2a",
|
||||
primary80: "#E9AD35cc",
|
||||
primary50: "#E9AD3580",
|
||||
primary30: "#E9AD354d",
|
||||
secondary: "#212121",
|
||||
secondary70: "#212121b3",
|
||||
secondary50: "#21212180",
|
||||
tertiary: "#eaeaea",
|
||||
tertiary80: "#eaeaeacc",
|
||||
tertiary70: "#eaeaeab3",
|
||||
tertiary50: "#eaeaea80",
|
||||
};
|
||||
+12705
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user