diff --git a/components/favycon-info/index.tsx b/components/favycon-info/index.tsx index 1d06398..9e5c422 100644 --- a/components/favycon-info/index.tsx +++ b/components/favycon-info/index.tsx @@ -1,10 +1,10 @@ import dynamic from 'next/dynamic' +import Image from 'next/image' import React, { useState, useRef } from 'react' import classnames from 'classnames' import { useDrag } from 'react-use-gesture' import { Typography } from 'components/typography' import { ToolTitle } from 'components/tool-title' -import { LazyImage } from 'components/lazy-image' import { SvgTwitter } from 'components/svgs/svg-twitter' import { SvgGithub } from 'components/svgs/svg-github' @@ -13,6 +13,10 @@ import { SvgFavycon } from 'components/svgs/svg-favycon' import { Button } from 'components/button' import { isTouchCapable } from 'utils/device' +import augustoLopes from '../../public/images/people/augusto-lopes.png' +import ruiSaraiva from '../../public/images/people/rui-saraiva.png' +import miguelTeixeira from '../../public/images/people/miguel-teixeira.png' + const Modal = dynamic(() => import('react-modal')) const people = [ @@ -21,21 +25,21 @@ const people = [ name: 'Augusto Lopes', role: 'Product Designer', social: 'twitter', - placeholderHash: 'UrLqFOIUS$-o_Nt6NGRkEkt7M{RjM{NHMxof', + photo: augustoLopes, }, { screenName: 'ruisaraiva19', name: 'Rui Saraiva', role: 'Full-Stack Developer', social: 'twitter', - placeholderHash: 'UNMQLqof_LWU?FRkkqt605fk9cjZbaWBt8of', + photo: ruiSaraiva, }, { screenName: 'miguellteixeira', name: 'Miguel Teixeira', role: 'Full-Stack Developer', social: 'github', - placeholderHash: 'UcI~*]o0uPXS?wWAMxog8_kCQ,e-tmbIVsjF', + photo: miguelTeixeira, }, ] @@ -141,13 +145,13 @@ const FavyconInfo = ({ {people.map((person) => (
-
diff --git a/components/favycon-wizard/index.module.scss b/components/favycon-wizard/index.module.scss index d96b07c..74d9490 100644 --- a/components/favycon-wizard/index.module.scss +++ b/components/favycon-wizard/index.module.scss @@ -52,12 +52,18 @@ } .mobileBackground { + position: relative; + width: 100%; + height: 100vh; + @include breakpoint-md-up { display: none; } } .desktopBackground { + position: relative; + @include breakpoint-md { display: none; } diff --git a/components/favycon-wizard/index.tsx b/components/favycon-wizard/index.tsx index 24fb20f..a854b8a 100644 --- a/components/favycon-wizard/index.tsx +++ b/components/favycon-wizard/index.tsx @@ -1,9 +1,13 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import { LazyImage } from 'components/lazy-image' +import Image from 'next/image' import styles from './index.module.scss' +import unsplashImageMobile from '../../public/images/unsplash-vertical.jpg' +import unsplashImageDesktop from '../../public/images/unsplash-horizontal.jpg' +import dndLight from '../../public/images/dnd-light.png' +import dndDark from '../../public/images/dnd-dark.png' type FavyconWizardProps = { children: PropTypes.ReactNodeLike @@ -11,32 +15,36 @@ type FavyconWizardProps = { } const unsplashImageProps = (isMobile: boolean) => ({ - src: `/images/unsplash${isMobile ? '-vertical' : ''}@1x.jpg`, - srcRetina: `/images/unsplash${isMobile ? '-vertical' : ''}@2x.jpg`, - placeholderHash: isMobile ? 'UT0Lxlh2ghgMeSeoe@fkflf5e.e:e.e.f6fk' : 'Un0V-,h2g#gMe,f8f9fif8f6f6f8f6f7fQfQ', - alt: 'Unsplash', - aspectRatio: isMobile ? '614/768' : '540/354', - stretch: isMobile, + src: isMobile ? unsplashImageMobile : unsplashImageDesktop, + width: isMobile ? undefined : 540, + height: isMobile ? undefined : 354, }) const dndImageProps = (isDark: boolean) => ({ - src: `/images/dnd-${isDark ? 'dark' : 'light'}@1x.png`, - srcRetina: `/images/dnd-${isDark ? 'dark' : 'light'}@2x.png`, - alt: 'Drag and drop here!', - aspectRatio: '185/109', + src: isDark ? dndDark : dndLight, + width: 185, + height: 109, }) const FavyconWizardComponent = ({ children, showDndImage }: FavyconWizardProps) => { return (
- - +
+ Unsplash image +
+
+ Unsplash image +
{children}
- - +
+ Drag and drop here! +
+
+ Drag and drop here! +
) diff --git a/components/lazy-image/index.module.scss b/components/lazy-image/index.module.scss deleted file mode 100644 index aec5d9f..0000000 --- a/components/lazy-image/index.module.scss +++ /dev/null @@ -1,52 +0,0 @@ -@import '../../styles/variables.scss'; - -.root { - position: relative; - width: 100%; - - &.stretch { - height: 100%; - padding-bottom: 0 !important; - } - - &.rounded { - border-radius: 50%; - } - - canvas { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - } - - &.rounded canvas { - border-radius: 50%; - } -} - -.image { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - font-family: 'object-fit: cover; object-position: center;', sans-serif; - object-fit: cover; - object-position: center; -} - -.placeholder { - composes: image; - transition: opacity 0.2s linear 0.2s; -} - -.normal { - composes: image; - transition: opacity 0.2s linear; -} diff --git a/components/lazy-image/index.tsx b/components/lazy-image/index.tsx deleted file mode 100644 index 16fc3d6..0000000 --- a/components/lazy-image/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -/* eslint-disable @next/next/no-img-element */ -import React, { useRef, useEffect } from 'react' -import { LazyImageFull, ImageState } from 'react-lazy-images' -import objectFitImages from 'object-fit-images' -import { BlurhashCanvas } from 'react-blurhash' -import classNames from 'classnames' - -import styles from './index.module.scss' - -type LazyImageProps = { - src: string - srcRetina?: string - placeholderHash?: string - alt: string - aspectRatio: string - stretch?: boolean - rounded?: boolean -} & React.DetailedHTMLProps, HTMLDivElement> - -const LazyImage = ({ - src, - srcRetina = src, - placeholderHash, - alt, - aspectRatio, - stretch = false, - rounded = false, - ...props -}: LazyImageProps) => { - const [widthString, heightString] = aspectRatio.split('/') - const width = parseInt(widthString) - const height = parseInt(heightString) - - const imgRef = useRef(null) - - useEffect(() => { - if (imgRef.current) { - objectFitImages(imgRef.current) - } - }, [imgRef]) - - return ( - - {({ imageProps, imageState, ref }) => { - const loaded = imageState === ImageState.LoadSuccess - return ( -
- {placeholderHash ? ( - - ) : null} - {imageProps.alt} -
- ) - }} - - ) -} - -export { LazyImage } diff --git a/next.config.js b/next.config.js index 1e90604..8fc8447 100644 --- a/next.config.js +++ b/next.config.js @@ -1,3 +1,7 @@ module.exports = { poweredByHeader: false, + images: { + deviceSizes: [375, 750, 1125], + imageSizes: [56, 112, 185, 370, 370, 375, 540, 740, 750, 1080], + }, } diff --git a/package.json b/package.json index 412fe25..88ba8a1 100644 --- a/package.json +++ b/package.json @@ -49,15 +49,12 @@ "multer": "1.4.3", "next": "12.0.6", "nprogress": "0.2.0", - "object-fit-images": "3.2.4", "prismjs": "1.25.0", "prop-types": "15.7.2", "react": "17.0.2", - "react-blurhash": "0.1.3", "react-clipboard.js": "2.0.16", "react-dom": "17.0.2", "react-dropzone": "11.4.2", - "react-lazy-images": "1.1.0", "react-modal": "3.14.4", "react-transition-group": "4.4.2", "react-use": "17.3.1", @@ -88,7 +85,6 @@ "@types/multer": "1.4.7", "@types/node": "16.11.11", "@types/nprogress": "0.2.0", - "@types/object-fit-images": "3.2.2", "@types/prismjs": "1.16.6", "@types/react": "17.0.37", "@types/react-modal": "3.13.1", diff --git a/public/images/dnd-dark@2x.png b/public/images/dnd-dark.png similarity index 100% rename from public/images/dnd-dark@2x.png rename to public/images/dnd-dark.png diff --git a/public/images/dnd-dark@1x.png b/public/images/dnd-dark@1x.png deleted file mode 100644 index 997dc61..0000000 Binary files a/public/images/dnd-dark@1x.png and /dev/null differ diff --git a/public/images/dnd-light@2x.png b/public/images/dnd-light.png similarity index 100% rename from public/images/dnd-light@2x.png rename to public/images/dnd-light.png diff --git a/public/images/dnd-light@1x.png b/public/images/dnd-light@1x.png deleted file mode 100644 index 0c958be..0000000 Binary files a/public/images/dnd-light@1x.png and /dev/null differ diff --git a/public/images/people/aboutaugusto@1x.png b/public/images/people/aboutaugusto@1x.png deleted file mode 100644 index 311468d..0000000 Binary files a/public/images/people/aboutaugusto@1x.png and /dev/null differ diff --git a/public/images/people/aboutaugusto@2x.png b/public/images/people/augusto-lopes.png similarity index 100% rename from public/images/people/aboutaugusto@2x.png rename to public/images/people/augusto-lopes.png diff --git a/public/images/people/miguellteixeira@2x.png b/public/images/people/miguel-teixeira.png similarity index 100% rename from public/images/people/miguellteixeira@2x.png rename to public/images/people/miguel-teixeira.png diff --git a/public/images/people/miguellteixeira@1x.png b/public/images/people/miguellteixeira@1x.png deleted file mode 100644 index 3882bcc..0000000 Binary files a/public/images/people/miguellteixeira@1x.png and /dev/null differ diff --git a/public/images/people/ruisaraiva19@2x.png b/public/images/people/rui-saraiva.png similarity index 100% rename from public/images/people/ruisaraiva19@2x.png rename to public/images/people/rui-saraiva.png diff --git a/public/images/people/ruisaraiva19@1x.png b/public/images/people/ruisaraiva19@1x.png deleted file mode 100644 index 9285998..0000000 Binary files a/public/images/people/ruisaraiva19@1x.png and /dev/null differ diff --git a/public/images/unsplash@2x.jpg b/public/images/unsplash-horizontal.jpg similarity index 100% rename from public/images/unsplash@2x.jpg rename to public/images/unsplash-horizontal.jpg diff --git a/public/images/unsplash-vertical@2x.jpg b/public/images/unsplash-vertical.jpg similarity index 100% rename from public/images/unsplash-vertical@2x.jpg rename to public/images/unsplash-vertical.jpg diff --git a/public/images/unsplash-vertical@1x.jpg b/public/images/unsplash-vertical@1x.jpg deleted file mode 100644 index 0cdbb61..0000000 Binary files a/public/images/unsplash-vertical@1x.jpg and /dev/null differ diff --git a/public/images/unsplash@1x.jpg b/public/images/unsplash@1x.jpg deleted file mode 100644 index 5717545..0000000 Binary files a/public/images/unsplash@1x.jpg and /dev/null differ diff --git a/yarn.lock b/yarn.lock index 47e2a42..199c554 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1273,7 +1273,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.10.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839" integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg== @@ -3617,11 +3617,6 @@ resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f" integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A== -"@types/object-fit-images@3.2.2": - version "3.2.2" - resolved "https://registry.yarnpkg.com/@types/object-fit-images/-/object-fit-images-3.2.2.tgz#b2874e5408a4f31b2834b5425456ccd04d280988" - integrity sha512-49ZQlRQqU8sojbAUW7mlh9zSOnCectxxeq8VXmDpuUy3oVhe49OIkuxm0XLXdoc04uiqguYJ11/nf7nXmkOY/A== - "@types/overlayscrollbars@^1.12.0": version "1.12.1" resolved "https://registry.yarnpkg.com/@types/overlayscrollbars/-/overlayscrollbars-1.12.1.tgz#fb637071b545834fb12aea94ee309a2ff4cdc0a8" @@ -12497,11 +12492,6 @@ object-copy@^0.1.0: define-property "^0.2.5" kind-of "^3.0.3" -object-fit-images@3.2.4: - version "3.2.4" - resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-3.2.4.tgz#6c299d38fdf207746e5d2d46c2877f6f25d15b52" - integrity sha512-G+7LzpYfTfqUyrZlfrou/PLLLAPNC52FTy5y1CBywX+1/FkxIloOyQXBmZ3Zxa2AWO+lMF0JTuvqbr7G5e5CWg== - object-inspect@^1.10.3, object-inspect@^1.11.0, object-inspect@^1.9.0: version "1.11.0" resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1" @@ -14048,11 +14038,6 @@ rc@^1.2.7, rc@^1.2.8: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-blurhash@0.1.3: - version "0.1.3" - resolved "https://registry.yarnpkg.com/react-blurhash/-/react-blurhash-0.1.3.tgz#735f28f8f07fb358d7efe7e7e6dc65a7272bf89e" - integrity sha512-Q9lqbXg92NU6/2DoIl/cBM8YWL+Z4X66OiG4aT9ozOgjBwx104LHFCH5stf6aF+s0Q9Wf310Ul+dG+VXJltmPg== - react-clipboard.js@2.0.16: version "2.0.16" resolved "https://registry.yarnpkg.com/react-clipboard.js/-/react-clipboard.js-2.0.16.tgz#45a60684dd6a36ff97e40c53069a27e97a4b6c9c" @@ -14181,14 +14166,6 @@ react-inspector@^5.1.0: is-dom "^1.0.0" prop-types "^15.0.0" -react-intersection-observer@^6.1.0: - version "6.4.2" - resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-6.4.2.tgz#a061add707c37ea14e1308c77c2e286719347928" - integrity sha512-gL6YrkhniA0tIbyDbUterzBwKh61vHR520rsKULel5T37gG4YP07wnWI3WoqOcKK5bKAu0PZB2FHD7/OjawN+w== - dependencies: - "@babel/runtime" "^7.2.0" - invariant "^2.2.4" - react-is@17.0.2, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" @@ -14199,14 +14176,6 @@ react-is@^16.7.0, react-is@^16.8.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react-lazy-images@1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/react-lazy-images/-/react-lazy-images-1.1.0.tgz#c865445c96e568a6249db03a2bb2dccd49cb6f50" - integrity sha512-h5DHFhkMJyh2qsDl3hXWu6d+On10FsgHtRJ+BH7xjgsFOvsqaii9CEwEESqPJrrAiHo1qrN1LgzrV8X3zctHKA== - dependencies: - react-intersection-observer "^6.1.0" - unionize "^2.1.2" - react-lifecycles-compat@^3.0.0: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -16950,11 +16919,6 @@ union-value@^1.0.0: is-extendable "^0.1.1" set-value "^2.0.1" -unionize@^2.1.2: - version "2.2.0" - resolved "https://registry.yarnpkg.com/unionize/-/unionize-2.2.0.tgz#ce88635aa0793f28ab617abeac36172ba0aeb7bc" - integrity sha512-lHXiL6LPVuRYBGCLOdUd4GMHoAGqM0HtYHAZcA6pUEiwN1nk+LEYlh8bud7saeL0bkFntJzCPEPVVJeFm3Cqsg== - uniq@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"