diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..710337d --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +stellayang.dev \ No newline at end of file diff --git a/about.html b/about.html new file mode 100644 index 0000000..b8d96bb --- /dev/null +++ b/about.html @@ -0,0 +1,103 @@ + + + + Qualifications + + + + + + + +
+ Home +
+
+
+
+

About Me

+
+ GitHub +
+
+

Sixty-seven thousand users and counting. What I originally + envisioned + as just a casual summer Discord bot project for collecting + characters from shows in a trading card fashion, garnered + more + attention than what me and the team I led could ever + expected. +
+ I love to build, to create, to make something my very own + from + nothing. I have loved the craft of engineering since the + times I + could pick up a wooden block. Throughout my experiences with + drag-and-drop programming as a child and more powerful + programming + languages like Java and Python, I have found that Computer + Science + is the most accessible way to construct projects in our + modern + world. Regardless of identity, status, or environment, an + internet + connection unlocks access to the world's most powerful + toolkit. +
+ Now, I am pursuing a bachelor's degree in Computer Science + at + Texas + A&M to advance my current mostly self-taught understanding + and + go on + to build bigger and better projects. Specifically within + Computer + Science, I am interested in Data Science and Cybersecurity. +

+
+ Highlight of Experiences:
+
    +
  • Published a scientific peer-reviewed paper in the + journal + Solar Energy that detailed the transformation of the + solar + cell + material double perovskite to halve the costs of solar + panels + and entirely eliminate toxic byproduct production
    • +
  • Designed an AI model that predicts computational fluid + dynamic simulations set-up which would cut back + thousands of + dollars and hours for training. Research paper currently + under + review.
    • +
  • Assembled sample machine learning model and standardized + benchmarks at MSBAI that was responsible for a critical + part + of + developing the AI agent GURU. This service was later + selected + by the U.S. Air Force for the $1 million contract AFWERX + Small + Business Innovation Research Phase II Contract.
    • +
  • Conducted and cleanly compiled thorough, efficient, and + timely due diligence research at MicroVentures which + supported + many successful offerings on the platform such as Sila + Nanotechnologies which raised $655 thousand within 24 + hours.
    • +
+
+
+
+

LOADING

+

FPLNZY

+

RFSTBM

+

ESDPJO

+

JKTXHG

+

VCTBQZ

+

TEPJOV

+

BEAUZQ

+
+
+ \ No newline at end of file diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..6c681ec --- /dev/null +++ b/blog.html @@ -0,0 +1,34 @@ + + + + Blog + + + + + + + +
+ Home +
+
+
+
+

Blog

+
+

Coming soon!

+
+
+
+

LOADING

+

FPLNZY

+

RFSTBM

+

ESDPJO

+

JKTXHG

+

VCTBQZ

+

TEPJOV

+

BEAUZQ

