add other tools

src/App.jsx

@@ -5,6 +5,9 @@ import SiteCard from './components/SiteCard'
 
 import viralwasm_consensus from './assets/images/viralwasm-consensus.png';
 import viralwasm_epi from './assets/images/viralwasm-epi.png';
+import viralmsa from './assets/images/viralmsa.png';
+import viralconsensus from './assets/images/viralconsensus.png';
+import tn93 from './assets/images/tn93.png';
 
 export class App extends Component {
 	render() {
@@ -14,20 +17,46 @@ export class App extends Component {
 				{/* 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">
+				<h2 className="animate__animated animate__fadeIn mb-4">Core Tools<br /><hr /></h2>
+				<div id="site-cards" className="animate__animated animate__fadeIn d-flex flex-row flex-wrap justify-content-evenly align-items-center w-100 mb-4">
 					<SiteCard
 						title="ViralWasm-Consensus"
 						description="A serverless WebAssembly-based pipeline for consensus genome generation."
-						link="https://niema-lab.github.io/ViralWasm-Consensus/"
+						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/"
+						link="https://niema-lab.github.io/ViralWasm-Epi"
 						image={viralwasm_epi}
 					/>
 				</div>
+
+				<h2 className="animate__animated animate__fadeIn mt-5 mb-4">Additional Tools<br /><hr /></h2>
+				<div id="site-cards" className="animate__animated animate__fadeIn d-flex flex-row flex-wrap justify-content-evenly align-items-center w-100 mb-4">
+					<SiteCard
+						title="ViralMSA"
+						description="Reference-guided multiple sequence alignment."
+						link="https://niema.net/ViralMSA"
+						image={viralmsa}
+						width="28vw"
+					/>
+					<SiteCard
+						title="ViralConsensus"
+						description="Fast viral consensus genome reconstruction."
+						link="https://niema.net/ViralConsensus"
+						image={viralconsensus}
+						width="28vw"
+					/>
+					<SiteCard
+						title="TN93"
+						description="Pairwise distance computation between aligned nucleotide sequences."
+						link="https://daniel-ji.github.io/tn93-webapp/"
+						image={tn93}
+						width="28vw"
+					/>
+				</div>
 			</div>
 		)
 	}

src/App.scss

@@ -21,11 +21,12 @@ body {
 #site-header {
 	display: flex;
 	align-items: center;
-	margin: 4rem 0 1rem 0;
-	font-size: 4rem;
+	margin: 3rem 0 1rem 0;
+	font-size: 3.5rem;
+	font-family: 'Open Sans', sans-serif;
 
 	span {
-		font-size: 2.8rem;
+		font-size: 2.5rem;
 	}
 }
 
@@ -41,15 +42,13 @@ body {
 }
 
 .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;
@@ -101,6 +100,19 @@ h1,
 h2,
 h3,
 h4 {
-	font-family: 'Open Sans', sans-serif;
 	font-weight: 400;
+}
+
+h2 {
+	animation-delay: 1s;
+}
+
+hr {
+	position: relative;
+	right: 15%;
+	margin: 1rem 0;
+	border: 0;
+	border-top: 2px solid black;
+	opacity: 1;
+	width: 130%;
 }

src/components/SiteCard.jsx

@@ -9,13 +9,14 @@ export class SiteCard extends Component {
 		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' onClick={this.openLink} style={{width: this.props.width ?? '40vw'}}>
 					<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>
+				<p className='w-100 text-center'><a href={this.props.link} target="_blank" rel="noopener noreferrer">{this.props.link.replace(/(^\w+:|^)\/\//, '')}</a></p>
 			</div>
 		)
 	}