Martin Jönssons Portfolio #361
Conversation
| @@ -0,0 +1,8 @@ | |||
| # Portfolio Project | |||
There was a problem hiding this comment.
Is it possible that you have two readme files?
I think you would only need the one on the outer layer that is shown on GitHub. 😃
| margin: 0; | ||
| } | ||
|
|
||
| p { |
There was a problem hiding this comment.
I love that you made an overall rule for all the p and header elements! 👍
| width: 30px; | ||
| height: 68px; | ||
| stroke: 6px; | ||
| filter: invert(82%) sepia(68%) saturate(1195%) hue-rotate(336deg) |
There was a problem hiding this comment.
I have never seen this before. I will have to google what all this means. Learning while doing reviews. Thank you Martin!
| } | ||
| } | ||
|
|
||
| /* Phone */ |
There was a problem hiding this comment.
I see you went Desktop first. Maybe next time you wanna try Mobile first? 😉
For me mobile first is easier since I am getting more space over time.
| display: flex; | ||
| flex-direction: column; | ||
| place-content: center; | ||
| background-color: rebeccapurple; |
| import { Photo } from "../Photo/Photo"; | ||
| import "./Card.css"; | ||
|
|
||
| export const Card = ({ |
There was a problem hiding this comment.
I love how reusable you made this component. 🥇
There was a problem hiding this comment.
⭐️
Nice animation of the arrow and the scrolling banner! Looks smooth, and so does the hovering of the buttons 👍 You've done a good job overall, mainly you need to double-check distances and sizes (have a look below).
Needs another take
- Make sure to pay attention to all the distances, e.g. Between profile image and heading + heading and description text it should be 32px in mobile. Same with side padding on mobile, should be 16px instead of 32px. And distances within each section should also be according to the design:
Double-check this for the both top and bottom of each section. - Also the distance around the project titles, should be 24px / 16px
- Tablet
- You can have the breakpoint earlier (in the design tablet design starts at 745px)
- Make sure all sections align (same side padding)
- Follow the given font-sizes, e.g. h2 56px
- h3s of Skills section can be display: inline-block; to decrease the width
Todo
Making the SoMe icons clickable.
There was a problem hiding this comment.
Hey Martin, I'm gonna approve your project as I saw you applied some changes as we asked ⭐ a little tip: you know what you need to avoid to make your site look truly professional? Avoid images and icons in jpeg or jpg that lose resolution, always go for svgs to keep the high quality at any size (I'm referring to the social media icons). Well done 🥇
Netlify link
https://martin-joensson-portfolio.netlify.app/