diff --git a/images/email.svg b/images/email.svg new file mode 100644 index 0000000..ab5daba --- /dev/null +++ b/images/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/favicon.svg b/images/favicon.svg new file mode 100644 index 0000000..6df3636 --- /dev/null +++ b/images/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/github.svg b/images/github.svg new file mode 100644 index 0000000..a36141f --- /dev/null +++ b/images/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/photo.webp b/images/photo.webp new file mode 100644 index 0000000..f56b019 Binary files /dev/null and b/images/photo.webp differ diff --git a/images/photo_100px.webp b/images/photo_100px.webp new file mode 100644 index 0000000..d21e0a2 Binary files /dev/null and b/images/photo_100px.webp differ diff --git a/images/photo_200px.webp b/images/photo_200px.webp new file mode 100644 index 0000000..9854769 Binary files /dev/null and b/images/photo_200px.webp differ diff --git a/index.html b/index.html index d19ea32..c720e74 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,136 @@ - - - - - root's homepage - - - - root's class notes -
- root's projects - - + + + + + + + + + About Me - Arthur Lu + + + +
+ +
+
+
+ + + + A portrait photo of Arthur Lu + +
+

Arthur Lu

+
    +
  • Developer
    • +
  • Engineer
    • +
  • Problem Solver
    • +
+
+
+
+

My Mission

+

I am a 3rd year Computer Engineering major at the University of California San Diego looking for opportunites in software development and system design.

+
+
+

My Education

+

3rd year Computer Engineering Major at UCSD

+

GPA: 3.9

+
+
+
+

My Languages and Skills

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LanguageExperienceFrameworks
C/C++2 Yearsgcc, make, Visual Studio
Java4 YearsAndroid Studio
Python5 YearsPyTorch, scipy, numpy, scikit-learn
Javascript1 YearES6, NodeJS, express.js
+

I also have experience with common technologies like Docker, lxc, nginx, and VMWare ESXi.

+
+
+
+
+

My Projects

+
+
+ Browse +
+
+
+

My Interests

+

I am interested in Machine Learning, cloud technologies, and distributed computing.

+
+
+
+

Contact Me

+
+
+ + + + + + + + + + + + + + + +
Emailroot@tronnet.net
GitHubltcptgeneral
+
+
+
+ + + \ No newline at end of file diff --git a/notes.html b/notes.html index c031213..f8c0e6a 100644 --- a/notes.html +++ b/notes.html @@ -3,39 +3,54 @@ root's class notes - + + - - return to root's homepage -

CSE

- -

ECE

- -

MATH

- -

PHYS

- + +
+ +
+
+
+

CSE

+ +
+
+

ECE

+ +
+
+

MATH

+ +
+
+

PHYS

+ +
+
+ diff --git a/CSE 100.pdf b/notes/CSE 100.pdf similarity index 100% rename from CSE 100.pdf rename to notes/CSE 100.pdf diff --git a/CSE 101.pdf b/notes/CSE 101.pdf similarity index 100% rename from CSE 101.pdf rename to notes/CSE 101.pdf diff --git a/CSE 110.pdf b/notes/CSE 110.pdf similarity index 100% rename from CSE 110.pdf rename to notes/CSE 110.pdf diff --git a/CSE 140.pdf b/notes/CSE 140.pdf similarity index 100% rename from CSE 140.pdf rename to notes/CSE 140.pdf diff --git a/CSE 141.pdf b/notes/CSE 141.pdf similarity index 100% rename from CSE 141.pdf rename to notes/CSE 141.pdf diff --git a/CSE 20.pdf b/notes/CSE 20.pdf similarity index 100% rename from CSE 20.pdf rename to notes/CSE 20.pdf diff --git a/CSE 21.pdf b/notes/CSE 21.pdf similarity index 100% rename from CSE 21.pdf rename to notes/CSE 21.pdf diff --git a/ECE 101.pdf b/notes/ECE 101.pdf similarity index 100% rename from ECE 101.pdf rename to notes/ECE 101.pdf diff --git a/ECE 111.pdf b/notes/ECE 111.pdf similarity index 100% rename from ECE 111.pdf rename to notes/ECE 111.pdf diff --git a/ECE 35.pdf b/notes/ECE 35.pdf similarity index 100% rename from ECE 35.pdf rename to notes/ECE 35.pdf diff --git a/ECE 45.pdf b/notes/ECE 45.pdf similarity index 100% rename from ECE 45.pdf rename to notes/ECE 45.pdf diff --git a/ECE 65.pdf b/notes/ECE 65.pdf similarity index 100% rename from ECE 65.pdf rename to notes/ECE 65.pdf diff --git a/MATH 18.pdf b/notes/MATH 18.pdf similarity index 100% rename from MATH 18.pdf rename to notes/MATH 18.pdf diff --git a/MATH 20C.pdf b/notes/MATH 20C.pdf similarity index 100% rename from MATH 20C.pdf rename to notes/MATH 20C.pdf diff --git a/MATH 20D.pdf b/notes/MATH 20D.pdf similarity index 100% rename from MATH 20D.pdf rename to notes/MATH 20D.pdf diff --git a/MatLab.pdf b/notes/MatLab.pdf similarity index 100% rename from MatLab.pdf rename to notes/MatLab.pdf diff --git a/PHYS 2C.pdf b/notes/PHYS 2C.pdf similarity index 100% rename from PHYS 2C.pdf rename to notes/PHYS 2C.pdf diff --git a/projects.html b/projects.html index 4e0f2f5..07df43c 100644 --- a/projects.html +++ b/projects.html @@ -2,20 +2,32 @@ - root's projects - + + My Projects - Arthur Lu + + + + - - return to root's homepage -

FRC

- -

ECE 45

- + +
+

My Projects

+ +
+
+
+
+
+ + - + + \ No newline at end of file diff --git a/scripts/projects.js b/scripts/projects.js new file mode 100644 index 0000000..7501625 --- /dev/null +++ b/scripts/projects.js @@ -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) + }); +} \ No newline at end of file diff --git a/styles/cards.css b/styles/cards.css new file mode 100644 index 0000000..81ac2cf --- /dev/null +++ b/styles/cards.css @@ -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; +} \ No newline at end of file diff --git a/styles/projects.css b/styles/projects.css new file mode 100644 index 0000000..8b52bac --- /dev/null +++ b/styles/projects.css @@ -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; +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..12be234 --- /dev/null +++ b/styles/styles.css @@ -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; +} \ No newline at end of file diff --git a/styles/tables.css b/styles/tables.css new file mode 100644 index 0000000..8e84604 --- /dev/null +++ b/styles/tables.css @@ -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%; + } +} \ No newline at end of file