diff --git a/package-lock.json b/package-lock.json index aa66f461c..023b8a353 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "starter_helpi", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-free": "^6.5.2", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -21,6 +22,8 @@ "react": "^18.2.0", "react-bootstrap": "^2.10.1", "react-dom": "^18.2.0", + "react-dom-confetti": "^0.2.0", + "react-icons": "^5.1.0", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" @@ -834,11 +837,11 @@ } }, "node_modules/@babel/plugin-syntax-flow": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.23.3.tgz", - "integrity": "sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.24.1.tgz", + "integrity": "sha512-sxi2kLTI5DeW5vDtMUsk4mTPwvlUDbjOnoWayhynCwrw4QXRld4QEYwqzY8JmQXaJUtgUuCIurtSRH5sn4c7mA==", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1265,12 +1268,12 @@ } }, "node_modules/@babel/plugin-transform-flow-strip-types": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.23.3.tgz", - "integrity": "sha512-26/pQTf9nQSNVJCrLB1IkHUKyPxR+lMrH2QDPG89+Znu9rAMbtrybdbWeE9bb7gzjmE5iXHEY+e0HUwM6Co93Q==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.24.1.tgz", + "integrity": "sha512-iIYPIWt3dUmUKKE10s3W+jsQ3icFkw0JyRVyY1B7G4yK/nngAOHLVx8xlhA6b/Jzl/Y0nis8gjqhqKtRDQqHWQ==", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", - "@babel/plugin-syntax-flow": "^7.23.3" + "@babel/helper-plugin-utils": "^7.24.0", + "@babel/plugin-syntax-flow": "^7.24.1" }, "engines": { "node": ">=6.9.0" @@ -2457,6 +2460,15 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz", + "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -6747,6 +6759,11 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==" }, + "node_modules/dom-confetti": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/dom-confetti/-/dom-confetti-0.2.2.tgz", + "integrity": "sha512-+UVH9Y85qmpTnbmFURwLWjqLIykyIrsNSRkPX/eFlBuOURz9RDX8JoZHnajZHyFuCV0w/K3+tZK0ztfoTw6ejg==" + }, "node_modules/dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -13780,11 +13797,30 @@ "react": "^18.2.0" } }, + "node_modules/react-dom-confetti": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/react-dom-confetti/-/react-dom-confetti-0.2.0.tgz", + "integrity": "sha512-+XRTi+WlCrcRN2dTjdEopOaPFtS7hpaHRRQ0sHiVRGqpchKz4QVh3i+6eLEEpNHYpN2VgPmhjvJ/vnjmUYhlIQ==", + "dependencies": { + "dom-confetti": "0.2.2" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz", + "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index d2189d12e..1d459c451 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-free": "^6.5.2", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -16,6 +17,8 @@ "react": "^18.2.0", "react-bootstrap": "^2.10.1", "react-dom": "^18.2.0", + "react-dom-confetti": "^0.2.0", + "react-icons": "^5.1.0", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" diff --git a/public/index.html b/public/index.html index aa069f27c..462351189 100644 --- a/public/index.html +++ b/public/index.html @@ -25,6 +25,12 @@ Learn how to configure a non-root public URL by running `npm run build`. --> React App + @@ -40,4 +46,4 @@ To create a production bundle, use `npm run build` or `yarn build`. --> - + \ No newline at end of file diff --git a/src/App.css b/src/App.css index 74b5e0534..4c1af4396 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,80 @@ -.App { - text-align: center; +.footer { + position: fixed; + bottom: 0; + width: 100%; + background-color: #6fb4fe; + color: white; + display: flex; + align-items: center; + padding: 0.2vw; +} + +.header { + top: 0; + width: 100%; + height: 4vw; + background-color: white; + align-items: center; } -.App-logo { - height: 40vmin; - pointer-events: none; +.footer-container { + display: flex; + cursor: pointer; + margin-right: 3vw; + margin-left: 1vw; + font-family: "Poppins Light", sans-serif; + font-weight: bold; + font-size: 1.6vw; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +.footer-container:hover { + opacity: 0.7; } -.App-header { - background-color: #282c34; - min-height: 100vh; +.api-form { display: flex; - flex-direction: column; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + margin-left: 20vw; +} + +.api-form .form-control { + width: 20vw; +} + +.api-form .Submit-Button { + width: 10vw; + background-color: #0980ff; + border-color: #0980ff; +} + +.api-form .Submit-Button:hover { + width: 10vw; + background-color: #0053ac; + border-color: #0053ac; +} + +.navBar { + background-color: #6fb4fe; + display: flex; + height: 4.5vw; } -.App-link { - color: #61dafb; +.search-bar { + margin: auto; + width: 19vw; + height: 2.7vw; /* Adjust the width as needed */ + font-size: 1vw; /* Adjust the font size as needed */ + margin-left: 44.5vw; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.career-search { + margin-top: 0.8vw; + margin-left: 1vw; + color: white; + font-family: "Poppins", sans-serif; } + +.career-search:hover { + opacity: 0.9; + cursor: pointer; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index cbb4ca51a..317745948 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,12 @@ import React, { useState } from 'react'; -import logo from './logo.svg'; import './App.css'; import { Button, Form } from 'react-bootstrap'; +import Home from './Pages/Home'; +import Basic from './Pages/Basic'; +import Detailed from './Pages/Detailed'; +import NavHome from './navbar'; +import CareerSearchByInterest from './Pages/interests'; +import Results from './Pages/Results'; //local storage and API Key: key should be entered in by the user and will be stored in local storage (NOT session storage) let keyData = ""; @@ -13,6 +18,7 @@ if (prevKey !== null) { function App() { const [key, setKey] = useState(keyData); //for api key input + const [currPg, setCurrPg] = useState('Home'); //sets the local storage item to the api key the user inputed function handleSubmit() { @@ -24,29 +30,32 @@ function App() { function changeKey(event: React.ChangeEvent) { setKey(event.target.value); } + + const updatePageState = () => { + return currPg === 'Basic' ? + : currPg === 'Detailed' ? + : currPg === 'interests' ? + : currPg === 'Results' ? + : ; +}; + return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
- API Key: - -

