alu/personal-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implement site changes from cse 134

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-03-22 15:22:02 -07:00
parent 10c24bb442
commit c70993ed7d
31 changed files with 479 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
images/email.svg Normal file
View File

@ -0,0 +1 @@
<svg width="800" height="800" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg"><path d="M0 1694.235h1920V226H0v1468.235zM112.941 376.664V338.94H1807.06v37.723L960 1111.233l-847.059-734.57zM1807.06 526.198v950.513l-351.134-438.89-88.32 70.475 378.353 472.998H174.042l378.353-472.998-88.32-70.475-351.134 438.89V526.198L960 1260.768l847.059-734.57z" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 385 B

1
images/favicon.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><g fill="none" stroke="#000" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"><path d="M49.617 208S80 208 96 192M96 192s16 16 32 16M206.383 208S176 208 160 192M160 192s-16 16-32 16M128 48c32 0 48 16 48 64 0 40-32 64-48 64M128 48c-32 0-48 16-48 64 0 40 32 64 48 64M160 192l-7.416-27.677M96 192l7.416-27.677"/><circle cx="128" cy="128" r="111.999"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 438 B

1
images/github.svg Normal file
View File

@ -0,0 +1 @@
<svg width="800" height="800" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="none" d="M0-192h1280v800H0z"/><path d="M32.029 8.345C18.759 8.345 8 19.104 8 32.378c0 10.617 6.885 19.624 16.435 22.803 1.202.22 1.64-.522 1.64-1.16 0-.569-.02-2.081-.032-4.086-6.685 1.452-8.095-3.222-8.095-3.222-1.093-2.775-2.669-3.514-2.669-3.514-2.182-1.492.165-1.462.165-1.462 2.412.171 3.681 2.477 3.681 2.477 2.144 3.672 5.625 2.611 6.994 1.997.219-1.553.838-2.612 1.526-3.213-5.336-.606-10.947-2.669-10.947-11.877 0-2.623.937-4.769 2.474-6.449-.247-.608-1.072-3.051.235-6.36 0 0 2.018-.646 6.609 2.464 1.917-.533 3.973-.8 6.016-.809 2.041.009 4.097.276 6.017.809 4.588-3.11 6.602-2.464 6.602-2.464 1.311 3.309.486 5.752.239 6.36 1.54 1.68 2.471 3.826 2.471 6.449 0 9.232-5.62 11.263-10.974 11.858.864.742 1.632 2.208 1.632 4.451 0 3.212-.029 5.804-.029 6.591 0 .644.432 1.392 1.652 1.157 9.542-3.185 16.421-12.186 16.421-22.8 0-13.274-10.76-24.033-24.034-24.033" fill="#010101"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
images/photo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
images/photo_100px.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
images/photo_200px.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

150
index.html
View File

@ -1,14 +1,136 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="UTF-8">
<title>root's homepage</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <link rel="stylesheet" href="styles/styles.css">
</style> <link rel="stylesheet" href="styles/cards.css">
</head> <link rel="stylesheet" href="styles/tables.css">
<body style="background-color:white;"> <title>About Me - Arthur Lu</title>
<a href = "notes.html">root's class notes</a> <style>
</br> @media screen and (max-width: 480px) {
<a href = "projects.html">root's projects</a> #skills-table td:nth-of-type(1):before { content: "Language"; }
</body> #skills-table td:nth-of-type(2):before { content: "Experience"; }
</html> #skills-table td:nth-of-type(3):before { content: "Frameworks"; }
}
</style>
</head>
<body>
<header>
<nav>
<a href="#mission">Mission</a>
<a href="#education">Education</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#interests">Interests</a>
<a href="#contact">Contact</a>
<a href="notes.html">Notes</a>
</nav>
</header>
<main>
<div class="card">
<picture>
<source media="screen and (min-width: 480px)" srcset="images/photo_200px.webp">
<source media="screen and (min-width: 0px)" srcset="images/photo_100px.webp">
<img src="images/photo.webp" alt="A portrait photo of Arthur Lu" style="border-radius: 20px;">
</picture>
<div>
<h1>Arthur Lu</h1>
<ul style="font-size: 2rem; list-style-type: none; padding: 0px;">
<li>Developer</li>
<li>Engineer</li>
<li>Problem Solver</li>
</ul>
</div>
</div>
<div class="single" id="mission">
<h2>My Mission</h2>
<p>I am a 3rd year <strong>Computer Engineering</strong> major at the University of California San Diego looking for opportunites in software development and system design.</p>
</div>
<div class="single" id="education">
<h2>My Education</h2>
<p>3rd year Computer Engineering Major at UCSD</p>
<p>GPA: 3.9</p>
</div>
<div class="card" id="skills">
<div>
<h2>My Languages and Skills</h2>
</div>
<div>
<table id="skills-table" class="labeled">
<colgroup>
<col span="1">
<col span="2">
</colgroup>
<thead>
<tr>
<th>Language</th>
<th>Experience</th>
<th>Frameworks</th>
</tr>
</thead>
<tbody>
<tr>
<td>C/C++</td>
<td>2 Years</td>
<td>gcc, make, Visual Studio</td>
</tr>
<tr>
<td>Java</td>
<td>4 Years</td>
<td>Android Studio</td>
</tr>
<tr>
<td>Python</td>
<td>5 Years</td>
<td>PyTorch, scipy, numpy, scikit-learn</td>
</tr>
<tr>
<td>Javascript</td>
<td>1 Year</td>
<td>ES6, NodeJS, express.js</td>
</tr>
</tbody>
</table>
<p>I also have experience with common technologies like Docker, lxc, nginx, and VMWare ESXi.</p>
</div>
</div>
<div class="card" id="projects">
<div>
<h2>My Projects</h2>
</div>
<div>
<a href="projects.html">Browse</a>
</div>
</div>
<div class="single" id="interests">
<h2>My Interests</h2>
<p>I am interested in Machine Learning, cloud technologies, and distributed computing.</p>
</div>
<div class="card" id="contact">
<div>
<h2>Contact Me</h2>
</div>
<div>
<table id="skills-table-wide">
<colgroup>
<col span="1">
<col span="2">
</colgroup>
<tbody>
<tr>
<td>Email</td>
<td><a href="mainto:root@tronnet.net">root@tronnet.net</a></td>
</tr>
<tr>
<td>GitHub</td>
<td><a href="https://github.com/ltcptgeneral">ltcptgeneral</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<footer>&copy; 2023 - Arthur Lu</footer>
</body>
</html>

81
notes.html
View File

@ -3,39 +3,54 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>root's class notes</title> <title>root's class notes</title>
<style> <link rel="stylesheet" href="styles/styles.css">
</style> <link rel="stylesheet" href="styles/cards.css">
</head> </head>
<body style="background-color:white;"> <body>
<a href = "index.html">return to root's homepage</a> <header>
<p>CSE</p> <nav>
<ul> <a href = "index.html">return to root's homepage</a>
<li><a href = "CSE 20.pdf" download>CSE 20 - Discrete Mathematics</a></li> </nav>
<li><a href = "CSE 21.pdf" download>CSE 21 - Mathematics for Algorithms and Systems</a></li> </header>
<li><a href = "CSE 100.pdf" download>CSE 100 - Advanced Data Structures & C++</a></li> <main>
<li><a href = "CSE 101.pdf" download>CSE 101 - Design and Analysis of Algorithms</a></li> <div class="single">
<li><a href = "CSE 110.pdf" download>CSE 110 - Software Engineering</a></li> <h2>CSE</h2>
<li><a href = "CSE 140.pdf" download> CSE 140 - Components and Design Techniques for Digital Systems </a></li> <ul>
<li><a href = "CSE 141.pdf" download> CSE 141 - Introduction to Computer Architecture </a></li> <li><a href = "notes/CSE 20.pdf" download>CSE 20 - Discrete Mathematics</a></li>
</ul> <li><a href = "notes/CSE 21.pdf" download>CSE 21 - Mathematics for Algorithms and Systems</a></li>
<p>ECE</p> <li><a href = "notes/CSE 100.pdf" download>CSE 100 - Advanced Data Structures & C++</a></li>
<ul> <li><a href = "notes/CSE 101.pdf" download>CSE 101 - Design and Analysis of Algorithms</a></li>
<li><a href = "ECE 35.pdf" download>ECE 35 - Introduction to Analog Design</a></li> <li><a href = "notes/CSE 110.pdf" download>CSE 110 - Software Engineering</a></li>
<li><a href = "ECE 45.pdf" download>ECE 45 - Circuits & Systems</a></li> <li><a href = "notes/CSE 140.pdf" download> CSE 140 - Components and Design Techniques for Digital Systems </a></li>
<li><a href = "ECE 65.pdf" download>ECE 65 - Components & Circuits Laboratory</a></li> <li><a href = "notes/CSE 141.pdf" download> CSE 141 - Introduction to Computer Architecture </a></li>
<li><a href = "ECE 101.pdf" download>ECE 101 - Linear Systems Fundamentals</a></li> </ul>
<li><a href = "ECE 111.pdf" download>ECE 111 - Advanced Digital Design Project</a></li> </div>
</ul> <div class="single">
<p>MATH</p> <h2>ECE</h2>
<ul> <ul>
<li><a href = "MATH 18.pdf" download>MATH 18 - Linear Algebra</a></li> <li><a href = "notes/ECE 35.pdf" download>ECE 35 - Introduction to Analog Design</a></li>
<li><a href = "MatLab.pdf" download>MatLab for Math 18</a></li> <li><a href = "notes/ECE 45.pdf" download>ECE 45 - Circuits & Systems</a></li>
<li><a href = "MATH 20C.pdf" download>MATH 20C - Calculus and Analytic Geometry</a></li> <li><a href = "notes/ECE 65.pdf" download>ECE 65 - Components & Circuits Laboratory</a></li>
<li><a href = "MATH 20D.pdf" download>MATH 20D - Introduction to Differential Equations</a></li> <li><a href = "notes/ECE 101.pdf" download>ECE 101 - Linear Systems Fundamentals</a></li>
</ul> <li><a href = "notes/ECE 111.pdf" download>ECE 111 - Advanced Digital Design Project</a></li>
<p>PHYS</p> </ul>
<ul> </div>
<li><a href = "PHYS 2C.pdf" download>PHYS 2C - Fluids, Waves, Thermodynamics, and Optics</a></li> <div class="single">
</ul> <h2>MATH</h2>
<ul>
<li><a href = "notes/MATH 18.pdf" download>MATH 18 - Linear Algebra</a></li>
<li><a href = "notes/MatLab.pdf" download>MatLab for Math 18</a></li>
<li><a href = "notes/MATH 20C.pdf" download>MATH 20C - Calculus and Analytic Geometry</a></li>
<li><a href = "notes/MATH 20D.pdf" download>MATH 20D - Introduction to Differential Equations</a></li>
</ul>
</div>
<div class="single">
<h2>PHYS</h2>
<ul>
<li><a href = "notes/PHYS 2C.pdf" download>PHYS 2C - Fluids, Waves, Thermodynamics, and Optics</a></li>
</ul>
</div>
</main>
<footer>&copy; 2023 - Arthur Lu</footer>
</body> </body>
</html> </html>

0
CSE 100.pdf → notes/CSE 100.pdf
View File

0
CSE 101.pdf → notes/CSE 101.pdf
View File

0
CSE 110.pdf → notes/CSE 110.pdf
View File

0
CSE 140.pdf → notes/CSE 140.pdf
View File

0
CSE 141.pdf → notes/CSE 141.pdf
View File

0
CSE 20.pdf → notes/CSE 20.pdf
View File

0
CSE 21.pdf → notes/CSE 21.pdf
View File

0
ECE 101.pdf → notes/ECE 101.pdf
View File

0
ECE 111.pdf → notes/ECE 111.pdf
View File

0
ECE 35.pdf → notes/ECE 35.pdf
View File

0
ECE 45.pdf → notes/ECE 45.pdf
View File

0
ECE 65.pdf → notes/ECE 65.pdf
View File

0
MATH 18.pdf → notes/MATH 18.pdf
View File

0
MATH 20C.pdf → notes/MATH 20C.pdf
View File

0
MATH 20D.pdf → notes/MATH 20D.pdf
View File

0
MatLab.pdf → notes/MatLab.pdf
View File

0
PHYS 2C.pdf → notes/PHYS 2C.pdf
View File

42
projects.html
View File

@ -2,20 +2,32 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>root's projects</title> <meta name="viewport" content="width=device-width">
<style> <title>My Projects - Arthur Lu</title>
</style> <link rel="stylesheet" href="styles/styles.css" type="text/css">
<link rel="stylesheet" href="styles/projects.css" type="text/css">
<link rel="icon" type="image/x-icon" href="/images/favicon.svg">
<script src="scripts/projects.js" type="module"></script>
</head> </head>
<body style="background-color:white;"> <body>
<a href = "index.html">return to root's homepage</a> <header>
<p>FRC</p> <h1 styles="margin: 10px;">My Projects</h1>
<ul> <nav>
<li><a href = "https://github.com/titanscouting/tra-analysis">tra-analysis</a></li> <a href="index.html">Go Back</a>
<li><a href = "https://github.com/titanscouting/tra-superscript">tra-superscript</a></li> </nav>
</ul> </header>
<p>ECE 45</p> <main>
<ul> <div class="flexbox" id="projects">
<li><a href = "https://github.com/ltcptgeneral/ece45-project">ECE 45 Final Project</a></li> </div>
</ul> </main>
<footer>&copy; 2023 - Arthur Lu</footer>
<template id="project-article">
<article>
<h2 id="project-name"></h2>
<p id="project-desc"></p>
<p id="project-lang"></p>
</article>
</template>
</body> </body>
</html> <footer>&copy; 2023 - Arthur Lu</footer>
</html>

24
scripts/projects.js Normal file
View File

@ -0,0 +1,24 @@
import { Octokit } from "https://cdn.skypack.dev/@octokit/core";
window.addEventListener("DOMContentLoaded", init);
async function init () {
const octokit = new Octokit()
let repos = await octokit.request('GET /users/ltcptgeneral/repos', {
username: 'ltcptgeneral'
});
let container = document.querySelector("#projects");
repos.data.forEach((element) => {
let content = document.querySelector("#project-article").content.cloneNode(true);
content.querySelector("#project-name").innerText = element.name;
content.querySelector("#project-desc").innerText = element.description;
content.querySelector("#project-lang").innerText = element.language;
content.querySelector("article").addEventListener("click", () => {
window.location.assign(element.html_url);
});
container.append(content)
});
}

77
styles/cards.css Normal file
View File

@ -0,0 +1,77 @@
/*
Styles for content cards, which are cards of twofold content.
Each card contains 2 halves, each can be populated with any content.
Cards alternate style from flat to popped out
*/
:root {
--card-bg-color: #222222;
--card-text-color: white;
}
.single {
margin-top: 40px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
max-width: 60ch;
width: auto;
}
.card {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
background-color: var(--card-bg-color);
color: var(--card-text-color);
border-radius: 40px;
padding: 20px;
}
/* Desktop card -> side by side */
@media screen and (min-width: 850px) {
/* Use grid view to show halves side by side, each with 50% of the space */
.card {
display: grid;
grid-template-columns: 50% 50%;
justify-items: center;
align-items: center;
}
.card img {
max-width: min(100%, 400px);
width: 25vw;
height: auto;
}
}
/* Phone or tablet card -> top to bottom */
@media screen and (max-width: 850px) {
/* Use grid view to show halves side by side, each with 50% of the space */
.card {
display: flex;
flex-direction: column;
align-items: center;
}
.card img {
max-width: min(100%, 400px);
width: 50vh;
height: auto;
}
}
/* Ensure halves are no more than 60 characters, and ensure 20px of separation between halves */
.card > * {
width: fit-content;
max-width: 60ch;
margin: 20px;
}
.card > * > *:first-child {
margin-top: 0px;
}
.card > * > *:last-child {
margin-bottom: 0px;
}
.card img {
border-radius: 20px;
}
.card[data-reverse] {
flex-direction: column-reverse;
}

11
styles/projects.css Normal file
View File

@ -0,0 +1,11 @@
article {
background-color: #DDD;
border: 1px solid black;
border-radius: 16px;
padding: 20px;
margin-top: 20px;
box-shadow: 10px 5px 5px black;
max-width: 60ch;
margin-left: auto;
margin-right: auto;
}

95
styles/styles.css Normal file
View File

@ -0,0 +1,95 @@
/*
Common styles across all pages, primarily content size and color and basic page layout styling
*/
/* Custom colors, which can be easily changed here */
:root {
--main-bg-color: white;
--main-text-color: black;
--accent-bg-color: black;
--accent-text-color: #AAAAFF;
}
/* Set default font and font weight */
* {
font-family: 'FreeMono', monospace;
font-weight: 600;
}
/* Set font size for common content items h1, h2, h3, p (aim for larger text) */
h1 {
text-align: center;
font-size: 4rem;
}
h2 {
text-align: center;
font-size: 2rem;
}
h3 {
text-align: center;
font-size: 1.5rem;
}
p {
font-size: 1.25rem;
}
/*
Styles to set the generic page layout, use a grid layout for body to ensure the footer stays in the bottom
Also make the header sticky, because users mgiht want navigation in the middle of the page
*/
body {
margin: 0px;
background-color: var(--main-bg-color);
color: var(--main-text-color);
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
header {
position: sticky;
top: 0;
z-index: 1;
}
header, footer {
padding: 10px;
background-color: var(--accent-bg-color);
color: var(--accent-text-color);
}
main {
padding: 10px;
height: 100%;
}
/* TODO: add responsiveness, temporarily use flex-wrap */
nav {
display: flex;
flex-wrap: wrap;
gap: 2ch;
justify-content: center;
}
nav a {
font-size: x-large;
color: var(--accent-text-color);
text-decoration: underline 0.1em var(--accent-bg-color);
transition: text-decoration-color 500ms;
}
nav a:hover {
text-decoration: underline 0.1em var(--accent-text-color);
}
/* Desktop - restrict content to around 1080px, which should be plenty of space*/
@media screen and (min-width: 1120px) {
main {
margin: auto;
width: 1080px;
}
}
/* Tablet or phone - use all of the avaliable space*/
@media screen and (max-width:1120px) {
}
/* footer styles */
footer {
text-align: center;
}

58
styles/tables.css Normal file
View File

@ -0,0 +1,58 @@
/*
Styles for tables, which are made more responsive
*/
@media screen and (min-width: 480px) {
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid var(--table-accent-color);
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: var(--table-accent-color);
}
tr:first-child {
border-top: 1px solid white;
}
tr {
border-bottom: 1px solid white;
}
}
/* I want to make the table more viewable on mobile, code largely adopted from https://css-tricks.com/responsive-data-tables/ */
/* Change table structure if using a very small viewport */
@media screen and (max-width: 480px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
visibility: hidden;
height: 0px;
}
tr:first-child {
border-top: 1px solid black;
}
tr {
border-bottom: 1px solid black;
}
table.labeled td {
/* Behave like a "row" */
position: relative;
padding-left: 50%;
padding-top: 10px;
padding-bottom: 10px;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 10px;
left: 10px;
width: 45%;
}
}