+
+
+ \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..cdf246c --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + Stella Yang + + + + + + + + + +
+
+
+ + +
+
+ + +
+ +
+
+ + + diff --git a/media/Eric_Yang_Resume.pdf b/media/Eric_Yang_Resume.pdf new file mode 100644 index 0000000..68fe8b5 Binary files /dev/null and b/media/Eric_Yang_Resume.pdf differ diff --git a/media/Tech_Fellow_Leadership.pdf b/media/Tech_Fellow_Leadership.pdf new file mode 100644 index 0000000..0e80a46 Binary files /dev/null and b/media/Tech_Fellow_Leadership.pdf differ diff --git a/media/favicon.ico b/media/favicon.ico new file mode 100644 index 0000000..ec1c6a4 Binary files /dev/null and b/media/favicon.ico differ diff --git a/media/images/Cs2AgBiBr6_comparison.png b/media/images/Cs2AgBiBr6_comparison.png new file mode 100644 index 0000000..dee583a Binary files /dev/null and b/media/images/Cs2AgBiBr6_comparison.png differ diff --git a/media/images/FloverLogo.png b/media/images/FloverLogo.png new file mode 100644 index 0000000..ecb0351 Binary files /dev/null and b/media/images/FloverLogo.png differ diff --git a/media/images/Nibbles.png b/media/images/Nibbles.png new file mode 100644 index 0000000..fadac1c Binary files /dev/null and b/media/images/Nibbles.png differ diff --git a/media/images/banner.jpg b/media/images/banner.jpg new file mode 100644 index 0000000..246fdc8 Binary files /dev/null and b/media/images/banner.jpg differ diff --git a/media/images/cloud0.jpg b/media/images/cloud0.jpg new file mode 100644 index 0000000..c4d957e Binary files /dev/null and b/media/images/cloud0.jpg differ diff --git a/media/images/cloud1.jpg b/media/images/cloud1.jpg new file mode 100644 index 0000000..02c875c Binary files /dev/null and b/media/images/cloud1.jpg differ diff --git a/media/images/cloud2.jpg b/media/images/cloud2.jpg new file mode 100644 index 0000000..45efb99 Binary files /dev/null and b/media/images/cloud2.jpg differ diff --git a/media/images/cloud3.jpg b/media/images/cloud3.jpg new file mode 100644 index 0000000..7417781 Binary files /dev/null and b/media/images/cloud3.jpg differ diff --git a/media/images/cloud4.jpg b/media/images/cloud4.jpg new file mode 100644 index 0000000..ba01e13 Binary files /dev/null and b/media/images/cloud4.jpg differ diff --git a/media/images/codepath_lecture.jpg b/media/images/codepath_lecture.jpg new file mode 100644 index 0000000..c0cc1f7 Binary files /dev/null and b/media/images/codepath_lecture.jpg differ diff --git a/media/images/ctf.png b/media/images/ctf.png new file mode 100644 index 0000000..f887baa Binary files /dev/null and b/media/images/ctf.png differ diff --git a/media/images/full_body.jpg b/media/images/full_body.jpg new file mode 100644 index 0000000..87dc605 Binary files /dev/null and b/media/images/full_body.jpg differ diff --git a/media/images/logo.png b/media/images/logo.png new file mode 100644 index 0000000..3ec1a9a Binary files /dev/null and b/media/images/logo.png differ diff --git a/media/images/weights.png b/media/images/weights.png new file mode 100644 index 0000000..b52ddf0 Binary files /dev/null and b/media/images/weights.png differ diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..b08f57b --- /dev/null +++ b/projects.html @@ -0,0 +1,275 @@ + + + + Projects + + + + + + + +
+ Home +
+
+
+
+

Projects

+
+
+
+ +

Computational Fluid Dynamics Simulation Artificial + Intelligence Model

+
    +
  • + Developed artificial + intelligence model that generates settings for + non-expert users + which removes technical barrier and saves an + average + of $10,000 per project +
    • +
  • + Constructed standardized benchmarks to compare + Auto + Machine Learning model prototypes. +
    • +
  • + The project was chosen by the U.S. Air Force for + the + $1 million AFWERX Small Business + Innovation Research contract +
    • +
  • + Collaborated on project + progress and provided weekly update to the + team working with + core engineers to trouble shoot +
    • +
  • + Built machine learning model from scratch + for the + example data set as another standard + for the comparison of the AutoML models +
    • +

    +
+ +
+ +

Discord Entertainment Bot

+

