Technigo · osckli990 · Apr 15, 2025 · Apr 16, 2025 · Apr 17, 2025 · Apr 17, 2025
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# Portfolio
+# Oscars Portfolio
+
+# https://oscars-js-portfolio.netlify.app
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,17 @@
+import js from "@eslint/js";
+import globals from "globals";
+import pluginReact from "eslint-plugin-react";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,jsx}"],
+    plugins: { js },
+    extends: ["js/recommended", "stylelint-config-tailwindcss"],
+  },
+  {
+    files: ["**/*.{js,mjs,cjs,jsx}"],
+    languageOptions: { globals: globals.browser },
+  },
+  pluginReact.configs.flat.recommended,
+]);
diff --git a/index.html b/index.html
@@ -1,13 +1,46 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="description" content="Oscar's portfolio" />
+    <meta
+      name="keywords"
+      content="HTML, CSS, JavaScript, React, Vite, Vitest, Tailwind"
+    />
+    <meta name="author" content="Oscar Liljefors" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Portfolio</title>
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Afacad+Flux:[email protected]&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Jost:ital,wght@0,100..900;1,100..900&family=Merienda:[email protected]&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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
+    <!--aos link-->
+    <script defer type="module" src="/src/main.jsx"></script>
+    <script>
+      document.documentElement.classList.add("js");
+    </script>
+    <!--dont remember. remove?-->
+    <title>Oscar's Portfolio</title>
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:title" content="Oscar's portfolio" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Netlify" />
+    <meta
+      property="og:description"
+      content="You're welcome to discover more about Oscar"
+    />
+    <meta property="og:url" content="https://oscars-js-portfolio.netlify.app" />
+    <meta property="og:image" content="./public/meta-og-img.png" />
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <!--Anchor of main-->
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init();
+    </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -7,21 +7,46 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.4",
+    "@versoly/react-taos": "^0.1.0",
+    "aos": "^3.0.0-beta.6",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.17",
+    "taos": "^1.0.5"
   },
   "devDependencies": {
-    "@eslint/js": "^9.21.0",
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@eslint/js": "^9.25.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.21.0",
+    "@vitejs/plugin-react": "^4.4.0",
+    "autoprefixer": "^10.4.21",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-styled-components": "^2.1.4",
+    "eslint": "^9.25.1",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
-    "vite": "^6.2.0"
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^26.1.0",
+    "postcss": "^8.5.3",
+    "react-test-renderer": "^19.1.0",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-motion": "^1.1.0",
+    "vite": "^6.2.0",
+    "vitest": "^3.1.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,8 @@
+import { TAOS } from "@versoly/react-taos";
+
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/public/article-acces.avif b/public/article-acces.avif
diff --git a/public/article-api.avif b/public/article-api.avif
diff --git a/public/article-first.avif b/public/article-first.avif
diff --git a/public/article-movie.avif b/public/article-movie.avif
diff --git a/public/article-portfolio.avif b/public/article-portfolio.avif
diff --git a/public/article-recipe.avif b/public/article-recipe.avif
diff --git a/public/article-todo.avif b/public/article-todo.avif
diff --git a/public/article-weather.avif b/public/article-weather.avif
diff --git a/public/happy_thoughts.avif b/public/happy_thoughts.avif
diff --git a/public/icon.svg b/public/icon.svg
diff --git a/public/meta-og-img.avif b/public/meta-og-img.avif
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1 +1,5 @@
-Please include a link to your Figma design and a Netlify link.
+Please include a link to your Figma design and a Netlify link.
+
+# www.figma.com/board/PymjF0tI8PYjLJ45Ud1Ai9/Water-🌊?node-id=0-1&p=f&t=fyWZXSjCKeiorHlN-0
+
+# https://oscars-js-portfolio.netlify.app
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*This is required to activate tailwind*/
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,28 @@
+import React from "react";
+
+import { FeaturedProjects } from "./sections/FeaturedProjects";
+import { HiThere } from "./sections/HiThere";
+import { LetsTalk } from "./sections/LetsTalk";
+import { MyWords } from "./sections/MyWords";
+import { Skills } from "./sections/Skills";
+import { Tech } from "./sections/Tech";
+import { GlobalStyle } from "./GlobalStyle";
+
 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>
+      <GlobalStyle />
+      <HiThere data-aos="fade-up" />
+      <Tech data-aos="fade-up" />
+      <FeaturedProjects data-aos="fade-up" />
+      <Skills data-aos="fade-up" />
+      <MyWords data-aos="fade-up" />
+      <LetsTalk data-aos="fade-up" />
     </>
-  )
-}
+  );
+};
+
+//App is our main hub for all section and components. the "sandwich"
+
+//add tests
+//add accessibility and aria-labels
diff --git a/src/App.test.jsx b/src/App.test.jsx
@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { App } from "./App";
+
+/*
+describe("A truthy statement", () => {
+  it("should be equal to 2", () => {
+    expect(1 + 1).toEqual(2);
+  });
+});
+test
+*/
+
+describe("App", () => {
+  it("renders the App component", () => {
+    render(<App />);
+
+    screen.debug(); // prints out the jsx in the App component unto the command line
+  });
+});
diff --git a/src/Breakpoints.js b/src/Breakpoints.js
@@ -0,0 +1,12 @@
+export const media = {
+  mobile: "(min-width: 768px)",
+  tablet: "(min-width: 1024px)",
+  smalldesktop: "(min-width: 1280px)",
+  desktop: "(min-width: 1536px)",
+};
+
+//sm = 640px
+//mobile = 768px = md
+//tablet = 1024px = lg
+//smalldesktop = 1280px = xl
+//desktop = 1536px = 2xl
diff --git a/src/GlobalStyle.jsx b/src/GlobalStyle.jsx
@@ -0,0 +1,66 @@
+import { createGlobalStyle } from "styled-components";
+
+import { media } from "./Breakpoints";
+
+export const GlobalStyle = createGlobalStyle`
+  * {
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  line-height: normal;
+  color: #000000;
+  }
+
+  :focus-visible {
+  outline: 4px solid yellow;
+  outline-offset: 2px;
+  border-radius: 2px;
+  }
+
+  body {
+  margin: 0;
+  padding: 0;
+  }
+
+  #root {
+  width: 100%;
+  }
+
+
+  h1 {
+  font-size: 52px;
+  font-weight: 700;
+  }
+
+  h2 {
+  font-size: 48px;
+  font-weight: 700;
+  }
+
+  h3 {
+  font-size: 24px;
+  font-weight: 500;
+  }
+
+  li {
+  font-size: 16px;
+  font-weight: 400;
+  list-style-type: none;
+  }
+
+  @media ${media.smalldesktop} {
+    h1 {
+    font-size: 100px;
+    font-weight: 700;
+    }
+
+    h2 {
+    font-size: 80px;
+    font-weight: 700;
+    }
+
+    h3 {
+    font-size: 30px;
+    font-weight: 500;
+    }
+  }
+`;
diff --git a/src/assets/Btn-instagram.svg b/src/assets/Btn-instagram.svg
diff --git a/src/assets/Btn-linkedin.svg b/src/assets/Btn-linkedin.svg
diff --git a/src/assets/Btn-stackoverflow.svg b/src/assets/Btn-stackoverflow.svg
diff --git a/src/assets/Ic-ArrowDown.svg b/src/assets/Ic-ArrowDown.svg
diff --git a/src/assets/Ic-Github.svg b/src/assets/Ic-Github.svg