Finish Projects section

fadihanna123 · Sep 1, 2024 · 0a4f186 · 0a4f186
1 parent b952414
commit 0a4f186
Show file tree

Hide file tree

Showing 17 changed files with 160 additions and 191 deletions.
diff --git a/index.html b/index.html
@@ -2,6 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fadi Hanna - CV</title>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "my-cv",
   "private": true,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,11 +24,11 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.9.1",
-    "@types/node": "^22.5.0",
-    "@types/react": "^18.3.4",
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.2.0",
-    "@typescript-eslint/parser": "^8.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "eslint": "9.9.1",
@@ -37,11 +37,11 @@
     "eslint-plugin-react-refresh": "^0.4.11",
     "globals": "^15.9.0",
     "husky": "^9.1.5",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.42",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.2.0",
+    "typescript-eslint": "^8.3.0",
     "vite": "^5.4.2"
   },
   "homepage": "https://fadihanna123.github.io/my-cv"

diff --git a/src/app/Layout.tsx b/src/app/Layout.tsx
@@ -6,12 +6,12 @@ import {
 } from "../components";
 
 const Layout: React.FC = () => (
-  <div className="container m-0 p-0 border-0 outline-0 text-[#fff] font-bold">
+  <div className="container text-lg m-0 p-0 border-0 outline-0 text-[#fff] font-bold">
     <div className="flex">
       <div className="w-[50%] border-[#000] border-solid border-r-2 h-[100vh] p-2">
         <PersonCardSection />
       </div>
-      <div className="w-[50%] border-[#000] border-solid border-r-2 h-[100vh] p-2">
+      <div className="w-[50%] border-[#000] border-solid border-r-2 p-2">
         <div className="flex">
           <ExperienceSection />
           <EducationSection />

diff --git a/src/assets/CV_React.png b/src/assets/CV_React.png
diff --git a/src/assets/CameraWebsite.png b/src/assets/CameraWebsite.png
diff --git a/src/assets/ChatMe.png b/src/assets/ChatMe.png
diff --git a/src/assets/Datahjalp.png b/src/assets/Datahjalp.png
diff --git a/src/assets/Dinrestaurang.png b/src/assets/Dinrestaurang.png
diff --git a/src/assets/Intranat.png b/src/assets/Intranat.png
diff --git a/src/assets/Pixabayfinder.png b/src/assets/Pixabayfinder.png
diff --git a/src/components/EducationSection.tsx b/src/components/EducationSection.tsx
@@ -1,4 +1,4 @@
-import { eduData } from "../data";
+import { eduData } from "../consts";
 import TxtSection from "./TxtSection";
 
 const EducationSection: React.FC = () => {

diff --git a/src/components/ExperienceSection.tsx b/src/components/ExperienceSection.tsx
@@ -1,4 +1,4 @@
-import { expeData } from "../data";
+import { expeData } from "../consts";
 import TxtSection from "./TxtSection";
 
 const ExperienceSection: React.FC = () => {

diff --git a/src/components/PersonCardSection.tsx b/src/components/PersonCardSection.tsx
@@ -1,8 +1,6 @@
-const PersonCardSection: React.FC = () => {
-  const IMAGES = {
-    myProfilePic: new URL("../assets/myProfilePic.JPG", import.meta.url).href,
-  };
+import { IMAGES } from "../consts";
 
+const PersonCardSection: React.FC = () => {
   return (
     <div className="relative top-[30%] text-center">
       <img

diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx
@@ -1,31 +1,37 @@
-import { projectData } from "../data";
+import { projectData } from "../consts";
 
 const ProjectsSection = () => {
   return (
     <>
-      <h1 className="text-xl text-center">Projects</h1>
-
-      {projectData.map((project) => {
-        return (
-          <div className="max-w-sm rounded overflow-hidden shadow-lg flex">
-            <img className="w-full" src="" alt={project.assetPath} />
-            <div className="px-6 py-4">
-              <div className="font-bold text-xl mb-2"> {project.title}</div>
-            </div>
-            <div className="px-6 pt-4 pb-2">
-              <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-                #photography
-              </span>
-              <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-                #travel
-              </span>
-              <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-                #winter
-              </span>
+      <h1 className="text-2xl text-center m-2 shadow-md">Projects</h1>
+      <div className="rounded overflow-hidden shadow-lg flex flex-row flex-wrap">
+        {projectData.map((project) => {
+          return (
+            <div className="w-[50%] p-2 border mt-2 rounded">
+              <img
+                className="w-full"
+                src={project.assetPath}
+                alt={project.assetPath}
+              />
+              <div className="py-4">
+                <div className="font-bold text-xl mb-2"> {project.title} </div>
+              </div>
+              <div className="w-[100]">
+                <a href={project.GitURL} className="m-2" target="_blank">
+                  <i className="fa-brands fa-github text-2xl"></i>
+                </a>
+                {project.URL ? (
+                  <a href={project.URL} className="m-2" target="_blank">
+                    <i className="fa-solid fa-globe text-2xl"></i>
+                  </a>
+                ) : (
+                  ""
+                )}
+              </div>
             </div>
-          </div>
-        );
-      })}
+          );
+        })}
+      </div>
     </>
   );
 };

diff --git a/src/data/index.ts → src/consts/index.ts b/src/data/index.ts → src/consts/index.ts
@@ -1,3 +1,14 @@
+const IMAGES = {
+  myProfilePic: new URL("../assets/myProfilePic.JPG", import.meta.url).href,
+  Pixabayfinder: new URL("../assets/Pixabayfinder.png", import.meta.url).href,
+  CameraWebsite: new URL("../assets/CameraWebsite.png", import.meta.url).href,
+  ChatMe: new URL("../assets/ChatMe.png", import.meta.url).href,
+  CV_React: new URL("../assets/CV_React.png", import.meta.url).href,
+  Datahjalp: new URL("../assets/Datahjalp.png", import.meta.url).href,
+  Dinrestaurang: new URL("../assets/Dinrestaurang.png", import.meta.url).href,
+  Intranat: new URL("../assets/Intranat.png", import.meta.url).href,
+};
+
 const expeData: expeEduData[] = [
   {
     id: 1,
@@ -90,85 +101,50 @@ const projectData: projectData[] = [
     title: "PixabayFinder",
     URL: "https://pixabayfinderx.netlify.app/",
     GitURL: "https://github.com/fadihanna123/PixabayFinder/",
-    assetPath: "",
+    assetPath: IMAGES.Pixabayfinder,
   },
   {
     id: 2,
     title: "Intranat",
     URL: "https://intranet.gssonsel.se.185-133-206-116.bb.kringelstan.se/",
     GitURL: "https://github.com/fadihanna123/Intranat/",
-    assetPath: "",
+    assetPath: IMAGES.Intranat,
   },
   {
     id: 3,
-    title: "My CV",
-    URL: "https://fadihanna123.github.io/my-cv/",
-    GitURL: "https://github.com/fadihanna123/my-cv/",
-    assetPath: "",
-  },
-  {
-    id: 4,
-    title: "API Template",
-    URL: "",
-    GitURL: "https://github.com/fadihanna123/api/",
-    assetPath: "",
-  },
-  {
-    id: 5,
     title: "Datahjälp",
     URL: "https://fadihanna123.github.io/DatahjalpProjekt/",
     GitURL: "https://github.com/fadihanna123/DatahjalpProjekt/",
-    assetPath: "",
-  },
-  {
-    id: 6,
-    title: "WeatherApp",
-    URL: "",
-    GitURL: "https://github.com/fadihanna123/WeatherApp/",
-    assetPath: "",
+    assetPath: IMAGES.Datahjalp,
   },
   {
-    id: 7,
-    title: "AlbumApp",
-    URL: "",
-    GitURL: "https://github.com/fadihanna123/Album_App/",
-    assetPath: "",
-  },
-  {
-    id: 8,
-    title: "Modules",
-    URL: "",
-    GitURL: "https://github.com/fadihanna123/modules/",
-    assetPath: "",
-  },
-  {
-    id: 9,
+    id: 4,
     title: "Old My CV",
     URL: "",
     GitURL: "https://github.com/fadihanna123/CV_React/",
-    assetPath: "",
+    assetPath: IMAGES.CV_React,
   },
   {
-    id: 10,
-    title: "Din_Restaurang",
+    id: 5,
+    title: "Din Restaurang",
     URL: "",
     GitURL: "https://github.com/fadihanna123/Din_Restaurang/",
-    assetPath: "",
+    assetPath: IMAGES.Dinrestaurang,
   },
   {
-    id: 11,
+    id: 6,
     title: "Chat Me",
     URL: "",
     GitURL: "https://github.com/fadihanna123/chatMe/",
-    assetPath: "",
+    assetPath: IMAGES.ChatMe,
   },
   {
-    id: 12,
-    title: "CameraWebsite",
+    id: 7,
+    title: "Camera Website",
     URL: "",
     GitURL: "https://github.com/fadihanna123/CameraWebsite/",
-    assetPath: "",
+    assetPath: IMAGES.CameraWebsite,
   },
 ];
 
-export { expeData, eduData, projectData };
+export { expeData, eduData, projectData, IMAGES };
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -8,6 +8,13 @@ img {
 }
 
 .container {
-  background: conic-gradient(red 45deg, green 210deg);
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  background-image: conic-gradient(
+    red 0deg,
+    red 90deg,
+    yellow 90deg,
+    green 180deg,
+    green 270deg,
+    blue 270deg
+  );
+  text-shadow: #fc0 1px 0 10px;
 }