diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml index fe461b4..0d4a013 100644 --- a/.github/workflows/dependency-review.yml +++ b/.github/workflows/dependency-review.yml @@ -15,6 +15,6 @@ jobs: runs-on: ubuntu-latest steps: - name: 'Checkout Repository' - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: 'Dependency Review' - uses: actions/dependency-review-action@v2 + uses: actions/dependency-review-action@v4 diff --git a/website/.prettierignore b/website/.prettierignore new file mode 100644 index 0000000..f6455c6 --- /dev/null +++ b/website/.prettierignore @@ -0,0 +1,4 @@ +# Ignore artifacts: +build +coverage +node_modules diff --git a/website/.prettierrc b/website/.prettierrc new file mode 100644 index 0000000..544138b --- /dev/null +++ b/website/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/website/applitools.config.cjs b/website/applitools.config.cjs index 49f428f..50b4c96 100644 --- a/website/applitools.config.cjs +++ b/website/applitools.config.cjs @@ -2,30 +2,29 @@ // It applies to all tests in this project. module.exports = { + // Concurrency refers to the number of visual checkpoints Applitools will perform in parallel. + testConcurrency: 5, - // Concurrency refers to the number of visual checkpoints Applitools will perform in parallel. - testConcurrency: 5, + // To connect visual test results to your account, + // you must set the `APPLITOOLS_API_KEY` environment variable to your Applitools API key. + // To find it: https://applitools.com/tutorials/getting-started/setting-up-your-environment.html + // If you don't explicitly set the API key here, + // then the SDK will automatically read the `APPLITOOLS_API_KEY` environment variable to fetch it. + apiKey: 'APPLITOOLS_API_KEY', - // To connect visual test results to your account, - // you must set the `APPLITOOLS_API_KEY` environment variable to your Applitools API key. - // To find it: https://applitools.com/tutorials/getting-started/setting-up-your-environment.html - // If you don't explicitly set the API key here, - // then the SDK will automatically read the `APPLITOOLS_API_KEY` environment variable to fetch it. - apiKey: 'APPLITOOLS_API_KEY', + // A batch is the collection of visual checkpoints for a test suite. + // Batches are displayed in the Eyes Test Manager, so use meaningful names. + batchName: 'Full Site Evaluation', - // A batch is the collection of visual checkpoints for a test suite. - // Batches are displayed in the Eyes Test Manager, so use meaningful names. - batchName: 'Full Site Evaluation', + // Applitools can run checkpoints for snapshots against any browser in the Ultrafast Grid. + // This setting defines 5 unique browser configurations to test. + browser: [ + { width: 3840, height: 2160, name: 'chrome' }, + { width: 1600, height: 1200, name: 'firefox' }, + { width: 1024, height: 768, name: 'safari' }, - // Applitools can run checkpoints for snapshots against any browser in the Ultrafast Grid. - // This setting defines 5 unique browser configurations to test. - browser: [ - {width: 3840, height: 2160, name: 'chrome'}, - {width: 1600, height: 1200, name: 'firefox'}, - {width: 1024, height: 768, name: 'safari'}, - - {deviceName: 'iPhone 11', screenOrientation: 'portrait'}, - {deviceName: 'Pixel 2', screenOrientation: 'landscape'}, - {deviceName: 'Galaxy S22', screenOrientation: 'portrait'}, - ] -} \ No newline at end of file + { deviceName: 'iPhone 11', screenOrientation: 'portrait' }, + { deviceName: 'Pixel 2', screenOrientation: 'landscape' }, + { deviceName: 'Galaxy S22', screenOrientation: 'portrait' }, + ], +}; diff --git a/website/cypress.config.ts b/website/cypress.config.ts index dc7f423..9e5d7bc 100644 --- a/website/cypress.config.ts +++ b/website/cypress.config.ts @@ -1,11 +1,13 @@ -import { defineConfig } from "cypress"; -import eyesPlugin from '@applitools/eyes-cypress' +import { defineConfig } from 'cypress'; +import eyesPlugin from '@applitools/eyes-cypress'; -export default eyesPlugin(defineConfig({ - e2e: { - baseUrl: 'http://localhost:3000', - setupNodeEvents(on, config) { - // implement node event listeners here +export default eyesPlugin( + defineConfig({ + e2e: { + baseUrl: 'http://localhost:3000', + setupNodeEvents(on, config) { + // implement node event listeners here + }, }, - }, -})); + }), +); diff --git a/website/cypress/e2e/contact.cy.ts b/website/cypress/e2e/contact.cy.ts index 4a1d840..c268298 100644 --- a/website/cypress/e2e/contact.cy.ts +++ b/website/cypress/e2e/contact.cy.ts @@ -1,28 +1,34 @@ /// describe('Contact Page', () => { - beforeEach(() => { - cy.visit('/contact') - }) + beforeEach(() => { + cy.visit('/contact'); + }); - it('Contact Page Layout', () => { - cy.eyesOpen({ - appName: 'Personal Website', - testName: Cypress.currentTest.title, - }) - cy.eyesCheckWindow({ - tag: "Contact Page", - target: 'window', - fully: true, - }); + it('Contact Page Layout', () => { + cy.eyesOpen({ + appName: 'Personal Website', + testName: Cypress.currentTest.title, + }); + cy.eyesCheckWindow({ + tag: 'Contact Page', + target: 'window', + fully: true, + }); - cy.contains('Submit') - cy.eyesClose() - }) + cy.contains('Submit'); + cy.eyesClose(); + }); - it('Contact Page Form', () => { - cy.get('input[name="user_name"]').type('Elio Di Nino').should('have.value', 'Elio Di Nino') - cy.get('input[name="user_email"]').type('test@eliodinino.com').should('have.value', 'test@eliodinino.com') - cy.get('textarea[name="message"]').type('This is a test message').should('have.value', 'This is a test message') - }) -}) \ No newline at end of file + it('Contact Page Form', () => { + cy.get('input[name="user_name"]') + .type('Elio Di Nino') + .should('have.value', 'Elio Di Nino'); + cy.get('input[name="user_email"]') + .type('test@eliodinino.com') + .should('have.value', 'test@eliodinino.com'); + cy.get('textarea[name="message"]') + .type('This is a test message') + .should('have.value', 'This is a test message'); + }); +}); diff --git a/website/cypress/e2e/home.cy.ts b/website/cypress/e2e/home.cy.ts index abe678a..25cf7e5 100644 --- a/website/cypress/e2e/home.cy.ts +++ b/website/cypress/e2e/home.cy.ts @@ -1,29 +1,29 @@ /// describe('Home Page', () => { - beforeEach(() => { - cy.visit('/') + beforeEach(() => { + cy.visit('/'); - cy.eyesOpen({ - appName: 'Personal Website', - testName: Cypress.currentTest.title, - }) - }) + cy.eyesOpen({ + appName: 'Personal Website', + testName: Cypress.currentTest.title, + }); + }); - it('Home Page Layout', () => { - cy.contains('Resume') - cy.contains('Links') - cy.contains('GitHub') + it('Home Page Layout', () => { + cy.contains('Resume'); + cy.contains('Links'); + cy.contains('GitHub'); - cy.eyesCheckWindow({ - tag: "Home Page", - target: 'window', - fully: true, - matchLevel: 'Layout' - }); - }) + cy.eyesCheckWindow({ + tag: 'Home Page', + target: 'window', + fully: true, + matchLevel: 'Layout', + }); + }); - afterEach(() => { - cy.eyesClose() - }) -}) \ No newline at end of file + afterEach(() => { + cy.eyesClose(); + }); +}); diff --git a/website/cypress/e2e/links.cy.ts b/website/cypress/e2e/links.cy.ts index fb6f63f..6b410fa 100644 --- a/website/cypress/e2e/links.cy.ts +++ b/website/cypress/e2e/links.cy.ts @@ -1,38 +1,38 @@ /// describe('Links Page', () => { - beforeEach(() => { - cy.visit('/links') - // Wait up to 10 seconds for the background image to load - cy.get('.background', { timeout: 10000 }) - .should('be.visible') - .then($el => { - const url = $el.css('background-image').match(/url\("(.*)"\)/)[1] - cy.request({url, failOnStatusCode: false}) - .its('status') - .should('eq', 200) - }) - .wait(1000) + beforeEach(() => { + cy.visit('/links'); + // Wait up to 10 seconds for the background image to load + cy.get('.background', { timeout: 10000 }) + .should('be.visible') + .then(($el) => { + const url = $el.css('background-image').match(/url\("(.*)"\)/)[1]; + cy.request({ url, failOnStatusCode: false }) + .its('status') + .should('eq', 200); + }) + .wait(1000); - cy.eyesOpen({ - appName: 'Personal Website', - testName: Cypress.currentTest.title, - }) - }) + cy.eyesOpen({ + appName: 'Personal Website', + testName: Cypress.currentTest.title, + }); + }); - it('Links Page Layout', () => { - cy.eyesCheckWindow({ - tag: "Links Page", - target: 'window', - fully: true, - }); + it('Links Page Layout', () => { + cy.eyesCheckWindow({ + tag: 'Links Page', + target: 'window', + fully: true, + }); - cy.contains('Website') - cy.contains('Contact') - cy.contains('Resume') - }) + cy.contains('Website'); + cy.contains('Contact'); + cy.contains('Resume'); + }); - afterEach(() => { - cy.eyesClose() - }) -}) \ No newline at end of file + afterEach(() => { + cy.eyesClose(); + }); +}); diff --git a/website/cypress/support/commands.ts b/website/cypress/support/commands.ts index 698b01a..95857ae 100644 --- a/website/cypress/support/commands.ts +++ b/website/cypress/support/commands.ts @@ -34,4 +34,4 @@ // visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable // } // } -// } \ No newline at end of file +// } diff --git a/website/cypress/support/e2e.ts b/website/cypress/support/e2e.ts index 0338c1f..43d60ef 100644 --- a/website/cypress/support/e2e.ts +++ b/website/cypress/support/e2e.ts @@ -13,11 +13,10 @@ // https://on.cypress.io/configuration // *********************************************************** -import '@applitools/eyes-cypress/commands' - +import '@applitools/eyes-cypress/commands'; // Import commands.js using ES2015 syntax: -import './commands' +import './commands'; // Alternatively you can use CommonJS syntax: -// require('./commands') \ No newline at end of file +// require('./commands') diff --git a/website/cypress/support/index.d.ts b/website/cypress/support/index.d.ts index b7a17d9..59fc1ec 100644 --- a/website/cypress/support/index.d.ts +++ b/website/cypress/support/index.d.ts @@ -1 +1 @@ -import "@applitools/eyes-cypress" \ No newline at end of file +import '@applitools/eyes-cypress'; diff --git a/website/cypress/tsconfig.json b/website/cypress/tsconfig.json index 966be28..18edb19 100644 --- a/website/cypress/tsconfig.json +++ b/website/cypress/tsconfig.json @@ -1,8 +1,8 @@ { - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress", "node"] - }, - "include": ["**/*.ts"] - } \ No newline at end of file + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress", "node"] + }, + "include": ["**/*.ts"] +} diff --git a/website/index.html b/website/index.html index 7572ff3..b3de2b5 100644 --- a/website/index.html +++ b/website/index.html @@ -1,101 +1,157 @@ - + + + + + + + + Elio Di Nino + + - - - - - - - Elio Di Nino - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - - - + + + + + - - - - - - - + + + + + + + - - - - + + - + gtag('config', 'G-Z8SQBEWTM6'); + + + - \ No newline at end of file + + +
+ + + diff --git a/website/netlify.toml b/website/netlify.toml index 975e940..6910d8d 100644 --- a/website/netlify.toml +++ b/website/netlify.toml @@ -41,3 +41,9 @@ "google", "yandex" ] + +[[plugins]] + package = "netlify-plugin-checklinks" + + [plugins.inputs] + skipPatterns = ['https://fonts.gstatic.com', 'https://fonts.googleapis.com'] diff --git a/website/package-lock.json b/website/package-lock.json index 5e035a3..b71c634 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -1,12 +1,12 @@ { "name": "eliodinino.com", - "version": "3.0", + "version": "3.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "eliodinino.com", - "version": "3.0", + "version": "3.1", "dependencies": { "@emailjs/browser": "^4.4.1", "@emotion/react": "^11.13.0", @@ -33,6 +33,7 @@ "@applitools/eyes-cypress": "^3.44.6", "@vitejs/plugin-react": "^4.3.1", "cypress": "^13.13.1", + "prettier": "3.3.3", "vite": "^5.3.5", "vite-plugin-svgr": "^4.2.0", "vite-tsconfig-paths": "^4.3.2" @@ -7085,6 +7086,22 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/prettier": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -13544,6 +13561,12 @@ "source-map-js": "^1.2.0" } }, + "prettier": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true + }, "pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/website/package.json b/website/package.json index 7a5970e..d38e25b 100644 --- a/website/package.json +++ b/website/package.json @@ -1,6 +1,6 @@ { "name": "eliodinino.com", - "version": "3.0", + "version": "4.0", "private": true, "description": "Elio Di Nino's personal website", "author": "Elio Di Nino", @@ -56,6 +56,7 @@ "@applitools/eyes-cypress": "^3.44.6", "@vitejs/plugin-react": "^4.3.1", "cypress": "^13.13.1", + "prettier": "3.3.3", "vite": "^5.3.5", "vite-plugin-svgr": "^4.2.0", "vite-tsconfig-paths": "^4.3.2" diff --git a/website/public/site.webmanifest b/website/public/site.webmanifest index 79928b9..66ad137 100644 --- a/website/public/site.webmanifest +++ b/website/public/site.webmanifest @@ -1,55 +1,55 @@ { - "name": "Elio Di Nino", - "short_name": "Elio Di Nino", - "icons": [ - { - "src": "/android-chrome-36x36.png", - "sizes": "36x36", - "type": "image/png" - }, - { - "src": "/android-chrome-48x48.png", - "sizes": "48x48", - "type": "image/png" - }, - { - "src": "/android-chrome-72x72.png", - "sizes": "72x72", - "type": "image/png" - }, - { - "src": "/android-chrome-96x96.png", - "sizes": "96x96", - "type": "image/png" - }, - { - "src": "/android-chrome-144x144.png", - "sizes": "144x144", - "type": "image/png" - }, - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-256x256.png", - "sizes": "256x256", - "type": "image/png" - }, - { - "src": "/android-chrome-384x384.png", - "sizes": "384x384", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "start_url": "/", - "theme_color": "#cbfcff", - "background_color": "#cbfcff", - "display": "standalone" -} \ No newline at end of file + "name": "Elio Di Nino", + "short_name": "Elio Di Nino", + "icons": [ + { + "src": "/android-chrome-36x36.png", + "sizes": "36x36", + "type": "image/png" + }, + { + "src": "/android-chrome-48x48.png", + "sizes": "48x48", + "type": "image/png" + }, + { + "src": "/android-chrome-72x72.png", + "sizes": "72x72", + "type": "image/png" + }, + { + "src": "/android-chrome-96x96.png", + "sizes": "96x96", + "type": "image/png" + }, + { + "src": "/android-chrome-144x144.png", + "sizes": "144x144", + "type": "image/png" + }, + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-256x256.png", + "sizes": "256x256", + "type": "image/png" + }, + { + "src": "/android-chrome-384x384.png", + "sizes": "384x384", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "/", + "theme_color": "#cbfcff", + "background_color": "#cbfcff", + "display": "standalone" +} diff --git a/website/public/sitemap.xml b/website/public/sitemap.xml index 352302e..9ed7c90 100644 --- a/website/public/sitemap.xml +++ b/website/public/sitemap.xml @@ -2,12 +2,12 @@ https://eliodinino.com/ - 2022-10-10 + 2024-08-03 1.0 https://eliodinino.com/links - 2023-05-29 + 2024-08-03 0.6 @@ -15,4 +15,4 @@ 2022-09-01 0.5 - \ No newline at end of file + diff --git a/website/src/App.css b/website/src/App.css index 290886a..c4034ce 100644 --- a/website/src/App.css +++ b/website/src/App.css @@ -11,4 +11,4 @@ justify-content: center; font-size: calc(10px + 2vmin); color: white; -} \ No newline at end of file +} diff --git a/website/src/App.tsx b/website/src/App.tsx index e5596d9..87b4738 100644 --- a/website/src/App.tsx +++ b/website/src/App.tsx @@ -1,22 +1,26 @@ import React from 'react'; import './App.css'; -import { Routes, Route, Navigate } from "react-router-dom"; -import { ThemeProvider, createTheme, responsiveFontSizes } from '@mui/material/styles'; +import { Routes, Route, Navigate } from 'react-router-dom'; +import { + ThemeProvider, + createTheme, + responsiveFontSizes, +} from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import { useMediaQuery } from 'react-responsive'; import Layout from './layouts/MainLayout'; -import HomePage from "./pages/HomePage/HomePage"; -import NoPage from "./pages/404Page/NoPage"; -import LinksPage from "./pages/LinksPage/LinksPage"; -import ContactPage from "./pages/ContactPage/ContactPage"; +import HomePage from './pages/HomePage/HomePage'; +import NoPage from './pages/404Page/NoPage'; +import LinksPage from './pages/LinksPage/LinksPage'; +import ContactPage from './pages/ContactPage/ContactPage'; // Main title in the browser -const siteTitle = "Elio Di Nino"; +const siteTitle = 'Elio Di Nino'; // Specifying what size to consider mobile -const mobileSize = 600; +const mobileSize = 800; // Customized MUI theme let theme = createTheme({ @@ -24,12 +28,46 @@ let theme = createTheme({ mode: 'dark', }, typography: { + fontFamily: [ + 'Helvetica', + 'Roboto', + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + ].join(','), button: { - textTransform: 'none' + textTransform: 'none', }, h1: { - fontSize: '3.8rem', - } + fontSize: '3rem', + fontFamily: '"Overpass Mono", monospace', + fontWeight: 500, + }, + subtitle1: { + fontSize: '1.6rem', + fontFamily: '"Overpass Mono", monospace', + fontWeight: 600, + }, + h2: { + fontSize: '2.5rem', + fontFamily: '"Overpass Mono", monospace', + fontWeight: 500, + }, + h3: { + fontSize: '2.1rem', + fontWeight: 600, + }, + h4: { + fontSize: '1.6rem', + fontFamily: '"Overpass Mono", monospace', + fontWeight: 600, + }, }, }); theme = responsiveFontSizes(theme); @@ -38,17 +76,17 @@ theme = responsiveFontSizes(theme); function App() { // For layouts on different devices const isMobile = useMediaQuery({ - query: '(max-width: ' + mobileSize + 'px)' - }) + query: '(max-width: ' + mobileSize + 'px)', + }); const isDesktopOrLaptopOrTablet = useMediaQuery({ - query: '(min-width: ' + mobileSize + 'px)' - }) + query: '(min-width: ' + (mobileSize + 1) + 'px)', + }); const layout = { hideHeaderPaths: ['/links'], hideFooterPaths: ['/links'], - isMobile: isMobile - } + isMobile: isMobile, + }; return ( @@ -56,15 +94,45 @@ function App() { {/* Hide the footer and header on the links page */} }> - } /> + + } + /> } /> - } /> - } /> + + } + /> + + } + /> {/* 404 Page */} - } /> + } + /> - + ); } diff --git a/website/src/components/ContainedIconButton.tsx b/website/src/components/ContainedIconButton.tsx new file mode 100644 index 0000000..4e484fb --- /dev/null +++ b/website/src/components/ContainedIconButton.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; + +import { Button } from '@mui/material'; + +interface ContainedIconButtonProps { + isMobile: boolean; + link: string; + ml: number | undefined; + mr: number; + ariaLabel: string; + startIcon: React.ReactNode; +} + +export const ContainedIconButton = (props: ContainedIconButtonProps) => { + return ( + ))} - - - ); - - // Checking window size - const container = window !== undefined ? () => window().document.body : undefined; - - return <> - - - - - {/* Mobile drawer handle */} - - - - - - - - - - - - - - {navItems.map((item) => ( - - ))} - - - - - - - {drawer} - - + + + + + + + {drawer} + - - - - - - + + + + + + + + ); } diff --git a/website/src/components/Picture.tsx b/website/src/components/Picture.tsx index f32d405..e42d782 100644 --- a/website/src/components/Picture.tsx +++ b/website/src/components/Picture.tsx @@ -16,63 +16,102 @@ import profile1598avif from '../images/profile-1598.avif'; import profile1065avif from '../images/profile-1065.avif'; import profile799avif from '../images/profile-799.avif'; -export const Picture = (props: any) => { - const picture = props.picture; +interface PictureProps { + picture: { + image: string; + imageSizeMobile: string; + imageSizeNormal: string; + className: string; + altText: string; + imageWidth: string; + imageHeight: string; + imageSize?: string; + isMobile: boolean; + }; +} - var imageSize: string - var jpgSrcSet: string - var webpSrcSet: string - var avifSrcSet: string - var defaultImage: any - imageSize = picture.isMobile ? imageSize = picture.imageSizeMobile : imageSize = picture.imageSizeNormal; +export const Picture = (props: PictureProps) => { + const picture = props.picture; - const logoPngSrcSet = logopng; - const logoWebpSrcSet = logowebp; - const logoAvifSrcSet = logoavif; - const profileJpgSrcSet = - profile3196jpg + " 3196w, " + - profile1598jpg + " 1598w, " + - profile1065jpg + " 1065w, " + - profile799jpg + " 799w"; - const profileWebpSrcSet = - profile3196webp + " 3196w, " + - profile1598webp + " 1598w, " + - profile1065webp + " 1065w, " + - profile799webp + " 799w"; - const profileAvifSrcSet = - profile3196avif + " 3196w, " + - profile1598avif + " 1598w, " + - profile1065avif + " 1065w, " + - profile799avif + " 799w"; + var imageSize: string; + var jpgSrcSet: string; + var webpSrcSet: string; + var avifSrcSet: string; + var defaultImage: any; + imageSize = picture.isMobile + ? (imageSize = picture.imageSizeMobile) + : (imageSize = picture.imageSizeNormal); - jpgSrcSet = picture.image === "profile" ? jpgSrcSet = profileJpgSrcSet : - picture.image === "logo" ? jpgSrcSet = logoPngSrcSet : jpgSrcSet = ""; - webpSrcSet = picture.image === "profile" ? webpSrcSet = profileWebpSrcSet : - picture.image === "logo" ? webpSrcSet = logoWebpSrcSet : webpSrcSet = ""; - avifSrcSet = picture.image === "profile" ? avifSrcSet = profileAvifSrcSet : - picture.image === "logo" ? avifSrcSet = logoAvifSrcSet : avifSrcSet = ""; + const logoPngSrcSet = logopng; + const logoWebpSrcSet = logowebp; + const logoAvifSrcSet = logoavif; + const profileJpgSrcSet = + profile3196jpg + + ' 3196w, ' + + profile1598jpg + + ' 1598w, ' + + profile1065jpg + + ' 1065w, ' + + profile799jpg + + ' 799w'; + const profileWebpSrcSet = + profile3196webp + + ' 3196w, ' + + profile1598webp + + ' 1598w, ' + + profile1065webp + + ' 1065w, ' + + profile799webp + + ' 799w'; + const profileAvifSrcSet = + profile3196avif + + ' 3196w, ' + + profile1598avif + + ' 1598w, ' + + profile1065avif + + ' 1065w, ' + + profile799avif + + ' 799w'; - defaultImage = picture.image === "profile" ? defaultImage = profile799jpg : - picture.image === "logo" ? defaultImage = logopng : defaultImage = ""; + jpgSrcSet = + picture.image === 'profile' + ? (jpgSrcSet = profileJpgSrcSet) + : picture.image === 'logo' + ? (jpgSrcSet = logoPngSrcSet) + : (jpgSrcSet = ''); + webpSrcSet = + picture.image === 'profile' + ? (webpSrcSet = profileWebpSrcSet) + : picture.image === 'logo' + ? (webpSrcSet = logoWebpSrcSet) + : (webpSrcSet = ''); + avifSrcSet = + picture.image === 'profile' + ? (avifSrcSet = profileAvifSrcSet) + : picture.image === 'logo' + ? (avifSrcSet = logoAvifSrcSet) + : (avifSrcSet = ''); - return - - - {picture.altText} + defaultImage = + picture.image === 'profile' + ? (defaultImage = profile799jpg) + : picture.image === 'logo' + ? (defaultImage = logopng) + : (defaultImage = ''); + + return ( + + + + {picture.altText} -} \ No newline at end of file + ); +}; diff --git a/website/src/constants/index.tsx b/website/src/constants/index.tsx new file mode 100644 index 0000000..577bf9e --- /dev/null +++ b/website/src/constants/index.tsx @@ -0,0 +1,15 @@ +export interface Urls { + github: string; + linkedin: string; + photography: string; + instagram: string; + resume: string; +} + +export const URLS: Urls = { + github: 'https://github.com/ElioDiNino', + linkedin: 'https://www.linkedin.com/in/eliodinino/', + photography: 'https://photography.eliodinino.com', + instagram: 'https://www.instagram.com/elio.dinino/', + resume: '/Resume.pdf', +}; diff --git a/website/src/index.css b/website/src/index.css index ec55930..7782530 100644 --- a/website/src/index.css +++ b/website/src/index.css @@ -70,19 +70,27 @@ /* ----- Default Page ----- */ #root { - background-image: url("images/background-dark.jpg"); - background-image: -webkit-image-set(url(images/background-dark.avif) 1x, - url(images/background-dark.webp) 1x, - url(images/background-dark.jpg) 1x); - background-image: image-set(url(images/background-dark.avif) 1x, - url(images/background-dark.webp) 1x, - url(images/background-dark.jpg) 1x); - background-image: -webkit-image-set(url(images/background-dark.avif) type("image/avif"), - url(images/background-dark.webp) type("image/webp"), - url(images/background-dark.jpg) type("image/jpeg")); - background-image: image-set(url(images/background-dark.avif) type("image/avif"), - url(images/background-dark.webp) type("image/webp"), - url(images/background-dark.jpg) type("image/jpeg")); + background-image: url('images/background-dark.jpg'); + background-image: -webkit-image-set( + url(images/background-dark.avif) 1x, + url(images/background-dark.webp) 1x, + url(images/background-dark.jpg) 1x + ); + background-image: image-set( + url(images/background-dark.avif) 1x, + url(images/background-dark.webp) 1x, + url(images/background-dark.jpg) 1x + ); + background-image: -webkit-image-set( + url(images/background-dark.avif) type('image/avif'), + url(images/background-dark.webp) type('image/webp'), + url(images/background-dark.jpg) type('image/jpeg') + ); + background-image: image-set( + url(images/background-dark.avif) type('image/avif'), + url(images/background-dark.webp) type('image/webp'), + url(images/background-dark.jpg) type('image/jpeg') + ); background-repeat: no-repeat; background-size: cover; background-position: top center; @@ -103,7 +111,7 @@ body { } a { - color: #5ca5fa; + color: #70b2ff; } a:hover { @@ -113,4 +121,4 @@ a:hover { code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; -} \ No newline at end of file +} diff --git a/website/src/index.tsx b/website/src/index.tsx index 6dfcb0d..4583b5d 100644 --- a/website/src/index.tsx +++ b/website/src/index.tsx @@ -5,12 +5,12 @@ import App from './App'; import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement + document.getElementById('root') as HTMLElement, ); root.render( - + , ); diff --git a/website/src/layouts/MainLayout.tsx b/website/src/layouts/MainLayout.tsx index e98934b..4177bce 100644 --- a/website/src/layouts/MainLayout.tsx +++ b/website/src/layouts/MainLayout.tsx @@ -1,18 +1,20 @@ import { Outlet, useLocation } from 'react-router-dom'; -import Header from "../components/Header"; +import Header from '../components/Header'; import Footer from '../components/Footer'; const Layout = (props: any) => { - const { pathname } = useLocation(); - const layout = props.layout; + const { pathname } = useLocation(); + const layout = props.layout; - return ( - <> - {!layout.hideHeaderPaths.includes(pathname) &&
} - - {!layout.hideFooterPaths.includes(pathname) &&