add semantic markup + anchor links to alumni page

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Author: Josh-Cena

src/components/AlumniTimeline.module.css

@@ -95,6 +95,11 @@ html[data-theme='dark'] .icon {
   display: inline-block;
   margin-bottom: 1.2em;
   padding: 0.25em 1em 0.2em 1em;
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
+}
+
+.date:hover {
+  text-decoration: none;
 }
 
 html[data-theme='dark'] .date {

src/components/AlumniTimeline.tsx

@@ -18,14 +18,17 @@ const AlumniTimeline = ({ alumni }: AlumniProps): ReactElement => (
             <div className={styles.iconWrap}>
               <span className={styles.icon} />
             </div>
-            <div className={styles.body}>
-              <p className={styles.date}>
+            <section className={styles.body}>
+              <a
+                id={String(classOf)}
+                href={`#${classOf}`}
+                className={styles.date}>
                 <Translate id="alumni.classOf" values={{ classOf }}>
                   {'{classOf} 届'}
                 </Translate>
-              </p>
+              </a>
               <MemberList members={members} />
-            </div>
+            </section>
           </li>
         )
       )}