├── .gitignore ├── vercel.json ├── .DS_Store ├── next.config.js ├── docs └── readme.png ├── public ├── .DS_Store ├── favicon.ico └── images │ ├── .DS_Store │ ├── Profile.jpeg │ ├── books │ ├── cleanCode.jpg │ └── useJsHead.webp │ ├── works │ ├── nlwSetup.png │ ├── thumbHabits.png │ ├── thumbTodoWeb.png │ ├── habitsForPhone.png │ ├── thumbFigmaJam.png │ ├── thumbTodoMobile.png │ ├── thumbIgniteFeedWeb.png │ └── thumbIgniteFeedMobile.png │ └── profile-linkedIn.jfif ├── components ├── .DS_Store ├── paragraph.js ├── fonts.js ├── bio.js ├── footer.js ├── icons │ ├── heart.js │ └── refresh-cw.js ├── section.js ├── chakra.js ├── dog.js ├── work.js ├── voxel-dog-loader.js ├── logo.js ├── layouts │ ├── article.js │ └── main.js ├── theme-toggle-button.js ├── grid-item.js └── navbar.js ├── services └── PostService │ └── getPosts.js ├── prettier.config.js ├── lib ├── mocks │ ├── postsData.js │ └── bookData.js ├── model.js └── theme.js ├── pages ├── _document.js ├── 404.js ├── _app.js ├── posts.js ├── books.js ├── works │ ├── figma-jam.js │ ├── ignite-feed.js │ ├── todo-list.js │ └── habits.js ├── works.js └── index.js ├── package.json ├── LICENSE ├── README.md └── styles └── dog.style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .next 2 | node_modules 3 | package-lock.json 4 | yarn.lock -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "github": { 3 | "silent": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/.DS_Store -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | swcMinify: true 4 | } 5 | -------------------------------------------------------------------------------- /docs/readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/docs/readme.png -------------------------------------------------------------------------------- /public/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/.DS_Store -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/components/.DS_Store -------------------------------------------------------------------------------- /public/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/.DS_Store -------------------------------------------------------------------------------- /public/images/Profile.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/Profile.jpeg -------------------------------------------------------------------------------- /public/images/books/cleanCode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/books/cleanCode.jpg -------------------------------------------------------------------------------- /public/images/works/nlwSetup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/works/nlwSetup.png -------------------------------------------------------------------------------- /public/images/books/useJsHead.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/books/useJsHead.webp -------------------------------------------------------------------------------- /public/images/profile-linkedIn.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/profile-linkedIn.jfif -------------------------------------------------------------------------------- /public/images/works/thumbHabits.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/works/thumbHabits.png -------------------------------------------------------------------------------- /public/images/works/thumbTodoWeb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/works/thumbTodoWeb.png -------------------------------------------------------------------------------- /public/images/works/habitsForPhone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/works/habitsForPhone.png -------------------------------------------------------------------------------- /public/images/works/thumbFigmaJam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/works/thumbFigmaJam.png -------------------------------------------------------------------------------- /public/images/works/thumbTodoMobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/works/thumbTodoMobile.png -------------------------------------------------------------------------------- /public/images/works/thumbIgniteFeedWeb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/works/thumbIgniteFeedWeb.png -------------------------------------------------------------------------------- /public/images/works/thumbIgniteFeedMobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyceFatima/homepage-for-developers/HEAD/public/images/works/thumbIgniteFeedMobile.png -------------------------------------------------------------------------------- /components/paragraph.js: -------------------------------------------------------------------------------- 1 | import styled from '@emotion/styled' 2 | 3 | const Paragraph = styled.p` 4 | text-align: justify; 5 | ` 6 | 7 | export default Paragraph 8 | -------------------------------------------------------------------------------- /services/PostService/getPosts.js: -------------------------------------------------------------------------------- 1 | import postsData from '../../lib/mocks/postsData'; 2 | 3 | const getPosts = () => { 4 | const response = postsData; 5 | 6 | return response; 7 | }; 8 | 9 | export default getPosts; -------------------------------------------------------------------------------- /components/fonts.js: -------------------------------------------------------------------------------- 1 | const Fonts = () => ( 2 | 5 | ) 6 | export default Fonts 7 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | const options = { 2 | arrowParens: 'avoid', 3 | singleQuote: true, 4 | bracketSpacing: true, 5 | endOfLine: 'lf', 6 | semi: false, 7 | tabWidth: 2, 8 | trailingComma: 'none' 9 | } 10 | 11 | module.exports = options 12 | -------------------------------------------------------------------------------- /components/bio.js: -------------------------------------------------------------------------------- 1 | import { Box } from '@chakra-ui/react' 2 | import styled from '@emotion/styled' 3 | 4 | export const BioSection = styled(Box)` 5 | padding-left: 3.4em; 6 | text-indent: -3.4em; 7 | ` 8 | 9 | export const BioYear = styled.span` 10 | font-weight: bold; 11 | margin-right: 1em; 12 | ` 13 | -------------------------------------------------------------------------------- /components/footer.js: -------------------------------------------------------------------------------- 1 | import { Box } from '@chakra-ui/react' 2 | 3 | const Footer = () => { 4 | return ( 5 | 6 | © {new Date().getFullYear()} Joyce de Fátima Costa Santos. All Rights Reserved. 7 | 8 | ) 9 | } 10 | 11 | export default Footer 12 | -------------------------------------------------------------------------------- /lib/mocks/postsData.js: -------------------------------------------------------------------------------- 1 | import { v4 } from 'uuid'; 2 | 3 | export default [ 4 | // { 5 | // id: v4(), 6 | // title: "", 7 | // thumbnail: thumbFrontinsampa, 8 | // url: "https://www.linkedin.com/feed/update/urn:li:share:6955628974353825794?utm_source=linkedin_share&utm_medium=member_desktop_share&utm_content=post", 9 | // }, 10 | ] -------------------------------------------------------------------------------- /lib/mocks/bookData.js: -------------------------------------------------------------------------------- 1 | import CleanCode from "../../public/images/books/cleanCode.jpg"; 2 | import UseJsHead from "../../public/images/books/useJsHead.webp"; 3 | 4 | export default [ 5 | { 6 | bookID: '00', 7 | bookName: 'Clean Code', 8 | bookAuthor: "Robert C.Martin", 9 | bookImage: CleanCode, 10 | }, 11 | { 12 | bookID: '01', 13 | bookName: 'Use JavaScript Head', 14 | bookAuthor: "Morrison", 15 | bookImage: UseJsHead, 16 | }, 17 | ]; -------------------------------------------------------------------------------- /components/icons/heart.js: -------------------------------------------------------------------------------- 1 | const Heart = props => ( 2 | 14 | 15 | 16 | ) 17 | 18 | export default Heart 19 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import { ColorModeScript } from '@chakra-ui/react' 2 | import NextDocument, { Html, Head, Main, NextScript } from 'next/document' 3 | import theme from '../lib/theme' 4 | 5 | export default class Document extends NextDocument { 6 | render() { 7 | return ( 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | ) 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/icons/refresh-cw.js: -------------------------------------------------------------------------------- 1 | const RefreshCWIcon = props => ( 2 | 14 | 15 | 16 | 17 | 18 | ) 19 | 20 | export default RefreshCWIcon 21 | -------------------------------------------------------------------------------- /components/section.js: -------------------------------------------------------------------------------- 1 | import { motion } from 'framer-motion' 2 | import { chakra, shouldForwardProp } from '@chakra-ui/react' 3 | 4 | const StyledDiv = chakra(motion.div, { 5 | shouldForwardProp: prop => { 6 | return shouldForwardProp(prop) || prop === 'transition' 7 | } 8 | }) 9 | 10 | const Section = ({ children, delay = 0 }) => ( 11 | 17 | {children} 18 | 19 | ) 20 | 21 | export default Section 22 | -------------------------------------------------------------------------------- /pages/404.js: -------------------------------------------------------------------------------- 1 | import NextLink from 'next/link' 2 | import { 3 | Box, 4 | Heading, 5 | Text, 6 | Container, 7 | Divider, 8 | Button 9 | } from '@chakra-ui/react' 10 | 11 | const NotFound = () => { 12 | return ( 13 | 14 | Not found 15 | The page you're looking for was not found. 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ) 24 | } 25 | 26 | export default NotFound 27 | -------------------------------------------------------------------------------- /components/chakra.js: -------------------------------------------------------------------------------- 1 | import { 2 | ChakraProvider, 3 | cookieStorageManager, 4 | localStorageManager 5 | } from '@chakra-ui/react' 6 | import theme from '../lib/theme' 7 | 8 | export default function Chakra({ cookies, children }) { 9 | const colorModeManager = 10 | typeof cookies === 'string' 11 | ? cookieStorageManager(cookies) 12 | : localStorageManager 13 | 14 | return ( 15 | 16 | {children} 17 | 18 | ) 19 | } 20 | 21 | export async function getServerSideProps({ req }) { 22 | return { 23 | props: { 24 | cookies: req.headers.cookie ?? '' 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /components/dog.js: -------------------------------------------------------------------------------- 1 | const Dog = () => { 2 | return ( 3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 11 |
12 |
13 |
14 |
15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | ) 24 | } 25 | 26 | export default Dog 27 | -------------------------------------------------------------------------------- /components/work.js: -------------------------------------------------------------------------------- 1 | import NextLink from 'next/link' 2 | import { Heading, Box, Image, Link, Badge } from '@chakra-ui/react' 3 | import { ChevronRightIcon } from '@chakra-ui/icons' 4 | 5 | export const Title = ({ children }) => ( 6 | 7 | 8 | Works 9 | 10 | 11 | {' '} 12 | {' '} 13 | 14 | 15 | {children} 16 | 17 | 18 | ) 19 | 20 | export const WorkImage = ({ src, alt }) => ( 21 | {alt} 22 | ) 23 | 24 | export const Meta = ({ children }) => ( 25 | 26 | {children} 27 | 28 | ) 29 | -------------------------------------------------------------------------------- /components/voxel-dog-loader.js: -------------------------------------------------------------------------------- 1 | import { forwardRef } from 'react' 2 | import { Box, Spinner } from '@chakra-ui/react' 3 | 4 | export const DogSpinner = () => ( 5 | 13 | ) 14 | 15 | export const DogContainer = forwardRef(({ children }, ref) => ( 16 | 26 | {children} 27 | 28 | )) 29 | 30 | const Loader = () => { 31 | return ( 32 | 33 | 34 | 35 | ) 36 | } 37 | 38 | export default Loader 39 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/layouts/main' 2 | import Fonts from '../components/fonts' 3 | import { AnimatePresence } from 'framer-motion' 4 | import Chakra from '../components/chakra' 5 | 6 | import '../styles/dog.style.css' 7 | 8 | const handleToExit = () => (typeof window !== 'undefined') && window.scrollTo({ top: 0 }) 9 | 10 | if (typeof window !== 'undefined') window.history.scrollRestoration = 'manual' 11 | 12 | function Website({ Component, pageProps, router }) { 13 | return ( 14 | 15 | 16 | 17 | 22 | 23 | 24 | 25 | 26 | ) 27 | } 28 | 29 | export default Website 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lucasbercejesus", 3 | "version": "1.0.0", 4 | "description": "Joyce de Fátima Costa Santos website", 5 | "scripts": { 6 | "dev": "next dev -H 0.0.0.0", 7 | "build": "next build", 8 | "start": "next start", 9 | "prettier": "prettier --write .", 10 | "lint": "next lint" 11 | }, 12 | "keywords": [], 13 | "author": "Joyce de Fátima Costa Santos", 14 | "license": "MIT", 15 | "dependencies": { 16 | "@chakra-ui/icons": "^1.1.7", 17 | "@chakra-ui/react": "^1.8.8", 18 | "@emotion/react": "^11.9.0", 19 | "@emotion/styled": "^11.8.1", 20 | "framer-motion": "^6.3.0", 21 | "next": "^12.1.5", 22 | "react": "^17.0.2", 23 | "react-dom": "^17.0.2", 24 | "react-icons": "^4.3.1", 25 | "three": "^0.139.2", 26 | "uuid": "^9.0.0" 27 | }, 28 | "devDependencies": { 29 | "eslint": "^8.13.0", 30 | "eslint-config-next": "^12.1.5", 31 | "prettier": "^2.6.2" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /components/logo.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import { Text, useColorModeValue } from '@chakra-ui/react' 3 | import styled from '@emotion/styled' 4 | 5 | const LogoBox = styled.span` 6 | font-weight: bold; 7 | font-size: 18px; 8 | display: inline-flex; 9 | align-items: center; 10 | height: 30px; 11 | line-height: 20px; 12 | padding: 10px; 13 | 14 | img { 15 | transition: 200ms ease; 16 | } 17 | 18 | &:hover img { 19 | transform: rotate(20deg); 20 | } 21 | ` 22 | 23 | const Logo = () => { 24 | return ( 25 | 26 | 27 | 28 | 34 | Joyce de Fátima 35 | 36 | 37 | 38 | 39 | ) 40 | } 41 | 42 | export default Logo 43 | -------------------------------------------------------------------------------- /lib/model.js: -------------------------------------------------------------------------------- 1 | import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' 2 | 3 | export function loadGLTFModel( 4 | scene, 5 | glbPath, 6 | options = { receiveShadow: true, castShadow: true } 7 | ) { 8 | const { receiveShadow, castShadow } = options 9 | return new Promise((resolve, reject) => { 10 | const loader = new GLTFLoader() 11 | 12 | loader.load( 13 | glbPath, 14 | gltf => { 15 | const obj = gltf.scene 16 | obj.name = 'dog' 17 | obj.position.y = 0 18 | obj.position.x = 0 19 | obj.receiveShadow = receiveShadow 20 | obj.castShadow = castShadow 21 | scene.add(obj) 22 | 23 | obj.traverse(function (child) { 24 | if (child.isMesh) { 25 | child.castShadow = castShadow 26 | child.receiveShadow = receiveShadow 27 | } 28 | }) 29 | resolve(obj) 30 | }, 31 | undefined, 32 | function (error) { 33 | reject(error) 34 | } 35 | ) 36 | }) 37 | } 38 | -------------------------------------------------------------------------------- /components/layouts/article.js: -------------------------------------------------------------------------------- 1 | import { motion } from 'framer-motion' 2 | import Head from 'next/head' 3 | import { GridItemStyle } from '../grid-item' 4 | 5 | const variants = { 6 | hidden: { opacity: 0, x: 0, y: 20 }, 7 | enter: { opacity: 1, x: 0, y: 0 }, 8 | exit: { opacity: 0, x: -0, y: 20 } 9 | } 10 | 11 | const Layout = ({ children, title }) => { 12 | const t = `${title} - Joyce de Fátima Costa Santos` 13 | return ( 14 | 22 | <> 23 | {title && ( 24 | 25 | {t} 26 | 27 | 28 | 29 | )} 30 | {children} 31 | 32 | 33 | 34 | 35 | ) 36 | } 37 | 38 | export default Layout 39 | -------------------------------------------------------------------------------- /components/theme-toggle-button.js: -------------------------------------------------------------------------------- 1 | import { AnimatePresence, motion } from 'framer-motion' 2 | import { IconButton, useColorMode, useColorModeValue } from '@chakra-ui/react' 3 | import { SunIcon, MoonIcon } from '@chakra-ui/icons' 4 | 5 | const ThemeToggleButton = () => { 6 | const { toggleColorMode } = useColorMode() 7 | 8 | return ( 9 | 10 | 18 | , )} 22 | onClick={toggleColorMode} 23 | > 24 | 25 | 26 | ) 27 | } 28 | 29 | export default ThemeToggleButton 30 | -------------------------------------------------------------------------------- /lib/theme.js: -------------------------------------------------------------------------------- 1 | import { extendTheme } from '@chakra-ui/react' 2 | import { mode } from '@chakra-ui/theme-tools' 3 | 4 | const styles = { 5 | global: props => ({ 6 | body: { 7 | bg: mode('#f0e7db', '#202023')(props) 8 | } 9 | }) 10 | } 11 | 12 | const components = { 13 | Heading: { 14 | variants: { 15 | 'section-title': { 16 | textDecoration: 'underline', 17 | fontSize: 20, 18 | textUnderlineOffset: 6, 19 | textDecorationColor: '#525252', 20 | textDecorationThickness: 4, 21 | marginTop: 3, 22 | marginBottom: 4 23 | } 24 | } 25 | }, 26 | Link: { 27 | baseStyle: props => ({ 28 | color: mode('#3d7aed', '#4299E1')(props), 29 | textUnderlineOffset: 3 30 | }) 31 | } 32 | } 33 | 34 | const fonts = { 35 | heading: "'M PLUS Rounded 1c'" 36 | } 37 | 38 | const colors = { 39 | grassTeal: '#88ccca' 40 | } 41 | 42 | const config = { 43 | initialColorMode: 'dark', 44 | useSystemColorMode: true 45 | } 46 | 47 | const theme = extendTheme({ config, styles, components, fonts, colors }) 48 | export default theme 49 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Joyce de Fatima 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Joyce Homepage 2 | 3 | [https://portifolio-joycefatima.vercel.app/](https://portifolio-joycefatima.vercel.app/) 4 | 5 | ![Image thumbnail](./docs/readme.png) 6 | 7 | ## Stack 8 | 9 | - [Next.js](https://nextjs.org/) - A React framework with hybrid static & server rendering, and route pre-fetching, etc. 10 | - [Chakra UI](https://chakra-ui.com/) - A simple, modular and accessible component library for React 11 | - [Three.js](https://threejs.org/) - 3D library for JavaScript 12 | - [Framer Motion](https://www.framer.com/motion/) - An animation library for React 13 | 14 | ## Project structure 15 | 16 | ``` 17 | $PROJECT_ROOT 18 | │ # Page files 19 | ├── pages 20 | │ # React component files 21 | ├── components 22 | │ # Non-react modules 23 | ├── lib 24 | │ # Static files for images and 3d model file 25 | └── public 26 | ``` 27 | ## License 28 | 29 | MIT License. 30 | 31 | You can create your own homepage for free without notifying me by forking this project under the following conditions: 32 | 33 | - Add a link to [my homepage](https://www.craftz.dog/) 34 | - Do not use the 3d voxel dog 35 | 36 | Check out [LICENSE](./LICENSE) for more detail. 37 | -------------------------------------------------------------------------------- /pages/posts.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | import { Container, Heading, SimpleGrid } from '@chakra-ui/react'; 3 | 4 | import Layout from '../components/layouts/article'; 5 | import Section from '../components/section'; 6 | import { GridItem } from '../components/grid-item'; 7 | 8 | import getPosts from '../services/PostService/getPosts'; 9 | 10 | const Posts = () => { 11 | const [posts, setPosts] = useState([]); 12 | 13 | useEffect(() => { 14 | setPosts(getPosts()); 15 | }, []); 16 | 17 | return ( 18 | 19 | 20 | 21 | Popular Posts 22 | 23 | 24 |
25 | 26 | {posts.map(post => ( 27 | 33 | ))} 34 | 35 |
36 | 37 | 38 | ) 39 | } 40 | 41 | export default Posts 42 | export { getServerSideProps } from '../components/chakra' 43 | -------------------------------------------------------------------------------- /pages/books.js: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | 3 | import { Container, Heading, SimpleGrid } from '@chakra-ui/react'; 4 | 5 | import Layout from '../components/layouts/article'; 6 | import Section from '../components/section'; 7 | import { GridItem } from '../components/grid-item'; 8 | 9 | import bookData from '../lib/mocks/bookData'; 10 | 11 | const BookIRecomended = () => { 12 | return ( 13 | 14 | 15 | 21 | Hello, in this area of my website, I recomended 22 | to you some books that I have read. 23 | 24 | 25 |
26 | 31 | {bookData?.map(book => ( 32 | 37 | ))} 38 | 39 |
40 | 41 | 42 | ) 43 | } 44 | 45 | export default memo(BookIRecomended); -------------------------------------------------------------------------------- /components/layouts/main.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import dynamic from 'next/dynamic' 3 | import NavBar from '../navbar' 4 | import { Box, Container } from '@chakra-ui/react' 5 | import Footer from '../footer' 6 | import VoxelDogLoader from '../voxel-dog-loader' 7 | // import Dog from '../dog' 8 | 9 | const LazyAnimation = dynamic(() => import('../dog'), { 10 | ssr: false, 11 | loading: () => 12 | }) 13 | 14 | const Main = ({ children, router }) => { 15 | return ( 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Joyce de Fátima 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | {children} 34 | 35 |