From 742912030e0a789913a839bc7f4f81678273cf5f Mon Sep 17 00:00:00 2001 From: Iris de Gracia Zhang Date: Wed, 26 Nov 2025 11:47:20 +0100 Subject: [PATCH 01/16] Basic structure and code set up, folder name, footer and tailwind --- index.html | 1 + package.json | 4 + src/App.jsx | 315 ++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 314 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 6676fb2d..3f7003f4 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Portfolio +
diff --git a/package.json b/package.json index 48911600..480b1d05 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "lucide-react": "^0.554.0", "react": "^19.0.0", "react-dom": "^19.0.0" }, @@ -18,10 +19,13 @@ "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", "@vitejs/plugin-react": "^4.3.4", + "autoprefixer": "^10.4.22", "eslint": "^9.21.0", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^15.15.0", + "postcss": "^8.5.6", + "tailwindcss": "^4.1.17", "vite": "^6.2.0" } } diff --git a/src/App.jsx b/src/App.jsx index a161d8d3..4edd65cd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,311 @@ +import React from 'react'; +import { Github, Globe, Linkedin, Mail, ArrowRight } from 'lucide-react'; + +// ============================================================================= +// 🔧 CONFIGURATION AREA - EDIT YOUR DETAILS HERE +// ============================================================================= + +const userData = { + // Change this to your name + name: "Your Name", + + // Your job title (e.g. Frontend Developer, UX Designer) + role: "Frontend Developer", + + // A short bio about yourself + intro: "I am a creative developer who loves combining design with clean code. Currently studying to become a frontend expert.", + + // Your email address + email: "email@example.com", + + // Your profile picture (Use a URL or import a local image) + profileImage: "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", + + // Social Media Links (Leave empty "" if you don't use one) + socials: { + linkedin: "https://www.linkedin.com/in/your-profile", + github: "https://github.com/your-username", + stackoverflow: "" + } +}; + +// List your skills here +const techSkills = [ + "HTML", "CSS", "JavaScript", "React", "Figma", "GitHub", "Accessibility", "UX/UI" +]; + +// Add your projects here +const projects = [ + { + id: 1, + title: "Project Name 1", + description: "Describe your first project here. What did you build? What problem did it solve?", + tags: ["React", "API", "CSS"], // Tech stack used + github: "https://github.com", // Link to code + netlify: "https://netlify.com", // Link to live demo + image: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" + }, + { + id: 2, + title: "Project Name 2", + description: "Describe your second project. Maybe something about E-commerce or a Todo app?", + tags: ["HTML", "JavaScript"], + github: "https://github.com", + netlify: "https://netlify.com", + image: "https://images.unsplash.com/photo-1463936575829-25148e1db1b8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" + }, + // Copy-paste the block above to add more projects... +]; + +// Add your articles or thoughts here +const articles = [ + { + id: 1, + title: "My First Article", + date: "OCT 2023", + description: "A short preview of what you wrote about...", + image: "https://images.unsplash.com/photo-1516962126636-27ad087061cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", + link: "#" + }, + { + id: 2, + title: "Learning React", + date: "SEP 2023", + description: "Thoughts on learning components and props...", + image: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", + link: "#" + } +]; + +// ============================================================================= +// ⛔️ END OF CONFIGURATION - NO NEED TO EDIT BELOW THIS LINE +// ============================================================================= + +// --- UI COMPONENTS --- + +const Container = ({ children, className = "" }) => ( +
+ {children} +
+); + +const SectionHeading = ({ title }) => ( +

+ {title} +

+); + +const Button = ({ href, secondary, children }) => { + const baseStyle = "inline-flex items-center gap-2 px-6 py-3 rounded-full text-sm font-bold uppercase tracking-wider transition-all transform hover:-translate-y-1"; + const primaryStyle = "bg-slate-900 text-white hover:bg-slate-700"; + const secondaryStyle = "bg-slate-200 text-slate-800 hover:bg-slate-300"; + + return ( + + {children} + + ); +}; + +const Tag = ({ text }) => ( + + {text} + +); + +// --- SECTIONS --- + +const Hero = () => ( +
+ +
+
+ {`Profile +
+
+ +

+ Portfolio +

+

+ {userData.name} +

+

+ {userData.intro} +

+ +
+ {userData.socials.linkedin && ( + + + + )} + {userData.socials.github && ( + + + + )} + {userData.socials.stackoverflow && ( + + + + )} +
+ +
+); + +const TechBanner = () => ( +
+ +

Tech

+
+ {techSkills.map((skill, index) => ( + + {skill} + + ))} +
+ +
+); + +const ProjectRow = ({ project, isEven }) => ( +
+
+
+ {`Screenshot +
+
+
+ +
+

{project.title}

+

+ {project.description} +

+
+ {project.tags.map((tag) => ( + + ))} +
+
+ {project.github && ( + + )} + {project.netlify && ( + + )} +
+
+
+); + +const ArticleCard = ({ article }) => ( +
+
+ +
+ +

{article.title}

+

+ {article.description} +

+
+ Read Article +
+
+); + export const App = () => { return ( - <> -

Portfolio

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, laborum! Maxime animi nostrum facilis distinctio neque labore consectetur beatae eum ipsum excepturi voluptatum, dicta repellendus incidunt fugiat, consequatur rem aperiam.

- - ) -} +
+ + + +
+ + +
+ {projects.map((project, index) => ( + + ))} +
+ +
+ +
+ + +
+ {articles.map((article) => ( + + ))} +
+ +
+ +
+ +

Let's Talk

+
+
+ Profile +
+
+

{userData.name}

