salahaddin / frontend

My Portfolio's website frontend.

Setting up

For installing with libraries' requirement on Vercel use the next in the install command: yum install automake -y && yarn install.

As we are not using optimization libraries, we don't need use this method anymore.

Notes

• For lazy-loaded images, for now we can't not do this easily with the next/image component.

frontend's Issues

Localize tool types.

It would be beautiful if in my skills i could see each title localized to a language.
In this case, we could do the next:

1. Get the group name and lower it.
2. Put each type label in a new localization which just contains them.
3. Use this one to get the localized name.
4. Pass the result as the new group.

It could be a pure function!

Control timelime items' responsivenes

It need to be tested and improved:

• Link in experiences is overloaded -> Extend a few the timeline width.
• Review timeline responsiveness.
• Review timeline item responsiveness.

Prop `className` did not match with Server

React is showing me this error all time i don't restart the server:

Warning: Prop `className` did not match. Server: "MuiAvatar-root MuiAvatar-circle makeStyles-large-5" Client: "MuiAvatar-root MuiAvatar-circle makeStyles-large-1"
    in div (created by ForwardRef(Avatar))
    in ForwardRef(Avatar) (created by WithStyles(ForwardRef(Avatar)))
    in WithStyles(ForwardRef(Avatar)) (at personalinformation.js:73)
    in div (created by ForwardRef(CardHeader))
    in div (created by ForwardRef(CardHeader))
    in ForwardRef(CardHeader) (created by WithStyles(ForwardRef(CardHeader)))
    in WithStyles(ForwardRef(CardHeader)) (at personalinformation.js:39)
    in section (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (at personalinformation.js:38)
    in PersonalInformation (at about-me.js:80)
    in main (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at layout.js:26)
    in Layout (at about-me.js:38)
    in AboutMe (at _app.js:28)
    in App
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

It also removes my custom styles by default one.

Create a properly error page

Right now it is very ugly, i created it to handle it with localization, but now it must be enhanced.

Template: https://github.com/vercel/next.js/blob/canary/packages/next/pages/_error.tsx

Support for rendering code snippets.

As this portfolio website also contains blogs from mine, it is required to enable code rendering.

It could use prismjs or highlights. Look around possible solutions.

Skill groups at About Me page does not load translated titles

The bug still happens: at first entering the site does not render the translated skill group titles but the normal literals use to be translated.

It must load them correctly as it does with the other content.

Improving the SEO on page

The next task must be done in order to improve the website SEO.

• Remove the log for web vitals in production (is it any way to restrict this to just dev environment)?
• Use the different image formats to improve performance.

Link on URL component does not redirect to external URL

It seems like NextJS adds the local base url to that external url, making it redirect to an internal url instead to send us to an external site.

Disqus discussion category is not set up yet.

We made a code in order to give a discussion category to every post by default at its publication, but it still does not work.

Reported here.

Why?

Upgrade to NextJS 10

Successfully upgrade the project to NextJS 10:

• Install it on package.json
• Replace image component with the Next built-in one.

Follow the specifications used in Vercel commerce.