Technigo · zoe-lindqvist · Nov 4, 2024 · Nov 4, 2024 · Nov 5, 2024 · Nov 5, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -16,5 +16,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    'react/prop-types': 'off', //Disable prop-types validation rule
   },
 }
diff --git a/README.md b/README.md
@@ -1,37 +1,14 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/design-handoff.svg" alt="Project Banner Image">
-  </a>
-</h1>
-
 # Design Handoff Project
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## Getting Started with the Project
-
-### Dependency Installation & Startup Development Server
-
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
-
-```bash
-npm i && code . && npm run dev
-```
+This React project involves collaboration among three developers and a designer to closely replicate a provided design. The focus is on using styled components and creating reusable components to ensure consistency and maintainability.
 
 ### The Problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+We approached the project by starting with a to-do list of basic tasks, which we expanded as the project progressed. Each task was assigned to a team member, and we tracked progress by checking off completed items. Our workflow included frequent team meetings and active communication through a Slack group chat to divide tasks and provide feedback. We utilized Git with feature branches for collaborative development and created a detailed step-by-step guide for the Git workflow in Notion.
 
-### View it live
+For tools and technologies, we used React for the core development and styled-components for creating reusable and consistent styles. Figma served as our reference for design details, allowing us to ask questions and accurately replicate spacing and layout values. React-Slick was implemented for the image carousel feature. Additionally, we leveraged YouTube, community resources, and AI tools for guidance and problem-solving.
+Looking forward, if given more time, we would enhance the layout for tablet and desktop views to improve responsiveness. We would also explore implementing a feature to display the most recent seven Instagram images for the dog kennel, which would require resolving API permissions.
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
-
-## Instructions
+### View it live
 
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+https://thorondors-kennel.netlify.app/
diff --git a/index.html b/index.html
@@ -2,9 +2,32 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- Favicon for light mode (dark-colored icon) -->
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="./public/assets/paw-favicon-dark.svg"
+      media="(prefers-color-scheme: light)"
+    />
+    <!-- Favicon for dark mode (light-colored icon) -->
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="./public/assets/paw-favicon-light.svg"
+      media="(prefers-color-scheme: dark)"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Music Releases - Project - Week 5</title>
+    <title>Thorondor's Kennel</title>
+
+    <!-- Google Fonts -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Italiana&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -11,16 +11,24 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.20",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "vite": "^4.4.5"
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "vite": "^4.4.5",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/assets/divider.svg b/public/assets/divider.svg
diff --git a/public/assets/dog-images/about-section-image.webp b/public/assets/dog-images/about-section-image.webp
diff --git a/public/assets/dog-images/apply-section.webp b/public/assets/dog-images/apply-section.webp
diff --git a/public/assets/dog-images/carousel-images/carousel-img-five.webp b/public/assets/dog-images/carousel-images/carousel-img-five.webp
diff --git a/public/assets/dog-images/carousel-images/carousel-img-four.webp b/public/assets/dog-images/carousel-images/carousel-img-four.webp
diff --git a/public/assets/dog-images/carousel-images/carousel-img-one.webp b/public/assets/dog-images/carousel-images/carousel-img-one.webp
diff --git a/public/assets/dog-images/carousel-images/carousel-img-seven.webp b/public/assets/dog-images/carousel-images/carousel-img-seven.webp
diff --git a/public/assets/dog-images/carousel-images/carousel-img-six.webp b/public/assets/dog-images/carousel-images/carousel-img-six.webp
diff --git a/public/assets/dog-images/carousel-images/carousel-img-three.webp b/public/assets/dog-images/carousel-images/carousel-img-three.webp
diff --git a/public/assets/dog-images/carousel-images/carousel-img-two.webp b/public/assets/dog-images/carousel-images/carousel-img-two.webp
diff --git a/public/assets/dog-images/contact-section.webp b/public/assets/dog-images/contact-section.webp
diff --git a/public/assets/dog-images/dogs-section-image.webp b/public/assets/dog-images/dogs-section-image.webp
diff --git a/public/assets/dog-images/hero-image.webp b/public/assets/dog-images/hero-image.webp
diff --git a/public/assets/hamburger.svg b/public/assets/hamburger.svg
diff --git a/public/assets/icons.svg b/public/assets/icons.svg
diff --git a/public/assets/line.svg b/public/assets/line.svg
diff --git a/public/assets/logo-images/big-paw.svg b/public/assets/logo-images/big-paw.svg
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,5 +16,6 @@ module.exports = { @@
           'warn',
           { allowConstantExport: true },
         ],
+        'react/prop-types': 'off', //Disable prop-types validation rule
       },
     }