+

  • Conceptualized project + to encourage community engagement and + activity
    • +
  • Organized team of four + developers behind the bot that serves over + 67K users
    • +
  • Introduces a user economy, birthday reminder, + to do list, and remind scheduler features +
    • +

    + +

    +
    + +
    + +

    CodePath Tech Fellow

    +

    + I was selected by CodePath to be a Tech Fellow in + teaching a ten-week introduction to + cybersecurity course emphasizing on web + vulnerabilities. + The course's structure and accessibility + helped many students with absolutely no + experience to make that most difficult first + step + into the field. + The team of four tech fellows promoted the course + and received 100+ applications to join. + I lead efforts in diligently preparing course + material to ease students into difficult and + abstract concepts. + Some topics we cover are: IDOR, Sessions, XSS, + SQL + Injection, Crypto, User Authentication

    + +
    +
    +
    +
    + + +

    Double Perovskite Solar Cell Material

    +
      +
    • + Theoretically compressed + Double Perovskites A2BB'X6 to improve + performance as a solar cell + material +
      • +
    • + Decreased the bandgap of crystals by up to 35%, + largely increasing the viability of these + crystals to be used as solar cell materials + Discussed the preparation of an environmentally + friendly material as a solar cell material + to reduce pollution from solar energy + production. +
      • +
    • + Condense key information from 300+ academic + articles + in ten weeks +
      • +
    • + Published in the journal Solar Energy hosted on + Elsevier with a 7.188 impact factor score + and 7 citations in 2 years +
      • +

      + +
    + +
    + +

    Hackathon Projects

    +

    + I attended HowdyHack 2021 and won the Best UI + Award + in which I was responsible for programming + the main logic and core mechanics of the game. + I have also participated in TAMUDatathon 2021 as + well as TAMUHack 2022. Through the hackathons, + I have dove deep and learned about web + development, + Python GUI management, and graphical data + analysis. +

    + +
    + +
    + +

    Cybersecurity Capture The Flag (CTF) + Competitions

    +

    + These competitions are gamified cybersecurity + exercises that involve competing (often in + teams) + to find flags hidden behind + various insecure infrastructure that may exist + among + many of our digital devices if not + mitigated properly. +

  • Cybersecurity Club CTF + - 1st with $1000 prize
    • +
  • NCL - Top 100% Team, Top + 93% Solo
    • +
  • MetaCTF - 18th in U.S.
    • +
  • NSA Codebreakers Challenge + - Completed Task 0-6
    • +
  • BuckeyeCTF - 2nd Place in + U.S. Undergrad Category
    • +

    + +
    +
    +
    +
    +
    +

    LOADING

    +

    FPLNZY

    +

    RFSTBM

    +

    ESDPJO

    +

    JKTXHG

    +

    VCTBQZ

    +

    JKTXHG

    +

    QUWVIP

    +

    RFSTBM

    +

    BTAWHR

    +

    GSDMOX

    +

    ZKJOEM

    +

    RWQNIH

    +

    YJVBLF

    +

    HCPVNT

    +

    QUWVIP

    +

    RFSTBM

    +

    BTAWHR

    +

    GSDMOX

    +

    ZKJOEM

    +

    RWQNIH

    +

    YJVBLF

    +

    HCPVNT

    +

    FPLNZY

    +

    RFSTBM

    +

    ESDPJO

    +

    JKTXHG

    +

    VCTBQZ

    +

    JKTXHG

    +

    QUWVIP

    +

    RFSTBM

    +

    BTAWHR

    +

    GSDMOX

    +

    QUWVIP

    +

    RFSTBM

    +

    FPLNZY

    +

    HCPVNT

    +

    QUWVIP

    +

    RFSTBM

    +

    BTAWHR

    +

    GSDMOX

    +

    ZKJOEM

    +

    RWQNIH

    +

    YJVBLF

    +

    HCPVNT

    +

    ESDPJO

    +

    JKTXHG

    +

    VCTBQZ

    +

    JKTXHG

    +
    +
    + diff --git a/scripts/block.js b/scripts/block.js new file mode 100644 index 0000000..713320a --- /dev/null +++ b/scripts/block.js @@ -0,0 +1,50 @@ +const timer = ms => new Promise(res => setTimeout(res, ms)) + +async function load () { + while (true) { + randomize(); + await timer(1750); + } +} + +function randomize() { + // string generator + word = function () { + let result = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + let counter = 0; + while (counter < 6) { + let next = characters.charAt(Math.floor(Math.random() * 26)); + if (result.includes(next)) { + continue; + } + result += next; + counter += 1; + } + return result; + } + + var wall = document.getElementsByClassName("wall"); + for (var i = 0; i < wall.length; i++) { + wall[i].innerHTML = word(); + } +} + + +load(); + +// on scroll keep top bar fixed + +window.onscroll = function () { sticky_nav_bar() }; + +function sticky_nav_bar() { + var navbar = document.getElementById("topnav"); + + var sticky = navbar.offsetTop; + + if (window.pageYOffset >= sticky) { + navbar.classList.add("sticky") + } else { + navbar.classList.remove("sticky"); + } +} \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..98418da --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,60 @@ +let p = document.createElement("p"); +let touch = false; + +if ("ontouchstart" in document.documentElement) { + touch = true; + document.addEventListener("DOMContentLoaded", (event) => { + let p = document.createElement("p"); + p.textContent = "PROJECTS"; + document.getElementById("left").appendChild(p); + p = document.createElement("p"); + p.textContent = "BLOG"; + document.getElementById("mid").appendChild(p); + p = document.createElement("p"); + p.textContent = "STELLA"; + document.getElementById("right").appendChild(p); + }); +} +// hover animation + +function emphasize(div) { + if (touch) + return; + const rects = document.getElementById("wrapper").children + div.setAttribute("expanded", "t"); + div.style = "z-index: 1"; + clearTimeout(div.timeout); + + if (div.id == "left") + p.textContent = "PROJECTS"; + else if (div.id == "mid") + p.textContent = "BLOG"; + else if (div.id == "right") + p.textContent = "STELLA"; + div.appendChild(p); + + for (let i = 0; i < rects.length; i++) + if (rects[i] != div) + rects[i].style = "z-index: 0"; +} + +function reset(div) { + if (touch) + return; + div.setAttribute("expanded", "f"); + div.style = "z-index: 1"; + + if (p) { + div.removeChild(p); + } + + div.timeout = setTimeout(() => { + div.style = "z-index: 0"; + }, div.id == "mid" ? 750 : 1000); +} + +document.addEventListener("DOMContentLoaded", (event) => { + // [0, 8) + const bg_dir = Math.floor(Math.random() * 8); + document.getElementById("frame").setAttribute("bg", bg_dir); +}); \ No newline at end of file diff --git a/styles/block.css b/styles/block.css new file mode 100644 index 0000000..18e1afc --- /dev/null +++ b/styles/block.css @@ -0,0 +1,260 @@ +@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); + + +/* clear top left */ +html, +body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + background-color: #2e303d; +} + +/* nav bar */ +#topnav { + font-family: 'Space Mono', monospace; + background-color: #2b2b2b; + overflow: hidden; + z-index: 5; +} + +#topnav a#active{ + background-color: #0081a7; +} + +#topnav a { + float: left; + color: #f2f2f2; + text-decoration: none; + padding: 10px 15px; + font-size: 20px; +} + +#topnav a:hover { + background-color: #fed9b7; + color: black; +} + +#topnav div { + float: right; +} + +.sticky { + position: fixed; + top: 0; + width: 100%; +} + +.sticky+#body { + padding-top: 45px; +} + + +/* the switch */ +#switch { + position: relative; + /* display: inline-block; */ + width: 40px; + height: 23px; + padding: 3px; + float: right; +} + +#switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #0081a7; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 23px; + width: 23px; + left: 3px; + top: 3px; + background-color: white; + transition: .4s; +} + +input:checked+.slider { + background-color: white; +} + +input:checked+.slider:before { + transform: translateX(17px); +} + +.slider.round { + border-radius: 25px; +} + +.slider.round:before { + border-radius: 50%; +} + +/* actual page */ +#body { + background-color: #2e303d; + color: #f2f2f2; + font-family: 'Space Mono', monospace; + font-size: 20px; + margin: 0; + width: 100%; + overflow: hidden; + + /* border-style: solid; + border-color: white; */ + display: flex; +} + +.col { + float: left; + /* border for testing */ + /* border-style: solid; + border-color: white; */ +} + +.left { + width: 75%; + display: flex; + flex-direction: column; + align-items: center; + /* margin: 0rem; */ + + /* make the right side border white for column divider*/ + border-right-style: solid; + border-right-color: white; +} + +.left h3 { + text-align: left; +} + +.right { + /* width: 19.3%; */ + width: 25%; + font-size: 150px; + overflow-inline: auto; + overflow-y: hidden; + + background-color: #2e303d; + /* margin: 0rem; */ + /* font-size: clamp(3rem, 10vw, 10rem); */ + color: white; + padding: 0rem clamp(1rem, 2vw, 3rem); + letter-spacing: 50px; + overflow: hidden; + +} + +.right>.wall { + margin: 0; + opacity: 0.75; + text-shadow: 10px 5px 5px rgba(102, 102, 102, 0.75); + line-height: 1; +} + +.right>.wall.alt { + margin-left: -0.5em; +} + +h1 { + font-size: 50px; + text-align: center; +} + +.left.col a { + text-decoration: none; + text-align: center; + + position: relative; + display: inline-block; + margin: 16px; + padding: 8px 16px; + border-width: 4px; + border-radius: 2px; + font-size: 16px; + font-weight: 500; + + border-style: solid; + border-color: white; + background-color: #2e303d; + color: white; +} + +.left.col a:hover { + background-color: white; + color: black; +} + +#socials { + display: flex; +} + +#socials>p { + margin-left: 20px; + margin-right: 20px; +} + +#paragraph { + width: 80%; +} + +.subheading { + margin-top: -2.5%; + opacity: .8; +} + +.box.special li,p{ + text-align: left; +} + +#two-col { + width: 90%; +} + +#two-col > .col { + flex: 1; +} + +.box.special { + text-align: center; +} + +.box { + background-color: #232323; + border-radius: 6px; + box-shadow: 0 2px 0 0 #e5e5e5; + margin: 0 0 2em 0; + padding: 3em; +} + +section { + display: block; + border: 0; + color: white; + letter-spacing: -0.015em; +} + +.box .image.featured img { + border-radius: 6px 6px 0 0; + width: 45em; + object-fit: cover; +} + +.actions.special { + list-style-type: none; +} diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..7172c61 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,248 @@ +html, +body { + overflow-x: hidden; + overflow-y: hidden; + height: 100vh; + width: 100vw; + margin: 0; +} + +/* active home button */ +#topnav a.active { + background-color: var(--accent-1); +} + +@keyframes background-pan-0 { + from { + background-position: 0% 0%; + } + + to { + background-position: 0% -400%; + } +} + +@keyframes background-pan-1 { + from { + background-position: 0% 0%; + } + + to { + background-position: -200% -200%; + } +} + +@keyframes background-pan-2 { + from { + background-position: 0% 0%; + } + + to { + background-position: -400% 0%; + } +} + +@keyframes background-pan-3 { + from { + background-position: 0% 0%; + } + + to { + background-position: -200% 200%; + } +} + +@keyframes background-pan-4 { + from { + background-position: 0% 0%; + } + + to { + background-position: 0% 400%; + } +} + +@keyframes background-pan-5 { + from { + background-position: 0% 0%; + } + + to { + background-position: 200% 200%; + } +} + +@keyframes background-pan-6 { + from { + background-position: 0% 0%; + } + + to { + background-position: 400% 0%; + } +} + +@keyframes background-pan-7 { + from { + background-position: 0% 0%; + } + + to { + background-position: 200% -200%; + } +} + + +#frame { + left: 0%; + top: 0%; + height: 100vh; + width: 100vw; + display: flex; + + font-family: 'Space Mono', monospace; + font-weight: 800; + + overflow: hidden; + + background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 2.5px, transparent 8%), var(--bg); + background-size: 50px 50px; + background-position: 0% 0%; + animation-duration: 100s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +#frame[bg="0"] { + animation-name: background-pan-0; +} + +#frame[bg="1"] { + animation-name: background-pan-1; +} + +#frame[bg="2"] { + animation-name: background-pan-2; +} + +#frame[bg="3"] { + animation-name: background-pan-3; +} + +#frame[bg="4"] { + animation-name: background-pan-4; +} + +#frame[bg="5"] { + animation-name: background-pan-5; +} + +#frame[bg="6"] { + animation-name: background-pan-6; +} + +#frame[bg="7"] { + animation-name: background-pan-7; +} + +@media (prefers-reduced-motion) { + #frame { + animation-duration: 300s; + } +} + +#wrapper { + left: 50%; + top: 50%; + position: absolute; + transform: translate(-50%, -50%); + height: 35vh; + width: 60vw; + + display: grid; + z-index: 1; +} + +#wrapper>div { + width: 30%; + height: 100%; + position: absolute; + + transition: left, top, height, width, border-radius; + transition-timing-function: ease-in; + cursor: pointer; + + z-index: 1; +} + +/* text display */ +#wrapper>div { + font-size: 18vh; + display: flex; + overflow: hidden; +} + +#wrapper>div>i { + margin: auto; +} + +#wrapper>div>p { + margin: auto; +} + +#wrapper>div#left { + left: 0%; + background-color: var(--accent-1); + transition-duration: 1000ms; +} + +#wrapper>div#mid { + left: 35%; + background-color: var(--accent-2); + transition-duration: 750ms; +} + +#wrapper>div#right { + left: 70%; + background-color: var(--accent-3); + transition-duration: 1000ms; +} + +/* needs to be more specific */ +#wrapper>div#mid:hover, +#wrapper>div#right:hover { + left: 0; +} + +#wrapper>div[expanded="t"] { + width: 100%; +} + +@media not (hover: hover) { + #wrapper { + transform: translate(-50%, -40%); + display: flex; + flex-direction: column; + height: 80%; + } + + #wrapper>div { + height: 20%; + width: 100%; + } + + #wrapper>div#left, + #wrapper>div#mid, + #wrapper>div#right { + left: 0; + font-size: 10vw; + } + + #wrapper>div#mid { + top: 30%; + } + + #wrapper>div#right { + top: 60%; + } +} \ No newline at end of file diff --git a/styles/terminal.css b/styles/terminal.css new file mode 100644 index 0000000..a496b20 --- /dev/null +++ b/styles/terminal.css @@ -0,0 +1,76 @@ +/* terminal window */ + +.window { + width: 80%; + margin: 0 auto 2rem; + margin-top: 2rem; + box-shadow: 0 0.25rem 0.5rem #12181e; + border-radius: 0 0 0.1rem 0.1rem; +} + +.bar { + background: #191919; + height: 36px; + border-radius: 0.5rem 0.5rem 0 0; +} + +.btn { + background: #f6b73e; + position: relative; + margin-left: 38px; + top: 12px; +} + +.btn::before, +.btn::after, +.btn { + width: 12px; + height: 12px; + border-radius: 100%; + display: block; +} + +.btn::before, +.btn::after { + content: " "; + position: absolute; +} + +.btn::before { + background: #f55551; + margin-left: -20px; +} + +.btn::after { + background: #32c146; + margin-left: 20px; +} + +.window-content { + background: #232323; + padding: 20px; +} + +.comment { + opacity: .5; +} + +.window-content .var { + color: #0081a7; + background-color: rgba(0, 0, 0, 0); +} + +.window-content .key { + color: #f07167; + background-color: rgba(0, 0, 0, 0); +} + +.window-content .bracket { + color: #fed9b7; + background-color: rgba(0, 0, 0, 0); +} + +.window-content .curly { + color: #00afb9; + background-color: rgba(0, 0, 0, 0); +} \ No newline at end of file diff --git a/styles/theme.css b/styles/theme.css new file mode 100644 index 0000000..2228b64 --- /dev/null +++ b/styles/theme.css @@ -0,0 +1,7 @@ +:root { + --bg: #2e303d; + --fg: white; + --accent-1: #BDE0FE; + --accent-2: #A2D2FF; + --accent-3: #FFC8DD; +}