-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: refactor homepage to be more readable and maintainable
- Loading branch information
1 parent
222d282
commit 3123a63
Showing
10 changed files
with
265 additions
and
256 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react'; | ||
|
|
||
| import beetleIcon from '../../../../assets/icons/background-beetle-color.png'; | ||
| import './style.scss'; | ||
|
|
||
| const HeroSection = () => { | ||
| return ( | ||
| <div className="hero-section-container"> | ||
| <div id="beetle-background"> | ||
| <img src={beetleIcon} alt="beetle" /> | ||
| </div> | ||
| <div className="title-words"> | ||
| <h1 id="big-title">Southern Pine Beetle</h1> | ||
| <h2>(Dendroctonus frontalis)</h2> | ||
| <h3 id="subtitle">Annual Outbreak Predictions and Historical Database <br />(1988-present) | ||
| </h3> | ||
| <div id="title-description"> | ||
| This website predicts the likelihood of a summer outbreak based on spring trapping data, with the goal of assisting forest managers as they make resource allocation decisions. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default HeroSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import HeroSection from './component'; | ||
|
|
||
| export default HeroSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| .hero-section-container { | ||
| overflow: hidden; | ||
| border-bottom: 3px solid #E5E5E5; | ||
| } | ||
|
|
||
| #beetle-background { | ||
| width: fit-content; | ||
| margin-left: auto; | ||
| margin-right: 0; | ||
| height: 20px; | ||
| margin-top: 50px; | ||
|
|
||
| img { | ||
| width: 400px; | ||
| } | ||
| } | ||
|
|
||
| .title-words { | ||
| text-align: left; | ||
| padding-top: 10px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: start; | ||
| margin-bottom: 35px; | ||
| } | ||
|
|
||
| .title-words #big-title { | ||
| font-size: 55px; | ||
| font-weight: 800; | ||
| letter-spacing: 1.2px; | ||
| } | ||
|
|
||
| .title-words h2 { | ||
| font-size: 36px; | ||
| font-weight: 500; | ||
| font-style: italic; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .title-words #subtitle { | ||
| font-size: 28px; | ||
| font-weight: 400; | ||
| letter-spacing: 1.2px; | ||
| } | ||
|
|
||
| .title-words #title-description { | ||
| font-size: 18px; | ||
| letter-spacing: normal; | ||
| margin-top: 34px; | ||
| line-height: 1.6; | ||
| width: 500px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React from 'react'; | ||
|
|
||
| import howItWorksIcon from '../../../../assets/icons/how-it-works.png'; | ||
| import modelOutbreakIcon from '../../../../assets/icons/model-outbreaks.png'; | ||
| import testInputIcon from '../../../../assets/icons/test-inputs.png'; | ||
| import statsIcon from '../../../../assets/icons/stats.png'; | ||
| import zeroIcon from '../../../../assets/icons/zero.png'; | ||
|
|
||
| import './style.scss'; | ||
|
|
||
| const howItWorksContent = [ | ||
| { | ||
| title: 'Model the Outbreaks', | ||
| icon: modelOutbreakIcon, | ||
| alt: 'model outbreak icon', | ||
| text: 'We decided not to use traditional modeling techniques that involve modeling the beetles themselves; instead, we model the number of infestations, commonly referred to as “spots.” Complex population models are often difficult to fit to real data, so we opted for an approach that would allow us to use spot data that was already being collected by state forest service agencies and their federal counterparts.', | ||
| }, | ||
| { | ||
| title: 'Use a Statistical Model', | ||
| icon: statsIcon, | ||
| alt: 'statistics icon', | ||
| text: 'Rather than using a complex mathematical model, we used a statistical method known as “zero-inflation.” It’s basically a fancy version of regression, one of the most basic statistical techniques.', | ||
| }, | ||
| { | ||
| title: 'Zero Inflation', | ||
| icon: zeroIcon, | ||
| alt: 'zero inflation icon', | ||
| text: 'Because most locations in most years do not experience an outbreak, a very large number of zeroes occurs in the data over the course of the three decades that data have been collected. This means that traditional statistics methods cannot be applied. Zero-inflation, however, is designed for precisely this kind of data, and we think it might prove to be a robust method for other kinds of irregularly outbreaking insects—not just SPB.', | ||
| }, | ||
| { | ||
| title: 'Test Input Variables', | ||
| icon: testInputIcon, | ||
| alt: 'test input variables icon', | ||
| text: 'In any prediction model, there are “predictor variables” that help determine the prediction. For example, some combination of temperature, precipitation, and soil nutrients might predict crop productivity. To create our model of outbreak probability, we tested the following potential predictor variables: # of SPB, # of clerids, ratio of SPB/clerids, the three preceding variables both this year and last year, # of spots last year, and # of spots the year before. We also tested the size of the forest resource in each location (how many acres of SPB host trees were available). Of these, only # of SPB this year, # of clerids last year, and the two previous years of spot numbers were helpful in predicting the probability of outbreak. We continue to use these four variables in creating our model predictions. We will evaluate the predictor variables each year, potentially adding more in the future.', | ||
| }, | ||
| ]; | ||
|
|
||
| const HowItWorks = ({ howItWorksRef }) => { | ||
| return ( | ||
| <div className="how-it-works" ref={howItWorksRef}> | ||
| <div id="how-it-works-title-container"> | ||
| <div id="icon0"> | ||
| <img | ||
| id="icon" | ||
| src={howItWorksIcon} | ||
| alt="how it works icon" | ||
| /> | ||
| </div> | ||
| <div id="vl" /> | ||
| <div id="description-title">How does it work?</div> | ||
| </div> | ||
| {howItWorksContent.map((element, index) => { | ||
| return ( | ||
| <div id="description-container"> | ||
| <div id="description-title-container"> | ||
| <div id={`icon${index + 1}`}> | ||
| <img | ||
| id="icon" | ||
| src={element.icon} | ||
| alt={element.alt} | ||
| /> | ||
| </div> | ||
| <div id="vl" /> | ||
| <div id="description-title">{element.title}</div> | ||
| </div> | ||
| <div id="description-text"> | ||
| {element.text} | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default HowItWorks; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import HowItWorks from './component'; | ||
|
|
||
| export default HowItWorks; |
Oops, something went wrong.