<p>디씨 힛갤에 "<a href="https://gall.dcinside.com/board/view/?id=hit&no=15885" target="_blank" rel="noopener">구글에서 입사 제의 받은 포트폴리오</a>"라는 글이 올라왔다.</p>
<p>그 글은 간지나는 디자인을 간지나는 표현으로 깔쌈하게 표현하고있었다. 약간 허세 느낌이 있기도 했지만 진짜 잘난 인간이 해서 그런지 그것조차 멋스러웠다.</p>
<p>암튼, 나도 질 수 없어서 인터랙션 아ㄹ트워크(이런 표현이 깔쌈했다)를 하나 만들었다. '구글 디자이너 vs 최근 주식 투자 실패한 32세 4조3교대 인생의 빅매치다 이거야'라며 혼자 섀도우 복싱을 하면서 간만에 뚝딱거려봤다.
<p>사실은 저 위 링크에 있는 디자인의 표절작이긴 하지만... 뭐, 나만의 갬성이 쬐금 들어가서 창작물로 인정해주려나? 어쨌거나 생각보다 보기 괜찮아서 블로그에도 올려본다.</p>
<p><a href="https://jinh.kr/" target="_blank" rel="noopener">//jinh.kr/</a> 여기에서 실재 적용된 것을 감상할 수 있다. 뒤에 /v1/을 붙이면 기존의 노점상 좌판같던 디자인도 확인할 수 있다.</p>
<p>끝.</p>
<section id='output'></section>
<style>
section#output {
width: 100%;
height: 400px;
min-height: 200px;
margin-top: 200px;
position: relative;
left: 0;
top: 50%;
z-index:1111;
transform: scale(0.75);
}
.control {
position: fixed;
bottom: 1em;
right: 1em;
}
.item {
height: 200px;
width: 316px;
left: calc(50% - 158px);
transition: transform .25s;
position: absolute;
transform-origin: 50% 700%;
}
.item .since {
position: absolute;
top: 8px;
right: 12px;
opacity: .75;
font-size: .75em
}
.card {
width: 100%;
height: 100%;
transform: rotate(-90deg);
border-radius: 10px;
position: relative;
background: #444;
box-shadow: -2px 0px 5px rgba(0, 0, 0, .25);
cursor: pointer;
color: #fff;
transition: box-shadow .25s, margin .25s;
}
.item.on .card,
.card:hover {
margin-top: -12px;
box-shadow: -5px 0px 11px rgba(0, 0, 0, .25);
}
/*
.card:hover {
margin-top: -50px;
box-shadow: 7px 0px 10px rgba(0, 0, 0, .25);
} */
.card .title {
left: 32px;
position: absolute;
top: calc(50% + 0em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1em;
width: 250px;
text-align: left;
}
.card .icon {
background: gold;
border-radius:5px;
width: 32px;
height: 32px;
left: 34px;
position: absolute;
top: calc(50% - 32px);
}
.card .arrow {
color: #fff;
left: 12px;
position: absolute;
top: calc(50% - 30px);
}
.card.light .title, .card.light .date, .card.light .url, .card.light .arrow {
color: #212121;
}
.card .date {
position: absolute;
width: 100px;
left: 200px;
text-align: left;
font-size: .75em;
top: calc(50% + 40px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card .url {
position: absolute;
width: 120px;
left: 32px;
text-align: left;
font-size: .75em;
top: calc(50% + 40px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card .tag {
right: 6px;
position: absolute;
top: 6px;
opacity: .5;
}
.info {
color: #777;
position: absolute;
left: 0;
opacity: .02;
transition: .25s;
width: 400px;
left: calc(100% + 16px);
top: 64px;
}
.item.on .info,
.card:hover .info {
opacity: 1;
}
.info .ititle {
font-weight: bold;
top: 16px;
left: 0;
}
.info .idate {
font-weight: lighter;
color: #aaa;
top: 48px;
left: 0;
}
.info .idescription {
font-weight: lighter;
color: #aaa;
white-space: nowrap;
}
</style>
<script>
const is_mobile = false; // mobile check
let item_list = [{
title: "TITLE",
id: "morse",
icon: "//jinh.kr/images/morse.svg",
since_year: "2013",
since_month: "01",
since_date: "19",
url: "/morse/",
description: "The quick brown fox jumps over the lazy dog",
tag: ["web", "lang"],
theme: "4284f3"
}, {
title: "TITLE",
id: "braille",
icon: "//jinh.kr/images/braille.svg",
since_year: "2019",
since_month: "12",
since_date: "06",
url: "/braille/",
description: "The quick brown fox jumps over the lazy dog",
tag: ["web", "lang"],
theme: "f44336"
}, {
title: "TITLE",
id: "qualify",
icon: "//jinh.kr/images/grade-24px.svg",
since_year: "2018",
since_month: "09",
since_date: "29",
url: "/qualify/",
description: "The quick brown fox jumps over the lazy dog",
tag: ["web", "qualified"],
theme: "ffffff"
}, {
title: "TITLE",
id: "morse_android",
icon: "//jinh.kr/images/morse.svg",
since_year: 2018,
since_month: 2,
since_date: 28,
url: "//play.google.com/store/apps/details?id=com.morsecode.translator.jinh&hl=ko",
description: "The quick brown fox jumps over the lazy dog",
tag: ["android", "lang"],
theme: "4caf50"
}, {
title: "TITLE",
id: "bit",
icon: "",
since_year: 2013,
since_month: 8,
since_date: 17,
url: "/apps/8-BIT",
description: "The quick brown fox jumps over the lazy dog",
tag: ["web", "art"],
theme: "00c853"
}, {
title: "TITLE",
id: "SAT_kr",
icon: "//jinh.kr/images/timer-white-18dp.svg",
since_year: 2008,
since_month: 11,
since_date: 13,
url: "/SAT_kr/",
description: "화학공학과 특) 육각형 잘 그림.",
tag: ["web", "qualified"],
theme: "d32f2f"
}, {
title: "TITLE",
id: "lotto",
icon: "//jinh.kr/images/looks_6-24px.svg",
since_year: 2011,
since_month: 4,
since_date: 29,
url: "/lotto/",
description: "The quick brown fox jumps over the lazy dog",
tag: ["web", "game"],
theme: "ffb300"
}, {
title: "TITLE",
id: "battle",
icon: "//jinh.kr/images/sports_kabaddi-white-18dp.svg",
since_year: 2009,
since_month: 1,
since_date: 3,
url: "//blog.jinh.kr/297",
description: "The quick brown fox jumps over the lazy dog",
tag: ["web", "game"],
theme: "3f51b5"
}, {
title: "TITLE",
id: "mmm",
icon: "//jinh.kr/images/pets-white-18dp.svg",
since_year: 2016,
since_month: 6,
since_date: 19,
url: "//blog.jinh.kr/835",
description: "The quick brown fox jumps over the lazy dog",
tag: ["web", "lang"],
theme: "009688"
}, {
title: "TITLE",
id: "jw",
icon: "//jinh.kr/images/jw.svg",
since_year: 2017,
since_month: 1,
since_date: 19,
url: "//**.jinh.kr/",
description: "powered by team Cartel.",
tag: ["web", "work"],
theme: "424242"
}, {
title: "TITLE",
id: "blog",
icon: "//jinh.kr/images/rss_feed-white-18dp.svg",
since_year: 2007,
since_month: 3,
since_date: 21,
url: "//blog.jinh.kr/",
description: "The quick brown fox jumps over the lazy dog",
tag: ["web"],
theme: "212121"
}, {
title: "TITLE",
id: "bucket",
icon: "//jinh.kr/images/playlist_add_check-24px.svg",
since_year: 2014,
since_month: 10,
since_date: 3,
url: "/bucket/",
description: "The quick brown fox jumps over the lazy dog",
tag: ["web", "qualified"],
theme: "ff5722"
},
// {
// title: " 0000-0000-0000-0000",
// id: "bucket",
// icon: "images/web-24px.svg",
// since_year: 2020,
// since_month: 10,
// since_date: 3,
// url: "/test/",
// description: "",
// tag: [""],
// theme: "212121"
// },
];
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
function deg2rad(deg) {
return deg * Math.PI / 180;
}
function rad2deg(rad) {
return rad * 180 / Math.PI;
}
function hex2hsl(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
var r = parseInt(result[1], 16);
var g = parseInt(result[2], 16);
var b = parseInt(result[3], 16);
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
s = s * 100;
s = Math.round(s);
l = l * 100;
l = Math.round(l);
h = Math.round(360 * h);
return [h, s, l];
}
for (var i = 0; i < item_list.length; i++) {
let hsl = hex2hsl(item_list[i].theme);
item_list[i].hue = hsl[1] == 0 ? 255 + hsl[2] : hsl[0];
item_list[i].lightness = hsl[2];
}
function card_spread(data, key, type) {
if (type == undefined) {
type = "asc";
}
data.sort(function(a, b) {
var x = a[key];
var y = b[key];
if (type == "desc") {
return x > y ? -1 : x < y ? 1 : 0;
} else if (type == "asc") {
return x < y ? -1 : x > y ? 1 : 0;
}
});
$(".item").remove();
for (var i = 0; i < data.length; i++) {
let year = data[i].since_year.toString().substring(2, 4);
let month = (data[i].since_month.toString().length == 1) ? "0" + data[i].since_month : data[i].since_month;
let is_light = data[i].lightness >= 70;
// function tag(i) {
// let tag = "";
// for (var j = 0; j < item_list[i].tag.length; j++) {
// tag += "#" + item_list[i].tag[j] + " ";
// }
// return tag;
// }
let info = "<span class='ititle'>" + data[i].title + "</span><br>" +
"<span class='idate'>" + monthNames[data[i].since_month - 1] /*.substring(0, 3).toUpperCase()*/ + "-" + data[i].since_year + "</span><br>" +
"<span class='idescription'>" + data[i].description + "</span>"
let tag = ""
$("section#output").append("<div class='item " + data[i].id + "'><div class='card " + (is_light ? "light" : "") + "' style='background:#" + data[i].theme + "'><span class='arrow'>‹</span><img class='icon'><span class='title'>" + data[i].title + "</span><span class='date'>" + month + "/" + year + "</span><span class='url'>" + data[i].url.toUpperCase() + "</span><div class='info'>" + info + "</div>" + tag + "</div></div>");
}
if (!is_mobile) card_rotate(-window.pageYOffset / scroll_unit);
}
const card_width = 200;
let rotate_list = [];
let rotate_unit = 15; //rotate origin
let scroll_unit = 20;
function card_rotate(val) {
let rotate_origin = window.innerWidth / 500 + 2; //rotate origin
$(".item").each(function() {
let i = $(this).index();
// let rotate = -3.75 + (i + .5) * rotate_unit / 2 + val;
let rotate = i * rotate_unit / 2 + val - 30;
rotate_list[i] = Math.abs(rotate);
rotate = rotate < 45 ? rotate : rotate < -45 ? -45 : 45;
// let pos_x = Math.abs(Math.sin(deg2rad(rotate > -45 ? rotate : -45)) * card_width * rotate_origin);
function get_r(rotate) {
if (rotate - i < -30) { // left end
return -30 + i;
} else if (rotate - i > 31 - item_list.length) { // right end
return 31 + i - item_list.length;
} else {
return rotate;
}
}
$(this).css({
"transform": "rotate(" + get_r(rotate) + "deg)",
"transform-origin": "50% " + rotate_origin * 100 + "%"
});
// if (i == 9) console.log([
// // $(this).parent().children().length,
// i,
// // window.innerWidth / 2,
// $(this).offset().left,
// get_r(rotate)
// ]);
});
let target = rotate_list.indexOf(Math.min.apply(null, rotate_list));
$('.item').removeClass("on");
$('.item:nth(' + target + ')').addClass("on");
// $('body').height(window.innerHeight + (item_list.length - 1) * rotate_unit * scroll_unit / 2);
// console.log(11 * rotate_unit / 2 - window.pageYOffset / scroll_unit);
}
card_spread(item_list, "hue");
if (!is_mobile) {
window.addEventListener('scroll', function(event) {
console.log("aaa");
card_rotate(-window.pageYOffset / scroll_unit);
});
window.addEventListener('resize', function(event) {
console.log("aaa");
card_rotate(-window.pageYOffset / scroll_unit);
});
// $(document).ready(function() {
// $("#splash").addClass("off");
// });
}
$(window).on('load', function() {
$("#splash").addClass("off");
});
</script>
↧