Technigo · VariaSlu · Apr 22, 2025 · Apr 23, 2025 · Apr 23, 2025 · Apr 24, 2025
diff --git a/README.md b/README.md
@@ -1 +1,6 @@
 # Portfolio
+https://www.figma.com/proto/ckfCpTXZdALIKnWf0PGSHp/Figma-designs-for-students--Varia-?node-id=1078-1624&t=5Jgpgvf8oWIpGrpz-0&scaling=min-zoom&content-scaling=fixed&page-id=1078%3A906
+
+https://variaslu.netlify.app/
+
+I plan to add things for The process buttons in the future, now I'm exhausted 
diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Portfolio</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Portfolio Portfolio</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -11,13 +11,16 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "styled-components": "^6.1.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,20 @@
+import "./index.css"
+import { Header } from "./sections/Header"
+import { Contacts } from "./sections/Contacts"
+import { FeaturedProjects } from "./sections/FeaturedProjects"
+import { Skills } from "./sections/Skills"
+import { Tech } from "./sections/Tech"
+
+
 export const App = () => {
   return (
     <>
-      <h1>Portfolio</h1>
-      <p>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.</p>
+      <Header />
+      <Tech />
+      <FeaturedProjects />
+      <Skills />
+      <Contacts />
+
     </>
   )
 }
