diff --git a/about.html b/about.html new file mode 100644 index 000000000..b62e99977 --- /dev/null +++ b/about.html @@ -0,0 +1,179 @@ + + + + + GO KEE GO!! + + + + +
+
+

icon image of horse A Portfolio by Kee Nam reverse icon image of horse

+ +
+
+

Fundamental Facts

+
+
+ Kee's face, playful and positive +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Full NameKee Yeon Nam (남기연)
Date of Birth19xx . 03 . 28
GenderFemale (She/Her)
NationalityUnited States of America
EthnicityKorean
Myers-BriggsINTJ
Job ClassDeveloper/Engineer
+
+
+

Savvy Skills

+
+
+
+

+ HTML +

+
+
+
+
+
+
+

+ CSS +

+
+
+
+
+
+
+

+ Bootstrap +

+
+
+
+
+
+
+

+ JavaScript +

+
+
+
+
+
+
+

+ jQuery +

+
+
+
+
+
+
+
+
+

+ Ruby +

+
+
+
+
+
+
+

+ Ruby on Rails +

+
+
+
+
+
+
+

+ Command Line +

+
+
+
+
+
+
+

+ Git +

+
+
+
+
+
+
+

+ Python +

+
+
+
+
+
+
+
+
+ +
+ + diff --git a/blog.html b/blog.html new file mode 100644 index 000000000..a709453f5 --- /dev/null +++ b/blog.html @@ -0,0 +1,84 @@ + + + + + GO KEE GO!! + + + + +
+
+

icon image of horse A Portfolio by Kee Nam reverse icon image of horse

+ +
+
+
+

Blog Posts

+
+ Open laptop +

Thoughts at 23:23

+

I'm cooking 2 servings of rice now. I should have done this earlier but I was paralyzed by the possibility of choice. Can there truly be justice in this dark and unwholesome world?

+ Read more... +
+
+

Uphill

+

Linkin Park, how could you encapsulate my thoughts in such a precise way? Blood, sweat, and tears indeed. It's all a struggle!!

+ Read more... +
+
+ Cartoon image of dog, Sori +

The Sound

+

I MISS MY DOG. 소리야, 엄마가 널 너무 너무 보고싶은데... 네가 내가 간지 모르지?? 흑흑흑 ㅠㅠ 우리 새끼 잘 먹고 건강하게 잘 지내고 있겠지??? 제발 아프지마 ㅠ

+ Read more... +
+
+ Photograph of dog, Sori +

Be still my heart

+

JUST LOOK AT THAT WINK. Damn, that's a fine dog. So fine. I just want to nuzzle her thin and greasy fur T_T

+ Read more... +
+
+

Am I addicted to material culture?

+

I don't know what is "enough" clothing anymore? I can justify each piece in my closet but when is it going to be too much? Am I in denial?

+ Read more... +
+
+

Relationshipoop

+

Learning how to adapt to the different communication style of another while being vulnerable and caring is hard, to say the least.

+ Read more... +
+
+ Artist rendering of fictional character Haurchefant +

In memory of...

+

Final Fantasy XIV WHY!! Why did sweet Haurchefant have to go?? He was the most likable character!! You could have taken Alphinaud! Aymeric was not worth.

+ Read more... +
+
+

Dairy Queen

+

Of all my refrigerated products, how does dairy as a category run out the fastest? Didn't I buy milk like less than a week ago? Am I... going infantile?

