rchou/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added index

Browse Source
This commit is contained in:
cabbbyy
2025-08-11 22:17:01 +08:00
parent 99a3f58b0b
commit 1cdaaf5dff
1 changed files with 111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
index.html Normal file
View File

@@ -0,0 +1,111 @@
<!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>