Skip to content

Commit

Permalink
Merge pull request #482 from Chia-Network/academy_home_carousel
Browse files Browse the repository at this point in the history 
Academy home carousel
  • Loading branch information
@hoffmang9
hoffmang9 authored Jan 23, 2024
2 parents 5456149 + 9a0b61f commit 0b61cf4
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 8 deletions.
191 changes: 184 additions & 7 deletions docs/academy/academy-intro/academy-home.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,22 @@ title: Academy Home
slug: /academy-home
---

import ChialispIntro from '@site/static/img/academy/Intro2Chialisp.png';
import SmartCoins from '@site/static/img/academy/SmartCoins.png';
import Signatures from '@site/static/img/academy/Signatures.png';
import InnerPuzzles from '@site/static/img/academy/InnerPuzzles.png';

import Consensus from '@site/static/img/academy/consensus.png';
import Timelords from '@site/static/img/academy/timelords.png';
import BlockFormation from '@site/static/img/academy/forming-blocks.png';
import CoinSetModel from '@site/static/img/academy/coin-set.png';
import Security from '@site/static/img/academy/security.png';

import FarmingOverview from '@site/static/img/academy/farming-overview.png';
import ChallengesPlotFilters from '@site/static/img/academy/challenges-plot-filters.png';
import Pools from '@site/static/img/academy/pools.png';
import CreatingYourFirstPlot from '@site/static/img/academy/Intro2Farming.png';

Welcome to Chia Academy, the scholarly hub for delving deep into Chia blockchain technology. In an age characterized by rapid digital transformation, this institution offers a comprehensive exploration of the Chia blockchain, dissecting its technical intricacies, real-world applications, and the nuances of its secure data handling. As a Chia Academy student, you will dive into the core concepts and functionalities of the Chia blockchain.

## Courses
Expand All @@ -13,23 +29,184 @@ Below, you'll find several curated courses covering the everything from the basi

#### Chialisp Overview

| [!['Intro to Chialisp'](/img/academy/Intro2Chialisp.png)](https://docs.chia.net/chialisp-intro) | [!['Smart Coins'](/img/academy/SmartCoins.png)](https://docs.chia.net/chialisp-smart-coin) | [!['Signatures'](/img/academy/Signatures.png)](https://docs.chia.net/chialisp-signatures) | [!['Inner Puzzles'](/img/academy/InnerPuzzles.png)](https://docs.chia.net/chialisp-inner-puzzle) |
| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
<div class="horizontal-scroll-wrapper">
<div class="horizontal-scroll squares">
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={ChialispIntro} alt='Intro to Chialisp' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/chialisp-intro'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={SmartCoins} alt='Smart Coins' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/chialisp-smart-coin'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={Signatures} alt='Signatures' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/chialisp-signatures'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={InnerPuzzles} alt='Inner Puzzles' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/chialisp-inner-puzzle'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
</div>
</div>

---

#### Blockchain Basics

| [!['Consensus'](/img/academy/consensus.png)](https://docs.chia.net/consensus-basics) | [!['Timelords'](/img/academy/timelords.png)](https://docs.chia.net/timelord-basics) | [!['Block Formation'](/img/academy/forming-blocks.png)](https://docs.chia.net/block-formation-basics) | [!['Coin-Set Model'](/img/academy/coin-set.png)](https://docs.chia.net/coinset-basics) |
| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| [!['Security'](/img/academy/security.png)](https://docs.chia.net/security-basics) |
<div class="horizontal-scroll-wrapper">
<div class="horizontal-scroll squares">
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={Consensus} alt='Consensus'/>
</div>
<div class="card__footer">
<a href='https://docs.chia.net/consensus-basics'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={Timelords} alt='Timelords' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/timelord-basics'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={BlockFormation} alt='Block Formation' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/block-formation-basics'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={CoinSetModel} alt='Coin-Set Model' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/coinset-basics'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={Security} alt='Security' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/security-basics'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
</div>
</div>

---

#### Plotting & Farming

| [!['Farming Overview'](/img/academy/farming-overview.png)](https://docs.chia.net/farming-overview) | [!['Challenges & Plot Filters'](/img/academy/challenges-plot-filters.png)](https://docs.chia.net/challenges-plot-filters) | [!['Pools'](/img/academy/pools.png)](https://docs.chia.net/pools) | [!['Creating Your First Plot'](/img/academy/Intro2Farming.png)](https://docs.chia.net/first-plot) |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
<div class="horizontal-scroll-wrapper">
<div class="horizontal-scroll squares">
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={FarmingOverview} alt='Farming Overview' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/farming-overview'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={ChallengesPlotFilters} alt='Challenges & Plot Filters' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/challenges-plot-filters'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={Pools} alt='Pools' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/pools'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={CreatingYourFirstPlot} alt='Creating Your First Plot' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/first-plot'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
</div>
</div>

---

Expand Down
2 changes: 1 addition & 1 deletion docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ const katex = require('rehype-katex');
},
{
label: 'Chia Academy',
to: 'https://docs.chia.net/academy-overview/',
to: 'https://docs.chia.net/academy-home/',
},
],
},
Expand Down
40 changes: 40 additions & 0 deletions src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,44 @@ figcaption {

html {
scroll-padding-top: 5rem;
}


/* Academy Home Carousel*/

.horizontal-scroll-wrapper {
display: block;
width: 20px;
max-height: 220px;
margin: 0;
padding-top: 1px;
}

.horizontal-scroll {
display: block;
width: 251px;
max-height: 55vw;
margin: 0;
padding-top: 1px;
overflow-x: hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateY(-250px);
transform-origin: right top;
}

.horizontal-scroll > div {
display: block;
padding: 5px;
transform: rotate(90deg) translateX(250px);
transform-origin: right top;
}

.squares {
padding: 0 0 0 0;
}

.squares > div {
width: 250px;
height: 250px;
margin: 10px 0;
}

0 comments on commit 0b61cf4

Please sign in to comment.