+ Read more... +
+
+
+ +
+ + diff --git a/fonts/NanumGothic.eot b/fonts/NanumGothic.eot new file mode 100755 index 000000000..f144cb9eb Binary files /dev/null and b/fonts/NanumGothic.eot differ diff --git a/fonts/NanumGothic.ttf b/fonts/NanumGothic.ttf new file mode 100755 index 000000000..1364d9d7e Binary files /dev/null and b/fonts/NanumGothic.ttf differ diff --git a/fonts/NanumGothic.woff b/fonts/NanumGothic.woff new file mode 100755 index 000000000..0ce939f07 Binary files /dev/null and b/fonts/NanumGothic.woff differ diff --git a/fonts/NanumGothicBold.eot b/fonts/NanumGothicBold.eot new file mode 100755 index 000000000..ec1cd1c0c Binary files /dev/null and b/fonts/NanumGothicBold.eot differ diff --git a/fonts/NanumGothicBold.ttf b/fonts/NanumGothicBold.ttf new file mode 100755 index 000000000..f160c28d8 Binary files /dev/null and b/fonts/NanumGothicBold.ttf differ diff --git a/fonts/NanumGothicBold.woff b/fonts/NanumGothicBold.woff new file mode 100755 index 000000000..a18f63440 Binary files /dev/null and b/fonts/NanumGothicBold.woff differ diff --git a/fonts/font-mfizz.eot b/fonts/font-mfizz.eot new file mode 100755 index 000000000..8f1c302e0 Binary files /dev/null and b/fonts/font-mfizz.eot differ diff --git a/fonts/font-mfizz.ttf b/fonts/font-mfizz.ttf new file mode 100755 index 000000000..b9931e310 Binary files /dev/null and b/fonts/font-mfizz.ttf differ diff --git a/fonts/font-mfizz.woff b/fonts/font-mfizz.woff new file mode 100755 index 000000000..f2c0bb6e7 Binary files /dev/null and b/fonts/font-mfizz.woff differ diff --git a/images/about-face.jpg b/images/about-face.jpg new file mode 100644 index 000000000..059806a1e Binary files /dev/null and b/images/about-face.jpg differ diff --git a/images/blog-post.jpg b/images/blog-post.jpg new file mode 100644 index 000000000..6c5680503 Binary files /dev/null and b/images/blog-post.jpg differ diff --git a/images/calculator.jpg b/images/calculator.jpg new file mode 100644 index 000000000..79477960a Binary files /dev/null and b/images/calculator.jpg differ diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 000000000..79270cc10 Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/font-mfizz.svg b/images/font-mfizz.svg new file mode 100755 index 000000000..29e7e49cc --- /dev/null +++ b/images/font-mfizz.svg @@ -0,0 +1,2309 @@ + + + + + +Created by FontForge 20120731 at Mon Feb 13 14:14:41 2017 + By vagrant,,, +Created by vagrant,,, with FontForge 2.0 (http://fontforge.sf.net) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/footerflowers.png b/images/footerflowers.png new file mode 100644 index 000000000..74b624099 Binary files /dev/null and b/images/footerflowers.png differ diff --git a/images/grocery-store.jpg b/images/grocery-store.jpg new file mode 100644 index 000000000..b759c035d Binary files /dev/null and b/images/grocery-store.jpg differ diff --git a/images/haurchefant.png b/images/haurchefant.png new file mode 100644 index 000000000..9c6ea33ef Binary files /dev/null and b/images/haurchefant.png differ diff --git a/images/horse.png b/images/horse.png new file mode 100644 index 000000000..f36cd7e7b Binary files /dev/null and b/images/horse.png differ diff --git a/images/hotel.jpg b/images/hotel.jpg new file mode 100644 index 000000000..0e4e51a87 Binary files /dev/null and b/images/hotel.jpg differ diff --git a/images/index-portrait.jpg b/images/index-portrait.jpg new file mode 100644 index 000000000..7ba2173f1 Binary files /dev/null and b/images/index-portrait.jpg differ diff --git a/images/jojo-pattern.png b/images/jojo-pattern.png new file mode 100644 index 000000000..b09794252 Binary files /dev/null and b/images/jojo-pattern.png differ diff --git a/images/scrabble.jpg b/images/scrabble.jpg new file mode 100644 index 000000000..52a1a3c8b Binary files /dev/null and b/images/scrabble.jpg differ diff --git a/images/shori.png b/images/shori.png new file mode 100644 index 000000000..9ca75310f Binary files /dev/null and b/images/shori.png differ diff --git a/images/solar-system.jpg b/images/solar-system.jpg new file mode 100644 index 000000000..0d30251ef Binary files /dev/null and b/images/solar-system.jpg differ diff --git a/images/sori-wink.png b/images/sori-wink.png new file mode 100644 index 000000000..c7ea5b54d Binary files /dev/null and b/images/sori-wink.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..bb985ee5d --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + GO KEE GO!! + + + + +
+
+

icon image of horse A Portfolio by Kee Nam reverse icon image of horse

+ +
+
+
+ Kee, next to her kissing dogs +
+
+
+

WHY, HELLO THERE!

+

I am she who is called Kee

+

Welcome to my Web developer chronicles

+

Be dazzled ! (& thanks for visiting)

+
+
+
+ +
+ + diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 000000000..c73265183 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,64 @@ + + + + + GO KEE GO!! + + + + +
+
+

icon image of horse A Portfolio by Kee Nam reverse icon image of horse

+ +
+
+ +
+ +
+ + diff --git a/stylesheets/font-mfizz.css b/stylesheets/font-mfizz.css new file mode 100755 index 000000000..8b85f41fb --- /dev/null +++ b/stylesheets/font-mfizz.css @@ -0,0 +1,324 @@ +/*! + * Font Mfizz 2.4.1 + * Copyright 2013-2017 Fizzed, Inc. + * MIT License + * + * Project: http://fizzed.com/oss/font-mfizz + * + * The font designed for technology and software geeks representing programming + * languages, operating systems, software engineering, and technology. + * + * Fizzed, Inc. + * Web: http://fizzed.com/ + * Twitter: http://twitter.com/fizzed_inc + */ + +@font-face { + font-family: "FontMfizz"; + src: url("../fonts/font-mfizz.eot"); + src: url("../fonts/font-mfizz.eot?#iefix") format("embedded-opentype"), + url("../fonts/font-mfizz.woff") format("woff"), + url("../fonts/font-mfizz.ttf") format("truetype"), + url("../images/font-mfizz.svg#font-mfizz") format("svg"); + font-weight: normal; + font-style: normal; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: "FontMfizz"; + src: url("../images/font-mfizz.svg#font-mfizz") format("svg"); + } +} + +[data-icon]:before { content: attr(data-icon); } + +[data-icon]:before, +.icon-3dprint:before, +.icon-alpinelinux:before, +.icon-angular:before, +.icon-angular-alt:before, +.icon-antenna:before, +.icon-apache:before, +.icon-archlinux:before, +.icon-aws:before, +.icon-azure:before, +.icon-backbone:before, +.icon-blackberry:before, +.icon-bomb:before, +.icon-bootstrap:before, +.icon-c:before, +.icon-cassandra:before, +.icon-centos:before, +.icon-clojure:before, +.icon-codeigniter:before, +.icon-codepen:before, +.icon-coffee-bean:before, +.icon-cplusplus:before, +.icon-csharp:before, +.icon-css:before, +.icon-css3:before, +.icon-css3-alt:before, +.icon-d3:before, +.icon-database:before, +.icon-database-alt:before, +.icon-database-alt2:before, +.icon-debian:before, +.icon-docker:before, +.icon-dreamhost:before, +.icon-elixir:before, +.icon-elm:before, +.icon-erlang:before, +.icon-exherbo:before, +.icon-fedora:before, +.icon-fire-alt:before, +.icon-freebsd:before, +.icon-freecodecamp:before, +.icon-gentoo:before, +.icon-ghost:before, +.icon-git:before, +.icon-gnome:before, +.icon-go:before, +.icon-go-alt:before, +.icon-google:before, +.icon-google-alt:before, +.icon-google-code:before, +.icon-google-developers:before, +.icon-gradle:before, +.icon-grails:before, +.icon-grails-alt:before, +.icon-grunt:before, +.icon-gulp:before, +.icon-gulp-alt:before, +.icon-hadoop:before, +.icon-haskell:before, +.icon-heroku:before, +.icon-html:before, +.icon-html5:before, +.icon-html5-alt:before, +.icon-iphone:before, +.icon-java:before, +.icon-java-bold:before, +.icon-java-duke:before, +.icon-javascript:before, +.icon-javascript-alt:before, +.icon-jetty:before, +.icon-jquery:before, +.icon-kde:before, +.icon-laravel:before, +.icon-line-graph:before, +.icon-linux-mint:before, +.icon-looking:before, +.icon-magento:before, +.icon-mariadb:before, +.icon-maven:before, +.icon-microscope:before, +.icon-mobile-device:before, +.icon-mobile-phone-alt:before, +.icon-mobile-phone-broadcast:before, +.icon-mongodb:before, +.icon-mssql:before, +.icon-mysql:before, +.icon-mysql-alt:before, +.icon-netbsd:before, +.icon-nginx:before, +.icon-nginx-alt:before, +.icon-nginx-alt2:before, +.icon-nodejs:before, +.icon-npm:before, +.icon-objc:before, +.icon-openshift:before, +.icon-oracle:before, +.icon-oracle-alt:before, +.icon-osx:before, +.icon-perl:before, +.icon-phone-alt:before, +.icon-phone-gap:before, +.icon-phone-retro:before, +.icon-php:before, +.icon-php-alt:before, +.icon-playframework:before, +.icon-playframework-alt:before, +.icon-plone:before, +.icon-postgres:before, +.icon-postgres-alt:before, +.icon-python:before, +.icon-raspberrypi:before, +.icon-reactjs:before, +.icon-redhat:before, +.icon-redis:before, +.icon-ruby:before, +.icon-ruby-on-rails:before, +.icon-ruby-on-rails-alt:before, +.icon-rust:before, +.icon-sass:before, +.icon-satellite:before, +.icon-scala:before, +.icon-scala-alt:before, +.icon-script:before, +.icon-script-alt:before, +.icon-shell:before, +.icon-sitefinity:before, +.icon-solaris:before, +.icon-splatter:before, +.icon-spring:before, +.icon-suse:before, +.icon-svg:before, +.icon-symfony:before, +.icon-tomcat:before, +.icon-ubuntu:before, +.icon-unity:before, +.icon-wireless:before, +.icon-wordpress:before, +.icon-x11:before { + display: inline-block; + font-family: "FontMfizz"; + font-style: normal; + font-weight: normal; + font-variant: normal; + line-height: 1; + text-decoration: inherit; + text-rendering: optimizeLegibility; + text-transform: none; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; +} + +.icon-3dprint:before { content: "\f100"; } +.icon-alpinelinux:before { content: "\f101"; } +.icon-angular:before { content: "\f102"; } +.icon-angular-alt:before { content: "\f103"; } +.icon-antenna:before { content: "\f104"; } +.icon-apache:before { content: "\f105"; } +.icon-archlinux:before { content: "\f106"; } +.icon-aws:before { content: "\f107"; } +.icon-azure:before { content: "\f108"; } +.icon-backbone:before { content: "\f109"; } +.icon-blackberry:before { content: "\f10a"; } +.icon-bomb:before { content: "\f10b"; } +.icon-bootstrap:before { content: "\f10c"; } +.icon-c:before { content: "\f10d"; } +.icon-cassandra:before { content: "\f10e"; } +.icon-centos:before { content: "\f10f"; } +.icon-clojure:before { content: "\f110"; } +.icon-codeigniter:before { content: "\f111"; } +.icon-codepen:before { content: "\f112"; } +.icon-coffee-bean:before { content: "\f113"; } +.icon-cplusplus:before { content: "\f114"; } +.icon-csharp:before { content: "\f115"; } +.icon-css:before { content: "\f116"; } +.icon-css3:before { content: "\f117"; } +.icon-css3-alt:before { content: "\f118"; } +.icon-d3:before { content: "\f119"; } +.icon-database:before { content: "\f11a"; } +.icon-database-alt:before { content: "\f11b"; } +.icon-database-alt2:before { content: "\f11c"; } +.icon-debian:before { content: "\f11d"; } +.icon-docker:before { content: "\f11e"; } +.icon-dreamhost:before { content: "\f11f"; } +.icon-elixir:before { content: "\f120"; } +.icon-elm:before { content: "\f121"; } +.icon-erlang:before { content: "\f122"; } +.icon-exherbo:before { content: "\f123"; } +.icon-fedora:before { content: "\f124"; } +.icon-fire-alt:before { content: "\f125"; } +.icon-freebsd:before { content: "\f126"; } +.icon-freecodecamp:before { content: "\f127"; } +.icon-gentoo:before { content: "\f128"; } +.icon-ghost:before { content: "\f129"; } +.icon-git:before { content: "\f12a"; } +.icon-gnome:before { content: "\f12b"; } +.icon-go:before { content: "\f12c"; } +.icon-go-alt:before { content: "\f12d"; } +.icon-google:before { content: "\f12e"; } +.icon-google-alt:before { content: "\f12f"; } +.icon-google-code:before { content: "\f130"; } +.icon-google-developers:before { content: "\f131"; } +.icon-gradle:before { content: "\f132"; } +.icon-grails:before { content: "\f133"; } +.icon-grails-alt:before { content: "\f134"; } +.icon-grunt:before { content: "\f135"; } +.icon-gulp:before { content: "\f136"; } +.icon-gulp-alt:before { content: "\f137"; } +.icon-hadoop:before { content: "\f138"; } +.icon-haskell:before { content: "\f139"; } +.icon-heroku:before { content: "\f13a"; } +.icon-html:before { content: "\f13b"; } +.icon-html5:before { content: "\f13c"; } +.icon-html5-alt:before { content: "\f13d"; } +.icon-iphone:before { content: "\f13e"; } +.icon-java:before { content: "\f13f"; } +.icon-java-bold:before { content: "\f140"; } +.icon-java-duke:before { content: "\f141"; } +.icon-javascript:before { content: "\f142"; } +.icon-javascript-alt:before { content: "\f143"; } +.icon-jetty:before { content: "\f144"; } +.icon-jquery:before { content: "\f145"; } +.icon-kde:before { content: "\f146"; } +.icon-laravel:before { content: "\f147"; } +.icon-line-graph:before { content: "\f148"; } +.icon-linux-mint:before { content: "\f149"; } +.icon-looking:before { content: "\f14a"; } +.icon-magento:before { content: "\f14b"; } +.icon-mariadb:before { content: "\f14c"; } +.icon-maven:before { content: "\f14d"; } +.icon-microscope:before { content: "\f14e"; } +.icon-mobile-device:before { content: "\f14f"; } +.icon-mobile-phone-alt:before { content: "\f150"; } +.icon-mobile-phone-broadcast:before { content: "\f151"; } +.icon-mongodb:before { content: "\f152"; } +.icon-mssql:before { content: "\f153"; } +.icon-mysql:before { content: "\f154"; } +.icon-mysql-alt:before { content: "\f155"; } +.icon-netbsd:before { content: "\f156"; } +.icon-nginx:before { content: "\f157"; } +.icon-nginx-alt:before { content: "\f158"; } +.icon-nginx-alt2:before { content: "\f159"; } +.icon-nodejs:before { content: "\f15a"; } +.icon-npm:before { content: "\f15b"; } +.icon-objc:before { content: "\f15c"; } +.icon-openshift:before { content: "\f15d"; } +.icon-oracle:before { content: "\f15e"; } +.icon-oracle-alt:before { content: "\f15f"; } +.icon-osx:before { content: "\f160"; } +.icon-perl:before { content: "\f161"; } +.icon-phone-alt:before { content: "\f162"; } +.icon-phone-gap:before { content: "\f163"; } +.icon-phone-retro:before { content: "\f164"; } +.icon-php:before { content: "\f165"; } +.icon-php-alt:before { content: "\f166"; } +.icon-playframework:before { content: "\f167"; } +.icon-playframework-alt:before { content: "\f168"; } +.icon-plone:before { content: "\f169"; } +.icon-postgres:before { content: "\f16a"; } +.icon-postgres-alt:before { content: "\f16b"; } +.icon-python:before { content: "\f16c"; } +.icon-raspberrypi:before { content: "\f16d"; } +.icon-reactjs:before { content: "\f16e"; } +.icon-redhat:before { content: "\f16f"; } +.icon-redis:before { content: "\f170"; } +.icon-ruby:before { content: "\f171"; } +.icon-ruby-on-rails:before { content: "\f172"; } +.icon-ruby-on-rails-alt:before { content: "\f173"; } +.icon-rust:before { content: "\f174"; } +.icon-sass:before { content: "\f175"; } +.icon-satellite:before { content: "\f176"; } +.icon-scala:before { content: "\f177"; } +.icon-scala-alt:before { content: "\f178"; } +.icon-script:before { content: "\f179"; } +.icon-script-alt:before { content: "\f17a"; } +.icon-shell:before { content: "\f17b"; } +.icon-sitefinity:before { content: "\f17c"; } +.icon-solaris:before { content: "\f17d"; } +.icon-splatter:before { content: "\f17e"; } +.icon-spring:before { content: "\f17f"; } +.icon-suse:before { content: "\f180"; } +.icon-svg:before { content: "\f181"; } +.icon-symfony:before { content: "\f182"; } +.icon-tomcat:before { content: "\f183"; } +.icon-ubuntu:before { content: "\f184"; } +.icon-unity:before { content: "\f185"; } +.icon-wireless:before { content: "\f186"; } +.icon-wordpress:before { content: "\f187"; } +.icon-x11:before { content: "\f188"; } diff --git a/stylesheets/reset.css b/stylesheets/reset.css new file mode 100644 index 000000000..ed11813c4 --- /dev/null +++ b/stylesheets/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +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-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/stylesheets/styles.css b/stylesheets/styles.css new file mode 100644 index 000000000..be2c2d014 --- /dev/null +++ b/stylesheets/styles.css @@ -0,0 +1,427 @@ +@import url(reset.css); +@import url('https://fonts.googleapis.com/css?family=Cardo:400,400i,700|Pathway+Gothic+One'); +@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); +@import url(font-mfizz.css); + +/*--------------- SHARED STYLES ---------------*/ +html { box-sizing: border-box; } +*, *:before, *:after { box-sizing: inherit; } +html, body { height: 100%; } +body { + color: #333; + font-size: 22px; + font-family: 'Cardo', serif; + line-height: 1.35; +} +h1 { + font-size: 3.6em; + font-family: 'Pathway Gothic One', sans-serif; + text-transform: uppercase; +} +h2 { + font-size: 2.0em; + font-style: italic; + font-weight: 700; +} +h3 { + font-size: 1.8em; + font-family: 'Pathway Gothic One', sans-serif; +} +a { + color: #333; + text-decoration: none; +} +a:hover { cursor: pointer; } +@font-face { + font-family: 'Nanum'; + font-weight: 400; + src: url('../fonts/NanumGothic.eot'); + src: url('../fonts/NanumGothic.eot?#iefix') format('embedded-opentype'), + url('../fonts/NanumGothic.woff') format('woff'), + url('../fonts/NanumGothic.ttf') format('truetype'); +} +@font-face { + font-family: 'NanumBold'; + font-weight: 600; + src: url('../fonts/NanumGothicBold.eot'); + src: url('../fonts/NanumGothicBold.eot?#iefix') format('embedded-opentype'), + url('../fonts/NanumGothicBold.woff') format('woff'), + url('../fonts/NanumGothicBold.ttf') format('truetype'); +} +.ko { + font-family: 'Nanum', sans-serif; +} +.ko-bold { + font-family: 'NanumBold', sans-serif; +} + +/*--------------- MAIN STYLE ---------------*/ +div.container { + width: 80%; + margin: 5% auto; + border: 10px solid #333; +} +header, main { + background: #fefefe; + background: rgba(255, 255, 255, 0.95); +} +.index { background: #8acfb8; /* green */ } +.about { background: #71b9d0; /* blue */ } +.portfolio { background: #d8d04f; /* yellow */ } +.blog { background: #be8fb6; /* purple */ } +body.patterned { + background-image: url('../images/jojo-pattern.png'); + background-repeat: repeat-x repeat-y; +} +main { + width: 100%; + padding: 5% 4% 8%; +} + +/*--------------- HEADER ---------------*/ +header { + padding: 1% 0 1%; + border-top: 5px double #333; + border-bottom: 2px solid #333; +} +header h1 { + padding-top: 1%; + text-align: center; + margin-bottom: 1%; + border-bottom: 3px solid #333; +} +header h1:hover { cursor: pointer; } +header h1 a img { height: 48px;} +header h1 a img:nth-of-type(2) { transform: scaleX(-1); } +header nav { + width: 100%; + margin-top: 1.5%; +} +header nav ul { + width: 80%; + margin: 0 auto; + display: flex; + justify-content: space-around; +} +header nav ul li.inactive a i { + color: #8293c4; /* dark blue */ + visibility: hidden; +} +header nav ul li.inactive a:hover { color: #88c6ea; /* light blue */ } +header nav ul li.inactive a:hover i { visibility: visible; } +header nav ul li.active a { + cursor: default; + color: #aaa; +} +header nav ul li.active a i { color: #999; } + +/*--------------- FOOTER ---------------*/ +footer { + border-top: 7px solid #333; + padding: 2% 4% 6%; + color: #fefefe; + display: flex; + justify-content: space-between; + align-content: center; + background: rgba(80, 80, 80, 0.95); + background-image: url('../images/footerflowers.png'); + background-position: center bottom -60px; + background-size: cover; + background-repeat: no-repeat; +} +footer div.footer-text p { font-size: 0.5em; } +footer div.footer-text p a { + font-style: italic; + color: #fefefe; +} +footer div.footer-text p i { color: #edb1c1; } +footer ul.footer-sns { + display: flex; + justify-content: center; + align-content: center; +} +footer ul.footer-sns li { margin-left: 20%; } +footer ul.footer-sns li:first-of-type { margin-left: 0; } +footer ul.footer-sns li a { + color: #fcfcfc; + font-size: 0.9em; +} +footer ul.footer-sns li a:hover { color: #edb1c1; } + +/*--------------- MAIN INDEX.HTML ---------------*/ +.main-index { + display: flex; + justify-content: center; + align-content: flex-start; +} +.main-index figure { + width: 40%; + display: flex; + justify-content: flex-end; + align-items: center; +} +.main-index figure img { + max-height: 260px; + border-radius: 50%; + border: 5px double #333; + filter: grayscale(100%); +} +.main-index div.index-text { + width: 60%; + position: relative; + margin-left: 10%; +} +.main-index div.index-text div.text-bubble { + position: relative; + padding: 15px 25px 30px; + margin: 1em 1em 3em 0; + color: #000; + border-radius: 10px; + background: #ccc; + font-size: 0.8em; +} +.main-index div.index-text div.text-bubble h2 { + font-size: 1.8em; + margin-bottom: 2%; + line-height: 1.8; + letter-spacing: 1.5px; +} +.main-index div.index-text div.text-bubble p { + margin-left: 3%; + border-left: 3px solid #666; + padding: 1% 3%; + line-height: 1.6; +} +.main-index div.index-text div.text-bubble p i { + margin-right: 4%; + color: #555; +} +.main-index div.index-text div.text-bubble p i.mini { + margin-right: 0; + color: #fcfcfc; + font-size: 0.9em; +} +.main-index div.index-text div.text-bubble::after { + content: ""; + position: absolute; + border-style: solid; + display: block; + width: 0; + top: 50%; + left: -50px; + bottom: auto; + border-width: 10px 50px 10px 0; + border-color: transparent #ccc; +} + +/*--------------- MAIN ABOUT.HTML ---------------*/ +.main-about { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.main-about h2 { margin-bottom: 3%; } +div.basics, div.skills { margin-bottom: 10%; } +div.basics { + width: 100%; + display: flex; + justify-content: center; + align-content: center; + text-align: center; +} +div.basics div.img-side { width: 35%; } +div.basics div.img-side img { + max-height: 300px; + filter: grayscale(100%); + border: 5px double #333; + vertical-align: middle; +} +div.basics div.text-side { width: 65%; } +div.basics div.text-side table { + height: 100%; + width: 100%; +} +div.basics div.text-side table tr:hover td { + background: #f0f0f0; + border-top: 2px solid #777; + border-bottom: 2px solid #777; +} +div.basics div.text-side table td { + padding: 0 2% 0 5%; + vertical-align: middle; +} +div.basics div.text-side table td:first-of-type { + text-align: center; + width: 10%; +} +div.basics div.text-side table td:nth-of-type(2){ + text-align: left; + width: 30%; +} +div.basics div.text-side table td:nth-of-type(3){ + text-align: left; + width: 60%; +} +div.basics div.text-side table td i { color: #edb1c1; } +div.skills { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +div.skills-left, div.skills-right { + width: 40%; + margin: auto 5%; +} +p.skill-name { margin-left: 14%; } +p.skill-name i { + margin-right: 2%; + color: #999; +} +div.bar { + height: 45px; + width: 300px; + position: relative; +} +div.percent-bar { + position: absolute; + top: 3%; + left: 18%; + height: 10px; + border-radius: 40px; + background: #888; + z-index: 99; +} +div.total-bar { + position: absolute; + top: 3%; + left: 18%; + height: 10px; + width: 300px; + border-radius: 40px; + background: #ccc; + z-index: 9; +} +div.html-per { width: 290px; } +div.css-per { width: 270px; } +div.boots-per { width: 250px; } +div.js-per { width: 180px; } +div.jquery-per { width: 220px; } +div.ruby-per { width: 270px; } +div.rails-per { width: 60px; } +div.termin-per { width: 120px; } +div.git-per { width: 120px; } +div.python-per { width: 150px; } + +/*--------------- MAIN PORTFOLIO.HTML ---------------*/ +.portfolio-items { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; +} +.portfolio-items li { + width: 30%; + height: 200px; + margin: 1%; + text-align: center; + border: 3px solid #333; + background: #edb1c1; + filter: grayscale(100%); +} +li#solar-system { + background: url('../images/solar-system.jpg'); + background-size: cover; + background-position: center center; +} +li#grocery-store { + background: url('../images/grocery-store.jpg'); + background-size: cover; + background-position: center center; +} +li#calculator { + background: url('../images/calculator.jpg'); + background-size: cover; + background-position: center center; +} +li#scrabble { + background: url('../images/scrabble.jpg'); + background-size: cover; + background-position: center center; +} +li#hotel { + background: url('../images/hotel.jpg'); + background-size: cover; + background-position: center center; +} +.portfolio-items li a { visibility: hidden; } +.portfolio-items li:hover { + border: 6px double #fefefe; + filter:grayscale(0%); +} +.portfolio-items li:hover a { + width: 100%; + height: 100%; + background: rgba(237, 177, 193, 0.8); + display: block; + padding: 2%; + visibility: visible; +} +.portfolio-items li a .p-title { + font-family: 'Pathway Gothic One', sans-serif; + font-size: 1.2em; + display: block; + margin: 4% 0 2%; +} +.portfolio-items li a .p-desc { + font-size: 0.7em; + display: block; + margin-bottom: 1%; +} +.portfolio-items li a .p-link { font-size: 0.7em; } + + +/*--------------- MAIN BLOG.HTML ---------------*/ +section.blog-posts { + -webkit-column-width: 12em; + -webkit-column-gap: 1em; +} +section.blog-posts h2 { margin: 0 0 2% 5%; } +article.blog-post { + display: inline-block; + margin: 0.25rem; + padding: 1.5rem; + width: 100%; + background: #efefef; +} +article.blog-post img { + display: block; + margin: 2% auto 4%; + max-width: 270px; + border: 2px solid #fefefe; +} +article.blog-post h3 { + font-size: 1.2em; + margin: 2% 0; +} +article.blog-post p { + font-size: 0.8em; + line-height: 1.3; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} +article.blog-post p span.ko, +article.blog-post p span.ko-bold { + font-size: 0.8em; +} +article.blog-post a.post-link { + display: block; + margin: 3% 0; + color: #d18398; + font-size: 0.8em; +}