bsakhanov/biopage.markdown

## biopage.markdown

      
    Raw
  

              biopage.markdown
            
          
    BioPage

A Pen by Beibit Sakhanov on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Tribute to Aaron Swartz</title>
    <link href="https://fonts.googleapis.com/css?family=Gudea&display=swap" rel="stylesheet">
  </head>

  <body>
    <div id="main">

      <div id="nav">
        <h1 id="title">Tribute to Aaron Swartz</h1>
      </div>

      <p id="quote"><span class="largetext graytext">“</span>I think deeply about things and want others to do likewise. <span class="largetext">I work for ideas and learn from people.</span> I don’t like excluding people. I’m a perfectionist, but I won’t let that get in the way of publication. Except for education and entertainment, <span class="largetext">I’m not going to waste my time on things that won’t have an impact</span>. I try to be friends with everyone, but I hate it when you don’t take me seriously. I don’t hold grudges, it’s not productive, but I learn from my experience. <span class="largetext">I want to make the world a better place</span>.<span class="largetext graytext">”</span></p>

      <div id="img-div">
        <figure>
          <img id="image" src="http://www.osaarchivum.org/files/images/announcements/2017/aaronswartz.jpg" alt="" />
          <div class="caption"><figcaption id="img-caption">Aaron used his technical abilities and talent of organizing people to relentlessly campaign and fight for freedom, democracy, and the subversion of corporate evil, encouraging others to do the same.</figcaption></div>
        </figure>
      </div>

      <div id="tribute-info">
        <div class="maincontent">
          <div class="card intro">
            <h2>Introduction</h2>
            <p>Aaron Swartz was a programmer and activist that made significant progress on some of most important technological and social problems, such as copyright, internet freedom, information sharing, and democracy. We unfortunately lost him in 2013, but his ideas and work will live on through activists, programmers, academics, and everyday people that continue to fight against injustice.<p>
          </div>
          <div class="card bioworks">
            <h2>Biography and Works</h2>
            <p>Aaron was born in Illinois in 1986, and because he had an early exposure to computers (his dad owned a software company), he was able to learn how to program at a young age. When he was only 13, he won a prize for web development by creating TheInfo.org, a project that allowed everyone on the internet to have their own website. When he was just 16, he used his technical knowledge to help create the copyright licenses of Creative Commons, an organization dedicated to allowing creative works to be shared and modified. Pursuing his interest in computers and entrepreneurship, Aaron joined a startup accelerator (Y Combinator) to found Reddit.com, which was acquired by a larger media company later on.</p>
            <p>Uninterested in working for businesses, Aaron decided to steer his career away from the startup world and into the political world. This is where he launched and participated in several campaigns against the social problems that he thought were most important for him to work on, including DemandProgress.org, which successfully fought against the internet censorship bills <a href="https://en.wikipedia.org/wiki/Protests_against_SOPA_and_PIPA" target="_blank">SOPA/PIPA</a>.</p>
            <p>One of the many political problems that Aaron tackled was the privatization of academic works. It turns out that a handful of giant corporations own and control the vast majority of scholarly journals and articles, forcing everyone else to pay high amounts for access. Aaron viewed this as unjust, because people without money would not have access to the wealth of human knowledge, while someone with more privilege (such students attending an American university) would. When Aaron was working on freeing information that big corporations lock up and profit off of, he wrote a computer script to download JSTOR (a scientific journal database used at universities) articles on MIT's campus as an expression of civil disobedience. He was caught running the scripts on MIT's servers on video, and the federal authorities ruled that he would receive 35 years in prison and a $1 million fine. His exact motive is not known, but knowing Aaron, it was likely to be for research (as he was a fellow at Harvard, researching law and ethics) and certainly not for anything malicious like personal gain. Even if he had given them away to the public, it should have been viewed as an act of civil disobedience, not an extreme offense of law. In any case, the MIT and the legal system used this to make a case out of Swartz and is regarded as a failure. Aaron fell into a deep depression following this verdict, and was found dead in his apartment room in 2013 due to suicide.</p>
            <p>With the nonstop dedication that Aaron spent to "fixing the world", he is remembered by many as a relentless fighter for freedom and equality. He didn't care about becoming rich or even being personally content because his primary goal was to improve the world. His selfless character, devotion to progress, and optimism continue to inspire many, and his impact on countless individuals will never be forgotten.</p>
          </div>
          <div class="card moreinfo">
            <h2>More Information</h2>
            <ul>
              <li><p>For a full overview of Aaron's life and works, visit
              <a href="http://wikipedia.org/wiki/Aaron_Swartz" target="_blank" id="tribute-link">Wikipedia's page</a></p></li>

              <li><p>To view a documentary about Aaron, watch <em>The Internet's Own Boy: The Story of Aaron Swartz</em></p></li>

              <li><p>His creative and intellectually stimulating ideas can be found on his blog, <a href="http://www.aaronsw.com" target="_blank">aaronsw.com</a>.</p></li>
            </ul>
          </div>
        </div>
        <div class="sidebar">
          <div class="timelinecard timeline">
            <div id="timeline">
            </div>
            <br>
            <p class="timeline-text"><b>1986</b>: Aaron is born in Highland Park, Illinois.</p>
            <br><br>
            <br>
            <p class="timeline-text"><b>1999</b>: Won ARSDigita Prize for TheInfo.org. Worked on RSS 1.0 syndication.</p>
            <br><br>
            <br>
            <p class="timeline-text"><b>2005</b>: Founded Reddit while in Y Combinator.</p>
            <br><br>
            <br>
            <p class="timeline-text"><b>2008</b>: Downloaded 2.7 million documents from the law document database PACER.</p>
            <br><br>
            <p class="timeline-text"><b>2009</b>: Helped start the <i>Progressive Change Campaign Committee</i> to learn about online activism.</p>
            <br><br>
            <p class="timeline-text"><b>2010</b>: Became a research fellow at Harvard for studying institutional corruption, working with Professor Lawrence Lessig.</p>
            <br><br>
            <p class="timeline-text"><b>2011</b>: Arrested by MIT for scraping JSTOR docs.</p>
            <br><br>
            <p class="timeline-text"><b>2012</b>: Protested successfully against SOPA/PIPA internet censorship bills.</p>
            <br><br>
            <p class="timeline-text"><b>2012</b>: Developed SecureDrop, a platform for anonymous submission of documents for whistleblowers.</p>
            <br><br>
            <p class="timeline-text"><b>2013</b>: Posthumously inducted into the Internet Hall of Fame.</p>
          </div>
        </div>
      </div>

    </div>
  <body>
