Daniel Lauding + Portfolio #51

daniellauding · 2025-11-30T17:47:50Z

Portfolio website showcasing my work as a Frontend Developer and Design Engineer.

Features include: responsive design with dark/light theme toggle, scroll animations, accessible components (WCAG compliant), optimized performance (Lighthouse score 90+), and SEO-friendly with Open Graph tags.

Built with React, TypeScript, Styled Components, and Vite. Includes project showcases, articles, skills section, CV/experience timeline, and contact information.

Fully accessible with skip links, ARIA labels, and keyboard navigation. Optimized images, lazy loading, and code splitting for fast load times.

Netlify
Figma

Npahlfer

✅

carro-barro

wow riktigt bra jobbat!!
var lite svårt att ge konstruktiv feedback då mycket var lite överkurs för mig men jag gjorde mitt bästa.

här kommer en summerad feedback:

Bra jobbat med att tillgänglighets anpassa med skip to link och bra contrast - 99 på lighthouse snyggt!

Snyggt jobbat med designen och att du adderade ”experince & education” som en flik/filtrering gillar den idén och att du gjort acoordian knappar så man kan välja att se mer men ändå börja med en ”lagom” mängd info.

Bra jobbat med att följa designen och att göra sidan snygg på olika skärm storlekar

Cool animerad banner längst ner

Bra struktur av ditt content i json

har hittat lite små buggar som jag gett kommentarer om, men här är två småbuggar som jag var lite osäker över vart jag skulle skriva in:

Går inte att komma åt länk design figma i ”experience & education”
och en av projekten har ingen länk, är det medvetet?

tycker verkligen att det märkts att du lagt ner tid på att strukturera ditt arbeta och gör det på ett väldigt bra sätt!

carro-barro · 2025-12-09T20:26:07Z

README.md

wow utförlig readme! snygg struktur och hur det förklarar sidans upplägg och info om dig!

Tack tack så mycket!! Värmer att höra :]

carro-barro · 2025-12-09T20:28:38Z

index.html

-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Portfolio</title>
+    <meta name="description" content="Daniel Lauding - Frontend Developer and Design Engineer. Portfolio showcasing React, TypeScript, and modern web development projects.">


Seo tänk snyggt!

carro-barro · 2025-12-09T20:29:55Z

index.html

+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://lauding.se/" />
+    <meta property="og:title" content="Daniel Lauding – Portfolio" />
+    <meta property="og:description" content="Frontend Developer and Design Engineer. Portfolio showcasing React, TypeScript, and modern web development projects." />
+    <meta property="og:image" content="https://lauding.se/avatar.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:site_name" content="Daniel Lauding Portfolio" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://lauding.se/" />
+    <meta name="twitter:title" content="Daniel Lauding – Portfolio" />
+    <meta name="twitter:description" content="Frontend Developer and Design Engineer. Portfolio showcasing React, TypeScript, and modern web development projects." />
+    <meta name="twitter:image" content="https://lauding.se/avatar.png" />


bra gjort med implementation av og:tags, stretch goal!!

carro-barro · 2025-12-09T20:33:52Z

index.html

+    <!-- Favicons -->
+    <link rel="icon" type="image/x-icon" href="/favicon/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png" />
+
+    <!-- Apple Touch Icons -->
+    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png" />
+    <link rel="apple-touch-icon" href="/favicon/apple-icon.png" />
+
+    <!-- Android Icons -->
+    <link rel="icon" type="image/png" sizes="36x36" href="/favicon/android-icon-36x36.png" />
+    <link rel="icon" type="image/png" sizes="48x48" href="/favicon/android-icon-48x48.png" />
+    <link rel="icon" type="image/png" sizes="72x72" href="/favicon/android-icon-72x72.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/android-icon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="144x144" href="/favicon/android-icon-144x144.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png" />
+


riktigt nogrann med olika favicons, bra jobbat

carro-barro · 2025-12-09T20:37:15Z

src/components/Articles/ArticleCard.tsx

+  if (!article) return null
+
+  const { title, excerpt, date, image, link } = article
+
+  const hasContent = title || excerpt || image
+  if (!hasContent) return null


najs error hantering

carro-barro · 2025-12-09T20:58:52Z

src/components/Section/Section.styled.ts

