diff --git a/src/assets/calendar.svg b/src/assets/calendar.svg new file mode 100644 index 0000000..0ad114a --- /dev/null +++ b/src/assets/calendar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/clock.svg b/src/assets/clock.svg new file mode 100644 index 0000000..4996d85 --- /dev/null +++ b/src/assets/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/location.svg b/src/assets/location.svg new file mode 100644 index 0000000..402b3d5 --- /dev/null +++ b/src/assets/location.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/AboutSection.astro b/src/components/AboutSection.astro index 19c29f0..67945c0 100644 --- a/src/components/AboutSection.astro +++ b/src/components/AboutSection.astro @@ -65,7 +65,7 @@ import Section from "./Section.astro"; } .about-title-highlight { - color: $text-secondary; + color: $accent-color; } .about-description { diff --git a/src/components/EventCard.astro b/src/components/EventCard.astro new file mode 100644 index 0000000..0100b76 --- /dev/null +++ b/src/components/EventCard.astro @@ -0,0 +1,190 @@ +--- +import type { IEvent } from "../types/events"; +import { getFormattedDate } from "../utils/events"; +import Icon from "./Icon.astro"; + +interface Props extends IEvent {} + +const { title, description, date, time, poster_img, location, link } = Astro.props as Props; +--- + + +
+ Workshop Poster +
+
+
+

{title}

+

{description}

+
+
+
+ + {getFormattedDate(date)} +
+
+ + {time} +
+
+ + {location} +
+
+
+ +
+

Click to learn more >>

+
+ + + diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 351d08c..9135735 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -65,21 +65,9 @@ const currentPath = Astro.url.pathname; max-width: 90%; width: 45rem; z-index: 100; - background-color: $background-secondary; border-radius: 12px; - background: linear-gradient($background-secondary, $background-secondary) padding-box, - linear-gradient( - 180deg, - rgba($border-color, 0.1) 0%, - rgba($border-color, 0) 83.85%, - rgba(white, 0.05) 100%, - rgba($border-color, 0.05) 100% - ) - border-box; - border: 2px solid transparent; - - box-shadow: 0px 7px 9px 2px rgba(black, 0.2); + @include raised; @media (max-width: #{$screen-xl-max}) { width: 45rem; diff --git a/src/components/UpcomingEvents.astro b/src/components/UpcomingEvents.astro new file mode 100644 index 0000000..f83ec68 --- /dev/null +++ b/src/components/UpcomingEvents.astro @@ -0,0 +1,77 @@ +--- +import EventCard from "./EventCard.astro"; +import Section from "./Section.astro"; + +import EVENTS from "../data/events.json"; + +import { getUpcomingEvents } from '../utils/events'; + +const UPCOMING_EVENTS = getUpcomingEvents(EVENTS); +--- + +
+
+

Upcoming Events

+
+ +
+ { + UPCOMING_EVENTS.length > 0 + ? UPCOMING_EVENTS.map((event) => ( + + )) + : "Stay Tuned." + } +
+
+ + + + diff --git a/src/data/events.json b/src/data/events.json new file mode 100644 index 0000000..dba717f --- /dev/null +++ b/src/data/events.json @@ -0,0 +1,41 @@ +[ + { + "title": "Ubuntu Install Fest", + "description": "Learn how to install Linux on your PC.", + "date": { + "day": 10, + "month": 9, + "year": 2023 + }, + "time": "2 PM", + "location": "NR222", + "poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/ubuntu-install/ubuntu-install-19.svg", + "link": "/events/install-fest" + }, + { + "title": "Git and Github Workshop", + "description": "Introduction to Git and GitHub.", + "date": { + "day": 11, + "month": 8, + "year": 2023 + }, + "time": "3 PM", + "location": "V2", + "poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/git-github/git-github-20.png", + "link": "/events/git-and-github" + }, + { + "title": "Python Workshop", + "description": "Introduction to the Python programming language.", + "date": { + "day": 20, + "month": 9, + "year": 2023 + }, + "time": "3 PM", + "location": "NR123", + "poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/python/python-23.png", + "link": "/events/python-workshop" + } +] \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index de82d85..8d7be31 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,10 +1,12 @@ --- import Layout from "../layouts/Layout.astro"; import AboutSection from "../components/AboutSection.astro"; +import UpcomingEvents from "../components/UpcomingEvents.astro"; import Hero from "../components/Hero.astro"; --- + diff --git a/src/styles/index.scss b/src/styles/index.scss index 44f11ab..c1968fd 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1 +1,2 @@ @import "./variables.scss"; +@import "./mixins.scss"; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss new file mode 100644 index 0000000..89c3a44 --- /dev/null +++ b/src/styles/mixins.scss @@ -0,0 +1,14 @@ +@mixin raised { + box-shadow: 0px 7px 9px 2px rgba(black, 0.2); + border: 2px solid transparent; + background-color: $background-secondary; + background: linear-gradient($background-secondary, $background-secondary) padding-box, + linear-gradient( + 180deg, + rgba($border-color, 0.1) 0%, + rgba($border-color, 0) 83.85%, + rgba(white, 0.05) 100%, + rgba($border-color, 0.05) 100% + ) + border-box; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index d739f97..19489e9 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,10 +1,10 @@ $background-primary: #111319; -$background-secondary: #13161D; -$text-primary: #96DBF9; -$text-secondary: #39B8FF; -$text-tertiary: #3E7C97; -$accent-color: #39B8FF; -$border-color: #00DFFF; +$background-secondary: #13161d; +$text-primary: hsl(198, 65%, 70%); +$text-secondary: hsl(198, 46%, 60%); +$text-tertiary: hsl(198, 40%, 50%); +$accent-color: hsl(202, 100%, 61%); +$border-color: #00dfff; // Smartphones $screen-sm-max: 479px; diff --git a/src/types/events.ts b/src/types/events.ts new file mode 100644 index 0000000..240f3dd --- /dev/null +++ b/src/types/events.ts @@ -0,0 +1,14 @@ +export interface IEventDate { + day: number; + month: number; + year: number; +} +export interface IEvent { + title: string; + description: string; + date: IEventDate; + time: string; + location: string; + poster_img: string; + link: string; +} \ No newline at end of file diff --git a/src/utils/events.ts b/src/utils/events.ts new file mode 100644 index 0000000..25f95fb --- /dev/null +++ b/src/utils/events.ts @@ -0,0 +1,32 @@ +import type { IEvent, IEventDate } from '../types/events'; + +function eventDateToJSDate(event_date: IEventDate): Date { + const date = new Date(); + + date.setFullYear(event_date.year); + date.setMonth(event_date.month - 1); // It's zero indexed :dead: + date.setDate(event_date.day); + + return date; +} + +function isEventUpcoming(event: IEvent): boolean { + const date_now = new Date(); + + return eventDateToJSDate(event.date) >= date_now; +} + +function eventDatewiseSort(event1: IEvent, event2: IEvent): number { + return eventDateToJSDate(event1.date) < eventDateToJSDate(event2.date) ? -1 : 1; +} + +export function getUpcomingEvents(events: IEvent[]): IEvent[] { + return events.filter(isEventUpcoming).sort(eventDatewiseSort); +} + +export function getFormattedDate(date: IEventDate): string { + return eventDateToJSDate(date).toLocaleString('en-in', { + month: 'short', + day: '2-digit' + }) +} \ No newline at end of file