Hwayeon Kang
About Me data analyst / translator / undergraduate student Hi! I'm Hwayeon Kang, studying programming languages and data visualization. Education Feb 2018 - Jan 2021 Hankuk Academy of Foreign Studies Sep 2021 - University of Edinburgh Contacts E-mail: hway
hwayeonniii.com
Language in use: html, css, scss, javascript
Web host: GoDaddy; refered to https://www.youtube.com/watch?v=kvyWeTXCSKk
**other usable hosts: Github, WordPress, Netlify
Tools: Sublime Text
Period: 5 days
Reference:
W3Schools > https://www.w3schools.com/html/default.asp
HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
CODEPEN > https://codepen.io/miukimiu/pen/KmzfG/
Full Width Vertical Gallery / Content with Toggle Description
Just a full width Vertical Gallery / Content with a toggle description. ...
codepen.io
Main Page source code
*I put css code in html
Hwayeon Kang
data analyst
About Me
data analyst / translator / undergraduate student
Hi! I'm Hwayeon Kang, studying programming languages and data visualization.
Education
Feb 2018 - Jan 2021
Hankuk Academy of Foreign StudiesSep 2021 -
University of EdinburghContacts
E-mail: hwayeonniii@gmail.com
phone: +44 7562 609343
instagram: @hwayeonnii
Experience
11th; 40 hrs/wk; 3 wks/yr
: Learned CAR T Immunotherapy, Organ On A Chip, and Anesthetic Operation; Joined Animal Research Workshop to perform autopsy in ethical settings
: developed a synthetic biology-based oral delivery method for insulin to treat both type 1 and 2 diabetes mellitus
12th; 7 hrs/wk; 24 wks/yr
: wrote about applying traditional techniques to modern farming; Interviewed farmers from different climates in Korea; Published in Incheon Artbook Fair
Paid Work
Interest
College Experience (one of navigation bars) source code
*I separated HTML, CSS, SCSS, and JavaScript file for this page
HTML (updating)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>hwayeonniii college experience</title>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="gallery">
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 1 Sem 1</h2>
<p>Earth Dynamics / Evolution of the Living Earth / Introduction to Linear Algebra <br>
*Winter Vacation*</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<h4 style="color: blue;">
[Earth Dynamics] <br>Mark: <br> Course Organiser: Prof Cees-Jan De Hoog (ceesjan.dehoog@ed.ac.uk)<br>
Structure: three lectures & a campus laboratory practical in a week + two field trips (Siccar Point, Holyrood Park) </h4> <br>
- Fieldtrip 2 Notebook: <br>
I wrote a notebook of geological observations; Observed some of the igneous and sedimentary rock types exposed in the park, learned how to recognise igneous rocks in the field, observed and sketch some of their contact relations, and noted the form of the Salisbury Crags sill in preparation for next practical.
<br><br>
- Practical workbooks for wk 2-5: <br>
Practical 1: Introduction to describing rocks in hand specimen<br>
Practical 2: Estimation of the mass of the Earth using the densities of representative samples, The composition of the oceanic and continental lithosphere<br>
Practical 3: Aspects of the Motion of Lithospheric Plates; Absolute motion & Relative motion, Palaeomagnetism, Age of crust & Subduction zones<br>
Practical 4: Focal Mechanism Exercise: Fault Plane Solution, Earthquake location and amplitude determination
<br><br>
- Practical workbooks for wk 6-9: <br>
Practical 5: Optical mineralogy (thin-section view)<br>
Practical 6: Sub-surface form of the Salisbury Crags sill, Timescales involved in the formation of the Salisbury Crags sill, Rock Forming silicate minerals in hand specimen, Salisbury Crag dolerite in thin section<br>
Practical 7: Symmetry of an octahedron, Non-silicate minerals in hand specimen, Igneous rocks in hand specimen and thin section, Fractional crystallisation exercise<br>
Practical 8: Deformation in the Earth & Metamorphic rocks and minerals in hand specimen and thin section
<br><br>
- Written Exam Assessment:
<br>
<br><br>
<h4 style="color: blue;">
[Evolution of the Living Earth] <br>Mark: A <br> Course Organiser: Prof Alex Thomas (alex.thomas@ed.ac.uk)<br>
Structure: three lectures & a campus laboratory practical & a tutorial in a week </h4><br><br>
- The Origin and Evolution of Life practical work:
<br>1) Based on self-guided trip to the National Museum of Scotland, I constructed an A4-sized geological timeline that highlights key fossils or sites from Scottish prehistory, with accompanying images.
<br>2)With a provided picture of different screws, I built a family tree of the screws and drew an associated phylogeny. Then, I answered the questions related to the grouping/phylogeny principles.
<br>3) I wrote a review of Henry Gee’s book A (Very) Short History of Life on Earth in an academic peer-reviewed format; briefly overviewed the book (tone, style, subject matter), and added some aspects of the book I enjoyed & constructive feedback for improvement.
<br><br>
- Environmental Chemistry practical and data reports:
<br>1) Calculations of variability of CO2 and pH on different timescales<br>
<img src="2-1.png" width="500" height="200">
<br>Two text files in use: atmospheric CO2 & Ocean pH, obtained from March 1958 through April 1974. I analyzed the change/trend of atmospheric CO2 and ocean pH over decades and relationships of them. I utilized excel tools and functions; ‘Format Data Series’, ‘Chart Design’, average, stdev.s, slope, intercept and linest aid<br>
<br>2) The measurement of contents of dissolved oxygen in various water samples<br>
<img src="2-2.png" width="450" height="150">
<br>Through the chemistry of the Winkler titration, I analyzed the dissolved O2 concentration of water samples from Braid Burn.
The sample of river water is treated with a concentrated solution of manganese chloride followed by a concentrated solution of sodium hydroxide and sodium iodide and a precipitate of manganous hydroxide is formed. <br>
<br>3) Calculation of Si concentration from water samples’ absorbance<br>
<img src="2-3.png" width="400" height="300">
<br> Through 'silicomolybdic acid (SMA) spectrophotometric method', I analyzed the concentration of dissolved Si from water samples from Braid Burn Below & Above, Loch, and Sea Water.
<br><br>
- Five Online Tests: 68.6% in average
<br><br><br>
<h4 style="color: blue;">[Introduction to Linear Algebra] <br>Mark: <br> Course Organiser: Prof Chris Sangwin (c.j.sangwin@ed.ac.uk)<br>
Structure: three lectures & a campus laboratory practical & a tutorial in a week</h4><br>
- Weekly online assessment (Q1-Q10): 83.2% in average
<br>
- Written hand-in assessment (H1-H4): 71.7% in average
<br>
- Synoptic assessment:
<br><br><br>
<h4 style="color: blue;">[Winter Vacation]</h4><br>
- Trip to Ireland: As my friend invited me to her home, I stayed in her home in Ireland during Christmas holidays; looked around all the landmarks of Dublin, first tried fish and chips, had a tour in Killaloe, went to Ennistymon and Lahinch beach, visited Cliff of Mohar, Paulnabrone, Silvermine village, etc. <br><br>
- Programming Language: Started learning basic coding(html, javascript, css, scss to build my own website) and computer sorting algorithms. Click <a href="https://hwayeon-is-studying.tistory.com" style="color: orangered;">here</a> for details.
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 1 Sem 2</h2>
<p>Introduction to the Geological Record / Calculus and its Applications / Introductory Financial Economics / Proofs and Problem Solving (extra credit)</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 2 Sem 1</h2>
<p>~~~</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 2 Sem 2</h2>
<p>~~~</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 3 Sem 1</h2>
<p>~~s</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 3 Sem 2</h2>
<p>~~~</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 4 Sem 1</h2>
<p>~~~</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
<li>
<div class="overlay"></div>
<div class="info">
<h2>Year 4 Sem 2</h2>
<p>~~~</p>
<a href="#" class="btn">See Description</a>
<div class="description">
<p>
~~~~~
</p>
</div><!-- /.description-->
</div><!--/.info -->
</li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>CSS
@import url(http://fonts.googleapis.com/css?family=Lustria|Lato:300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
background-color: #EBECF0;
color: black;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
body {
overflow-x: hidden;
}
ul {
width: 100%;
overflow: hidden;
}
ul li {
position: relative;
cursor: pointer;
}
ul li .overlay {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity: 0.4;
display: blocK;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 8;
background-color: #EBECF0;
}
ul li .info {
position: relative;
width: 100%;
z-index: 999;
color: #fff;
display: block;
text-align: center;
padding: 30px 20px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul li .info h2 {
font-family: "Lustria", serif;
font-size: 30px;
line-height: 50px;
background-color: #EBECF0;
}
ul li .info p {
font-family: "Lato", sans-serif;
font-size: 18px;
line-height: 30px;
padding-bottom: 20px;
background-color: #EBECF0;
}
ul li .info .btn {
line-height: 30px;
display: inline-block;
padding: 0 10px;
border: 1px solid black;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
color: black;
font-family: "Lato", sans-serif;
margin-bottom: 20px;
}
ul li .info .description {
display: none;
text-align: left
}JavaScript
$(document).ready(function () {
//hide all descriptions
$('.description').hide();
function showFullHeight() {
$('.gallery li').each(function() {
$(this).find('.btn').click(function(e){
console.log('Botão clicado');
e.preventDefault();
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.description').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
}); //click
});//each
}//function
//load the function when the doc is ready
showFullHeight();
});SCSS
*wrote scss in a text file
@import "compass/css3";
@import "compass/reset/utilities";
@include global-reset;
@import url(http://fonts.googleapis.com/css?family=Lustria|Lato:300);
$title_font: 'Lustria', serif;
$base_font: 'Lato', sans-serif;
$dark: #222222;
$clouds: #eeeeee;
$grey: #999999;
body {
overflow-x: hidden;
}
ul {
width: 100%;
overflow: hidden;
li {
position: relative;
cursor: pointer;
.overlay {
@include opacity(0.4);
background: #000;
display: blocK;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 8;
}
.info {
position: relative;
width: 100%;
z-index: 999;
color: #fff;
display: block;
text-align:center;
padding: 30px 20px 20px;
@include box-sizing(border-box);
h2 {
font-family: $title_font;
font-size: 30px;
line-height: 50px;
}
p {
font-family: $base_font;
font-size: 18px;
line-height: 30px;
padding-bottom: 20px;
}
.btn {
line-height: 30px;
display: inline-block;
padding: 0 10px;
border: 1px solid #fff;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
font-family: $base_font;
margin-bottom: 20px;
}
.description {
display: none;
}
}//.info
.bg-img {
img {
position: absolute;
//width: 100%;
//height: auto;
top:0;
min-width: 100%;
min-height: 100%;
}
}
}
}'Language > HTML CSS' 카테고리의 다른 글
| basic principles of html (for beginners) (0) | 2022.08.18 |
|---|---|
| How to publish my html file on the internet (0) | 2022.08.18 |
