Portfolio Hand-in #53

carro-barro · 2025-11-30T22:50:18Z

netlify: https://carolina-oldertz-portfolio.netlify.app/

figma: https://www.figma.com/design/YFJswIB708jYUoHg3swht2/Portfolio-designs--Copy-?node-id=1-1339&m=dev

note: i took away some of the socials because i don't use them

… styled components

… with the projects section, i added some info in the json file about the projects

…es the styling with props, started to loop the project.json and display it in the browser, but needs more styling

…nd figuring out the logic, also made a article json and started to add info

…h article.json and made a typography folder with reusable text elements

…ed styling on all sections, need to make minor styling fixes and look at accessibility and stretch goals

…for mobile and tablet

Npahlfer

✅

qabalany

🎉
Hey! I went through your portfolio and it's looking great!

This is really solid work! The code is clean, organized, and shows you understand React well. The responsive design is thorough, and little touches like proper alt texts show attention to detail.

The suggestions above are all minor polish - nothing is broken, and the portfolio looks professional. Keep up the great work! 🚀

P.S. - Love the cat subscription site with party mode. That creativity really shows your personality! 🐱

qabalany · 2025-12-08T03:49:54Z

src/App.jsx

+import styled, { createGlobalStyle } from "styled-components"
+import { HeroSection } from "./components/hero/HeroSection"
+import { TechSection } from "./components/Tech/TechSection"
+import { ProjectSection } from "./components/projects/ProjectSection"
+import { SkillSection } from "./components/Skills/SkillSection"
+import { ArticleSection } from "./components/articles/ArticleSection"
+import { FooterSection } from "./components/footer/FooterSection"


Clean imports, nicely organized.

qabalany · 2025-12-08T03:50:49Z

src/App.jsx

+}
+`
+
 export const App = () => {


Simple and readable component structure

qabalany · 2025-12-08T03:51:19Z

src/App.jsx

+margin: 0;
+}
+`
+


GlobalStyles in the same file keeps things together nicely

qabalany · 2025-12-08T03:55:28Z

src/theme.jsx

