Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mai & Martin - Worky Design Handoff #50

Open
wants to merge 122 commits into
base: main
Choose a base branch
from

Conversation

Martin-Joensson
Copy link

Netlify link

https://worky-design.netlify.app/

Collaborators

[maikanetaka]

Copy link

@AntonellaMorittu AntonellaMorittu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello Mai & Martin, big congrats for completing your week 12 project!Great job ⭐ The site looks very close to the design and followed our requirements. How did you like Tailwind? Seems like you tackled it in the right way and implemented a great result! Super cool you localised the page. Now the design is not pixel perfect, but that's okay, here's a little things that need to be fixed to achieve the basic requirements:

  • On tablet the footer layout doesn’t match the design
  • Accessibility: you scored 89, should be at least 95
  • Keep an eye on responsiveness on small screen (320px width)

Please fix these little things and you're good to go 🚀 Almost there!

Copy link

@Caracal23 Caracal23 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We noticed that all your text is located in a JSON file; that made it a bit hard to review/read but we also understand that it was made for the translation goal; which we found really cool 🚀.

Overall your code is clean and well structure. Well done !!!

//Alma & Etna

export const App = () => {
return <div>Find me in src/app.jsx!</div>;
const [locale, setLocale] = useState("en");

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing feature!! We did not know the change-language button works until we saw your code!

//Alma & Etna

return (
<div className="border border-black desktop:border-none desktop:drop-shadow-none bg-background-neon-green rounded-lg drop-shadow-card mx-4 my-12 tablet:my-18 tablet:mx-6 flex">
<img
className="w-[100px] tablet:w-[120px] desktop:w-[160px] self-center ml-2 tablet:ml-4"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good approach on adding your own widths to better follow the design.

//Alma & Etna

const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
const checkIfMobile = () => setIsMobile(window.innerWidth < 360);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do not quite follow how this function works, but if it is for responsiveness on the icons; great approach to make it work!!

//Alma & Etna

checkIfMobile();
}

window.addEventListener("resize", handleResize);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the icons are a bit too big for the smallest screen; this section gets bigger than the view port, you have to scroll horizontally.

//Alma & Etna

@@ -0,0 +1,13 @@
import PropTypes from "prop-types";

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We see that you have two button components; maybe you could have made one button component reusable ((:
//Alma & Etna

{data["smallSubheading"]}
</span>
<span className="hidden md:block">
{data.subheading.split("\n").map((line, index) => (

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very creative ways of targeting the text display situation.

//Alma & Etna

<React.Fragment key={index}>
{" "}
{line}
<br />

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We heard that
is outdated and there might be accessibility issues for it :(

//Alma & Etna

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants