gimm260-data-visualization/oldStuff/index.html

111 lines
3.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kaj Forney -- GIMM 260 Data Visualization Narrative</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/gridStyle.css">
</head>
<body class="background1 parallax">
<div class="spacer-large"></div>
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<h1 id="page-title">Linux Gaming with Proton</h1>
</div>
<div class="col-3"></div>
</div>
<div class="spacer-large"></div>
<div class="row fadeIn">
<h2>Proton: Brief Overview</h2>
</div>
<div class="row fadeIn">
<div class="col-1"></div>
<div class="col-5">
<div class="responsive-iframe-container">
<iframe class="responsive-iframe" width="560" height="315" src="https://www.youtube.com/embed/_OAqvtlgfGA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-5 contentBackground">
<p>[NARRATIVE TEXT: Introduce Proton here. Describe how Valve's rating system for games on Steam Deck works, and compare to ProtonDB, where I got my data.]</p>
</div>
<div class="col-1"></div>
</div>
<div class="spacer-small"></div>
<div class="row fadeIn">
<div class="col-1"></div>
<div class="col-5 contentBackground">
<p>Some games work perfectly out of the box, and require no additional configuration!</p>
</div>
<div class="col-5 ">
<div class="temporary-box">
FIRST CHART HERE.
This will be a depiction of the user reports for Risk of Rain 2 or Cuphead.
</div>
</div>
<div class="col-1"></div>
</div>
<div class="spacer-small"></div>
<div class="row fadeIn">
<div class="col-1"></div>
<div class="col-5 contentBackground">
<p>However, some games require improvements on Valve's end for various reasons before they work properly.</p>
</div>
<div class="col-5 ">
<div class="temporary-box">
SECOND CHART HERE: Streamgraph.
This will be a depiction of the user reports for Age of Empires II:DE.
</div>
</div>
<div class="col-1"></div>
</div>
<div class="spacer-small"></div>
<div class="row fadeIn">
<div class="col-1"></div>
<div class="col-5 contentBackground">
<p>Finally, some games, especially AAA multiplayer titles, utilize intrusive kernel-level anti cheat measures.</p>
<p>These prevent games from working at all on Linux, unles the developer permits it.</p>
</div>
<div class="col-5 ">
<div class="temporary-box">
THIRD CHART HERE: Streamgraph.
This will be a depiction of the user reports for Apex Legends.
</div>
</div>
<div class="col-1"></div>
</div>
<div class="spacer-large"></div>
<div class="row fadeIn">
<div class="col-2"></div>
<div class="col-8 contentBackground temporary-box">
<p>In this section, there will be </p>
</div>
<div class="col-2"></div>
</div>
<div id="footer-spacer"></div>
<div id="footer">
<div class="row">
<div class="col-6"></div>
<div class="col-6">
<img src="img/logo.png" alt="Lunar Penguin Logo" id="footer-logo">
<span id="footer-text">Page created by <a href="https://lunarpenguin.net">Kaj Forney</a>, 2022.</span>
</div>
</div>
</div>
</body>
</html>