diff --git a/css/overlay.css b/css/overlay.css new file mode 100644 index 0000000..e88e924 --- /dev/null +++ b/css/overlay.css @@ -0,0 +1,42 @@ +.overlay-container { + position: relative; + max-width: 1080px; + margin-left: auto; + margin-right: auto; +} + +.overlay-container .image { + display: block; + width: 100%; + height: auto; +} + +.overlay-container .overlay-mask { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0); + color: rgba(0, 0, 0, 0); + transition-property: color, background-color; + transition-duration: 0.25s, 0.25s; + transition-timing-function: ease-in-out; +} + +.overlay-container:hover .overlay-mask { + background-color: rgba(0, 0, 0, 0.7); + color: rgba(255, 255, 255, 1); +} + +.overlay-container .overlay-content { + padding-left: 15%; + padding-right: 15%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + text-decoration: none; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..ffae2a3 --- /dev/null +++ b/css/style.css @@ -0,0 +1,39 @@ +html { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, td { + font-family: monospace; +} + +body { + margin-left: 16px; + margin-right: 16px; + width: calc(100% - 16px - 16px); +} + +header { + margin-top: 50px; + text-align: center; +} + +h1 a { + text-decoration: none; +} + +nav { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + column-gap: 4ch; + justify-content: center; +} + +nav a { + text-decoration: none; + font-size: larger; +} + +main { + text-align: center; +} \ No newline at end of file diff --git a/images/photo.webp b/images/photo.webp deleted file mode 100644 index f56b019..0000000 Binary files a/images/photo.webp and /dev/null differ diff --git a/images/photo_100px.webp b/images/photo_100px.webp deleted file mode 100644 index d21e0a2..0000000 Binary files a/images/photo_100px.webp and /dev/null differ diff --git a/images/photo_200px.webp b/images/photo_200px.webp deleted file mode 100644 index 9854769..0000000 Binary files a/images/photo_200px.webp and /dev/null differ diff --git a/index.html b/index.html index 4c8c9ff..35e0f45 100644 --- a/index.html +++ b/index.html @@ -3,134 +3,32 @@ - - - - About Me - Arthur Lu - + Projects - Arthur Lu + + + +
+

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
-
-
+
+ +
+ +

Pico BMC

+

Add remote management features to any motherboard.

+ +
+
- + \ No newline at end of file diff --git a/notes.html b/notes.html index 3dad919..5c94998 100644 --- a/notes.html +++ b/notes.html @@ -1,19 +1,16 @@ - - root's class notes - - + + + Class Notes - Arthur Lu + + -
- -
-
+

Class Notes

+

CSE

-
-
+ +

ECE

-
-
+ +

MATH

-
-
+ +

PHYS

-
+
diff --git a/projects.html b/projects.html deleted file mode 100644 index 36b6dcb..0000000 --- a/projects.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - My Projects - Arthur Lu - - - - - - -
-

My Projects

- -
-
-
-
-
- - - - \ No newline at end of file diff --git a/projects/pico_bmc.jpg b/projects/pico_bmc.jpg new file mode 100644 index 0000000..f14f2c7 Binary files /dev/null and b/projects/pico_bmc.jpg differ diff --git a/scripts/projects.js b/scripts/projects.js deleted file mode 100644 index 1f45b33..0000000 --- a/scripts/projects.js +++ /dev/null @@ -1,24 +0,0 @@ -import { Octokit } from "https://esm.sh/octokit"; - -window.addEventListener("DOMContentLoaded", init); - -async function init () { - const octokit = new Octokit() - - let repos = await octokit.request('GET /users/ltcptgeneral/starred', { - 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 deleted file mode 100644 index 83ee8eb..0000000 --- a/styles/cards.css +++ /dev/null @@ -1,87 +0,0 @@ -/* -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; - --link-text-color: #AAAAFF; -} - -.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; -} -.card a { - font-size: large; - color: var(--accent-text-color); - text-decoration: underline 0.1em var(--card-bg-color); - transition: text-decoration-color 500ms; -} -.card a:hover { - text-decoration: underline 0.1em var(--link-text-color); -} \ No newline at end of file diff --git a/styles/projects.css b/styles/projects.css deleted file mode 100644 index 8b52bac..0000000 --- a/styles/projects.css +++ /dev/null @@ -1,11 +0,0 @@ -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 deleted file mode 100644 index 5468ace..0000000 --- a/styles/styles.css +++ /dev/null @@ -1,95 +0,0 @@ -/* -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 deleted file mode 100644 index 8e84604..0000000 --- a/styles/tables.css +++ /dev/null @@ -1,58 +0,0 @@ -/* -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