Jennifer - Portfolio

[JeffieJansson]

Netlify
Figma

So this is my Portfolio :)

My section structure:
Hero/header
Tech
Projects
SKills
Journey/My words
Contact/footer

Reusable components:
Buttons
Card
Globalstyles
Icons
See more button

If i had more time I would have tried to do a typography and theme file, will try to implement it after this project is graded!

[AgnesSj01]

Really impressive portfolio, everything works exactly as it should.

You have a clear and logical structure in your code, with a good separation between components, data, and sections. This made the project easy to follow and understand.

Each part of the codebase is also well-organized and straightforward to read, and you’ve chosen good, descriptive names for your functions and props.

Your code is clean and readable on its own, but adding a few small comments to explain the purpose of certain layout decisions, accessibility choices, or more complex style rules could make it even clearer.

Great work!

[AgnesSj01]

Nice use of spreading props!

[AgnesSj01]

The path is quite long, you could shorten it by moving the path data into a separate constant. That keeps the component cleaner without changing how it works. For example, this might work:

const githubPath = "M12.1094 22.6562C12.1094 ..."; // moved out for readability

export const CodeIcon = (props) => (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="currentColor"
aria-hidden="true"
focusable="false"
{...props}

<path d={githubPath} />

);

[JeffieJansson]

Thank you, really good tip! :D

[AgnesSj01]

Great that you're using an icon componen, keeps things reusable.

[AgnesSj01]

Nice responsive spacing here, clean and consistent.

[AgnesSj01]

You might consider adding :hover styles for links for better feedback.

[AgnesSj01]

Nice responsive spacing and clean layout structure.

[Npahlfer]

✅

[Npahlfer]

Nice that you use a skip to main content link!

[Npahlfer]

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 its real easy to just add the data for it. This is also usually how it comes into the app from the cms/api:

const soMe = [
  {
    name: 'LinkedIn'.
    link: 'https://www.linkedin.com/in/jennifer-jansson',
    icon: LinkedInIcon,
  }, 
  {...},
  {...},
]

// And in jsx:

{soMe.map((item, index) => {
  const IconComponent = item.icon
  return (
    <a
      href={item.link}
      target="_blank"
      rel="noreferrer"
      aria-label={item.name}
    >
        <IconComponent />
    </a>
))

[JeffieJansson]

Thank you for the suggestion! I will look into how I can do this, super good tip!

[Npahlfer]

Some repetition here could have been nice to loop not just the list items, but also the columns

const columns = [
  {
    // This title could even have been picked from the key in the skillsData object
    // via the `Object.keys()` function, but maybe thats a bit too much 😅
    title: 'Code',  
    items: skillsData.code,
  },
  ...
]

{columns.map((column, index) => (
  <Column key={index}>
    <Tag>
      <TagTitle>{column.title}</TagTitle>
    </Tag>
    <List>
    {column.items.map((item, idx) => (
      <Item key={`${column.title}-${idx}`}>{item}</Item>
    ))}
    </List>
  </Column>
))
}

Why is it good to loop out content like this? Because it's less to write and if you need to change anything then you only change in one place.

[JeffieJansson]

Really appriciate the feedback, I learned new things of these comments and will use this in the future! Always looking for ways to keep code clean and dry and ways to keep code shorter and consice.

[Npahlfer]

Really good job! Would have wanted to see some more extensive use of the theme, and there were some repetition that could have been avoided (DRY), but otherwise good!