Hi , i started learning nextjs 2 days back and ...

[glacial comet]

Thread automatically created, you can use it to discuss about the project!

[obtuse harbor]

Well you can deploy it to some platforms like vercel so that we can visit your site

[half hawk]

surely , i will do it tonight after hitting gym , been coding since morning

🥱

[obtuse harbor]

[nova quartz]

@me when it gets deployed on vercel

not bad for a first project

learn tailwind next

https://tailwindcss.com/

https://tailwindui.com/

https://chakra-ui.com/

https://mui.com/

https://flowbite.com/

[narrow rapids]

Some observations

1. Why do you choose to mix tailwind with MUI?

2. Why do you write your import like @/node_modules/@mui/material instead of just @mui/material

3. Why do all props have any type?

4. Why are images all in the public folder instead of imported into the code?

5. Trying to fork the repo and deploy, but there are some React related errors that prevent me from doing so

[half hawk]

Thanks a ton guys for review , let me work on your suggestions one by one

[half hawk]

1. I was trying to implement Card myself but then i thought it was too much work so just used material UI

2. Will fix it

3. i didn't know the correct type , will fix it

4. Not sure what you mean here , aren't static images supposed to be in the public folder ?

5. Okay i will look into it

[narrow rapids]

Unless for a very specific use case, I typically store them in an /assets folder and then import them to the component:

import vercel from "@/assets/vercel.jpg";

This will guarantee vercel is in the correct type and the path is correct, or else ESLint will complain and build will fail, instead of build pass and then the image result in 404 after deployed.

[narrow rapids]

Typically, I have the following arrangement. Let's say for your HomeScreen component, since the root element is a div, I will extend the prop type from div props and then pass down the rest of the props to the div, i.e.

interface Props extends ComponentProps<"div"> {
  homeRef?: RefObject<HTMLDivElement>;
}

const HomeScreen:FC<Props> = ({ homeRef, className = "", ...props }) => {
  return (
    <div className={`h-screen scroll-my-20 ${className}`} ref={props.homeRef} {...props}>
      // ... rest of the components
    </div>
  )
}

This will allow us to have some degree of customization when using HomeScreen without caring much what it does internally.

But TBH, the best way of implementing HomeScreen is using forwardRef.

const HomeScreen:FC<ComponentProps<"div">> = forwardRef(({ className = "", ...props }, ref) => {
  return (
    <div className={`h-screen scroll-my-20 ${className}`} ref={ref} {...props}>
      // ... rest of the components
    </div>
  )
})

HomeScreen.displayName = "HomeScreen"

[half hawk]

@obtuse harbor @nova quartz @narrow rapids i deployed my app

URL : https://portfolio-eight-blond-76.vercel.app/

[narrow rapids]

I have to be blunt. The mobile experience is horrible

My suggestion will be to start with a UI component library, before you are feeling comfortable to build your own design system

[half hawk]

hmm , i didn't add tailwind tags to make it mobile responsive , will do that as a next task

[vapid dragon]

Building your own UI component library from scratch definitely has its upsides especially if you want to hone your HTML and CSS skills.
However If you are building a seriously used project like a resume then I also recommend rewriting everything using a component library.

@half hawk I highly recommend shadcn/ui.
Man, if I just had shadcn/ui when I was a beginner I could have saved so much time 😭

IT IS AWESOME https://ui.shadcn.com/docs/installation/next