121 lines
No EOL
3.8 KiB
HTML
121 lines
No EOL
3.8 KiB
HTML
<extends template="layouts/base.html" title="Home"></extends>
|
|
|
|
<section>
|
|
<h1 class="welcome">
|
|
<img src="/assets/biocircuitslogo.svg" alt="Biological Circuits" />
|
|
</h1>
|
|
<p class="tagline">for mere mortals</p>
|
|
<p class="tagline">(albeit ones who know a bit of differential calculus)</p>
|
|
|
|
<p><strong>DISCLAIMER: This is a school project. I would like to think that the CalTech course I've drawn from has made me somewhat knowledgeable on this topic, but please do not use this for medical advice, etc., etc. If you happen to know what you are doing, and you find a mistake on this website, please <a href="https://github.com/aleksrutins/biocircuits/issues/new">tell me about it</a>. With that said:</a></strong></p>
|
|
|
|
<p class="fade">
|
|
Biological circuit design is the science of abstracting <em>natural</em> biological processes by defining them
|
|
as you would any synthetic circuit. It also allows us to create our own circuits out of natural components.
|
|
As <a href="https://biocircuits.github.io">CalTech's open-source Biocircuits course</a> states:
|
|
</p>
|
|
|
|
<blockquote class="fade fade2">
|
|
Indeed, the marvelous progression of electronic circuit capabilities [...] could well describe biological circuits decades from now. Like electronics, we may will soon be able to program cellular “miracle devices” to create “little gadgets” that address serious environmental and medical applications.
|
|
</blockquote>
|
|
|
|
<p class="fade fade3">That CalTech course will be the main source for this presentation. All diagrams are from it.</p>
|
|
|
|
<p class="fade fade4">Let's dive in!</p>
|
|
|
|
<div class="fade fade5">
|
|
<section-link href="/concepts.html">1. Concepts of Biocircuits</section-link>
|
|
<section-link href="/simplest-circuit.html">2. The Simplest Circuit</section-link>
|
|
<section-link href="/repressors.html">3. Repressors & Leaks</section-link>
|
|
<section-link href="/activators.html">4. Activators</section-link>
|
|
<section-link href="/hill-functions.html">5. Ultrasensitivity & the Hill Function</section-link>
|
|
<section-link href="/activators-vs-repressors.html">6. Choosing Between Activators & Repressors</section-link>
|
|
<div class="under-construction">
|
|
More Sections Under Construction
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
addEventListener('DOMContentLoaded', () => {
|
|
if(localStorage.getItem('faded'))
|
|
document.querySelectorAll('.fade').forEach(it =>
|
|
it.classList.add('no-delay'));
|
|
localStorage.setItem('faded', true);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
.fade {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
animation: fade .5s linear 0s 1 forwards normal;
|
|
}
|
|
.fade2 {
|
|
animation-delay: 2s;
|
|
}
|
|
.fade3 {
|
|
animation-delay: 4s;
|
|
}
|
|
.fade4 {
|
|
animation-delay: 4.25s;
|
|
}
|
|
.fade5 {
|
|
animation-delay: 4.5s;
|
|
}
|
|
.fade.no-delay {
|
|
animation-delay: 0s !important;
|
|
}
|
|
|
|
h1 {
|
|
width: 100%;
|
|
}
|
|
|
|
.welcome {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.welcome img {
|
|
display: block;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.tagline {
|
|
align-self: center;
|
|
font-style: italic;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.under-construction {
|
|
padding: 10px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
color: inherit;
|
|
border: 2px solid;
|
|
opacity: 0.9;
|
|
text-align: center;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
rgba(0, 0, 0, 0),
|
|
rgba(0, 0, 0, 0) 10px,
|
|
rgba(0, 0, 0, 0.1) 10px,
|
|
rgba(0, 0, 0, 0.1) 20px
|
|
);
|
|
}
|
|
</style> |