Skip to content

Commit

Permalink
Added expandable boxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Joanne-Lee20
Joanne-Lee20 committed May 22, 2024
1 parent b3358d5 commit 632942b
Show file tree
Hide file tree
Showing 3 changed files with 372 additions and 113 deletions.
228 changes: 152 additions & 76 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
<div id="websiteheader">
<!--Navigation-->
<ul>
<li id="nav"><button><a href="#rest">✦ Home</a></button></li>
<li id="nav"><button><a href="#about-me">✦ About Me</a></button></li>
<li id="nav"><button><a href="#portfolio">✦ Portfolio</a></button></li>
<li id="nav"><button><a href="#rest">HOME</a></button></li>
<li id="nav"><button><a href="#about-me">ABOUT</a></button></li>
<li id="nav"><button><a href="#portfolio">PORTFOLIO</a></button></li>
<li style="float:right">JOANNE LEE</li>
</ul>
</div>
Expand All @@ -32,9 +32,9 @@ <h1>JOANNE LEE</h1>
As a programmer and artist, I'm passionate about exploring the intersection between coding and design.
<br><br>Feel free to reach out to me through LinkedIn or my email below! <span id="blink">|</span>
</p>
<button id="blue"><a href="https://www.linkedin.com/in/joanne-lee-27aa5b290/" target=”_blank”>LinkedIn</a><img src='images\Icons\LinkedIn.png' id="icon" alt='LinkedIn' width="20"></button>
<button id="blue"><a href="https://github.com/Joanne-Lee20" target=”_blank”>GitHub</a><img src='images\Icons\Github.png' id="icon" alt='Github' width="25"></button>
<button id="blue"><a href="mailto:[email protected]" target=”_blank”>Email</a><img src='images\Icons\Email.png' id="icon" alt='Email' width="25"></button>
<button id="blue"><a href="https://www.linkedin.com/in/joanne-lee-27aa5b290/" target=”_blank”>LINKEDIN</a><img src='images\Icons\LinkedIn.png' id="icon" alt='LinkedIn' width="20"></button>
<button id="blue"><a href="https://github.com/Joanne-Lee20" target=”_blank”>GITHUB</a><img src='images\Icons\Github.png' id="icon" alt='Github' width="25"></button>
<button id="blue"><a href="mailto:[email protected]" target=”_blank”>EMAIL</a><img src='images\Icons\Email.png' id="icon" alt='Email' width="25"></button>
</ul>
</div></div>

