Merge pull request realstoman#12 from realstoman/final-touches

Final touches

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)
 
@@ -10,20 +10,20 @@ A simple portfolio starter theme built with React and TailwindCSS. This is a sim
 
 ## Features
 
--   Simple and responsive design
 -   [React](https://reactjs.org) with [React Router v6](https://reactrouter.com)
--   [Tailwind CSS v2](https://tailwindcss.com)
--   Theme Switcher with Dark Mode
--   Context API
--   Transitions & Animations
--   Counter
+-   [Tailwind CSS v3](https://tailwindcss.com)
+-   Context API For State Management
+-   Custom Hooks
+-   Dark Mode
+-   Framer Motion Transitions & Animations
 -   Projects filter by category
 -   Projects filter by search
--   Projects carousel
 -   Smooth scroll
+-   Counter
 -   Dynamic forms
 -   Back to top button
 -   Download file button
+-   Simple and responsive design
 
 ## Installation
 
@@ -40,7 +40,7 @@ brew install node
 2. ##### Clone the repo:
 
 ```
-git clone https://github.com/NangialaiStoman/react-tailwindcss-portfolio.git
+git clone https://github.com/realstoman/react-tailwindcss-portfolio.git
 ```
 
 3. ##### Open the project folder:

src/App.js

@@ -9,6 +9,7 @@ import Home from './pages/Home';
 import Projects from './pages/Projects';
 import ProjectSingle from './pages/ProjectSingle';
 import { AnimatePresence } from 'framer-motion';
+import UseScrollToTop from './hooks/useScrollToTop';
 
 function App() {
 	return (
@@ -30,6 +31,7 @@ function App() {
 					</Routes>
 					<AppFooter />
 				</Router>
+				<UseScrollToTop />
 			</div>
 		</AnimatePresence>
 	);

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/ScrollToTop.js

@@ -1,3 +1,6 @@
+// NOTE: This scroll to top is the default react scroll to top behavior when visiting a new route.
+// For the scroll to top behavior on a click event I have create a custom hook with the name of useScrollToTop under the hooks folder.
+
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 

src/components/projects/ProjectSingle.js

@@ -12,25 +12,23 @@ const ProjectSingle = ({ title, category, image }) => {
 				delay: 0.15,
 			}}
 		>
-			<Link
-				to="/projects/single-project"
-				className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
-				aria-label="Single Project"
-			>
-				<div>
-					<img
-						src={image}
-						className="rounded-t-xl border-none"
-						alt="Single Project"
-					/>
-				</div>
-				<div className="text-center px-4 py-6">
-					<p className="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2">
-						{title}
-					</p>
-					<span className="text-lg text-ternary-dark dark:text-ternary-light">
-						{category}
-					</span>
+			<Link to="/projects/single-project" aria-label="Single Project">
+				<div className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark">
+					<div>
+						<img
+							src={image}
+							className="rounded-t-xl border-none"
+							alt="Single Project"
+						/>
+					</div>
+					<div className="text-center px-4 py-6">
+						<p className="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2">
+							{title}
+						</p>
+						<span className="text-lg text-ternary-dark dark:text-ternary-light">
+							{category}
+						</span>
+					</div>
 				</div>
 			</Link>
 		</motion.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/css/App.css

@@ -1,38 +1,67 @@
 .App {
-  text-align: center;
+	text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* Scroll to top style */
+.scrollToTop {
+	@apply bg-indigo-600;
+	@apply text-white;
+	position: fixed;
+	width: 100%;
+	align-items: center;
+	height: 20px;
+	justify-content: center;
+	z-index: 999;
+	cursor: pointer;
+	animation: fadeIn 0.3s;
+	transition: opacity 0.4s;
+	opacity: 0.5;
+}
+
+.scrollToTop:hover {
+	opacity: 1;
+}
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 0.5;
+	}
 }

src/hooks/useScrollToTop.js

@@ -0,0 +1,51 @@
+// NOTE: This scroll to top is the actual working scroll to to when user clicks
+
+import { useState, useEffect } from 'react';
+import { FiChevronUp } from 'react-icons/fi';
+
+const useScrollToTop = () => {
+	const [showScroll, setShowScroll] = useState(false);
+
+	useEffect(() => {
+		window.addEventListener('scroll', scrollToTop);
+		return function cleanup() {
+			window.removeEventListener('scroll', scrollToTop);
+		};
+	});
+
+	const scrollToTop = () => {
+		if (!showScroll && window.pageYOffset > 400) {
+			setShowScroll(true);
+		} else if (showScroll && window.pageYOffset <= 400) {
+			setShowScroll(false);
+		}
+	};
+
+	const backToTop = () => {
+		window.scrollTo({
+			top: 0,
+			behavior: 'smooth',
+		});
+	};
+
+	window.addEventListener('scroll', scrollToTop);
+
+	return (
+		<>
+			<FiChevronUp
+				className="scrollToTop"
+				onClick={backToTop}
+				style={{
+					height: 45,
+					width: 45,
+					borderRadius: 50,
+					right: 50,
+					bottom: 50,
+					display: showScroll ? 'flex' : 'none',
+				}}
+			/>
+		</>
+	);
+};
+
+export default useScrollToTop;

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