Merge pull request #23 from Guysnacho/24/RegistrationPrep

24/Registration Prep

.github/workflows/pre-deploy.yml

@@ -18,3 +18,16 @@ jobs:
         run: |
           npm install
           npm run build
+      - name: 🛸 Enrich Package 👽
+        run: cp ./post-deploy/.htaccess ./build/
+      - name: 🚢 Deploy Static Site (Dryrun)
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
+        with:
+          server: ${{ secrets.ftp_server }}
+          username: ${{ secrets.ftp_user }}
+          password: ${{ secrets.ftp_password }}
+          # protocol: ftps
+          port: ${{ secrets.ftp_port }}
+          local-dir: './build/'
+          server-dir: '2024.mcbios.com/'
+          dry-run: true

.gitignore

@@ -11,4 +11,5 @@ vite.config.ts.timestamp-*
 
 # Other sites
 .next
-next-env.d.ts
+next-env.d.ts
+mcbios.com.txt

README.md

@@ -32,22 +32,3 @@ npm run build
 You can preview the production build with `npm run preview`.
 
 > Currently I'm building with the static site generator [adapter](https://kit.svelte.dev/docs/adapters) to make deployment to the PHP server easy.
-
-<!-- ============================================================== Next steps =========================================================================== -->
-
-# Home Page
-Align keynote speakers
-
-Add accomodations to navbar
-
-Fix Hero Section Box
-
-- From Codes to cells...
-- Emory University
-
-Pay for $300 wildcard SSL, figure out how to enable that on PHP
-Make sure SSL is valid for
-
-Registration
-Program
-YSEA

src/components/Hero.svelte

@@ -9,7 +9,11 @@
 		<div
 			class="w-full py-3 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-slate-900 bg-opacity-40"
 		>
-			<h1 class="h1 fill-token select-none drop-shadow-sm">{headerText}</h1>
+			<h1
+				class="h1 py-4 fill-token select-none drop-shadow-sm bg-gradient-to-br from-secondary-500 to-tertiary-100 bg-clip-text text-transparent box-decoration-clone"
+			>
+				{headerText}
+			</h1>
 		</div>
 	</header>
 </div>

src/components/KeynoteSpeaker.svelte

@@ -7,7 +7,6 @@
 
 <div class="w-60 mx-auto space-y-4 card-hover">
 	<a href={url} target="_blank"> <h4 class="h4 text-center anchor">{name}</h4></a>
-	<p class="italic text-sm text-center">{affiliation}</p>
 	<div class="italic mx-auto flex justify-center">
 		<a href={url} target="_blank">
 			<img
@@ -17,4 +16,5 @@
 			/>
 		</a>
 	</div>
+	<p class="italic text-lg text-center">{affiliation}</p>
 </div>

src/components/MainDrawer.svelte

@@ -35,16 +35,16 @@
 		>
 			Registration
 		</a>
-		<!-- <a
+		<a
 			class="flex btn-xl rounded variant-soft-surface overflow-hidden"
-			href="/accomodations"
+			href="/accommodations"
 			on:click={() => {
 				drawerStore.close();
 			}}
 			rel="noreferrer"
 		>
-			Accomodations
-		</a> -->
+			Accommodations
+		</a>
 		<a
 			class="flex btn-xl rounded variant-soft-surface overflow-hidden"
 			href="/program"
@@ -57,23 +57,23 @@
 		</a>
 		<a
 			class="flex btn-xl rounded variant-soft-surface overflow-hidden"
-			href="/about"
+			href="/ysea"
 			on:click={() => {
 				drawerStore.close();
 			}}
 			rel="noreferrer"
 		>
-			About Us
+			Young Scientist Excellence Awards
 		</a>
 		<a
 			class="flex btn-xl rounded variant-soft-surface overflow-hidden"
-			href="/ysea"
+			href="/about"
 			on:click={() => {
 				drawerStore.close();
 			}}
 			rel="noreferrer"
 		>