@@ -0,0 +1,13 @@
+export const theme = {
+
+  breakpoints: {


Breakpoints are well organized - mobile first approach is smart

qabalany · 2025-12-08T03:55:51Z

src/theme.jsx

+    desktop: '1024px',
+  },
+
+  color: {


Centralizing colors makes future changes super easy

qabalany · 2025-12-08T04:16:46Z

src/components/footer/FooterSocials.jsx

@@ -0,0 +1,22 @@
+import styled from "styled-components"
+
+const SocialIconLink = styled.a`


Simple, focused component

qabalany · 2025-12-08T04:18:17Z

src/components/footer/FooterSocials.jsx

+  return (
+    <>
+      <SocialIconLink href={props.href}>
+        <img src={props.src} alt={props.alt} />
+      </SocialIconLink>
+    </>
+  )


The fragment <> </> isn't needed here since you're returning one element

qabalany · 2025-12-08T04:21:35Z

index.html

+  <link
+    rel="icon"
+    type="image/x-icon"
+    href="/favicon/favicon.ico"
+  >
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="/favicon/favicon-32x32.png"
+  >
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="/favicon/favicon-16x16.png"
+  >
+
+  <link
+    rel="manifest"
+    href="/favicon/site.webmanifest"
+  >
+
+  <link
+    rel="apple-touch-icon"
+    sizes="180x180"
+    href="/favicon/apple-touch-icon.png"
+  >


Thorough favicon setup for all devices

qabalany · 2025-12-08T04:24:24Z

index.html

+    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet"
+  >
+  <title>Portfolio</title>


Small SEO suggestion:
The title is generic

Current <title>Portfolio</title> More SEO-friendly <title>Carolina Oldertz | Frontend Developer</title>

qabalany · 2025-12-08T04:27:01Z

src/data/projects.json

-      "name": "Weather app",
-      "image": "https://images.unsplash.com/photo-1520792532857-293bd046307a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2370&q=80",
+      "name": "RECIPE LIBRARY",
+      "info": "Using spoonaculars API I have fetched a library of recipes that displays ingredients, cooking time and meal type. You can filter and sort by different categories and search for your recipe and aslo with a button click to geta random recipe.",


Tiny typo
"aslo" should be "also"
Also "geta" should be "get a" 😊

Npahlfer · 2025-12-09T12:50:43Z

src/components/typography/H1.jsx

@@ -0,0 +1,18 @@
+import styled from "styled-components"


Instead of defining a set of different Typographies like you have done in here, it would be nicer to define a component that can change (both the styling and the element) depending on the prop. Like we did in class:
https://github.com/Technigo/fall-2025-live-sessions/blob/main/week-14/styled-components/src/components/Typography.jsx

Npahlfer · 2025-12-09T12:54:49Z

src/index.css

This file can be deleted as you have global styling in the GlobalStyle function and the rest in each component :)

Npahlfer · 2025-12-09T12:56:06Z

src/theme.jsx

@@ -0,0 +1,13 @@
+export const theme = {


You could even expand with more themes here eg. spacing and font styling.

Npahlfer · 2025-12-09T12:57:48Z

src/components/projects/ProjectCardImage.jsx

+  object-fit: cover;
+  border-radius: 12px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  object-position: ${props => (props.$altText === 'Screenshot of RECIPE LIBRARY' ? 'left' : 'center')};


Checking for an alt text like this is a bad idea because the alt text might change and then this doesnt work anymore. Better to use another prop on the ProjectCardImage (eg. direction="left")

Npahlfer · 2025-12-09T12:59:01Z

src/components/projects/ProjectCard.jsx

+`
+
+export const ProjectCard = ({ name, info, netlify, github, image, tags, index }) => {
+  const shouldReverse = index % 2 !== 0


modulo, nice!

Npahlfer · 2025-12-09T13:02:50Z

src/components/Skills/SkillSection.jsx

+  },
+  {
+    tag: "Toolbox",
+    info: "Atom\nPostman\nAdobe Photoshop\nAdobe Illustrator\nAdobe InDesign\nAdobe Acrobat\nAdobe Premiere Pro & Rush\nAdobe After Effects\nCamera raw\nBridge\nWordpress\nSitecore (CMS)\nSitevison (CMS)\nShopify\nFigma\nMicrosoft (Word, ppt, etc)\nSlack",


instead of having them separated with a linebreak, use an array! :)

then you dont have to use the split like you do later in SkillInfo

Npahlfer · 2025-12-09T13:06:31Z

There are some room for improvements (check my comments) like the expansion of the theme and some logic parts, but overall really good! :)

Carolina Oldertz added 28 commits November 25, 2025 19:02

started to divide the hero part into components and styled them using…

0dcde30

… styled components

continued with the hero section and made the tech section and started…

6861d6e

… with the projects section, i added some info in the json file about the projects

deleted the different hero image files and made a function that chang…

32ae606

…es the styling with props, started to loop the project.json and display it in the browser, but needs more styling

started with the skillsection and articlesection, need more styling a…

8dc927e

…nd figuring out the logic, also made a article json and started to add info

added the same logic as the projects in the articles, added info to t…

c62bc94

…h article.json and made a typography folder with reusable text elements

finished most of the design and structure with(new): footer and updat…

4034b17

…ed styling on all sections, need to make minor styling fixes and look at accessibility and stretch goals

case-ing bugfixes to ensure netlify deploy

066f599

added the herotext back in

c247565

debugging for netlify deploy

289a5e1

Temp rename articles to force casing reset

fca6fc8

Final: Ensure 'articles' directory is lowercase for Netlify

e5d93f6

Step 1: Untrack the Articles folder

74d288d

Step 2: Re-add articles folder with correct lowercase casing

c556a94

app.jsx bugfix for deploy

ff0836a

fixed styling for desktop, and started working on responsive styling …

2209a92

…for mobile and tablet

mostly done with responsive design

dcdd826

added netlify link in readme

bb9a764

minor style fixes

800cfb2

article mobile styling fix

bdf87c8

bugfix for mobile

cc9a7ac

bugdetecting for netlify on phone

9185505

more debugging for netlify

af15b11

flex-wrap for the project tags

4179192

added 'see more projects' button

943ee42

added favicon

ad82709

added og tags to index.html

b8d396d

look away unused socials links

1a6b819

saved index.html

2fc7760

Npahlfer approved these changes Dec 4, 2025

View reviewed changes

qabalany reviewed Dec 8, 2025

View reviewed changes

Npahlfer reviewed Dec 9, 2025

View reviewed changes

src/index.css

Copy link

Npahlfer Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file can be deleted as you have global styling in the GlobalStyle function and the rest in each component :)

Npahlfer reviewed Dec 9, 2025

View reviewed changes

src/theme.jsx

@@ -0,0 +1,13 @@

export const theme = {

Copy link

Npahlfer Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could even expand with more themes here eg. spacing and font styling.

Npahlfer reviewed Dec 9, 2025

View reviewed changes

		@@ -0,0 +1,22 @@
		import styled from "styled-components"

		const SocialIconLink = styled.a`

Portfolio Hand-in #53

Are you sure you want to change the base?

Portfolio Hand-in #53

Uh oh!

Conversation

carro-barro commented Nov 30, 2025

Uh oh!

Npahlfer left a comment

Choose a reason for hiding this comment

Uh oh!

qabalany left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Npahlfer Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Npahlfer Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Npahlfer commented Dec 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Npahlfer Dec 9, 2025 •

edited

Loading

Npahlfer Dec 9, 2025 •

edited

Loading