- -
-
+ <> + + + {updatePageState()/* Renders the page */} + +
+

Contact Us

+

Help

+
+ + + + +
+
+ ); } diff --git a/src/Pages/Basic.tsx b/src/Pages/Basic.tsx new file mode 100644 index 000000000..7af6847b1 --- /dev/null +++ b/src/Pages/Basic.tsx @@ -0,0 +1,173 @@ + +import React, { useState, useEffect } from 'react'; +import { Button, ProgressBar } from 'react-bootstrap'; +import './Pages.css'; +import './questions.css'; +import Confetti from 'react-dom-confetti'; +import smileIcon from './smile.svg'; +import mehIcon from './meh.svg'; +import sadIcon from './sad.svg'; +import brainIcon from './modifiedBrainIcon.svg'; + +const config = { + angle: 90, + spread: 150, + startVelocity: 35, + elementCount: 200, + dragFriction: 0.12, + duration: 9000, + stagger: 3, + width: "0.9vw", + height: "0.9vw", + perspective: "500px", + colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"], + recycle: false, + }; + +interface BasicProp { + handlePage: (page: string) => void; +} + +interface QuestionOption { + question: string; + options: { label: string; iconSrc: string }[]; +} + +const Basic: React.FC = ({ handlePage }) => { + const [selectedOptions, setSelectedOptions] = useState([]); + const [confetti, setConfetti] = useState(false); + const [confettiShown, setConfettiShown] = useState(false); + + const handleOptionClick = (option: string, questionIndex: number) => { + const updatedSelectedOptions = [...selectedOptions]; + updatedSelectedOptions[questionIndex] = option; + setSelectedOptions(updatedSelectedOptions); + }; + + const questions: QuestionOption[] = [ + { + question: "How much do you prefer working independently over working collaboratively?", + options: [ + { label: "Not at All", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Very much", iconSrc: smileIcon } + ] + }, + { + question: "How important is expressing creativity and passion in your work?", + options: [ + { label: "Not at All Important", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Very Important", iconSrc: smileIcon } + ] + }, + { + question: "How easily do you adapt to changes in your work environment and job responsibilities?", + options: [ + { label: "Difficult", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Easy", iconSrc: smileIcon } + ] + }, + { + question: "How important is it for you to make a tangible impact through your work?", + options: [ + { label: "Not at All Important", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Very Important", iconSrc: smileIcon } + ] + }, + { + question: "How important is having a set routine in the workplace to you?", + options: [ + { label: "Not at All Important", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Very Important", iconSrc: smileIcon } + ] + }, + { + question: "Do you see yourself as a natural leader and enjoy taking charge of projects?", + options: [ + { label: "Not at All", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Very Much", iconSrc: smileIcon } + ] + }, + { + question: "Do you prefer an office environment or an environment that is frequently changing?", + options: [ + { label: "Office", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Changing Environment", iconSrc: smileIcon } + ] + } + ]; + const allQuestionsAnswered = questions.every((q, index) => selectedOptions[index] !== undefined && selectedOptions[index] !== ""); + + useEffect(() => { + + if (allQuestionsAnswered && !confettiShown) { /* Confetti effect when all questions are answered */ + setConfetti(true); + setConfettiShown(true); + setTimeout(() => { + setConfetti(false); + }, 2000); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedOptions, confettiShown]); + + const totalQuestions = questions.length; + const answeredQuestions = selectedOptions.filter(option => option !== '').length; + const progressPercentage: number = (answeredQuestions / totalQuestions) * 100; + + + // dont base it on selected options length,, base it on actual length of questions + + return ( +
+
+ {allQuestionsAnswered && ( +
+ +
+ )} +
+
+ + Brain Icon +
+ +
+ {questions.map((q, index) => ( +
+

{q.question}

+
+ {q.options.map((option, i) => ( + + ))} +
+
+ ))} +
+ {allQuestionsAnswered && ( +
+

Thank you for completing the questionnaire!

+

Your responses have been recorded.

+ +
+ )} +
+
+ ); +} + +export default Basic; \ No newline at end of file diff --git a/src/Pages/Detailed.tsx b/src/Pages/Detailed.tsx new file mode 100644 index 000000000..adc4e4b08 --- /dev/null +++ b/src/Pages/Detailed.tsx @@ -0,0 +1,167 @@ +import React, { useState, useEffect } from 'react'; +import { Button, ProgressBar } from 'react-bootstrap'; +import './Pages.css'; +import './questions.css'; +import Confetti from 'react-dom-confetti'; +import smileIcon from './smile.svg'; +import mehIcon from './meh.svg'; +import sadIcon from './sad.svg'; +import brainIcon from './modifiedBrainIcon.svg'; + +const config = { /* Configuration for confetti */ + angle: 90, + spread: 150, + startVelocity: 35, + elementCount: 200, + dragFriction: 0.12, + duration: 9000, + stagger: 3, + width: "0.9vw", + height: "0.9vw", + perspective: "500px", + colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"], + recycle: false, + }; + +interface DetailedProp { + handlePage: (page: string) => void; +} + +interface QuestionOption { + question: string; + options: { label: string; iconSrc: string }[]; +} + + +const Detailed: React.FC = ({ handlePage }) => { /* Handes page changes */ +const [selectedOptions, setSelectedOptions] = useState([]); +const [confetti, setConfetti] = useState(false); +const [confettiShown, setConfettiShown] = useState(false); + +const handleOptionClick = (option: string, questionIndex: number) => { + const updatedSelectedOptions = [...selectedOptions]; + updatedSelectedOptions[questionIndex] = option; + setSelectedOptions(updatedSelectedOptions); +}; + +const questions: QuestionOption[] = [ + { + question: "Do you see yourself as a natural leader and enjoy taking charge of projects?", + options: [ + { label: "Not at All", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Very much", iconSrc: smileIcon } + ] + }, + { + question: "How significant is the opportunity to be creative and have passion within your work?", + options: [ + { label: "Not at All", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Very Significant", iconSrc: smileIcon } + ] + }, + { + question: "How easily do you adapt to changes in your work environment and job responsibilities?", + options: [ + { label: "Difficult", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Easy", iconSrc: smileIcon } + ] + }, + { + question: "How important is it for you to make a measurable and meaningful impact through your work?", + options: [ + { label: "Not at All", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Very Important", iconSrc: smileIcon } + ] + }, + { + question: "How important is collaborative learning in your professional development?", + options: [ + { label: "Not at All", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Very Important", iconSrc: smileIcon } + ] + }, + { + question: "How significant is a structured routine within your workplace to your overall job satisfaction and productivity?", + options: [ + { label: "Not at All", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Very Significant", iconSrc: smileIcon } + ] + }, + { + question: "Do you prefer an office environment or an environment that is frequently changing?", + options: [ + { label: "Office", iconSrc: sadIcon }, + { label: "Neutral", iconSrc: mehIcon }, + { label: "Changing Environment", iconSrc: smileIcon } + ] + } +]; + const allQuestionsAnswered = questions.every((q, index) => selectedOptions[index] !== undefined && selectedOptions[index] !== ""); + + useEffect(() => { + if (allQuestionsAnswered && !confettiShown) { /* Confetti effect when all questions are answered */ + setConfetti(true); + setConfettiShown(true); + setTimeout(() => { + setConfetti(false); + }, 2000); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedOptions, confettiShown]); + + const totalQuestions = questions.length; + const answeredQuestions = selectedOptions.filter(option => option !== '').length; + const progressPercentage: number = (answeredQuestions / totalQuestions) * 100; + + return ( +
+ {allQuestionsAnswered && ( +
+ +
+ )} +
+
+ + Brain Icon +
+
+ {questions.map((q, idx) => ( +
+

{q.question}

+
+ {q.options.filter(option => option.label !== "").map((option, i) => ( + + ))} +
+
+ ))} +
+ {allQuestionsAnswered && ( /* Response displayed when all questions are answered */ +
+

Thank you for completing the questionnaire!

+

Your responses have been recorded.

+ +
+ )} +
+
+ ); +} + +export default Detailed; \ No newline at end of file diff --git a/src/Pages/Home.tsx b/src/Pages/Home.tsx new file mode 100644 index 000000000..0fdce2f8b --- /dev/null +++ b/src/Pages/Home.tsx @@ -0,0 +1,54 @@ +import React, {} from 'react'; +import {Button} from 'react-bootstrap'; +import arrowIcon from './arrow.svg'; +import './Pages.css'; +import telescopeManImage from './telescope-man.png'; + +interface HomeProp { + handlePage: (page: string) => void; +} +const Home: React.FC = ({ handlePage }) => { /* Handes page changes */ + return ( +
+ +
+
+

Start your future here

+

Student-made career test

powered through the use of AI

+

+ The Basic Page provides a quick overview of potential career paths based on your responses to fundamental questions. + It's a great starting point for exploring your interests and skills. +

+

+ The Detailed Page offers a more in-depth insight into specific career options by asking more detailed into + what you really want out of a career Dive deeper into each career path to make + well-informed decisions about your future. +

+ + +
+
+

Why our quiz?

+

After spending many hours implementing the best career quiz we can, we're confident that our + quiz will help find the best career for you. + Using cutting edge AI to provide you with the greatest career path to your liking.

+
+
+

Frequently asked questions

+

What is a career quiz?

+

A career quiz is a tool designed to help individuals explore and identify potential career paths based on their interests, skills, values, and personality traits. It typically consists of a series of questions that assess various aspects of the individual's preferences and characteristics.

+

How can a career quiz help me in my job search?

+

A career quiz can provide valuable insights into potential career paths that align with your strengths, interests, and values. By identifying suitable career options, it can help you focus your job search efforts and make more informed decisions about your career.

+

Are career quizzes accurate?

+

The accuracy of a career quiz can vary depending on factors such as the quality of the quiz, the validity of the assessment methods used, and the individual's honesty in responding to the questions. While career quizzes can provide useful insights, they should be used as one of many resources in the career exploration process.

+

How do career quizzes work?

+

Career quizzes typically work by presenting individuals with a series of questions designed to assess their preferences, interests, skills, and personality traits. These responses are then analyzed to generate potential career options that may be a good fit for the individual.

+

Can I trust the results of a career quiz?

+

While career quizzes can provide valuable insights, it's essential to approach the results with some level of skepticism and use them as a starting point for further exploration. Factors such as the quality of the quiz, the validity of the assessment methods, and the individual's unique circumstances can all impact the accuracy and relevance of the results.

+
+
+
+ ); +} + +export default Home; \ No newline at end of file diff --git a/src/Pages/Pages.css b/src/Pages/Pages.css new file mode 100644 index 000000000..045736925 --- /dev/null +++ b/src/Pages/Pages.css @@ -0,0 +1,275 @@ +font-face { /* Center box title font */ + font-family: 'Playfair Display Black'; + src: url('./PlayfairDisplay-Black.ttf') format('truetype'); +} + +@font-face { + font-family: 'Poppins'; + src: url('./Poppins-Bold.ttf') format('truetype'); +} + +body { + font-family: 'Playfair Display Black', serif; + src: url('./Poppins-Black.ttf') format('truetype'); +} + +h1 { + font-family: 'Poppins', sans-serif; +} + +@font-face { /* Descriptions font */ + font-family: 'Poppins Light'; + src: url('./Poppins-Light.ttf') format('truetype'); +} + +.home-center { /* Center gray box */ + width: 66%; + height: auto; + background-color: rgb(235, 240, 245); + margin-top: 5.5vw; + margin-left: 16.5vw; + border-radius: 1vw; + padding-bottom: 1.6vw; +} + +.center-title { /* Title in center gray box */ + font-family: "Playfair Display Black", sans-serif; + font-size: 2.7vw; + position: absolute; + top: 11vw; + left: 18.5vw; +} + +.center-left { /* Subtitle in center gray box */ + font-family: "Poppins", sans-serif; + font-size: 1.7vw; + font-weight: bold; + color: #17aaff; + position: absolute; + top: 16vw; + left: 19vw; +} + +.home-button { /* Home icon button in top right */ + margin-left: 0.4vw; + background-color: #6fb4fe; + border-radius: 1vw; + border-color: #6fb4fe; + cursor: pointer; + font-size: 1.5vw; + font-weight: bold; + font-family: "Poppins", sans-serif; + padding: 0.5vw 0.5vw; +} + +.basic-button { /* Basic page button */ + margin-top: 21.9vw; + margin-left: 5.9vw; + padding: 1vw 3.8vw; + background-color: #86c0ff; + color: white; + border-radius: 1.25vw; + border-color: white; + cursor: pointer; + font-size: 1.2vw; + font-weight: bold; + font-family: "Poppins", sans-serif; + transition: background-color 0.3s, transform 0.3s; +} +.detailed-button { /* Detailed page button */ + margin-top: 21.9vw; + margin-left: 16.2vw; + padding: 1vw 3.8vw; + background-color: #86c0ff; + color: white; + border-radius: 1.25vw; + border-color: white; + cursor: pointer; + font-size: 1.2vw; + font-weight: bold; + font-family: "Poppins", sans-serif; + transition: background-color 0.3s, transform 0.3s; +} +.home-button:hover { + background-color: #4a90e2; + border-color: #4a90e2; +} + +.basic-button:hover, +.detailed-button:hover { /*Hover effects for detailed and basic page buttons */ + background-color: #4a90e2; + transform: scale(1.1); +} + +.brainIcon { /* Brain icon in top left */ + width: 3.3vw; + height: 3.3vw; + cursor: pointer; + margin-left: 1vw; +} + +.brainIcon:hover { /* Hover effect for brain icon */ + opacity: 0.7; +} + +.title-container { /* Contains title and brain icon */ + display: flex; + align-items: center; +} + +.title { /* Website title */ + font-family: 'Poppins Black', sans-serif; + font-size: 2.6vw; + color: #ffffff; + cursor: pointer; + margin-left: 0.8vw; +} + +.homeIcon { /* Home icon */ + width: 2.9vw; + height: 2.9vw; +} + +.arrow-icon { /* Arrow icon in buttons */ + width: 1.5vw; + height: 1.5vw; + position: absolute; + margin-left: 1.9vw; + margin-top: 0.18vw; +} + +.basic-page-description, +.detailed-page-description { /* Descriptions for basic and detailed pages */ + font-family: 'Poppins Light', sans-serif; + font-size: 1vw; + width: 28vw; + text-align: center; + position: absolute; + background-color: rgb(235, 240, 245, 1); + border-radius: 2vw; +} + +.basic-page-description { /* Positioning for basic page description */ + margin-top: 15vw; + margin-left: 1vw; + padding: 0.3vw; +} + +.detailed-page-description { /* Positioning for detailed page description */ + margin-top: 13.5vw; + margin-left: 35.5vw; + padding: 0.3vw; +} + +.background-image { /* Image in center gray box */ + position: absolute; + top: 6.9vw; + left: 55.5vw; + width: 24vw; + height: 24vw; + background-size: cover; + background-repeat: no-repeat; + background-position: right center; + opacity: 0.9; +} + +.button-questions:hover, .button-pressed { + background-color: #004499; /* Dark blue */ +} + +.progressBarContainer { + width: 45vw; + margin-left: 28vw; + margin-top: 2vw; +} + +.progressBar { + position: relative; + height: 1.4vw; + border-radius: 1vw; + background-color: #f0f0f0; +} + +.progressBar .progress-bar { + background-color: #1e8bff; + border-radius: 1vw; +} + +@keyframes rotate { + 0% { transform: translate(-50%, -50%) rotate(-9deg); } + 50% { transform: translate(-50%, -50%) rotate(9deg); } + 100% { transform: translate(-50%, -50%) rotate(-9deg); } +} + +.brain-progress-icon { + position: relative; + transform: translate(-50%, -50%); + width: 3vw; + height: 3vw; + z-index: 1; + transition: left 0.45s ease-out; + animation: rotate 1s ease-in-out infinite; + top: -0.6vw; +} + +.why-box { + position: relative; + width: 100%; + height: 25vw; + background-color: #6fb4fe; + margin-top: 11vw; + text-align: center; +} + +.why-box-title { + position: absolute; + font-family: 'Poppins', sans-serif; + font-size: 3.5vw; + color: #ffffff; + margin-left: 36.5vw; + margin-top: 3vw; +} + +.why-box-text { + position: absolute; + font-family: 'Poppins', sans-serif; + font-size: 1.7vw; + color: #ffffff; + margin-left: 18.5vw; + margin-top: 9vw; + width: 60vw; + text-align: center; +} + +.fq-space { + height: 45vw; + text-align: center; +} + +.fq-title { + font-family: 'Poppins', sans-serif; + font-size: 3vw; + margin-top: 7vw; + text-align: center; +} + +.fq-subtitle { + font-family: 'Poppins light', sans-serif; + font-weight: bold; + font-size: 1.4vw; + text-align: center; + margin-top: 2vw; +} + +.fq-text { + width: 45vw; + font-family: 'Poppins light', sans-serif; + font-size: 1vw; + margin-top: 2vw; + margin-left: 27vw; + text-align: center; +} + +.home-foot-space { + height: 10vw; +} \ No newline at end of file diff --git a/src/Pages/PlayfairDisplay-Black.ttf b/src/Pages/PlayfairDisplay-Black.ttf new file mode 100644 index 000000000..204f5bfd0 Binary files /dev/null and b/src/Pages/PlayfairDisplay-Black.ttf differ diff --git a/src/Pages/Poppins-Black.ttf b/src/Pages/Poppins-Black.ttf new file mode 100644 index 000000000..71c0f995e Binary files /dev/null and b/src/Pages/Poppins-Black.ttf differ diff --git a/src/Pages/Poppins-Bold.ttf b/src/Pages/Poppins-Bold.ttf new file mode 100644 index 000000000..00559eeb2 Binary files /dev/null and b/src/Pages/Poppins-Bold.ttf differ diff --git a/src/Pages/Poppins-Light.ttf b/src/Pages/Poppins-Light.ttf new file mode 100644 index 000000000..bc36bcc24 Binary files /dev/null and b/src/Pages/Poppins-Light.ttf differ diff --git a/src/Pages/Results.tsx b/src/Pages/Results.tsx new file mode 100644 index 000000000..29444ccfb --- /dev/null +++ b/src/Pages/Results.tsx @@ -0,0 +1,22 @@ +import React, { } from 'react'; +import './Pages.css'; +import './questions.css'; + +interface ResultsProp { + handlePage: (page: string) => void; +} + +const Results: React.FC = ({ handlePage }) => { /* Handes page changes */ + return ( +
+ +
+

Your Results

+

*Insert result process*

+
+ +
+ ); +} + +export default Results; \ No newline at end of file diff --git a/src/Pages/arrow.svg b/src/Pages/arrow.svg new file mode 100644 index 000000000..a6cf37ec5 --- /dev/null +++ b/src/Pages/arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Pages/house.svg b/src/Pages/house.svg new file mode 100644 index 000000000..c6bbed4bc --- /dev/null +++ b/src/Pages/house.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Pages/interests.css b/src/Pages/interests.css new file mode 100644 index 000000000..6860f75db --- /dev/null +++ b/src/Pages/interests.css @@ -0,0 +1,4 @@ +.small-text { + font-size: 0.8em; + font-weight: italic; +} \ No newline at end of file diff --git a/src/Pages/interests.tsx b/src/Pages/interests.tsx new file mode 100644 index 000000000..7d83eb27c --- /dev/null +++ b/src/Pages/interests.tsx @@ -0,0 +1,32 @@ +import { Container, Row, Col, Tab, ListGroup } from 'react-bootstrap'; +import './interests.css'; + +function Interests({handlePage} : {handlePage: (page: string) => void}) { + + return ( + <> + + + + + + +

Realistic Interests

+

work involves building, repairing, maintaining, installing, driving, or working with hands. People with Realistic interests often like work that includes plants, animals, electronics, real-world materials like wood, the outdoors, machines, equipment, or tools.

+ + Airline Pilots / Copilots & Flight Engineers + Automotive Engineers + {/* Add more careers */} + + + {/* Add other interest categories here */} + + + + + + + ) +} + +export default Interests; \ No newline at end of file diff --git a/src/Pages/meh.svg b/src/Pages/meh.svg new file mode 100644 index 000000000..bfd882e48 --- /dev/null +++ b/src/Pages/meh.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Pages/modifiedBrainIcon.svg b/src/Pages/modifiedBrainIcon.svg new file mode 100644 index 000000000..e9027cebc --- /dev/null +++ b/src/Pages/modifiedBrainIcon.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/Pages/questions.css b/src/Pages/questions.css new file mode 100644 index 000000000..9ad13b290 --- /dev/null +++ b/src/Pages/questions.css @@ -0,0 +1,158 @@ +@font-face { /* Font for questions and labels */ + font-family: 'Poppins Light'; + src: url('./Poppins-Light.ttf') format('truetype'); +} + +.column { + margin: 1vw; + padding: 3vw; + display: flex; + align-items: center; + flex-direction: column; +} + +.questionContainer { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.option { + display: flex; + flex-direction: column-reverse; + align-items: center; + justify-content: center; + margin: 0 2vw; + margin-top: 2vw; +} + +.option label { + font-family: "Poppins light", sans-serif; + font-size: 1.2vw; + font-weight: bold; + margin-bottom: 1vw; + margin-top: 0.1vw; +} + +.question { + font-family: "Poppins light", sans-serif; + font-size: 1.5vw; +} + +.footer-space { + height: 5vw; +} + +.response { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: "Poppins light", sans-serif; + font-size: 1vw; +} + +.response-button { + padding: 0.5vw 3vw; + background-color: #86c0ff; + color: white; + border-radius: 20px; + border-color: white; + cursor: pointer; + font-size: 1.2vw; + font-weight: bold; + font-family: "Poppins", sans-serif; + transition: background-color 0.3s, transform 0.3s; +} + +.response-button:hover { + transform: scale(1.1); +} + +.confetti-container{ + position: fixed; + margin-left: 50vw; + z-index: 1000; /* Ensure the confetti container is above other elements */ +} + +.detailed-switch { + font-family: "Poppins light", sans-serif; + font-size: 1.3vw; + top: 0vw; + left: 99.9vw; + padding: 4vw 0.5vw; + border-radius: 10px; + border-color: #86c0ff; + cursor: pointer; + position: fixed; + background-color: #86c0ff; + writing-mode: vertical-rl; + text-orientation: mixed; + transform: rotate(180deg); + transform-origin: bottom left; + transition: padding 0.3s ease; +} + +.detailed-switch:hover { + padding-left: 4vw; + background-color: #4a90e2; + border-color: #86c0ff; + font-weight: bold; +} + +.basic-switch { + font-family: "Poppins light", sans-serif; + font-size: 1.3vw; + left: -0.9vw; + top: 13vw; + padding: 5vw 0.5vw; + border-radius: 1vw; + border-color: #86c0ff; + cursor: pointer; + position: fixed; + background-color: #86c0ff; + writing-mode: vertical-rl; + text-orientation: mixed; + transform-origin: bottom left; + transition: padding 0.3s ease; +} + +.basic-switch:hover { + padding-left: 4vw; + background-color: #4a90e2; + border-color: #86c0ff; + font-weight: bold; +} + +.label-icon { + width: 1.9vw; + height: 1.9; + cursor: pointer; + display: flex; + flex-direction: column-reverse; + align-items: center; + justify-content: center; + margin-bottom: 0.5vw; + margin-top: 0.5vw; + transition: width 0.3s, height 0.3s; filter: 0.3s; +} + +.label-icon:hover { + width: 2.2vw; + height: 2.2vw; + border-radius: 2vw; + filter: drop-shadow(0 0 0.5vw rgb(255, 247, 0)); +} + +.option input[type="radio"]:checked + .label-icon { + /* Increase size and change border color for checked state */ + width: 2.3vw; + height: 2.3vw; + filter: drop-shadow(0 0 0.5vw rgb(255, 247, 0)); + border-radius: 2vw; +} + +input[type="radio"] { + display: none; + } diff --git a/src/Pages/sad.svg b/src/Pages/sad.svg new file mode 100644 index 000000000..7cefbd8fd --- /dev/null +++ b/src/Pages/sad.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Pages/smile.svg b/src/Pages/smile.svg new file mode 100644 index 000000000..2fdd5271d --- /dev/null +++ b/src/Pages/smile.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Pages/telescope-man.png b/src/Pages/telescope-man.png new file mode 100644 index 000000000..6b202a686 Binary files /dev/null and b/src/Pages/telescope-man.png differ diff --git a/src/navbar.tsx b/src/navbar.tsx new file mode 100644 index 000000000..7e849a31a --- /dev/null +++ b/src/navbar.tsx @@ -0,0 +1,41 @@ +import Container from 'react-bootstrap/Container'; +import Navbar from 'react-bootstrap/Navbar'; +import Form from 'react-bootstrap/Form'; +import FormControl from 'react-bootstrap/FormControl'; +import { Button } from 'react-bootstrap'; +import homeIcon from './Pages/house.svg'; + +function NavHome({handlePage} : {handlePage: (page: string) => void}) { + //const [showInterests, setShowInterests] = useState(false); + /* + const handleTestButtonClick = () => { + setShowInterests(true); // Set showInterests to true to render Interests component + }; + */ + + return ( +
+ + + handlePage('Home')}> + Brain Spark + +
+ + handlePage('interests')} className="career-search"> + Career Search + + + +
+ +
+ ) +} + +export default NavHome; \ No newline at end of file