</html>

## script.js
function animate() {
  document.getElementById("timeline").style.height = '1328px';
}
window.onload = animate;

## style.css

.card {
  width: var(--box-width, 600);
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 5px;
  padding: 15px;
}
.caption {
  width: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 0px;
  padding: 15px;
}
body {
  --box-width: 600px;
  font-family: Gudea;
  font-size: 15px;
  width: 1000px;
  margin: auto;
  line-height: 1.5em;
}
#image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}
#img-div {
  width: 600px;
  margin: auto;
}

#quote {
  text-align: center;
  font-size: 20px;
  line-height: 1.5em;
}

.largetext {
  font-size: 25px;
  font-weight: bold;
}

.graytext {
  color: gray;
}

#img-caption {
  width: auto;
}
#tribute-info {
  padding: 15px;
}
#title {
  text-align: center;
}
#nav {
  width: 947px;
  position: sticky;
  padding: 5px;
  top: 0;
  margin: 10px auto;
  background-color: #FFF;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.maincontent {
  float: left;
}
.timelinecard {
  width: 286px;
  height: 1328px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 5px;
  padding: 15px;
}
.sidebar {
  float: right;
  margin: 0 auto 0 0;
}

#timeline {
  float: left;
  width: 6px;
  height: 6px;
  background: gray;
  transition: height 5s ease;
}

.timeline-text {
  margin: 10px 40px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Tribute to Aaron Swartz</title>
	<link href="https://fonts.googleapis.com/css?family=Gudea&display=swap" rel="stylesheet">
	</head>

	<body>
	<div id="main">

	<div id="nav">
	<h1 id="title">Tribute to Aaron Swartz</h1>
	</div>

	<p id="quote"><span class="largetext graytext">“</span>I think deeply about things and want others to do likewise. <span class="largetext">I work for ideas and learn from people.</span> I don’t like excluding people. I’m a perfectionist, but I won’t let that get in the way of publication. Except for education and entertainment, <span class="largetext">I’m not going to waste my time on things that won’t have an impact</span>. I try to be friends with everyone, but I hate it when you don’t take me seriously. I don’t hold grudges, it’s not productive, but I learn from my experience. <span class="largetext">I want to make the world a better place</span>.<span class="largetext graytext">”</span></p>

	<div id="img-div">
	<figure>
	<img id="image" src="http://www.osaarchivum.org/files/images/announcements/2017/aaronswartz.jpg" alt="" />
	<div class="caption"><figcaption id="img-caption">Aaron used his technical abilities and talent of organizing people to relentlessly campaign and fight for freedom, democracy, and the subversion of corporate evil, encouraging others to do the same.</figcaption></div>
	</figure>
	</div>

	<div id="tribute-info">
	<div class="maincontent">
	<div class="card intro">
	<h2>Introduction</h2>
	<p>Aaron Swartz was a programmer and activist that made significant progress on some of most important technological and social problems, such as copyright, internet freedom, information sharing, and democracy. We unfortunately lost him in 2013, but his ideas and work will live on through activists, programmers, academics, and everyday people that continue to fight against injustice.<p>
	</div>
	<div class="card bioworks">
	<h2>Biography and Works</h2>
	<p>Aaron was born in Illinois in 1986, and because he had an early exposure to computers (his dad owned a software company), he was able to learn how to program at a young age. When he was only 13, he won a prize for web development by creating TheInfo.org, a project that allowed everyone on the internet to have their own website. When he was just 16, he used his technical knowledge to help create the copyright licenses of Creative Commons, an organization dedicated to allowing creative works to be shared and modified. Pursuing his interest in computers and entrepreneurship, Aaron joined a startup accelerator (Y Combinator) to found Reddit.com, which was acquired by a larger media company later on.</p>
	<p>Uninterested in working for businesses, Aaron decided to steer his career away from the startup world and into the political world. This is where he launched and participated in several campaigns against the social problems that he thought were most important for him to work on, including DemandProgress.org, which successfully fought against the internet censorship bills <a href="https://en.wikipedia.org/wiki/Protests_against_SOPA_and_PIPA" target="_blank">SOPA/PIPA</a>.</p>
	<p>One of the many political problems that Aaron tackled was the privatization of academic works. It turns out that a handful of giant corporations own and control the vast majority of scholarly journals and articles, forcing everyone else to pay high amounts for access. Aaron viewed this as unjust, because people without money would not have access to the wealth of human knowledge, while someone with more privilege (such students attending an American university) would. When Aaron was working on freeing information that big corporations lock up and profit off of, he wrote a computer script to download JSTOR (a scientific journal database used at universities) articles on MIT's campus as an expression of civil disobedience. He was caught running the scripts on MIT's servers on video, and the federal authorities ruled that he would receive 35 years in prison and a $1 million fine. His exact motive is not known, but knowing Aaron, it was likely to be for research (as he was a fellow at Harvard, researching law and ethics) and certainly not for anything malicious like personal gain. Even if he had given them away to the public, it should have been viewed as an act of civil disobedience, not an extreme offense of law. In any case, the MIT and the legal system used this to make a case out of Swartz and is regarded as a failure. Aaron fell into a deep depression following this verdict, and was found dead in his apartment room in 2013 due to suicide.</p>
	<p>With the nonstop dedication that Aaron spent to "fixing the world", he is remembered by many as a relentless fighter for freedom and equality. He didn't care about becoming rich or even being personally content because his primary goal was to improve the world. His selfless character, devotion to progress, and optimism continue to inspire many, and his impact on countless individuals will never be forgotten.</p>
	</div>
	<div class="card moreinfo">
	<h2>More Information</h2>
	<ul>
	<li><p>For a full overview of Aaron's life and works, visit
	<a href="http://wikipedia.org/wiki/Aaron_Swartz" target="_blank" id="tribute-link">Wikipedia's page</a></p></li>

	<li><p>To view a documentary about Aaron, watch <em>The Internet's Own Boy: The Story of Aaron Swartz</em></p></li>

	<li><p>His creative and intellectually stimulating ideas can be found on his blog, <a href="http://www.aaronsw.com" target="_blank">aaronsw.com</a>.</p></li>
	</ul>
	</div>
	</div>
	<div class="sidebar">
	<div class="timelinecard timeline">
	<div id="timeline">
	</div>
	<br>
	<p class="timeline-text"><b>1986</b>: Aaron is born in Highland Park, Illinois.</p>
	<br><br>
	<br>
	<p class="timeline-text"><b>1999</b>: Won ARSDigita Prize for TheInfo.org. Worked on RSS 1.0 syndication.</p>
	<br><br>
	<br>
	<p class="timeline-text"><b>2005</b>: Founded Reddit while in Y Combinator.</p>
	<br><br>
	<br>
	<p class="timeline-text"><b>2008</b>: Downloaded 2.7 million documents from the law document database PACER.</p>
	<br><br>
	<p class="timeline-text"><b>2009</b>: Helped start the <i>Progressive Change Campaign Committee</i> to learn about online activism.</p>
	<br><br>
	<p class="timeline-text"><b>2010</b>: Became a research fellow at Harvard for studying institutional corruption, working with Professor Lawrence Lessig.</p>
	<br><br>
	<p class="timeline-text"><b>2011</b>: Arrested by MIT for scraping JSTOR docs.</p>
	<br><br>
	<p class="timeline-text"><b>2012</b>: Protested successfully against SOPA/PIPA internet censorship bills.</p>
	<br><br>
	<p class="timeline-text"><b>2012</b>: Developed SecureDrop, a platform for anonymous submission of documents for whistleblowers.</p>
	<br><br>
	<p class="timeline-text"><b>2013</b>: Posthumously inducted into the Internet Hall of Fame.</p>
	</div>
	</div>
	</div>

	</div>
	<body>
	</html>
	function animate() {
	document.getElementById("timeline").style.height = '1328px';
	}
	window.onload = animate;

	.card {
	width: var(--box-width, 600);
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 10px 5px;
	padding: 15px;
	}
	.caption {
	width: auto;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 10px 0px;
	padding: 15px;
	}
	body {
	--box-width: 600px;
	font-family: Gudea;
	font-size: 15px;
	width: 1000px;
	margin: auto;
	line-height: 1.5em;
	}
	#image {
	max-width: 100%;
	height: auto;
	display: block;
	margin: auto;
	}
	#img-div {
	width: 600px;
	margin: auto;
	}

	#quote {
	text-align: center;
	font-size: 20px;
	line-height: 1.5em;
	}

	.largetext {
	font-size: 25px;
	font-weight: bold;
	}

	.graytext {
	color: gray;
	}

	#img-caption {
	width: auto;
	}
	#tribute-info {
	padding: 15px;
	}
	#title {
	text-align: center;
	}
	#nav {
	width: 947px;
	position: sticky;
	padding: 5px;
	top: 0;
	margin: 10px auto;
	background-color: #FFF;
	border: 1px solid #ccc;
	border-radius: 5px;
	}
	.maincontent {
	float: left;
	}
	.timelinecard {
	width: 286px;
	height: 1328px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 10px 5px;
	padding: 15px;
	}
	.sidebar {
	float: right;
	margin: 0 auto 0 0;
	}

	#timeline {
	float: left;
	width: 6px;
	height: 6px;
	background: gray;
	transition: height 5s ease;
	}

	.timeline-text {
	margin: 10px 40px;
	}