Skip to content

Commit

Permalink
finished landing page with aboutMe and main page complete
Browse files Browse the repository at this point in the history
  • Loading branch information
@ycho1908
ycho1908 committed Jul 25, 2024
1 parent d0e6e35 commit b11b70d
Show file tree
Hide file tree
Showing 8 changed files with 110 additions and 55 deletions.
54 changes: 44 additions & 10 deletions aboutMe.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,27 +20,61 @@
<!-- Header -->
<header id="header">
<h1>About Me</h1>
<p>Second Year Computer Science Student</p>
</header>

<!-- Main -->
<div id="main">

<!-- Content -->
<section id="content" class="main">
<!-- <span class="image main"><img src="images/pic04.jpg" alt="" /></span> -->
<h1>More about my involvement at UCLA</h1>
<h1>My club involvement at UCLA</h1>
<h2>Society of Women Engineers - <em>Student Relations Director</em></h2>
<h3>Oct 2023 - Current</h3>
<p><em>Part of the board member, leading Internal Affairs Committee along with Internal Vice President</em><br/>
Involved throughout first year as Activity Lead in the Internal Affairs Committee<br/>
Accomplishments: spearheaded events with 70+ engineering students through Mocktail Networking Night, Bouquet Making Socials, Research Networking Event, etc.</p>
<div class="two-column-container" style="display: flex; gap: 20px;">
<div class="column" style="flex: 1; padding: 10px;">
<h3>Oct 2023 - Current</h3>
<p><em>Part of the board member, leading Internal Affairs Committee along with Internal Vice President</em><br/><br/>
Involved throughout first year as Activity Lead in the Internal Affairs Committee<br/>
Accomplishments: spearheaded events with 70+ engineering students through Mocktail Networking Night, Bouquet Making Socials, Research Networking Event, etc.</p>
</div>
<div class="column" style="flex: 1; padding: 10px;">
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/C3ewo77sykR/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/C3ewo77sykR/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">View this post on Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/C3ewo77sykR/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by SWE @ UCLA (@swe.ucla)</a></p></div></blockquote>
<script async src="//www.instagram.com/embed.js"></script>
</div>
</div>

<h2>Rocket Project at UCLA - <em>Electronics Subteam Lead of Prometheus Project</em></h2>
<h3>Oct 2023 - June 2024</h3>
<p><em>Electronics Subteam Lead (out of 3 Subteams: Electronics, Propulsion, Vehicle Engineering)</em><br/>
Final Result of the Prometheus Project: Apogee of +15000 ft<br/>
Final Result of the Prometheus Project: Apogee of approximately 15000 ft<br/>
Lead 3 component teams: Ground Systems Electronics, Avionics, Software<br/>
Faciliated design reviews of the PCBs, codes for microcontrollers, and Grafana GUI</p>
Faciliated design reviews of the PCBs, codes for microcontrollers, and Grafana GUI
</p>
</section>
<section id="content" class="main">
<h2><em>Want to learn more about my experience? Check out my linkedIn!</em>&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.linkedin.com/in/yehyeon-cho/" class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a></h2>
</section>
<section id="content" class="main">
<h1>Art</h1>
<div class="gallery">
<div class="gallery-item">
<img src="images/union.jpg" alt="Union">
</div>
<div class="gallery-item">
<img src="images/rabbit_hole.jpg" alt="Rabbit Hole">
</div>
<div class="gallery-item">
<img src="images/space.jpg" alt="Space">
</div>
<div class="gallery-item">
<img src="images/stress.jpg" alt="Stress">
</div>
</div>

<footer class="major">
<ul class="actions special">
<li><a href="index.html" class="button">Back to Main</a></li>
</ul>
</footer>
</section>
</div>

