JonnyHicks-Portfolio #10
Conversation
- Created ButtonLinks.jsx, Lightbuttons.jsx, and OrangeButtons.jsx as new components. - Added Portrait.jsx component to display a portrait image. - Introduced Portrait.css for styling the portrait component. - Created cards.jsx as a placeholder for future card components.
…onLinks; added basic stlying
…te AboutMe and Projects sections
… and Projects sections
…ects component to use default project data
…ce App component with new sections (Skills, Updates, Footer), and improve styling for buttons and navigation. Add Contacts and FooterBackground components, and implement Updates section with dynamic data. Remove unused MyJournal.json and update projects.json for consistency.
…ce styling for AboutMe, Projects, and Footer sections, and implement responsive design. Remove unused files and update CSS for better layout and alignment.
…tton components, and enhance styling for better layout
- Updated import paths for Header and Updates components in App.jsx - Deleted unused ButtonLinks, Card, and UpdateCard components along with their styles - Refactored ContactDetails to use the new ButtonLinks path - Simplified FooterBackground text - Removed old styles and components related to buttons and cards - Created new ButtonLinks component with styles - Reorganized Navbar component and styles - Updated AboutMe and Projects sections to reflect new component paths - Added new styles for updates and refactored Updates section
…ifyButton and PostButton styles, enhance Card and UpdateCard layouts, and implement Toolbox section with new components.
…ve, Frontend, Workflow), update button styles and classes, enhance Card component with Font Awesome icons, and improve layout for various sections.
…Link component, and enhance Card and UpdateCard layouts with styled-components.
…t layout with new shadow effect, and improve AboutMe section styles.
… component with styled-components, and improve layout in Projects and Skills sections.
…tech list components, and enhance styling with new SectionContainer and CardContainer components.
…ground, replace SectionStyling with CardSectionStyling, and introduce ListsSectionStyles for improved layout in Skills and Toolkit sections.
…components, enhance CardSectionStyling and ListsSectionStyles with improved padding and margins, and adjust AboutMe section styles for better alignment and readability.
…update CardStyles border color, improve FooterBackground responsiveness, remove Navbar component, adjust Portrait scaling, refine AboutMe section styles, and clean up Projects section rendering.
… SEO, rename Toolkit to ToolkitSection in App.jsx, enhance CardSectionStyling and FooterBackground components, improve layout in ContactDetails and ListsSectionStyles, fix typos in Techlists, and adjust Footer and Header styles for better responsiveness.
…CardSectionStyling, ContactDetails, and ListsSectionStyles; remove FooterBackground component; adjust styles in Footer, Navbar, AboutMe, and Portrait; update CSS variables for improved color scheme and typography.
…tter responsiveness; enhance scroll animation with debugging logs; adjust list section alignment; improve CSS for consistent width across components.
…te imports, and enhance styling for better organization and maintainability; add prop-types dependency for type checking.
…, update imports in Skills and FooterContent components, and enhance styling for better organization.
…ve unused CardStyles file, and enhance structure for better organization.
…uce CardGroup for better structure; enhance styling in ContactDetails and ProfileLinks; update Projects and Updates sections for improved layout and responsiveness.
layout on larger screens
HIPPIEKICK
left a comment
HIPPIEKICK
left a comment
There was a problem hiding this comment.
A11y
100% in Lighthouse ⭐
Regarding the requirement: Your portfolio should follow the Figma design
- Is it deliberate that your sections in the design are not aligned? I think it would look amazing if they at least were left-aligned. Same goes for between sections - if they all had the same spacing
- Your font-sizes are not according to the design
- I think it might become harder to maintain when you have a lot of different paddings and margins, e.g. on the Project section, the Card container has a margin and a padding around the whole thing + the Card group also has its own margin + the Section container also has its own margin and padding. I think you should be able to get rid of some of these. Also, maybe read up on the difference between padding and margin? 😇
Codewise
You have a good structure of your project and you’ve used components and props in a good way.
Great job keeping your entry point (App.jsx) clean. You could potentially move the
element to the Header component to clean it up even more.A reminder about naming patterns, if it’s a component or folder specifically for one component it should be named with PascalCase. If it’s just a folder or helper JS file, it should be named in kebabCase. If it’s a folder for a specific component, the folder should be named the same as the component, e.g. AboutMe/AboutMe.
Idahel
left a comment
Idahel
left a comment
There was a problem hiding this comment.
Hi Jonny! What a great job you did with your portfolio, it looks creative and personal! I like it!
I have looked through your code and could not find any specific improvements. I like that you have the data for your cards in json-files, which makes the jsx-files look cleaner. I also really like the fact that you use a nav bar, makes it easier to navigate.
I only have two suggestions for "improvements", but it could also just be a matter of taste. The first is that I think the lists become a bit difficult to read when the text is centered. I have the same thing in the tablet view of my portfolio, but I'll probably change that. Especially when there's quite a bit of variation in how long the words are.
The second is that there were a lot of different files for a one-page website, and I had a little trouble navigating the code. But I also understand your choice given that the task was to practice using components.
That being said, I think you did a really great job, and I hope you're happy with the result!
src/App.jsx
Outdated
| <header> | ||
| <Header /> | ||
| </header> | ||
| <main> |
There was a problem hiding this comment.
I really like that you App.jsx is so clean!
- Deleted CardStyles, ListStyles, ListsSectionStyles, SvgShadow, and Techlists components as they were no longer needed. - Moved relevant styles to new components and pages for better organization. - Updated project and skills pages to utilize new component structure. - Adjusted project icons and descriptions in projects.json for consistency. - Improved footer and header components for better layout and responsiveness. converting to react router currently broken
3 participants
Figma: (https://www.figma.com/design/TRJIJC4vbVQ3SYhvTibPCq/Jonny-HIcks-Portfolio-Design?node-id=1-350&m=dev)
https://jonnyhicks.netlify.app
or http://jonnyhicks.se/ (waiting for verification)