Conversation
src/data/articles.json
Outdated
| "articles": [ | ||
| { | ||
| "title": "Learning to love code", | ||
| "image": "./src/images/discoball.png", |
There was a problem hiding this comment.
if you want the images to work you should use the public URLs: https://vite.dev/guide/assets#the-public-directory
SaraEnderborg
left a comment
SaraEnderborg
left a comment
There was a problem hiding this comment.
You have done a great job here Julia 😄✨the code is really well structured and follows React best practices, clean code principles, and all the project requirements. There’s a great separation between components, styling, and data, styled-components are used consistently, and the Carousel component is flexible and easy to reuse. Especially considering you were sick while working on this, it’s seriously impressive how polished, well thought-out, and solid the codebase is. Amazing job!
| return ( | ||
| <> | ||
| <Card className="card"> | ||
| <Picture src={image} alt="" className="card-img" /> |
There was a problem hiding this comment.
just missing an alt text here for img:)
| background: ${(props) => theme.variant[props.$className]?.background}; | ||
| border-radius: 12px; | ||
| border: 2px solid ${(props) => props.$color}; | ||
| gap: 5xp; |
There was a problem hiding this comment.
justa small typo on gap: 5xp instead of px:)
| <SkillSection> | ||
| <H2>Skills</H2> | ||
| <SkillSectionSkills className="skills"> | ||
| {skills.skills.map((skill) => ( |
There was a problem hiding this comment.
I think you are missing key here on the outer element in the .map() loop. It doesn’t break anything, but i think it's recommended:)
| const Projects = styled.div` | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| align-items: flex-start; | ||
| padding: 0px; | ||
| gap: 64px; | ||
| width: 1440px; | ||
| height: 625px;` No newline at end of file |
There was a problem hiding this comment.
I can't see that this components i being used, just the ProjectSection i think. It’s not hurting anything, but you could remove it or start using it just to keep things tidy. :)
| import { Button } from "./buttons" | ||
| import styled from "styled-components" | ||
|
|
||
| export const ArticleCard = ({ title, image, description, readmore }) => { |
There was a problem hiding this comment.
Nice use of props in a clean way, makes it really flexible.
src/components/Reusables/icons.jsx
Outdated
| @@ -0,0 +1,22 @@ | |||
| import githubicon from "../../images/icons/github.png" | |||
There was a problem hiding this comment.
I really like how you have grouped all the social icons in their own component instead of, for example, across multiple files:)
| import styled from "styled-components"; | ||
| import { Swiper, SwiperSlide } from "swiper/react"; | ||
| import "swiper/css"; | ||
| import "swiper/css/scrollbar"; | ||
| import { Scrollbar, Mousewheel, FreeMode } from "swiper/modules"; | ||
| import { | ||
| theme | ||
| } from "../Styling/Theme" | ||
|
|
||
| export const Carousel = ({ data, renderItem }) => { |
There was a problem hiding this comment.
smart use of swiper in it's own component so the rest of the app is free from unnecessary dependencies.
3 participants
Netlify-link: https://portfolio-technigo-julia.netlify.app/
Figma-link: https://www.figma.com/design/jOlPicmO7AGtZLrZOpgZ44/Portfolio?node-id=1791-1877&t=CGhZrNLZ8wEjnYxZ-0