Project-portfolio #371
Project-portfolio #371
Conversation
the commit. git commit -m "Trying to resolve problem"
There was a problem hiding this comment.
Hi! Please make sure you're following the design and that your project is responsive (have a look at 320px width). Here are some questions to start from:
- Are all font-sizes according to the design?
- Are all font-families according to the design?
- Are all sizes according to the design?
- Are all distances (margin, padding) according to the design? Are the sections aligned where they should be?
- Does it look good on all screen widths from 320px to 1600px?
- Are the line-heights according to the design?
- Are the texts center/left aligned according to the design?
|
Hi Lovisa! Good work, but your content is still too wide for 320px phones.
Apart from that, I think you nailed it! |
Now it should be responsive! Third time is a charm :P |
|
Great progress! A tiny thing: the sections are still not completely aligned (see image example), it will look so much better when they are - so fix it when you have some time. I will approve now though
|
| font-size: 32px; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: normal; |
There was a problem hiding this comment.
Maybe it'd be easier to remove "line-height: 1.5;" in App.css, and then just add the bigger line-height where it's needed instead of repeating "line-height: normal".
| flex-direction: column; | ||
| justify-content: center; |
There was a problem hiding this comment.
Repeating code that is already found outside of the media queries.
| I’m a Front end developer with a background in UX Design, and I want | ||
| to create great, accessible apps and websites with people in focus. |
| height: 280px; | ||
| width: 408px; | ||
| object-fit: cover; | ||
| align-self: stretch; |
There was a problem hiding this comment.
Not all images are displayed with the same width, even though the code says they should.... ?
| <section className="project-card" key={index}> | ||
| <img | ||
| src={project.image} | ||
| alt={`image of project ${project.name}`} |
| <div className="project-info"> | ||
| <h3 className="project-title">{project.name}</h3> | ||
| <p className="project-description">{project.description}</p> | ||
| <Tags tags={project.tags} /> |
| /> | ||
| </div> | ||
| <div className="article-info"> | ||
| <p className="article-tag">{article.releaseDate}</p> |
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); |
There was a problem hiding this comment.
Smart to change between flex and grid for the layout.
| } | ||
|
|
||
| .github:hover { | ||
| filter: invert(1) sepia(1) saturate(5) hue-rotate(250deg); |
There was a problem hiding this comment.
Nice to use filter to change appearance on hover.
Netlify link
https://lovisaaberg-portfolio.netlify.app/
Collaborators
Solo