In the bottom position of the scroll on the Posts and Works pages, it is impossible to follow the link in the navbar

Here I'm trying to follow Link, after clicking opens youtube video below navbar:

Great Job! Really like your minimalistic design. I try to reuse your website and found a bug, which also exists on your page:

1. For example navigate to https://www.craftz.dog/works
2. Scroll down to the bottom of the page
3. Click on for example "Pichu*Pichu"
4. BUG: Now the works page jumps to the top (of the works page) before the actual navigating to (https://www.craftz.dog/works/pichu2) begins
   -> In my eyes it is annoying to see a fraction of a second the to of the works page before the navigation.

Do you know how to fix this? I tried it myself but I do not get along.
Thanks

PS
I am using a 15" MacBook Pro. Maybe my screen is smaller than most desktop systems and you didn't see the bug?

Prettier invalid option here
Did you mean --write?

I noticed that any glb models that I use work perfectly in local environment but do not load when deployed using vercel... that's the case with craftzdog's vercel deployment as well.. the 3d voxel dog never loads..

Hi, this looks amazing. No issue or anything, just wanted to ask if I can use the code base of this project to build my own portfolio and publish it online? Obviously change all your personal info and imagery to mine. Awesome job. Thanks!

just found a typo under the Stack, easily to ammend
Original:
Chakra UI - A simple, modular and accessible component libray for React
Correct:
Chakra UI - A simple, modular and accessible component library for React

Hi,

I'm following the tutorial in adding a 3D model using Three. I've been watching that part of the tutorial again and compare my code with the github version to see if there is any typo, but I didn't see any. Can you show me where I could be doing wrong? Thank you.

The cat with PC one

Hello ,

Why is GSAP not working properly in this project ? even though in an older version of it , it works fine , is there a cause for it ?

I found a way to this little

Its by adding this into the <menu> in ~/src/components/navbar.js

Hope it help, i do like to keep a clean console :)

Thx for sharing Takuya!

Hey, I'm getting two rendered Images in my donut.js file. I've studied the tutorial and native codebase to find the problem, but I'm stumped. Is this a dependency issue with React?

#36

donut.js

`
import { useState, useEffect, useRef, useCallback } from 'react'
import { Box, Spinner } from '@chakra-ui/react'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { loadGLTFModel } from '../lib/model'

function easeOutCirc(x) {
return Math.sqrt(1 - Math.pow(x - 1, 4))
}

const Donut = () => {
const refContainer = useRef()
const [loading, setLoading] = useState(true)
const [renderer, setRenderer] = useState()
const [_camera, setCamera] = useState()
const [target] = useState(new THREE.Vector3(-0.5, 1.2, 0))
const [initialCameraPosition] = useState(
new THREE.Vector3(
20 * Math.sin(0.2 * Math.PI),
10,
20 * Math.cos(0.2 * Math.PI)
)
)

const [scene] = useState(new THREE.Scene())
const [_controls, setControls] = useState()

const handleWindowResize = useCallback(() => {
    const { current: container } = refContainer
    if (container && !renderer) {
      const scW = container.clientWidth
      const scH = container.clientHeight

      renderer.setSize(scW, scH)
    }
  }, [renderer])

/* eslint-disable react-hooks/exhaustive deps */
useEffect(() => {
    const { current: container} = refContainer
    if (container && !renderer) {
        const scW = container.clientWidth
        const scH = container.clientHeight 

        const renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true 
        })
        renderer.setPixelRatio(window.devicePixelRatio)
        renderer.setSize(scW, scH)
        renderer.outputEncoding = THREE.sRGBEncoding
        container.appendChild(renderer.domElement)
        setRenderer(renderer)

        const scale = scH * 0.005 + 25.8
        const camera = new THREE.OrthographicCamera(
            -scale,
            scale,
            scale,
            -scale,
            0.01,
            5000
        )
        camera.position.copy(initialCameraPosition)
        camera.lookAt(target)
        setCamera(camera)

        const ambientLight = new THREE.AmbientLight(0xcccccc, 1)
        scene.add(ambientLight)

        const controls = new OrbitControls (camera, renderer.domElement)
        controls.autoRotate = true
        controls.target = target 
        setControls(controls)

        loadGLTFModel(scene, '/totoro.glb', {
            receiveShadow: false,
            castShadow: false 
        }).then(() => {
            animate()
            setLoading(false)
        })

        let req=null 
        let frame= 0 
        const animate = () => {
            req = requestAnimationFrame(animate)

            frame = frame <= 100 ? frame + 1 : frame

            if(frame <= 100) {
                const p = initialCameraPosition
                const rotSpeed = -easeOutCirc(frame / 120) * Math.PI * 20

                camera.position.y = 5
                camera.position.x = p.x * Math.cos(rotSpeed) + p.z * Math.sin(rotSpeed)
                camera.position.z = p.z * Math.cos(rotSpeed) - p.x * Math.sin(rotSpeed) 
                camera.lookAt(target)
            } else {
                controls.update()
            }
            renderer.render(scene, camera)
        }
        return () => {
            console.log('unmount')
            cancelAnimationFrame(req)
            renderer.dispose()
        }
    }
}, [])

useEffect(() => {
    window.addEventListener('resize', handleWindowResize, false)
    return () => {
        window.removeEventListener('resize', handleWindowResize, false)
    }
}, [renderer, handleWindowResize])

return (
    <Box 
      ref={refContainer}
      className="donut"
      m="auto"
      at={['-20px', '-60px', '-120px' ]}
      mb={['-40px', '-140px', '-200px' ]}
      w={[280, 480, 640]}
      h={[280, 480, 640]}
      position="relative"
    >
        {loading && (
            <Spinner 
              size="xl" 
              position="absolute" 
              left="50%"
              top="50%" 
              ml="calc(0px - var(--spinner-size) /2"
              mt="calc(0px - var(--spinner-size))"
            />
        )}
    </Box>
)

}
`
export default Donut