+const variants = {
+  default: {
+    bg: 'var(--bg-color)',
+    titleColor: 'var(--title-color)',
+    textColor: 'var(--text-color)',
+  },
+  hero: {
+    bg: 'var(--section-hero-bg-color)',
+    titleColor: 'var(--section-hero-title-color)',
+    textColor: 'var(--section-hero-text-color)',
+  },
+  tech: {
+    bg: 'var(--section-tech-bg-color)',
+    titleColor: 'var(--section-tech-title-color)',
+    textColor: 'var(--section-tech-text-color)',
+  },
+  projects: {
+    bg: 'var(--section-projects-bg-color)',
+    titleColor: 'var(--section-projects-title-color)',
+    textColor: 'var(--section-projects-text-color)',
+  },
+  articles: {
+    bg: 'var(--section-articles-bg-color)',
+    titleColor: 'var(--section-articles-title-color)',
+    textColor: 'var(--section-articles-text-color)',
+  },
+  skills: {
+    bg: 'var(--section-skills-bg-color)',
+    titleColor: 'var(--section-skills-title-color)',
+    textColor: 'var(--section-skills-text-color)',
+  },


gillar hur du gjort som en mall för styling för dem olika sektionerna

men undrar om det finns en anledning till att ha detta och samma i theme filen, eller har dem olika funktion?

carro-barro · 2025-12-09T21:03:00Z

src/data/about.json

+  ],
+  "socialLinks": {
+    "linkedin": "https://www.linkedin.com/in/daniellauding/",
+    "github": "https://github.com/daniel-lauding",


av någon anledning verkar inte länken ta mig till din profil utan står att jag hamnat fel - 404. kanske bara är en liten typo

carro-barro · 2025-12-09T21:05:17Z

src/data/projects.json

+    },
+    {
+      "name": "Accessible Quiz Application",
+      "date": "2024",


är det meningen att skolprojekten ska ha datum 2024?

carro-barro · 2025-12-09T21:12:36Z

src/theme/theme.ts

snyggt jobbat med att göra en theme och strukturera upp sektionerna, men som jag skrev innan är jag nyfiken på om denna och section.styled har olika funktion

carro-barro · 2025-12-09T21:15:30Z

src/views/Home.jsx

+    <header id="header">
+      <SkipLink href="#main-content">Skip to main content</SkipLink>
+      <SkipLink href="#tech">Skip to technologies</SkipLink>
+      <SkipLink href="#projects">Skip to projects</SkipLink>
+      <SkipLink href="#articles">Skip to articles</SkipLink>
+      <SkipLink href="#skills">Skip to skills</SkipLink>
+      <SkipLink href="#cv">Skip to CV</SkipLink>
+      <SkipLink href="#footer">Skip to contact</SkipLink>
+
+      <Title as="h1" className="sr-only">
+        Daniel Lauding - Frontend Developer Portfolio
+      </Title>
+
+      <Hero data={aboutData} />
+    </header>
+    <main id="main-content">
+      <TechStack data={stackData} />
+      <Projects data={projectsData} />
+      <Articles data={articlesData} />
+      <Skills data={skillsData} />
+    </main>
+    <Footer data={aboutData} />


snygg struktur, men är nyfiken över om det är meningen att man ska hoppa över din inleding om dig själv med skip to main content och vart leder skip to CV, just nu funkar inte den länken, har du en sådan sektion?

hittade nu vad som är CV sektionen, att det är den som "delar" plats med projects. när man inte har Cv sektionen i klickad så kommer man ner till projekt sektionen men CV sektionen öppnas inte,så jag var lite förvirrad i början vad CV var när jag bara hade kollat browsern, vet inte själv hur man löser det men kan vara värt att kolla på

daniellauding added 20 commits November 21, 2025 13:08

setup components, base etc

577c5b2

init

184c453

accessbility

891c497

accessbility fixes

64d5197

social links

1441a94

netllify fix

4057eec

cleaning up responsive sizes

97c058f

theme switch

e1e493c

added cv and projects

c29e9c0

added more frontend projects

cbabb64

added more frontend projects and clean up

076f008

added more frontend projects and clean up

a54b387

added more frontend projects and clean up

f39109f

added more frontend projects and clean up

9f65e26

added more frontend projects and clean up

34b4af9

added animation to sections

06fbb55

added animation to sections

6e5091c

added animation to sections

19c90cb

added animation to sections

2da05a8

added animation to sections

1004947

Npahlfer approved these changes Dec 4, 2025

View reviewed changes

carro-barro reviewed Dec 9, 2025

View reviewed changes

Daniel Lauding + Portfolio #51

Are you sure you want to change the base?

Daniel Lauding + Portfolio #51

Uh oh!

Conversation

daniellauding commented Nov 30, 2025

Uh oh!

Npahlfer left a comment

Choose a reason for hiding this comment

Uh oh!

carro-barro 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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants