112 lines
4.3 KiB
HTML
112 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Meta Info -->
|
|
<title>Ryan Chou's Portfolio</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="description" content="Ryan Chou's Portfolio">
|
|
<meta property="og:title" content="Ryan Chou's Portfolio">
|
|
<meta property="og:description" content="Ryan Chou's Portfolio">
|
|
<meta property="og:url" content="https://rchou.org">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="https://rchou.org/images/cabby.jpg">
|
|
<!-- Favicon -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
|
|
<link rel="manifest" href="./favicon/site.webmanifest">
|
|
<!-- CSS -->
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="style/style.css">
|
|
<link rel="stylesheet" href="style/intro.css">
|
|
<link rel="stylesheet" href="style/mapbox.css">
|
|
<link rel="stylesheet" href="style/projects.css">
|
|
<link rel="stylesheet" href="style/hobbies.css">
|
|
<!-- Font -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- intro.css -->
|
|
<section id="intro" class="scroll-section">
|
|
<div id="intro" class="intro">
|
|
<h1><b>Hi,</b>
|
|
I'm Ryan Chou</h1>
|
|
<p>I'm a Computer Science Major at UCSC.
|
|
Keep scrolling to learn more about me!</p>
|
|
</div>
|
|
</section>
|
|
<!-- mapbox.css -->
|
|
<section id="intro" class="scroll-section">
|
|
<h2>Experience</h2>
|
|
<div class="map-wrapper">
|
|
<div id="map" class="map"></div>
|
|
<!-- buttons -->
|
|
<nav class="company-list" id="company-list"></nav>
|
|
<div id="popup" class="popup"></div>
|
|
</div>
|
|
<!-- blurb -->
|
|
<div class="blurb" id="blurb">
|
|
<p>Select a company to learn more about what I did there.</p>
|
|
</div>
|
|
</section>
|
|
<!-- projects.css -->
|
|
<section id="intro" class="scroll-section">
|
|
<div id="projects" class="projects">
|
|
<h2>Projects</h2>
|
|
<p>test</p>
|
|
</div>
|
|
</section>
|
|
<!-- hobbies.css -->
|
|
<section id="hobbies" class="scroll-section">
|
|
<h2>Hobbies</h2>
|
|
<div class="horizontal-section">
|
|
<div class="horizontal-section__inner">
|
|
<!-- Card #1 -->
|
|
<div class="card">
|
|
<img src="images/wip.jpg" alt="Hobby 1">
|
|
<div class="caption">Caption for hobby 1</div>
|
|
</div>
|
|
<!-- Card #2 -->
|
|
<div class="card">
|
|
<img src="images/wip.jpg" alt="Hobby 2">
|
|
<div class="caption">Caption for hobby 2</div>
|
|
</div>
|
|
<!-- Card #2 -->
|
|
<div class="card">
|
|
<img src="images/wip.jpg" alt="Hobby 2">
|
|
<div class="caption">Caption for hobby 2</div>
|
|
</div>
|
|
<!-- Card #2 -->
|
|
<div class="card">
|
|
<img src="images/wip.jpg" alt="Hobby 2">
|
|
<div class="caption">Caption for hobby 2</div>
|
|
</div>
|
|
<!-- Card #2 -->
|
|
<div class="card">
|
|
<img src="images/wip.jpg" alt="Hobby 2">
|
|
<div class="caption">
|
|
<p> test <br> test <br> test <br> test <br> test <br> test <br> test </p>
|
|
</div>
|
|
</div>
|
|
<!-- …add as many cards as you like… -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- thanks.css -->
|
|
<section id="intro" class="scroll-section">
|
|
<div id="thanks" class="thanks">
|
|
<h2>Thanks</h2>
|
|
<p>Thanks for stopping by. If you like what you saw, please leave a like and subscribe</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- JS -->
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
|
|
<script src="script/mapbox.js"></script>
|
|
<script src="script/scroll.js"></script>
|
|
</body>
|
|
</html>
|