diff --git a/src/assets/Arrow.svg b/src/assets/Arrow.svg
diff --git a/src/assets/Doc.svg b/src/assets/Doc.svg
diff --git a/src/assets/LiveDemo.svg b/src/assets/LiveDemo.svg
diff --git a/src/assets/PhotoVaria.png b/src/assets/PhotoVaria.png
diff --git a/src/assets/faceIcon.svg b/src/assets/faceIcon.svg
diff --git a/src/assets/github.svg b/src/assets/github.svg
diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx
@@ -0,0 +1,136 @@
+import styled from 'styled-components';
+import { FaFileAlt, FaGlobe, FaGithub } from 'react-icons/fa';
+
+
+
+const ProjectItem = styled.article`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 4rem;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+`;
+
+const ProjectImagePlaceholder = styled.img`
+  background-color: #d3d3d3;
+  width: 100%;
+  height: 240px;
+  margin-bottom: 1rem;
+
+  @media (min-width: 768px) {
+    width: 40%;
+    max-width: 400px;
+    margin-bottom: 0;
+    margin-right: 2rem;
+  }
+`;
+
+const ProjectContent = styled.div`
+  flex: 1;
+`;
+
+const ProjectTitle = styled.h2`
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-top: 0;
+  margin-bottom: 1rem;
+`;
+
+const ProjectGoal = styled.div`
+  margin-bottom: 0.75rem;
+`;
+
+const ProjectRole = styled.div`
+  margin-bottom: 1.5rem;
+`;
+
+const TagContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+`;
+
+const Tag = styled.span`
+  background-color: black;
+  color: white;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8rem;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+`;
+
+const Button = styled.a`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: #f5f5f5;
+  color: black;
+  padding: 0.75rem 1.5rem;
+  border-radius: 2rem;
+  text-decoration: none;
+  font-weight: 500;
+  transition: background-color 0.2s ease, color 0.2s ease;
+
+  &.live-demo:hover {
+    background-color: #0B24F5;
+    color: white;
+  }
+
+  &.view-code:hover {
+    background-color: #EB5577;
+    color: white;
+  }
+
+  &.the-process:hover {
+    background-color: #FFD338;
+    color: #333;
+  }
+`;
+
+
+export const ProjectCard = ({ project }) => {
+  return (
+    <ProjectItem>
+      <ProjectImagePlaceholder
+        src={project.image}
+        alt={`${project.name} project screenshot`}
+        onError={(e) => { e.target.src = 'path/to/fallback-image.jpg'; }}
+      />
+      <ProjectContent>
+        <ProjectTitle>{project.name}</ProjectTitle>
+        <ProjectGoal>
+          <strong>Goal:</strong> {project.goal}
+        </ProjectGoal>
+        <ProjectRole>
+          <strong>My role:</strong> {project.role}
+        </ProjectRole>
+
+        <TagContainer>
+          {project.tags.map((tag, index) => (
+            <Tag key={index}>{tag}</Tag>
+          ))}
+        </TagContainer>
+
+        <ButtonContainer>
+          <Button href={project.links.process} className="the-process">
+            <FaFileAlt /> The process
+          </Button>
+          <Button href={project.links.demo} className="live-demo">
+            <FaGlobe /> Live demo
+          </Button>
+          <Button href={project.links.code} className="view-code">
+            <FaGithub /> View the code
+          </Button>
+        </ButtonContainer>
+      </ProjectContent>
+    </ProjectItem>
+  )
+}
diff --git a/src/data/myprojects.js b/src/data/myprojects.js
@@ -0,0 +1,62 @@
+export const myprojects = [
+  {
+    name: "Personal Portfolio",
+    image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    goal: "Build my very own portfolio! The foundation of the project built over two weeks as I start to learn about two different CSS libraries: Tailwind and Styled Components.",
+    role: "Build and style my digital home, animation on scroll and other features",
+    tags: ["HTML5", "CSS3", "React", "Personal project", "CSS libraries", "Will power"],
+    links: {
+      process: "#process-link",
+      code: "https://github.com/VariaSlu",
+      demo: "https://example.netlify.app"
+    }
+  },
+  {
+    name: "Multiple-choice quiz",
+    image: "https://images.unsplash.com/photo-1618472609777-b038f1f04b8d?q=80&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    goal: "Create a user-friendly experience that works for everyone, including those using screen readers, keyboards, and other assistive technologies.",
+    role: "Foundational HTML structure, tab-focus and arrow-key controls for a fully accessible user experience.",
+    tags: ["HTML5", "CSS3", "React", "WAI-ARIA", "Lighthouse", "WCAG"],
+    links: {
+      process: "#process-link",
+      code: "https://github.com/VariaSlu",
+      demo: "https://example.netlify.app"
+    }
+  },
+  {
+    name: "Weather app",
+    image: "https://images.unsplash.com/photo-1620207418302-439b387441b0?q=80&w=3067&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    goal: "Group project using TypeScript resulted in a working weather app that uses a weather API to tell today's weather and temperature.",
+    role: "I worked with the OpenWeatherMap API to craft a clear and meaningful 4-day forecast experience for users.",
+    tags: ["HTML5", "CSS3", "TypeScript", "APIs"],
+    links: {
+      process: "#process-link",
+      code: "https://github.com/VariaSlu",
+      demo: "https://heatherweather.netlify.app"
+    }
+  },
+  {
+    name: "Recipe app",
+    image: "https://images.unsplash.com/photo-1641160923894-b1a80920187d?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    goal: "working with APIs to fetch external data to our App.",
+    role: "fetched real recipes from API, dynamically updated the UI, handled API limits. Adjust filtering and sorting logic to match the new API response format. Deal with missing or inconsistent data.",
+    tags: ["HTML5", "CSS3", "JavaScript", "APIs", "Personal project"],
+    links: {
+      process: "#process-link",
+      code: "https://github.com/VariaSlu",
+      demo: "https://recipelibrarybyvaria.netlify.app"
+    }
+  },
+  {
+    name: "Tarot for developers",
+    image: "https://images.unsplash.com/photo-1657458891294-7380eb30d0a1?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    goal: "project helpd me get a little bit of context on how developers think while learning new coding skills and building my first functional web experience.",
+    role: "learn and use VS code, GitHub and other tools first time.",
+    tags: ["HTML5", "CSS3", "Personal project"],
+    links: {
+      process: "#process-link",
+      code: "https://github.com/VariaSlu",
+      demo: "https://tarotfordevelopers.netlify.app"
+    }
+  }
+];
diff --git a/src/data/projects.json b/src/data/projects.json
diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+
 body {
-  background: pink;
-  color: hotpink;
+  background: white;
+  color: black;
+  font-family: 'Montserrat', sans-serif;
+  margin: 0;
+  padding: 0
 }
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,12 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-
 import { App } from './App.jsx'
 
-import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <App />
-  </StrictMode>,
+  </StrictMode>
 )