+

{userData.role}

+
+ + + {userData.email} + +
+
+ {userData.socials.linkedin && ( + + + + )} + {userData.socials.github && ( + + + + )} + {userData.socials.stackoverflow && ( + + + + )} +
+

+ © 2025 {userData.name} · Portfolio V2 +

+ +
+
+ ); +} \ No newline at end of file From 815334d4cf5fa091eccbdda5390ac1ef937366ae Mon Sep 17 00:00:00 2001 From: Iris de Gracia Zhang Date: Thu, 27 Nov 2025 10:16:56 +0100 Subject: [PATCH 02/16] basic styling card + project + journey + skill + tech --- src/App.jsx | 316 ++--------------------------- src/components/HeroSection.jsx | 35 ++++ src/components/ProjectsSection.jsx | 55 +++++ src/data/portfolioData.js | 37 ++++ 4 files changed, 141 insertions(+), 302 deletions(-) create mode 100644 src/components/HeroSection.jsx create mode 100644 src/components/ProjectsSection.jsx create mode 100644 src/data/portfolioData.js diff --git a/src/App.jsx b/src/App.jsx index 4edd65cd..e8b4256a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,310 +1,22 @@ import React from 'react'; -import { Github, Globe, Linkedin, Mail, ArrowRight } from 'lucide-react'; -// ============================================================================= -// 🔧 CONFIGURATION AREA - EDIT YOUR DETAILS HERE -// ============================================================================= +// Vi importerar komponenterna från mappen vi skapade +import HeroSection from './components/HeroSection'; +import ProjectsSection from './components/ProjectsSection'; -const userData = { - // Change this to your name - name: "Your Name", +// Vi importerar datan från data-mappen +import { userData, projects } from './data/portfolioData'; - // Your job title (e.g. Frontend Developer, UX Designer) - role: "Frontend Developer", - - // A short bio about yourself - intro: "I am a creative developer who loves combining design with clean code. Currently studying to become a frontend expert.", - - // Your email address - email: "email@example.com", - - // Your profile picture (Use a URL or import a local image) - profileImage: "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", - - // Social Media Links (Leave empty "" if you don't use one) - socials: { - linkedin: "https://www.linkedin.com/in/your-profile", - github: "https://github.com/your-username", - stackoverflow: "" - } -}; - -// List your skills here -const techSkills = [ - "HTML", "CSS", "JavaScript", "React", "Figma", "GitHub", "Accessibility", "UX/UI" -]; - -// Add your projects here -const projects = [ - { - id: 1, - title: "Project Name 1", - description: "Describe your first project here. What did you build? What problem did it solve?", - tags: ["React", "API", "CSS"], // Tech stack used - github: "https://github.com", // Link to code - netlify: "https://netlify.com", // Link to live demo - image: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" - }, - { - id: 2, - title: "Project Name 2", - description: "Describe your second project. Maybe something about E-commerce or a Todo app?", - tags: ["HTML", "JavaScript"], - github: "https://github.com", - netlify: "https://netlify.com", - image: "https://images.unsplash.com/photo-1463936575829-25148e1db1b8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" - }, - // Copy-paste the block above to add more projects... -]; - -// Add your articles or thoughts here -const articles = [ - { - id: 1, - title: "My First Article", - date: "OCT 2023", - description: "A short preview of what you wrote about...", - image: "https://images.unsplash.com/photo-1516962126636-27ad087061cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", - link: "#" - }, - { - id: 2, - title: "Learning React", - date: "SEP 2023", - description: "Thoughts on learning components and props...", - image: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", - link: "#" - } -]; - -// ============================================================================= -// ⛔️ END OF CONFIGURATION - NO NEED TO EDIT BELOW THIS LINE -// ============================================================================= - -// --- UI COMPONENTS --- - -const Container = ({ children, className = "" }) => ( -
- {children} -
-); - -const SectionHeading = ({ title }) => ( -

- {title} -

-); - -const Button = ({ href, secondary, children }) => { - const baseStyle = "inline-flex items-center gap-2 px-6 py-3 rounded-full text-sm font-bold uppercase tracking-wider transition-all transform hover:-translate-y-1"; - const primaryStyle = "bg-slate-900 text-white hover:bg-slate-700"; - const secondaryStyle = "bg-slate-200 text-slate-800 hover:bg-slate-300"; - - return ( - - {children} - - ); -}; - -const Tag = ({ text }) => ( - - {text} - -); - -// --- SECTIONS --- - -const Hero = () => ( -
- -
-
- {`Profile -
-
- -

- Portfolio -

-

- {userData.name} -

-

- {userData.intro} -

- -
- {userData.socials.linkedin && ( - - - - )} - {userData.socials.github && ( - - - - )} - {userData.socials.stackoverflow && ( - - - - )} -
- -
-); - -const TechBanner = () => ( -
- -

Tech

-
- {techSkills.map((skill, index) => ( - - {skill} - - ))} -
- -
-); - -const ProjectRow = ({ project, isEven }) => ( -
-
-
- {`Screenshot -
-
-
- -
-

{project.title}

-

- {project.description} -

-
- {project.tags.map((tag) => ( - - ))} -
-
- {project.github && ( - - )} - {project.netlify && ( - - )} -
-
-
-); - -const ArticleCard = ({ article }) => ( -
-
- -
- -

{article.title}

-

- {article.description} -

-
- Read Article -
-
-); - -export const App = () => { +export default function App() { return ( -
- - - -
- - -
- {projects.map((project, index) => ( - - ))} -
- -
- -
- - -
- {articles.map((article) => ( - - ))} -
- -
- -