111 lines
3.4 KiB
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>
|