Expand All @@ -51,7 +85,7 @@ <h2>Yehyeon Cho</h2>
<h3>Preferred Name: Evelyn</h3>
<p>2nd Year Computer Science Student at University of California, Los Angeles</p>
<ul class="actions">
<li><a href="#" class="button">Learn More</a></li>
<li><a href="/index.html" class="button">Learn More</a></li>
</ul>
</section>
<section>
Expand Down
36 changes: 32 additions & 4 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,40 @@
@import url(fontawesome-all.min.css);
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400';

/*
Stellar by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
/*
Stellar by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* For the About Me Page CSS */

.gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);/* 2 columns */
gap: 20px;
}

.gallery-item {
display: flex;
border: 1px solid #d9b3d7;
border-radius: 8px;
background-color: white;
box-shadow: 0 2px 5px rgba(72, 49, 73, 0.1);
padding: 10px;
justify-content: center;
align-items: center;
}

.gallery-item img {
width: 100%;
height: auto;
display: block;
margin: 10px;
}

/* End of About Me Page CSS*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
Expand Down
Binary file added images/rabbit_hole.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/space.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/stress.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/union.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/want.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 34 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ <h2>Preferred Name: Evelyn</h2>
<nav id="nav">
<ul>
<li><a href="#intro" class="active">About Me</a></li>
<li><a href="#first">First Section</a></li>
<li><a href="#second">Second Section</a></li>
<li><a href="#first">More about me!</a></li>
<li><a href="#second">Interest/Hobbies</a></li>
<li><a href="#cta">Get Started</a></li>
</ul>
</nav>
Expand Down Expand Up @@ -59,62 +59,62 @@ <h2>Computer Science Student @UCLA</h2>
<!-- First Section -->
<section id="first" class="main special">
<header class="major">
<h2>Magna veroeros</h2>
<h2>More!</h2>
</header>
<ul class="features">
<li>
<span class="icon solid major style1 fa-code"></span>
<h3>Ipsum consequat</h3>
<p>Sed lorem amet ipsum dolor et amet nullam consequat a feugiat consequat tempus veroeros sed consequat.</p>
<span class="icon solid major style5 fa-laptop-code"></span>
<h3>Coding</h3>
<p>Coding experience with C++, Java, Python, C, HTML/CSS, Javascript, R<br/>
<em>~ Until now</em></p>
</li>
<li>
<span class="icon major style3 fa-copy"></span>
<h3>Amed sed feugiat</h3>
<p>Sed lorem amet ipsum dolor et amet nullam consequat a feugiat consequat tempus veroeros sed consequat.</p>
<span class="icon solid major style1 fa-user-secret"></span>
<h3>Linux Cybersecurity</h3>
<p>Competed in CyberPatriot 2019-2023 in all-service (JROTC) division.<br/>
Ranked in platinum (highest) tier.<br/>
Earned cyber varsity letters.<br/>
<em>~ During highschool</em></p>
</li>
<li>
<span class="icon major style5 fa-gem"></span>
<h3>Dolor nullam</h3>
<p>Sed lorem amet ipsum dolor et amet nullam consequat a feugiat consequat tempus veroeros sed consequat.</p>
<span class="icon solid major style3 fas fa-walking"></span>
<h3>NJROTC Cadet</h3>
<p>Rank of Senior Chief Petty Officer.<br/>
Awarded Scottish Rite of Freemasonry Award for academic success and patriotic Americanism.<br/>
<em>~ During highschool</em></p>
</li>
</ul>
<footer class="major">
<ul class="actions special">
<li><a href="aboutMe.html" class="button">Learn More</a></li>
</ul>
</footer>
</section>

<!-- Second Section -->
<section id="second" class="main special">
<header class="major">
<h2>Ipsum consequat</h2>
<p>Donec imperdiet consequat consequat. Suspendisse feugiat congue<br />
posuere. Nulla massa urna, fermentum eget quam aliquet.</p>
<h2>Hobbies</h2>
</header>
<ul class="statistics">
<li class="style1">
<span class="icon solid fa-code-branch"></span>
<strong>5,120</strong> Etiam
<span class="icon solid fa-film"></span>
<strong>Films</strong> ↻ ◁ || ▷ ↺
</li>
<li class="style2">
<span class="icon fa-folder-open"></span>
<strong>8,192</strong> Magna
<span class="icon solid fa-music"></span>
<strong style="white-space: nowrap;">Film music</strong> ♫⋆｡♪ ₊˚♬ ﾟ.
</li>
<li class="style3">
<span class="icon solid fa-signal"></span>
<strong>2,048</strong> Tempus
<span class="icon solid fa-palette"></span>
<strong style="white-space: nowrap;">Pattern art</strong> ✧˚ ༘ ⋆｡˚✐~
</li>
<li class="style4">
<span class="icon solid fa-laptop"></span>
<strong>4,096</strong> Aliquam
<span class="icon solid fa-plane"></span>
<strong>Travel</strong> ⋆｡ﾟ☁︎｡✈︎⋆｡ ﾟ☾ ﾟ｡⋆
</li>
<li class="style5">
<span class="icon fa-gem"></span>
<strong>1,024</strong> Nullam
<span class="icon solid fa-camera-retro"></span>
<strong>Photo</strong> ⊹₊[ ◉¯]₊ ⊹
</li>
</ul>
<p class="content">Nam elementum nisl et mi a commodo porttitor. Morbi sit amet nisl eu arcu faucibus hendrerit vel a risus. Nam a orci mi, elementum ac arcu sit amet, fermentum pellentesque et purus. Integer maximus varius lorem, sed convallis diam accumsan sed. Etiam porttitor placerat sapien, sed eleifend a enim pulvinar faucibus semper quis ut arcu. Ut non nisl a mollis est efficitur vestibulum. Integer eget purus nec nulla mattis et accumsan ut magna libero. Morbi auctor iaculis porttitor. Sed ut magna ac risus et hendrerit scelerisque. Praesent eleifend lacus in lectus aliquam porta. Cras eu ornare dui curabitur lacinia.</p>
<p class="content">I love immersing myself in the world of films through film music as it transports me to magical worlds like Hogwarts, the Shire, and District 12. Through the music, I feel as if I am truly there along with the wizards, hobbits, and tributes (get the references to the movies!). Additionally, I find peace in my pattern art. The more intricate the design, the more it calms me. <br/>
Traveling is another activity that brings peace and joy. Each journey, even to places that I've been before, always feels different. Taking photos while traveling is the perfect definition of peace. Although they may not always capture the beauty I see, they capture the moment and the feelings I experience.</p>
<footer class="major">
<ul class="actions special">
<li><a href="aboutMe.html" class="button">Learn More</a></li>
Expand All @@ -125,16 +125,9 @@ <h2>Ipsum consequat</h2>
<!-- Get Started -->
<section id="cta" class="main special">
<header class="major">
<h2>Congue imperdiet</h2>
<p>Donec imperdiet consequat consequat. Suspendisse feugiat congue<br />
posuere. Nulla massa urna, fermentum eget quam aliquet.</p>
<h2>Keep in touch!</h2>
<p>Feel free to contact/connect with me on LinkedIn and check out my github!</p>
</header>
<footer class="major">
<ul class="actions special">
<li><a href="aboutMe.html" class="button primary">Get Started</a></li>
<li><a href="aboutMe.html" class="button">Learn More</a></li>
</ul>
</footer>
</section>

</div>
Expand All @@ -146,7 +139,7 @@ <h2>Yehyeon Cho</h2>
<h3>Preferred Name: Evelyn</h3>
<p>2nd Year Computer Science Student at University of California, Los Angeles</p>
<ul class="actions">
<li><a href="#" class="button">Learn More</a></li>
<li><a href="/aboutMe.html" class="button">Learn More</a></li>
</ul>
</section>
<section>
Expand Down

0 comments on commit b11b70d

Please sign in to comment.