-			Young Scientist Excellence Awards
+			About Us
 		</a>
 	{/if}
 </Drawer>

src/routes/+layout.svelte

@@ -67,13 +67,13 @@
 				>
 					Registration
 				</a>
-				<!-- <a
+				<a
 					class="hidden lg:flex lg:max-xl:visible btn btn-sm variant-soft-surface overflow-hidden"
-					href="/accomodations"
+					href="/accommodations"
 					rel="noreferrer"
 				>
-					Accomodations
-				</a> -->
+					Accommodations
+				</a>
 				<a
 					class="hidden lg:flex lg:max-xl:visible btn btn-sm variant-soft-surface overflow-hidden"
 					href="/program"

src/routes/+page.svelte

@@ -52,11 +52,11 @@
 			<h4
 				class="hidden md:flex h4 fill-token select-none drop-shadow-xl text-center justify-center"
 			>
-				Everyone from codes to cells to care, transforming health care with AI
+				From codes to cells to care, transforming health care with AI
 			</h4>
 			<h4 class="h4 fill-token select-none drop-shadow-xl">20th Annual Meeting of MCBIOS</h4>
 			<h4 class="h4 fill-token select-none drop-shadow-xl">
-				Emory Univeristy<br /> March 22-24, 2024
+				Emory University<br /> March 22-24, 2024
 			</h4>
 			<a href="/registration" class="btn btn-lg outline my-5 select-none"
 				>Registration Coming Soon</a
@@ -73,9 +73,9 @@
 	</div>
 </div>
 
