dynamic title (#488)

* add useTitle

* remove header from home and decaptitalize

* fix home bug

Author: ariyin

src/components/General/useTitle.jsx

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+const useTitle = title => {
+	useEffect(() => {
+		document.title = `UCLA ACM Hack${title}`;
+	}, []);
+};
+
+export default useTitle;

src/pages/About.jsx

@@ -3,8 +3,10 @@ import '../styles/About.css';
 import Team from '../components/About/Team';
 import Alumni from '../components/About/Alumni';
 import { teamIntro } from '../data/profiles.js';
+import useTitle from '../components/General/useTitle.jsx';
 
 export default function About() {
+	useTitle(' | About');
 	return (
 		<div id='about'>
 			<div className='about-header'>

src/pages/Archive.jsx

@@ -2,8 +2,11 @@ import React, { useEffect, useState } from 'react';
 import EventInfoItem from '../components/Archive/EventInfoItem';
 import { archiveData } from '../data/archive';
 import '../styles/Archive.css';
+import useTitle from '../components/General/useTitle';
 
 export default function Archive() {
+	useTitle(' | Archive');
+
 	const [data, setData] = useState([]);
 
 	useEffect(() => {

src/pages/Blog.jsx

@@ -2,8 +2,11 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import BlogList from '../components/Blog/BlogList';
 import BlogPost from '../components/Blog/BlogPost';
+import useTitle from '../components/General/useTitle';
 
 export default function Blog() {
+	useTitle(' | Blog');
+
 	const { blogId } = useParams();
 
 	return (

src/pages/Events.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import '../styles/Events.css';
+import useTitle from '../components/General/useTitle';
 
 import famimg from '../images/hack-fam-insta.png';
 import hackimg from '../images/hack-school-insta.jpg';
 
 export default function Events() {
+	useTitle(' | Events');
 	return (
 		<div id='events'>
 			<div className='events-header'>

src/pages/Home.jsx

@@ -4,8 +4,11 @@ import HackDescription from '../components/Home/HackDescription';
 import PhotoCarousel from '../components/Home/PhotoCarousel';
 import FAQSection from '../components/Home/FAQSection';
 import Announcement from '../components/Home/Announcement';
+import useTitle from '../components/General/useTitle';
 
 export default function Home() {
+	useTitle('');
+
 	const Container1 = ({ children }) => (
 		<section className='white-container'>
 			<div className='container-md'>{children}</div>