Modal options and projects grid code cleanup

Author: realstoman

README.md

@@ -1,6 +1,6 @@
 # React & TailwindCSS Portfolio - With Dark Mode
 
-A simple portfolio starter theme built with React and TailwindCSS. This is a simple portfolio theme and its geared towards beginners. This is the React version of [vuejs-tailwindcss-portfolio](https://github.com/NangialaiStoman/vuejs-tailwindcss-portfolio).
+A simple portfolio starter theme built with React and TailwindCSS. This is the React version of [vuejs-tailwindcss-portfolio](https://github.com/realstoman/vuejs-tailwindcss-portfolio).
 
 ![React-TailwindCSS-Portfolio](https://user-images.githubusercontent.com/16396664/140909796-815239e4-a986-46ad-bbd0-4b166127bbb8.JPG)
 

src/components/HireMeModal.js

@@ -1,6 +1,13 @@
 import { motion } from 'framer-motion';
 import { FiX } from 'react-icons/fi';
 
+const selectOptions = [
+	'Web Application',
+	'Mobile Application',
+	'UI/UX Design',
+	'Branding',
+];
+
 const HireMeModal = ({ onClose, onRequest }) => {
 	return (
 		<motion.div
@@ -65,7 +72,14 @@ const HireMeModal = ({ onClose, onRequest }) => {
 										required=""
 										aria-label="Project Category"
 									>
-										<option>Something</option>
+										{selectOptions.map((option) => (
+											<option
+												className="text-normal sm:text-md"
+												key={option}
+											>
+												{option}
+											</option>
+										))}
 									</select>
 								</div>
 

src/components/projects/ProjectsGrid.js

@@ -3,7 +3,6 @@ import { FiSearch } from 'react-icons/fi';
 import ProjectSingle from './ProjectSingle';
 import { ProjectsContext } from '../../context/ProjectsContext';
 import ProjectsFilter from './ProjectsFilter';
-import { motion } from 'framer-motion';
 
 const ProjectsGrid = () => {
 	const {
@@ -16,28 +15,6 @@ const ProjectsGrid = () => {
 		selectProjectsByCategory,
 	} = useContext(ProjectsContext);
 
-	const projectsResult = () => {
-		if (setSearchProject) {
-			return searchProjectsByTitle.map((project) => (
-				<ProjectSingle
-					title={project.title}
-					category={project.category}
-					image={project.img}
-					key={project.id}
-				/>
-			));
-		} else if (setSelectProject) {
-			return selectProjectsByCategory.map((project) => (
-				<ProjectSingle
-					title={project.title}
-					category={project.category}
-					image={project.img}
-					key={project.id}
-				/>
-			));
-		}
-	};
-
 	return (
 		<section className="py-5 sm:py-10 mt-5 sm:mt-10">
 			{/* Projects grid title start */}

src/pages/Home.js

@@ -12,10 +12,10 @@ const Home = () => {
 				<ProjectsGrid></ProjectsGrid>
 			</ProjectsProvider>
 
-			<div class="mt-10 sm:mt-15 flex justify-center">
+			<div className="mt-10 sm:mt-15 flex justify-center">
 				<Link
 					to="/projects"
-					class="flex items-center px-6 py-3 rounded-lg shadow-lg hover:shadow-xl bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 text-white text-lg sm:text-xl font-medium"
+					className="flex items-center px-6 py-3 rounded-lg shadow-lg hover:shadow-xl bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 text-white text-lg sm:text-xl font-medium"
 					aria-label="More Projects"
 				>
 					More Projects