build simple first prototype of site

Niema-Lab · Aug 29, 2023 · 69e25af · 69e25af
1 parent 118264a
commit 69e25af
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,10 @@
 <head>
 	<meta charset="UTF-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+		integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
 	<title>ViralWasm</title>
 </head>
 

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,10 +1,34 @@
 import React, { Component } from 'react'
-import './App.css'
+import './App.scss'
+
+import SiteCard from './components/SiteCard'
+
+import viralwasm_consensus from './assets/images/viralwasm-consensus.png';
+import viralwasm_epi from './assets/images/viralwasm-epi.png';
 
 export class App extends Component {
 	render() {
 		return (
-			<div>App</div>
+			<div className="d-flex flex-column justify-content-center align-items-center w-100 mb-5">
+				<h1 id="site-header" className="animate__animated animate__fadeIn text-center">ViralWasm <span>&nbsp;🧬</span></h1>
+				{/* TODO: change */}
+				<h1 id="site-subheader" className="animate__animated animate__fadeIn text-center">A client-side WebAssembly tool suite 🔨 for viral molecular epidemiology 🧪. </h1>
+
+				<div id="site-cards" className="animate__animated animate__fadeIn d-flex flex-row flex-wrap justify-content-evenly align-items-center w-100">
+					<SiteCard
+						title="ViralWasm-Consensus"
+						description="A serverless WebAssembly-based pipeline for consensus genome generation."
+						link="https://niema-lab.github.io/ViralWasm-Consensus/"
+						image={viralwasm_consensus}
+					/>
+					<SiteCard
+						title="ViralWasm-Epi"
+						description="A serverless WebAssembly-based pipeline for multi-sequence alignment and molecular clustering."
+						link="https://niema-lab.github.io/ViralWasm-Epi/"
+						image={viralwasm_epi}
+					/>
+				</div>
+			</div>
 		)
 	}
 }

diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,106 @@
+@font-face {
+	font-family: 'Roboto Mono';
+	src: url('./assets/fonts/RobotoMono-VariableFont_wght.ttf');
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	src: url('./assets/fonts/OpenSans.ttf');
+}
+
+body {
+	margin: 0;
+	width: 100%;
+	font-family: 'Roboto Mono', monospace;
+}
+
+#root {
+	width: 100%;
+}
+
+#site-header {
+	display: flex;
+	align-items: center;
+	margin: 4rem 0 1rem 0;
+	font-size: 4rem;
+
+	span {
+		font-size: 2.8rem;
+	}
+}
+
+#site-subheader {
+	margin: 0 0 6rem 0;
+	font-size: 1.25rem;
+	font-family: 'Roboto Mono', monospace;
+	animation-delay: 0.5s;
+}
+
+#site-cards {
+	animation-delay: 1s;
+}
+
+.site-container {
+
+	h3 {
+		font-family: 'Roboto Mono', monospace;
+	}
+
+	.site-card {
+		position: relative;
+		margin: 1rem 0;
+		width: 40vw;
+		aspect-ratio: 16/9;
+		border: 2px solid black;
+		border-radius: 0.5rem;
+		cursor: pointer;
+
+		&:hover {
+			.site-card-image {
+				filter: blur(2px);
+				opacity: 0.25;
+			}
+
+			.site-card-overlay {
+				opacity: 1;
+			}
+		}
+
+		.site-card-image {
+			position: absolute;
+			top: 0;
+			max-width: 100%;
+			max-height: 100%;
+			border-radius: 0.5rem;
+			transition: 0.25s ease-in-out;
+		}
+
+		.site-card-overlay {
+			position: relative;
+			top: 0;
+			left: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			transition: 0.25s ease-in-out;
+			z-index: 1;
+
+			h3 {
+				font-family: 'Roboto Mono', monospace;
+			}
+		}
+	}
+}
+
+
+h1,
+h2,
+h3,
+h4 {
+	font-family: 'Open Sans', sans-serif;
+	font-weight: 400;
+}
diff --git a/src/assets/fonts/OpenSans.ttf b/src/assets/fonts/OpenSans.ttf
diff --git a/src/assets/fonts/RobotoMono-VariableFont_wght.ttf b/src/assets/fonts/RobotoMono-VariableFont_wght.ttf
diff --git a/src/assets/images/viralwasm-consensus.png b/src/assets/images/viralwasm-consensus.png
diff --git a/src/assets/images/viralwasm-epi.png b/src/assets/images/viralwasm-epi.png
diff --git a/src/components/SiteCard.jsx b/src/components/SiteCard.jsx
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+
+export class SiteCard extends Component {
+	openLink = () => {
+		window.open(this.props.link, '_blank')
+	}
+
+	render() {
+		return (
+			<div className="site-container">
+				<h3 className="mx-5 text-center mb-3">{this.props.title}</h3>
+				<div className='site-card' onClick={this.openLink}>
+					<div className="site-card-overlay">
+						<p className="mx-5 text-center">{this.props.description}</p>
+						<button className="btn btn-outline-primary mx-5">Visit</button>
+					</div>
+					<img src={this.props.image} alt={this.props.title} className='site-card-image' />
+				</div>
+			</div>
+		)
+	}
+}
+
+export default SiteCard