From 10df1a5b2faf193cf895b35abe26f6bea47c0c23 Mon Sep 17 00:00:00 2001 From: Victor Hugo Guardiola Date: Mon, 23 Dec 2024 18:01:15 +0100 Subject: [PATCH 1/9] iteration 0 | Getting Started --- package-lock.json | 109 +++++++++++++++++++++++++++++++++++++++++++++- package.json | 3 +- 2 files changed, 110 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index eadb7c4..52a2fc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^7.1.0" }, "devDependencies": { "@types/react": "^18.0.37", @@ -935,6 +936,12 @@ "@types/chai": "*" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/node": { "version": "20.2.5", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz", @@ -1505,6 +1512,15 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "dev": true }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -3555,6 +3571,46 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.0.tgz", + "integrity": "sha512-VcFhWqkNIcojDRYaUO8qV0Jib52s9ULpCp3nkBbmrvtoCVFRp6tmk3tJ2w9BZauVctA1YRnJlFYDn9iJRuCpGA==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.0.tgz", + "integrity": "sha512-F4/nYBC9e4s0/ZjxM8GkZ9a68DpX76LN1a9W9mfPl2GfbDJ9/vzJro6MThNR5qGBH6KkgcK1BziyEzXhHV46Xw==", + "license": "MIT", + "dependencies": { + "react-router": "7.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", @@ -3723,6 +3779,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -3990,6 +4052,12 @@ "node": ">=14" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -5038,6 +5106,11 @@ "@types/chai": "*" } }, + "@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "@types/node": { "version": "20.2.5", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz", @@ -5464,6 +5537,11 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "dev": true }, + "cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==" + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -6960,6 +7038,25 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.0.tgz", + "integrity": "sha512-VcFhWqkNIcojDRYaUO8qV0Jib52s9ULpCp3nkBbmrvtoCVFRp6tmk3tJ2w9BZauVctA1YRnJlFYDn9iJRuCpGA==", + "requires": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + } + }, + "react-router-dom": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.0.tgz", + "integrity": "sha512-F4/nYBC9e4s0/ZjxM8GkZ9a68DpX76LN1a9W9mfPl2GfbDJ9/vzJro6MThNR5qGBH6KkgcK1BziyEzXhHV46Xw==", + "requires": { + "react-router": "7.1.0" + } + }, "regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", @@ -7073,6 +7170,11 @@ "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true }, + "set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -7274,6 +7376,11 @@ "punycode": "^2.3.0" } }, + "turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" + }, "type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 727f1c1..b813694 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^7.1.0" }, "devDependencies": { "@types/react": "^18.0.37", From c365829ca220338f441bbbbb906b0e823ec4eb07 Mon Sep 17 00:00:00 2001 From: Victor Hugo Guardiola Date: Mon, 23 Dec 2024 18:05:39 +0100 Subject: [PATCH 2/9] iteration 1 | Import Data --- src/App.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/App.jsx b/src/App.jsx index 1b51d87..619e066 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,16 @@ +import { useState } from "react"; import "./App.css"; +import CompaniesData from "./companies.json" +import TechnologiesData from "./technologies.json" + function App() { + + const [companies, setCompanies] = useState(CompaniesData); + // console.log(companies); + const [technologies, setTechnologies] = useState(TechnologiesData); + // console.log(technologies); + return (

LAB | React Stack Tracker

From 8ee27be0d70c5ea6bc10913b6fcc6dd325627937 Mon Sep 17 00:00:00 2001 From: Victor Hugo Guardiola Date: Mon, 23 Dec 2024 18:12:53 +0100 Subject: [PATCH 3/9] iteration 2 | Create Components --- src/App.jsx | 9 ++++++++- src/components/Navbar.jsx | 2 +- src/pages/CompanyPage.jsx | 2 +- src/pages/HomePage.jsx | 2 +- src/pages/TechnologyPage.jsx | 2 +- 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 619e066..a94a674 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,10 @@ import { useState } from "react"; import "./App.css"; import CompaniesData from "./companies.json" import TechnologiesData from "./technologies.json" +import Navbar from "./components/Navbar"; +import HomePage from "./pages/HomePage"; +import CompanyPage from "./pages/CompanyPage"; +import TechnologyPage from "./pages/TechnologyPage"; function App() { @@ -13,7 +17,10 @@ function App() { return (
-

LAB | React Stack Tracker

+ + + +
); } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 09e2806..55b6495 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,5 @@ function Navbar() { - return ; + return ; } export default Navbar; diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index cc5903c..2d9ee3f 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -1,7 +1,7 @@ function CompanyPage() { return (
-

CompanyPage

+

Company Profile

); } diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index e97e7de..bad7ad2 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,7 +1,7 @@ function HomePage() { return (
-

HomePage

+

StackTracker: Discover Tech Stacks Used by Top Companies

); } diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 30f9414..2e077ef 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,7 +1,7 @@ function TechnologyPage() { return (
-

TechnologyPage

+

Technology Details

); } From c12829b0f1bc1c97c196d6e623fe9f0af4a2058e Mon Sep 17 00:00:00 2001 From: Victor Hugo Guardiola Date: Mon, 23 Dec 2024 18:18:46 +0100 Subject: [PATCH 4/9] iteration 3 | Setup React Router and Create Routes --- src/App.jsx | 15 ++++++++------- src/main.jsx | 20 ++++++++++++-------- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index a94a674..dd459bf 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,15 +1,14 @@ import { useState } from "react"; import "./App.css"; -import CompaniesData from "./companies.json" -import TechnologiesData from "./technologies.json" +import CompaniesData from "./companies.json"; +import TechnologiesData from "./technologies.json"; import Navbar from "./components/Navbar"; import HomePage from "./pages/HomePage"; import CompanyPage from "./pages/CompanyPage"; import TechnologyPage from "./pages/TechnologyPage"; - +import { Route, Routes } from "react-router-dom"; function App() { - const [companies, setCompanies] = useState(CompaniesData); // console.log(companies); const [technologies, setTechnologies] = useState(TechnologiesData); @@ -18,9 +17,11 @@ function App() { return (
- - - + + } /> + } /> + } /> +
); } diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..1c4773a 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,14 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.jsx' -import './index.css' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.jsx"; +import "./index.css"; -ReactDOM.createRoot(document.getElementById('root')).render( +import { BrowserRouter as Router } from "react-router-dom"; + +ReactDOM.createRoot(document.getElementById("root")).render( - - , -) + + + + +); From 352fa45109502ba07f142a78a5cd4d0a4c8253fb Mon Sep 17 00:00:00 2001 From: Victor Hugo Guardiola Date: Mon, 23 Dec 2024 18:47:20 +0100 Subject: [PATCH 5/9] iteration 4 | Display Companies as a List --- src/App.css | 35 +++++++++++++++++++++++++++++++++++ src/App.jsx | 2 +- src/pages/HomePage.jsx | 22 ++++++++++++++++++++-- 3 files changed, 56 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index b9d355d..12951a0 100644 --- a/src/App.css +++ b/src/App.css @@ -40,3 +40,38 @@ .read-the-docs { color: #888; } + +/* *** Home Page Section *** */ +.page-container h1 { + font-size: 25px; +} + +.companies-container { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.each-company { + margin: 25px; + padding: 10px; + + width: 350px; + height: 275px; + + box-shadow: 0px 5px 3px #dfdfdf; + + font-weight: bold; + font-size: 20px; + color: #000; + + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; +} + +.each-company img { + width: 100px; + margin-bottom: 55px; +} diff --git a/src/App.jsx b/src/App.jsx index dd459bf..8ed1fe2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -18,7 +18,7 @@ function App() {
- } /> + } /> } /> } /> diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index bad7ad2..2056ef6 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,7 +1,25 @@ -function HomePage() { +import { Link } from "react-router-dom"; + +function HomePage(props) { + // console.log(props.companies); + const companies = props.companies; + // console.log(companies); + return ( -
+

StackTracker: Discover Tech Stacks Used by Top Companies

+
+ {companies.map((eachCompany) => { + return ( + +
+

{eachCompany.name}

+ +
+ + ); + })} +
); } From f68ad6048a3c21cbcc18de419797a64d6c63b3ff Mon Sep 17 00:00:00 2001 From: Victor Hugo Guardiola Date: Mon, 23 Dec 2024 20:22:27 +0100 Subject: [PATCH 6/9] iteration 5 | Show Company Details --- src/App.css | 101 ++++++++++++++++++++++++++++++++++++++ src/App.jsx | 2 +- src/index.css | 3 +- src/pages/CompanyPage.jsx | 48 +++++++++++++++++- src/pages/HomePage.jsx | 4 +- 5 files changed, 152 insertions(+), 6 deletions(-) diff --git a/src/App.css b/src/App.css index 12951a0..d6b67a8 100644 --- a/src/App.css +++ b/src/App.css @@ -75,3 +75,104 @@ width: 100px; margin-bottom: 55px; } + +/* *** Company Page Section *** */ +.company-page { + padding: 20px; + + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + gap: 70px; +} + +.company-page h1 { + font-size: 27px; +} + +.image-container img { + width: 125px; +} + +.image-container { + margin: 25px; + padding: 10px; + + width: 250px; + height: 250px; + + box-shadow: 0px 5px 3px #dfdfdf; + + font-weight: bold; + font-size: 20px; + color: #000; + + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; +} + +.company-info-container { + margin-bottom: 45px; + width: 75vw; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 15px; +} + +.info-section { + width: 50%; + height: 275px; +} + +.info-section h2 { + font-size: 35px; +} + +.info-section p { + text-align: center; +} + +/* *** Tech Stack List Section *** */ +.each-tech-stack img { + width: 70px; +} + +.tech-stack-list { + width: 95vw; + padding: 10px; + + overflow: hidden; + + display: flex; + gap: 20px; + overflow-x: auto; + scrollbar-width: thin; + white-space: nowrap; + justify-content: space-evenly; + align-items: center; +} + +.each-tech-stack { + margin: 25px; + padding: 10px; + + width: 150px; + height: 150px; + + box-shadow: 0px 5px 3px #dfdfdf; + + font-weight: bold; + font-size: 20px; + color: #000; + + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; +} diff --git a/src/App.jsx b/src/App.jsx index 8ed1fe2..7cdbef5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -19,7 +19,7 @@ function App() { } /> - } /> + } /> } />
diff --git a/src/index.css b/src/index.css index b121ef9..994d8d7 100644 --- a/src/index.css +++ b/src/index.css @@ -21,10 +21,11 @@ a:hover { body { margin: 0; - display: flex; place-items: center; min-width: 320px; min-height: 100vh; + + background-color: #F5F7FA; } h1 { diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index 2d9ee3f..dfee112 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -1,7 +1,51 @@ -function CompanyPage() { +import { Link, useParams } from "react-router-dom"; + + +function CompanyPage(props) { + + // console.log(props); + const companies = props.companies; + // console.log(companies) + + const dynamicParams = useParams(); + // console.log(dynamicParams); + // console.log(dynamicParams.companySlug) + + const foundCompany = companies.find((eachCompany) => { + if(eachCompany.slug === dynamicParams.companySlug) { + return true; + } else { + return false; + } + }) + + // console.log(foundCompany) + return ( -
+

Company Profile

+
+
+ +
+
+

{foundCompany.name}

+

About

+

{foundCompany.description}

+
+
+
+ {foundCompany.techStack.map((eachTech) => { + return( + +
+ +
+

{eachTech.name}

+ + ) + })} +
); } diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index 2056ef6..77184b3 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -11,10 +11,10 @@ function HomePage(props) {
{companies.map((eachCompany) => { return ( - +

{eachCompany.name}

- +
); From 25d849a04ce08e4e0c04357ae3c1cb7fc4ed9bbb Mon Sep 17 00:00:00 2001 From: Victor Hugo Guardiola Date: Mon, 23 Dec 2024 20:50:43 +0100 Subject: [PATCH 7/9] Bonus: iteration 6 | Technology Details --- src/App.jsx | 2 +- src/pages/TechnologyPage.jsx | 33 +++++++++++++++++++++++++++++++-- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 7cdbef5..da31992 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -20,7 +20,7 @@ function App() { } /> } /> - } /> + } />
); diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 2e077ef..b9d727f 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,7 +1,36 @@ -function TechnologyPage() { +import { useParams } from "react-router-dom"; + +function TechnologyPage(props) { + // console.log(props); + const technologies = props.technologies; + + const dynamicParams = useParams(); + // console.log(dynamicParams) + // console.log(dynamicParams.slug); + + const foundTech = technologies.find((eachTech) => { + if (eachTech.slug === dynamicParams.slug) { + return true; + } else { + return false; + } + }); + + // console.log(foundTech); + return ( -
+

Technology Details

+
+
+ +
+
+

{foundTech.name}

+

About

+

{foundTech.description}

+
+
); } From 1f787f0f2712ad986ef1402dc23ce2f0a7606476 Mon Sep 17 00:00:00 2001 From: Victor Hugo Guardiola Date: Mon, 23 Dec 2024 21:08:12 +0100 Subject: [PATCH 8/9] Bonus: iteration 7 | Back to Visited Company --- src/pages/CompanyPage.jsx | 2 +- src/pages/TechnologyPage.jsx | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index dfee112..2eb7406 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -37,7 +37,7 @@ function CompanyPage(props) {
{foundCompany.techStack.map((eachTech) => { return( - +
diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index b9d727f..4c633a1 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,4 +1,4 @@ -import { useParams } from "react-router-dom"; +import { useNavigate, useParams, useSearchParams } from "react-router-dom"; function TechnologyPage(props) { // console.log(props); @@ -18,6 +18,11 @@ function TechnologyPage(props) { // console.log(foundTech); + const [searchParams] = useSearchParams(); + const navigate = useNavigate(); + + const companySlug = searchParams.get("company"); + return (

Technology Details

@@ -31,6 +36,9 @@ function TechnologyPage(props) {

{foundTech.description}

+
); } From 9bc112b6209c7cc3acd053341578ac8796b2982c Mon Sep 17 00:00:00 2001 From: Victor Hugo Guardiola Date: Mon, 23 Dec 2024 21:29:46 +0100 Subject: [PATCH 9/9] Bonus: iteration 8 | Styling --- src/App.css | 45 +++++++++++++++++---------------------- src/components/Navbar.jsx | 8 ++++++- src/index.css | 1 + 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/App.css b/src/App.css index d6b67a8..3bc861d 100644 --- a/src/App.css +++ b/src/App.css @@ -1,31 +1,9 @@ #root { max-width: 1280px; margin: 0 auto; - padding: 2rem; text-align: center; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} @media (prefers-reduced-motion: no-preference) { a:nth-of-type(2) .logo { @@ -33,12 +11,27 @@ } } -.card { - padding: 2em; + + +/* *** Nav Section *** */ +nav { + margin: 10px; + height: 75px; + padding: 0px 20px; + + background-color: #2563EB; + border-radius: 15px; + + display: flex; + align-items: center; } -.read-the-docs { - color: #888; +nav p { + text-align: center; + font-weight: bold; + font-size: 17px; + color: #E2E8F0; + } /* *** Home Page Section *** */ diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 55b6495..e261b54 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,11 @@ +import { Link } from "react-router-dom"; + function Navbar() { - return ; + return ( + + ); } export default Navbar; diff --git a/src/index.css b/src/index.css index 994d8d7..5f4efce 100644 --- a/src/index.css +++ b/src/index.css @@ -21,6 +21,7 @@ a:hover { body { margin: 0; + overflow-x: hidden; place-items: center; min-width: 320px; min-height: 100vh;