diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 28e4a77..337c9d6 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
import Link from 'next/link';
import { Disclosure, Transition, TransitionRootProps } from '@headlessui/react';
import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import FilledChevronUp from '@/../public/filled-chevron-up.svg';
+import FilledChevronUp from '@/../public/filled-chevron-up-white.svg';
import Arrow from '@/../public/arrow-white.svg';
import X from '@/../public/x.svg';
import Hamburger from '@/../public/menu-alt-3.svg';
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index c2e11dc..fe00e61 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -6,7 +6,7 @@ import Planner from '@/../public/projects/planner.png';
import API from '@/../public/projects/skedge.png';
import Skedge from '@/../public/projects/skedge.png';
import Jupiter from '@/../public/projects/jupiter.png';
-import FilledChevronUp from '@/../public/filled-chevron-up.svg';
+import FilledChevronUp from '@/../public/filled-chevron-up-white.svg';
import clsx from 'clsx';
type Project = {
diff --git a/src/pages/api/getCalendar.ts b/src/pages/api/getCalendar.ts
new file mode 100644
index 0000000..b605642
--- /dev/null
+++ b/src/pages/api/getCalendar.ts
@@ -0,0 +1,58 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { auth, JWT } from 'google-auth-library';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+const CALENDAR_ID =
+ 'c_64bca4fdc75077d852bc5236ec20402d8514792841894b264da57d41bb0ee32e@group.calendar.google.com';
+
+type Data = {
+ message: string;
+ data?: unknown;
+};
+
+export default function handler(req: NextApiRequest, res: NextApiResponse
) {
+ if (
+ !(
+ 'REACT_APP_GOOGLE_CREDENTIALS' in process.env &&
+ typeof process.env.REACT_APP_GOOGLE_CREDENTIALS === 'string'
+ )
+ ) {
+ res.status(500).json({ message: 'API key is undefined' });
+ return;
+ }
+ return new Promise((resolve) => {
+ const client = auth.fromJSON(JSON.parse(process.env.REACT_APP_GOOGLE_CREDENTIALS as string));
+ if (client instanceof JWT) {
+ client.scopes = ['https://www.googleapis.com/auth/calendar.readonly'];
+ }
+ const url = new URL(
+ 'https://www.googleapis.com/calendar/v3/calendars/' + CALENDAR_ID + '/events',
+ );
+ url.searchParams.append('singleEvents', 'True');
+ url.searchParams.append('orderBy', 'startTime');
+ url.searchParams.append('maxResults', '100');
+ url.searchParams.append('timeMin', new Date().toISOString());
+ const date = new Date();
+ date.setMonth(date.getMonth() + 1);
+ url.searchParams.append('timeMax', date.toISOString());
+ client
+ .request({
+ url: url.href,
+ method: 'GET',
+ })
+ .then((data) => {
+ if (data.statusText !== 'OK') {
+ throw new Error(data.statusText);
+ }
+ res.status(200).json({
+ message: 'success',
+ data: data,
+ });
+ resolve();
+ })
+ .catch((error) => {
+ res.status(400).json({ message: error.message });
+ resolve();
+ });
+ });
+}
diff --git a/src/pages/resources/calendar.tsx b/src/pages/resources/calendar.tsx
new file mode 100644
index 0000000..2facc1a
--- /dev/null
+++ b/src/pages/resources/calendar.tsx
@@ -0,0 +1,274 @@
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import Head from 'next/head';
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import { ics } from 'calendar-link';
+
+import ArrowWhite from '@/../public/filled-chevron-up-white.svg';
+import ArrowBlack from '@/../public/filled-chevron-up-black.svg';
+
+const timeFormat = new Intl.DateTimeFormat('en-US', {
+ hour: 'numeric',
+ minute: 'numeric',
+ hour12: true,
+});
+
+const dateFormat = new Intl.DateTimeFormat('en-US', {
+ weekday: 'long',
+ day: 'numeric',
+});
+
+const monthFormat = new Intl.DateTimeFormat('en-US', {
+ month: 'long',
+});
+
+const fullFormat = new Intl.DateTimeFormat('en-US');
+
+interface EventReactProps {
+ name: string;
+ start: string;
+ end: string;
+ location: string;
+ description: string | undefined;
+ htmlLink: string;
+}
+
+const Event = (props: EventReactProps) => {
+ const important =
+ props.name.includes('Kickoff') ||
+ props.name.includes('Social') ||
+ props.name.includes('All-Hands');
+
+ const start = new Date(props.start);
+ const end = new Date(props.end);
+ let startTime = timeFormat.format(start);
+ if (start.getHours() >= 12 === end.getHours() >= 12) {
+ //AMPM the same
+ startTime = startTime.slice(0, -3);
+ }
+
+ const buttonLinkClasses =
+ 'hover:scale-105 active:scale-95 transition duration-300 ease-in-out px-2 py-1 rounded-lg cursor-pointer border-2 ' +
+ (important
+ ? 'hover:bg-periwinkle hover:text-haiti border-periwinkle'
+ : 'hover:bg-royal hover:text-white border-royal');
+
+ const iCalFileString = ics({
+ title: props.name,
+ start: props.start,
+ end: props.end,
+ location: props.location,
+ description: props.description,
+ url: props.htmlLink,
+ });
+
+ return (
+
+
+
+
{props.name}
+
+ {startTime} - {timeFormat.format(end)}
+
+
{props.location === 'Unknown' ? 'TBD' : props.location}
+
+
+
+
+ {typeof props.description !== 'undefined' && {props.description}
}
+