Main.js

`
import Head from 'next/head'
import Navbar from '../navbar'
import NoSsr from '../no-ssr'
import { Box, Container } from '@chakra-ui/react';
import Donut from '../donut'

const Main = ({ children, router }) => {
return (



<title>Darkskittlz - Homepage </title>






{children}


)
}

export default Main;
`

Donut-Loader

`
import { forwardRef } from 'react'
import { Box, Spinner } from '@chakra-ui/react'

export const DonutSpinner = () => (

)

export const DonutContainer = forwardRef(({ children }, ref) => (
<Box
ref={ref}
className="donut"
m="auto"
mt={['-20px', '-60px', '-120px']}
mb={['-40px', '-140px', '-200px']}
w={[280, 480, 640]}
h={[280, 480, 640]}
position="relative"

{children}

const Loader = () => {
return (



)
}

export default Loader
`

_app.js

`
import { ChakraProvider } from "@chakra-ui/react"
import Layout from '../components/layouts/main'
import Fonts from '../components/fonts'
import theme from '../lib/theme'
import { AnimatePresence } from 'framer-motion'
import { Suspense } from "react"

const Website = ({ Component, pageProps, router }) => {
return (





<Component {...pageProps} key={router.route} />



)
}
export default Website;
`

index.js

`
import {
Link,
Box,
Button,
Heading,
Container,
Text,
useColorModeValue
} from '@chakra-ui/react'
import { ChevronRightIcon } from '@chakra-ui/icons'
import Layout from '../components/layouts/article'
import styled from '@emotion/styled'
import Section from '../components/section'
import Paragraph from '../components/paragraph';
import { GridItem } from '../components/grid-item';
import Image from 'next/image';

const BioSection = styled(Box) padding-left: 3.4em; text-indent: -3.4em;

const BioYear = styled.spanfont-weight: bold; margin-right: 1em;

const Page = () => {
return (


<Box
borderRadius="lg"
bg={useColorModeValue('whiteAlpha.500', 'whiteAlpha.200')}
css={{ backdropFilter: 'blur(10px)' }}
align="center"
h={12}
ml={50}
mr={50}
mb={6}
p={3}
>
Hello, I'm a full-stack developer based in Miami!

<Box
display={{md: 'flex'}}
style={{flexDirection: "column"}}
>


Tristan Carlisle


Digital Artist, Developer, Designer


<Box
flexShrink={0}
mt={{ base: 4, md: 0 }}
ml={{ md: 6 }}
align="center"
>

			<Section delay={0.1}>
				<Heading as="h3" variant="section-title">
					Work 
				</Heading>
				<Paragraph>
					Tristan is a react developer who specializes in the MERN/PERN stack. He enjoys developing frontend user interfaces that prioritize sleek design, integrate background animations, and consume APIs to display interactive information. 
					As a blockchain engineer, he enjoys connecting frontend web applications with the blockchain via Web3js. 
				</Paragraph>
				<Box align="center" my={4}>
					<Link href="/works">
						<Button rightIcon={<ChevronRightIcon />} colorScheme="teal">
							My Portfolio
						</Button>
					</Link>
				</Box>
			</Section>

			<Section delay={0.2}>
				<Heading as="h3" variant="section-title">
					Bio
				</Heading>
				<BioSection> 
					<BioYear>1993</BioYear>
					Born in Miami, FL	
				</BioSection>
				<BioSection>
					<BioYear>2020</BioYear>
					Began programming journey with CodeAcademy & FreeCodeCamp
				</BioSection>
			</Section>

			<Section delay={0.3}>
				<Heading as="h3" variant="section-title">
					I ❤ 
				</Heading>
				<Paragraph>Programming, 3D Rendering, Crypto, Rock Climbing, Parkour, Drums, Guitar {' '}
				<Link href="https://beacons.ai/darkskittlz">Cosplay, </Link>
				Skateboarding, 
				<Link href="https://beacons.ai/darkskittlz"> Youtube</Link>
				</Paragraph>
			</Section>

			<Section delay={0.4}>
				<Heading as="h3" variant="section-title">
					Inspired By 
				</Heading>
				<Paragraph>{' '}
					<Link href="https://www.craftz.dog/">Takuyama Matsuyama </Link>
				</Paragraph>
			</Section>

		</Container>
	</Layout>
)

}

export default Page;
`

Thank you @craftzdog for your help. 🆘 ⛑️

Cannot find module bug or something

Hi @craftzdog, just notice that you've missing a dot in 'gray200' value

Hey @craftzdog hope you're doing well. I've been doing my best to configure my next.config.js file to accomadate image files in my project. But no matter what I've tried I haven't been able to get my files to upload in production. Everything works fine in development and I'm able to create a successful build, but hosting with Netlify & Vercel has yielded no succesful builds after 3 days of debugging.

Attached are my error logs, a link to my repo, and my build output.

Repo: https://github.com/Darkskittlz/TotoroPortfolio

Vercel:
message.txt

Netlify:
message (1).txt

Next Build Results:

keep on getting this issue not sure why, have directories all set correctly

Hi, I found that 404 page cannot still theme mode!

Hey I think you should upgrade to the latest major nextjs version which was released a week ago.
Nextjs 12 has a lot of new features including a rust compiler

Hi Takuya,

Really nice work on the homepage website!

I'm not sure if this is intentional, but I've noticed a small issue with the navbar transparency.
It sometimes causes a text collision with the page content that makes the text unreadable.

You can check it out below.

The bright theme is kind of annoying. What do you guys think about this color being the bright theme instead: #e3e3e3?

Hello. Nice to meet u!

It's my first time to reach that more advanced web toghlogy -D.
How to make the dark mode still when reflash the page.

Kind regards,
Willie Xu -- A high school student
China

Thanks for your awesome job ,especially the the 3d voxel dog, amazing ！

I have a question about the 3d voxel dog. How was it created?

clone craftzdog account then change the .glb file without changing the threejs code at all, when I run dev it works but when I run start threejs it doesn't render

https://github.com/dzakyabdurhmn/itskinaa

Hi @craftzdog, hope you're doing well, I really enjoy you're content!
While I'm watching you're video, I've notice that the baseStyle for the Link component you're defined in theme.js doesn't work, I can't figure out why.

Error: > Couldn't find a pages directory. Please create one under the project root
at Object.findPagesDir (C:\Users\USER HP\Development\ghost_homepage\node_modules\next\dist\lib\find-pages-dir.js:33:11)
at new DevServer (C:\Users\USER HP\Development\ghost_homepage\node_modules\next\dist\server\dev\next-dev-server.js:110:44)
at NextServer.createServer (C:\Users\USER HP\Development\ghost_homepage\node_modules\next\dist\server\next.js:102:20)
at C:\Users\USER HP\Development\ghost_homepage\node_modules\next\dist\server\next.js:117:42
at async NextServer.prepare (C:\Users\USER HP\Development\ghost_homepage\node_modules\next\dist\server\next.js:92:24)
at async C:\Users\USER HP\Development\ghost_homepage\node_modules\next\dist\cli\next-dev.js:126:9

It would be cool if you could store users themes in localhost after they have changed them.

Hello
It's a really cool product.
I am an app developer living in Korea.
Recently, I am studying with interest in web development.

Is it okay to clone the code here and customize it based on my personal information and publish it?

Device: iPhone XS
Version: iOS 13.7
Browser: Safari
Is there any solution to make it run on older ios versions?

Hi,

Swapping the Work and Bio headings makes more sense on the home page.

Thanks,
Jack

https://harryhopkinson.vercel.app/
MIT License.

You can create your own homepage for free without notifying me by forking this project under the following conditions:

Add a link to my homepage
Do not use the 3d voxel dog