-<div class="w-full my-24">
-	<h3 class="h3 text-center text-2xl">Keynote Speakers</h3>
-	<blockquote class="text-center my-3">Click to learn more</blockquote>
+<div class="w-full my-20">
+	<h2 class="h2 text-center">Keynote Speakers</h2>
+	<blockquote class="text-center mt-3 mb-10">Click to learn more</blockquote>
 	<div class="md:flex space-y-5 my-5 md:space-y-0 flex-wrap">
 		{#each speakers as speaker}
 			<KeynoteSpeaker
@@ -93,7 +93,7 @@
 </div>
 
 <div class="w-full my-16">
-	<h3 class="h3 text-center text-2xl">Sponsors</h3>
+	<h2 class="h2 text-center">Sponsors</h2>
 	<div class="space-y-10 my-5">
 		<a
 			href="https://ailearning.emory.edu/"

src/routes/accommodations/+page.svelte

@@ -0,0 +1,21 @@
+<script>
+	import AccommodationsPic from '$lib/assets/background/photo-1494948858638-8f2f3be0ef78.avif';
+	import Hero from '../../components/Hero.svelte';
+</script>
+
+<svelte:head>
+	<title>MCBIOS 2024 | Accommodations</title>
+</svelte:head>
+
+<div class="w-full justify-center">
+	<Hero imageSrc={AccommodationsPic} headerText="Accommodations" />
+</div>
+<div class="w-full justify-center bg-surface-700 shadow-lg py-10 -mt-16">
+	<div class="space-y-5 w-11/12 md:w-5/6 mx-auto">
+		<p class="text-center blockquote">
+			A few recommendations on nearby hotels will be provided for you to use for the duration of the
+			conference. Being near the venue may ease time and traffic concerns so we urge you to consider
+			distance when ultimately selecting your accommodations, whether they are the below or not.
+		</p>
+	</div>
+</div>

src/routes/program/+page.svelte

@@ -1,11 +1,35 @@
 <script>
-	import UnderConstruction from '../../components/UnderConstruction.svelte';
+	import MicPic from '$lib/assets/background/joao-cruz-IkEpl3JkVqU-unsplash.jpg';
+	import { Tab, TabGroup } from '@skeletonlabs/skeleton';
+	import Hero from '../../components/Hero.svelte';
+	let tabSet = 0;
 </script>
 
 <svelte:head>
 	<title>MCBIOS 2024 | Program</title>
 </svelte:head>
 
-<div class="w-full h-full flex justify-center">
-	<UnderConstruction />
+<div class="w-full justify-center">
+	<Hero imageSrc={MicPic} headerText="Program" />
+	<div class="space-y-5 w-11/12 md:w-5/6 mx-auto">
+		<p class="text-center">
+			Below you will be able to find the sessions that will be held during the conference. All of
+			which cover exciting and novel developments in the field.
+		</p>
+		<p class="text-center">
+			We will touch on machine learning, precision medicine, and more. Additional details will be
+			released as the conference approaches!
+		</p>
+	</div>
+</div>
+<div class="w-5/6 mx-auto mt-10 mb-5">
+	<TabGroup>
+		<Tab bind:group={tabSet} name="Day 1" value={0}><span>March 22</span></Tab>
+		<Tab bind:group={tabSet} name="Day 2" value={1}><span>March 23</span></Tab>
+		<Tab bind:group={tabSet} name="Day 3" value={2}><span>March 24</span></Tab>
+		<!-- Tab Panels --->
+		<svelte:fragment slot="panel"
+			><h3 class="h3 text-center my-10">Program coming soon</h3></svelte:fragment
+		>
+	</TabGroup>
 </div>

src/routes/ysea/+page.svelte

@@ -1,11 +1,49 @@
 <script>
-	import UnderConstruction from '../../components/UnderConstruction.svelte';
+	import AwardPic from '$lib/assets/background/wan-san-yip-ID1yWa1Wpx0-unsplash.jpg';
+	import Hero from '../../components/Hero.svelte';
 </script>
 
 <svelte:head>
 	<title>MCBIOS 2024 | YSEA</title>
 </svelte:head>
 
-<div class="w-full h-full flex justify-center">
-	<UnderConstruction />
+<div class="w-full justify-center">
+	<Hero imageSrc={AwardPic} headerText="MCBIOS YOUNG SCIENTIST EXCELLENCE AWARDS" />
+</div>
+<div class="w-full justify-center bg-surface-700 shadow-lg py-10 -mt-16">
+	<div class="space-y-5 w-11/12 md:w-5/6 mx-auto">
+		<p class="text-center blockquote">
+			If you are a graduate student or a postdoc, we invite you to apply. If you are a mentor of
+			trainees, please encourage your trainees to apply.
+		</p>
+	</div>
+</div>
+<div class="w-5/6 mx-auto mt-10 mb-5 block md:flex gap-5">
+	<div class="w-full md:w-1/3">
+		<h3 class="h3 underline mb-5 text-center">
+			2024 Young Scientist Excellence Award Applications
+		</h3>
+		<p class="text-center">Theme: To be announced</p>
+		<p class="text-center">Date: To be announced</p>
+		<!-- <p>Venue: To be announced</p> -->
+		<div class="px-auto flex">
+			<a href="#" class="btn btn-lg outline disabled my-7 mx-auto">Coming Soon</a>
+		</div>
+	</div>
+	<div class="w-full md:w-2/3 space-y-3">
+		<h3 class="h3">MCBIOS Young Scientist Excellence</h3>
+		<p>
+			Applications from students and postdoctoral fellows will be rigorously evaluated. The top four
+			candidates will be invited to give an oral presentation in a session dedicated to this award
+			program. In addition to an abstract, participation in this program requires submission of a
+			separate description of the innovation of the research (150 words or less) and the
+			individual's contribution to the work being presented (150 words or less). Selection of the
+			top four candidates is based on the evaluation of the applications by the MCBIOS board members
+			for quality and impact of the research. The finalists are selected by a panel of judges
+			(including keynote speakers) after the oral presentations. The quality of the professional
+			presentation is the primary consideration for selection of the award recipients. Applicants
+			with demonstrated multidisciplinary contribution and initiative are given preference during
+			final selection. Announcement of the awards will be made during the final luncheon.
+		</p>
+	</div>
 </div>