Expand All @@ -44,22 +44,53 @@ <h1>JOANNE LEE</h1>
<div class="row" id="about-me">
<div class="col-lg-8">
<h2 id="about-me-h2">ABOUT ME</h2>
<p>
✦ ✦ ✦<br><br>
I took my first Java class in high school, but I began my coding journey by making dress-up games using Scratch in elementary school. I specialize in web and app development, working with HTML, CSS, Python Flask, JavaScript, and frameworks such as Bootstrap. Both in and out of the classroom, I strive to learn new programming concepts and bring my ideas to life.
As a member of the UMD Honors College (DCC Living Learning Program), the QUEST Honors Program, Kappa Phi Lambda Sorority Inc., and hackathon organizing teams, I value opportunities to collaborate on innovative projects that foster personal and professional growth.
<div class="expandable">
<div class="expandable__title-bar">
<span class="expandable__title"><strong>Hobbies</strong></span>
<ion-icon class="expandable_icon" name="chevron-back"></ion-icon>
<span class="expandable__title"><strong>CODING JOURNEY</strong></span>
<ion-icon class="expandable__icon" name="chevron-back"></ion-icon>
</div>
<div class="expandable__content-wrapper">
<div class="expandable__content">
<p>
My coding journey began when I started creating dress-up games for fun using Scratch in elementary school. I self-studied website development in middle school, and after taking a year to realize engineering wasn't for me, I took my first coding class in my sophomore year of high school: Principles of Java. Since then, I've studied object-oriented programming in Java, C, C++, and Python. I specialize in web and app development, and I've worked with HTML, CSS, Python Flask, JavaScript, and frameworks such as Bootstrap. Both in and out of the classroom, I strive to learn new programming concepts and bring my ideas to life.
</p>
</div>
</div>
</div>
<div class="expandable">
<div class="expandable__title-bar">
<span class="expandable__title"><strong>EDUCATION</strong></span>
<ion-icon class="expandable__icon" name="chevron-back"></ion-icon>
</div>
<div class="expandable__content-wrapper">
<div class="expandable__content">
<p>
<ul>
<li><strong>✦ Major:</strong> Computer Science</li>
<li><strong>✦ Year:</strong> Rising sophomore</li>
<li><strong>✦ Previously attended:</strong> Marriotts Ridge High School</li>
<li><strong>✦ Currently attending:</strong> University of Maryland, College Park (UMD)</li>
<li><strong>✦ Programs:</strong> UMD Honors College (Design Cultures and Creativity Living Learning Program), QUEST Honors Program</li>
<li><strong>✦ Academic Awards:</strong> National Merit Scholarship Finalist, UMD Dean's Scholarship recipient, Dean's List (Spring 2024), AP Scholar with Distinction</li>
</ul>
</p>
</div>
</div>
</div>
<div class="expandable">
<div class="expandable__title-bar">
<span class="expandable__title"><strong>HOBBIES</strong></span>
<ion-icon class="expandable__icon" name="chevron-back"></ion-icon>
</div>
<div class="expandable__content-wrapper">
<div class="expandable__content">
<p>
Some things I like to do other than code:
<ul>
<li>✦ Creating digital art</li>
<li>✦Learning new songs on the piano</li>
<li>✦ Playing badminton</li>
<li>✦ Create digital art</li>
<li>✦ Learn new songs on the piano</li>
<li>✦ Play badminton</li>
</ul>
</p>
</div>
Expand All @@ -77,84 +108,129 @@ <h2 id="about-me-h2">ABOUT ME</h2>
<h2>PORTFOLIO</h2>
<p>
✦ ✦ ✦<br><br>
Here is some of the design work I've completed over the course of 2022 - 2024.
Here are some coding, design, and art projects I've completed over the course of 2022 - 2024.
</p>
<div id="portfolio-category">
<h3>Organization Work</h3>
<div class="img-row">
<div class="img-column">
<img src="images\Orgs\stemfest.png">
</div>
<div class="img-column">
<img src="images\Orgs\quhacksposter.png">
<img src="images\Orgs\quhackslogo.jpg">
<img src="images\Orgs\quhackslogo2.jpg">
</div>
<div class="img-column">
<img src="images\Orgs\wireframe.png">

<div class="expandable2">
<div class="expandable2__title-bar">
<span class="expandable2__title"><h3>ORGS</h3></span>
<ion-icon class="expandable2__icon" name="chevron-back"></ion-icon>
</div>
<div class="expandable2__content-wrapper">
<div class="expandable2__content">
<div class="img-row">
<div class="img-column">
<img src="images\Orgs\stemfest.png">
</div>
<div class="img-column">
<img src="images\Orgs\quhacksposter.png">
<img src="images\Orgs\quhackslogo.jpg">
<img src="images\Orgs\quhackslogo2.jpg">
</div>
<div class="img-column">
<img src="images\Orgs\wireframe.png">
</div>
</div>
</div>
</div>
</div>
<div id="portfolio-category">
<h3>Digital Illustrations</h3>
<div class="img-row">
<div class="img-column">
<img src="images\Digital\webtoon.png">
<img src="images\Digital\gameover.png">
</div>
<div class="img-column">
<img src="images\Digital\school.jpeg">
<img src="images\Digital\name.png">
</div>
<div class="img-column">
<img src="images\Digital\screen.png">
<img src="images\Digital\playground.png">
<img src="images\origami.jpeg">
</div>
<div class="img-column">
<img src="images\Digital\playground.png">
<img src="images\Digital\room.png">
<img src="images\Digital\dodge.png">

