feat: Added personal website

.gitignore

@@ -1,2 +1,9 @@
 .vault_pass
 *.retry
+
+website/node_modules/
+website/build/
+website/dist/
+*.log
+*.tmp
+*.bak

ansible/inventories/group_vars/all/main.yml

@@ -220,3 +220,7 @@ tinyauth_port: 3000
 tinyauth_oidc_provider: "https://auth.{{ domain }}"
 tinyauth_client_id: "{{ vault_tinyauth_client_id }}"
 tinyauth_client_secret: "{{ vault_tinyauth_client_secret }}"
+
+# Website configuration (root domain)
+website_host: 10.0.4.10
+website_port: 8080

ansible/inventories/production.yml

@@ -10,7 +10,7 @@ all:
           ansible_host: 10.0.4.1
         edge-2:
           ansible_host: 10.0.4.2
-    purah:
+    infra:
       hosts:
         infra-core-1:
           ansible_host: 10.0.4.10

ansible/playbooks/provision_vms.yml

@@ -12,13 +12,14 @@
     - keepalived
     - traefik
 
-- hosts: purah
+- hosts: infra
   become: yes
   roles:
     - base
     - docker
     - tinyauth
     - pocketid
+    - website
 
 # - hosts: all
 #   become: yes

ansible/roles/traefik/templates/remote-services.yml.j2

@@ -47,6 +47,14 @@ http:
       tls:
         certResolver: cloudflare
 
+    website:
+      rule: "Host(`{{ domain }}`)"
+      entryPoints:
+        - https
+      service: website
+      tls:
+        certResolver: cloudflare
+
     # Static services - HTTP to HTTPS redirect
     traefik-redirect:
       rule: "Host(`traefik.{{ domain }}`)"
@@ -72,6 +80,14 @@ http:
         - traefik-https-redirect
       service: tinyauth
 
+    website-redirect:
+      rule: "Host(`{{ domain }}`)"
+      entryPoints:
+        - http
+      middlewares:
+        - traefik-https-redirect
+      service: website
+
     # Auto-configured services - HTTPS
 {% for service_name, config in auto_configure_traefik.items() %}
 {% if config.auth_bypass_paths is defined %}
@@ -152,6 +168,12 @@ http:
         servers:
           - url: "http://{{ tinyauth_host }}:{{ tinyauth_port }}"
 
+    website:
+      loadBalancer:
+        passHostHeader: true
+        servers:
+          - url: "http://{{ website_host }}:{{ website_port }}"
+
     # Auto-configured services
 {% for service_name, config in auto_configure_traefik.items() %}
     {{ service_name }}:

ansible/roles/website/tasks/main.yml

@@ -0,0 +1,44 @@
+---
+- name: Install rsync
+  apt:
+    name: rsync
+    state: present
+    update_cache: yes
+
+- name: Ensure website directory exists
+  file:
+    path: /opt/website
+    state: directory
+    mode: '0755'
+
+- name: Ensure website html directory exists
+  file:
+    path: /opt/website/html
+    state: directory
+    mode: '0755'
+
+- name: Copy website build files
+  synchronize:
+    src: "{{ playbook_dir }}/../../website/build/"
+    dest: /opt/website/html/
+    delete: yes
+    recursive: yes
+  delegate_to: localhost
+  become: no
+
+- name: Deploy nginx configuration
+  template:
+    src: nginx.conf.j2
+    dest: /opt/website/nginx.conf
+    mode: '0644'
+
+- name: Deploy website docker-compose
+  template:
+    src: docker-compose.yml.j2
+    dest: /opt/website/docker-compose.yml
+    mode: '0644'
+
+- name: Start website container
+  shell: cd /opt/website && docker compose down && docker compose up -d
+  args:
+    chdir: /opt/website

ansible/roles/website/templates/docker-compose.yml.j2

@@ -0,0 +1,10 @@
+services:
+  website:
+    image: nginx:alpine
+    container_name: website
+    restart: unless-stopped
+    ports:
+      - "{{ website_port }}:80"
+    volumes:
+      - ./html:/usr/share/nginx/html:ro
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro

ansible/roles/website/templates/nginx.conf.j2

@@ -0,0 +1,28 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # SPA routing - serve index.html for all routes
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript;
+}

website/package.json

@@ -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"
+    ]
+  }
+}

website/public/_redirects

@@ -0,0 +1 @@
+/*    /index.html  200

website/public/index.html

@@ -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>

website/public/manifest.json

@@ -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"
+}

website/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

website/src/App.css

@@ -0,0 +1,6 @@
+:root {
+    --primaryFont: 'Poppins', sans-serif;
+    /* --primaryFont: 'Montserrat', sans-serif; */
+    /* --primaryFont: 'Raleway', sans-serif; */
+}
+

website/src/App.js

@@ -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;

website/src/assets/svg/printables.svg

@@ -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>

website/src/components/Landing/Landing.css

@@ -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%;
+  }
+}

website/src/components/Landing/Landing.js

@@ -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;

website/src/components/Navbar/Navbar.css

@@ -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;
+    }
+}

website/src/components/Navbar/Navbar.js

@@ -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;

website/src/components/index.js

@@ -0,0 +1,2 @@
+export { default as Navbar } from "./Navbar/Navbar";
+export { default as Landing } from "./Landing/Landing";

website/src/contexts/ThemeContext.js

@@ -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

website/src/data/headerData.js

@@ -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,
+};

website/src/data/socialsData.js

@@ -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",
+};

website/src/data/themeData.js

@@ -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

website/src/index.css

@@ -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;
+    }
+}

website/src/index.js

@@ -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();

website/src/pages/Main/Main.js

@@ -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;

website/src/pages/index.js

@@ -0,0 +1 @@
+export { default as Main } from "./Main/Main";

website/src/reportWebVitals.js

@@ -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;

website/src/theme/theme.js

@@ -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",
+};