Sofia Lennbom Portfolio #17
Conversation
…ect into two files.
…or desktop got background color. Profile img is showing.
…ton, not finished.
- Created MyWordsCard component to display individual articles with image, title, content, and a button. - Added mywords.json file containing an array of articles with relevant data. - Implemented MyWords section to map through the articles and render MyWordsCard for each item. - Updated Skills section with basic structure for future content.
…; update project tags to use buttons in Proj section.
…; enhance Skills section layout with styled components.
… unused CSS files and adjust button styles for better responsiveness.
…social media links
- Created MyWordsCard component to display individual articles with image, title, content, and a button. - Added mywords.json file containing an array of articles with relevant data. - Implemented MyWords section to map through the articles and render MyWordsCard for each item. - Updated Skills section with basic structure for future content.
…utton, GlobalStyle, MyWordsCard, ProjCard, Footer, and Profile sections.
…e, Media, ProjCard, and Profile components.
…ed responsiveness and layout consistency
…d layout, responsiveness, and semantic structure
…veness and layout consistency
…ructure and layout consistency
HIPPIEKICK
left a comment
HIPPIEKICK
left a comment
There was a problem hiding this comment.
A11y
100% in Lighthouse ⭐
Responsiveness
- Requirement not met: Your portfolio should be responsive (it should look good on devices from 320px width up to at least 1600px)
Regarding the requirement: Your portfolio should follow the Figma design
- Some sections need a max-width
- Make sure you have the right top/bottom padding for the sections
- Project section look a little chaotic. Look over the margin/padding as well as the positioning of tags vs image
- Check so that all elements have the correct font (e.g. Skills’ headings don’t)
Overall it looks good, but there are some additional tweaks needed for it to be following the design closely.
Codewise
Good job structuring your project and making use of components and props 👍 You kept your entry point (App.jsx) clean which makes the project easy to overview.
Changes requested
- Responsiveness
- Have a look at the comments I wrote about the design
|
Hi Sofia,
I believe you’ve done the best you could in the given timeframe. Your website presents a clean and personal online portfolio. It’s visually minimal, easy to navigate, and tailored for showcasing your work and personality. Accessibility is over the moon! Maybe it would be even 150% in Lighthouse if checking for meta tags and alt text. Consider including more alt text for images for better accessibility. Your project has a solid, well-organized file structure. Clean and component-based. I especially like that: Consider grouping GlobalStyle.jsx, Media.jsx, and Typography.jsx into a styles/ folder to better organize styling logic. Styling suggestion for this component: ProjectCardContent is missing display: flex or flex-direction: column, which might be required for gap to take effect in some browsers. Thank you for your patience, and good luck with improving this one further or building a whole new portfolio in the future! |
|
Hi Matlida, |
|
@solen80a Hi Sofia! Take a look at the padding/margin on some sections. The text and other elements shouldnt go all the way to the edge, it looks a bit cramped. Screenshot for example: |
|
Hi Jennie, |
|
Some changes still needed:
|
…aning of unused code.
|
Hi, made some fixes, please review. |
4 participants
Please include a link to your Figma design and a Netlify link.
https://www.figma.com/design/RsWkRToMb9XaYPNpNNDdo6/Sofia%C2%B4s-Figma-designs-for-students?t=C4rBuD1OB9kyxHsW-0
https://sofialennbom.netlify.app/
I ran out of time and some stuff are still not perfect.
No Nav bar is added and tablet is not perfect.
And I did not manage to get the project cards to reverse odd/even.
Probably some other stuff that I have missed.