ngoakor12 / ngoako.dev Goto Github PK

• about picture
• projects cover images and main images

Types so far:

• Individual
• Group

Task:

• Find appropriate svg icons
• add individual or group(depending on type of project*) from ./src/svgs.js to /src/components/Project.js
• #54

*the type should be a field in the fetched project object

Mockups/example
Styles

color: hsl(210,13,71);

Larger screens

Smaller screens

Also incorporate a Tippyjs tooltip with text "individual project" or "group project". See contact options in navigation component to see how to it's already done.

• design mockups
• code implementation

Need to do some research on css styling in a react app first

Task:

• choose a css styling approach to go with
• make use of css variables
• use the right units(font-size and media queries)

See mockup below:

More context can be found here

Tasks

• #58
• #59

• Add fade in animations/transitions on focus/scroll
• Mouse interactions

More context can be found here.

The button should follow the website's secondary button style(dig in ./src/App.css file to find them) plus have a white background. Button style to follow:

Refactor the page components by moving them to a pages folder in src

Tasks:

• create a ./src/pages folder
• move ./src/components/Home.js to ./src/pages folder
• move ./src/components/ProjectDetails.js to ./src/pages folder

useEffect in every page or React Helmet package can be used to achieve this. Checkout this

Clicking the input labels in the contact form section should focus on that specific input

• #70
• #71
• #72

I know Jasmine. Considering using jest or mocha

Code blocks are not straight forward. Find a way to incorporate code using sanity.

https://github.com/portabletext/react-portabletext/blob/main/MIGRATING.md

More context can be found here.

The button should follow the website's secondary button style(dig in ./src/App.css file to find them) plus have a white background. Button style to follow:

When in a project details page, reloading breaks the site. Looks like project details doesn't get projects after reload so the page breaks.

Create a page which contains a live responsive cv/resume which is downloadable and shareable to other sites

Validation logic

All fields:

• Should not be empty

Valid name:

• should be made up of alphanumeric characters

Valid email:

• should start with non-numeric characters
• should include at least one dot(.) character
• should include exactly one at(@) character

I don't like the default html validation you get with adding a required attribute to form fields. To complete this issue, I need to:

• #60
• #61

https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide

All that's needed is to add a disable attribute to the mentioned buttons/links and have a condition the returns true if the link blank

On small screens, the list of tech used overflows:

I think this applied to the technologies used container should fix the issue:
flex-wrap: wrap;

Resources:

• official nextjs from reat tutorial
• official migration tutorial

Leaving some fields blank when adding a new project completely breaks the site. Making everything required prevents that problem.

See chrome screenshot for when I try a scroll down:

The nav bar gets cut at the top but it shouldn't. I suspect it's because of the use of the fixed CSS property on chrome mobile. Maybe using sticky instead might solve it, I'm not sure. Poke around and see if you can't figure it out.

First step is done here, all that needs to be done is to convert the remaining files to .ts or .tsx