<div class="expandable2">
<div class="expandable2__title-bar">
<span class="expandable2__title"><h3>DIGITAL</h3></span>
<ion-icon class="expandable2__icon" name="chevron-back"></ion-icon>
</div>
<div class="expandable2__content-wrapper">
<div class="expandable2__content">
<div class="img-row">
<div class="img-column">
<img src="images\Digital\webtoon.png">
<img src="images\Digital\gameover.png">
</div>
<div class="img-column">
<img src="images\Digital\school.jpeg">
<img src="images\Digital\name.png">
</div>
<div class="img-column">
<img src="images\Digital\screen.png">
<img src="images\Digital\playground.png">
<img src="images\origami.jpeg">
</div>
<div class="img-column">
<img src="images\Digital\playground.png">
<img src="images\Digital\room.png">
<img src="images\Digital\dodge.png">
</div>
</div>
</div>
</div>
</div>
<div id="portfolio-category">
<h3>Physical Artwork</h3>
<div class="img-row">
<div class="img-column">
<img src="images\Physical\birthday.jpg">
<img src="images\Physical\birds.jpg">
</div>
<div class="img-column">
<img src="images\Physical\culture.jpg">
<img src="images\Physical\museum.jpg">
</div>
<div class="img-column">
<img src="images\Physical\piano.jpg">
<img src="images\Physical\clothing.jpeg">
<img src="images\Physical\origami.jpeg">

<div class="expandable2">
<div class="expandable2__title-bar">
<span class="expandable2__title"><h3>PHYSICAL</h3></span>
<ion-icon class="expandable2__icon" name="chevron-back"></ion-icon>
</div>
<div class="expandable2__content-wrapper">
<div class="expandable2__content">
<div class="img-row">
<div class="img-column">
<img src="images\Physical\birthday.jpg">
<img src="images\Physical\birds.jpg">
</div>
<div class="img-column">
<img src="images\Physical\culture.jpg">
<img src="images\Physical\museum.jpg">
</div>
<div class="img-column">
<img src="images\Physical\piano.jpg">
<img src="images\Physical\clothing.jpeg">
<img src="images\Physical\origami.jpeg">
</div>
</div>
</div>
</div>
</div>
<div id="portfolio-category">
<h3>Animations and Video</h3>
<div class="row">
<div class="col-lg-6">
<img src='images\Videos\animation1.gif' alt='Animation' width=350>
<video width=350 controls="controls" preload="none">
<source src="images\Videos\animation2.mp4">
</video>

<div class="expandable2">
<div class="expandable2__title-bar">
<span class="expandable2__title"><h3>VIDEO</h3></span>
<ion-icon class="expandable2__icon" name="chevron-back"></ion-icon>
</div>
<div class="expandable2__content-wrapper">
<div class="expandable2__content">
<div class="row">
<div class="col-lg-6">
<img src='images\Videos\animation1.gif' alt='Animation' width=350>
<video width=350 controls="controls" preload="none">
<source src="images\Videos\animation2.mp4">
</video>
</div>
<div class="col-lg-6">
<video width=350 controls="controls" preload="none">
<source src="images\Videos\game.mp4">
</video>
</div>
</div>
</div>
<div class="col-lg-6">
<video width=350 controls="controls" preload="none">
<source src="images\Videos\game.mp4">
</video>
</div>
</div>
<div class="expandable2">
<div class="expandable2__title-bar">
<span class="expandable2__title"><h3>CODE - COMING SOON</h3></span>
<ion-icon class="expandable2__icon" name="chevron-back"></ion-icon>
</div>
<div class="expandable2__content-wrapper">
<div class="expandable2__content">
<p>
Still in development - Feel free to check out my GitHub in the meantime:
<br><button id="blue"><a href="https://github.com/Joanne-Lee20" target=”_blank”>GITHUB</a><img src='images\Icons\Github.png' id="icon" alt='Github' width="25"></button>
</p>
</div>
</div>
</div>
</div></div>
</div>

</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
Expand Down
23 changes: 23 additions & 0 deletions scripts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
document.body.addEventListener("click", (ev) => {
const isExpandableTitle = !!ev.target.closest(".expandable__title-bar");
const expandable = ev.target.closest(".expandable");

console.log(expandable);
if (isExpandableTitle) {
expandable.classList.toggle("expandable--open");
}

return;
});

document.body.addEventListener("click", (ev) => {
const isExpandableTitle = !!ev.target.closest(".expandable2__title-bar");
const expandable = ev.target.closest(".expandable2");

console.log(expandable);
if (isExpandableTitle) {
expandable.classList.toggle("expandable2--open");
}

return;
});
Loading

0 comments on commit 632942b

Please sign in to comment.