ML portfolio project #49
Conversation
JeffieJansson
left a comment
JeffieJansson
left a comment
There was a problem hiding this comment.
You have done an amazing job with the structure and code! It's easy to follow and readable! the website looks great in all views(320-1600) adn works as it should! Keep up the good work Marina! :D
| <Image src={ProfileImage} alt="Profile picture of Marina Lendt" /> | ||
| <ContactInfo> | ||
| <Name>Marina Lendt</Name> | ||
| <Phone>+46(0)708 60 72 77</Phone> |
There was a problem hiding this comment.
Really good! A small tip is to use anchor tags <a> to make phone and email clickable :)
There was a problem hiding this comment.
Thanks! I will keep that in mind!
| } | ||
| `; | ||
|
|
||
| const DateTag = styled.time` |
There was a problem hiding this comment.
Nice use of a rare element! I've never used <time> before! :)
| gap: 80px; | ||
|
|
||
| &:nth-child(even) { | ||
| flex-direction: row-reverse; |
| <Phone>+46(0)708 60 72 77</Phone> | ||
| <Email>[email protected]</Email> | ||
| </ContactInfo> | ||
| <SocialLinks> |
There was a problem hiding this comment.
Would have been nice to collect repeatable content like this in an array and then loop out the elements. Then if you add more social media buttons, its as easy as adding just the data for it (this is usually how they come in from the API):
const soMe = [
{
name: 'Github'.
link: 'https://github.com/dashboard',
icon: ButtonGithubSVG,
},
{...},
{...},
]
// Then in the jsx:
{soMe.map((item, index) => (
<SocialButton href={item.link} aria-label={`Visit me on ${item.name}}` target="blank" rel="noopener noreferrer">
<img src={item.icon} alt={item.name} />
</SocialButton>
))Also SVGs doesnt have to be used in the src of an <img> tag.
SVGs can be their own components as they are also built as HTML :)
https://blog.logrocket.com/guide-svgs-react#usingthesvgelement
| max-width: 500px; | ||
| aspect-ratio: 500 / 277; | ||
|
|
||
| img:nth-child(1) { |
There was a problem hiding this comment.
There is some styling here that is specified a few times even though it could have been shared between them eg. the width and height is the same in all places (within each respective media query).
Some of this could maybe even have been looped out with some javascript, as we have that at our disposal when working with styled components :)
|
Solid work! There is some repetition in a few places, and I would have wanted to see some theme usage to have the colors, sizes etc in a centralized place. Otherwise good! |
3 participants
https://www.figma.com/board/dc3NCdU1xGajvX6oWeSxZn/ML-Portfolio?node-id=0-1&p=f&t=KO9sxz52h7cJkUni-0
https://project-portfolio-ml.netlify.app/
Welcome to my Portfolio!
Had a really good time learning React! 🥳
I used Cards as components, and reused them in ProjectSection, SkillsSection and ProjectSection.
This is how I structured it:
If I had redone it, i probably would have had a Themefile, more under Global Styles, and tried to reuse buttons. A reminder for next React-project!