-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path@index.html
More file actions
executable file
·157 lines (146 loc) · 6.31 KB
/
@index.html
File metadata and controls
executable file
·157 lines (146 loc) · 6.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>hsecode.github.io | 웹 퍼블리셔 허성은</title>
<meta name="robots" content="all">
<meta name="description" content="웹퍼블리셔 허성은 Github">
<meta name="keywords" content="웹퍼블리셔, 퍼블리셔, 포트폴리오, Web publisher, Web publisher Portfolio">
<meta name="author" content="허성은(Heo Seong-eun)">
<meta property="og:title" content="hsecode.github.io">
<meta property="og:description" content="웹퍼블리셔 허성은 Github">
<meta property="og:type" content="website">
<meta property="og:image" content="/images/og_image.jpg">
<meta property="og:site_name" content="hsecode.github.io">
<meta property="og:url" content="https://hsecode.github.io/">
<meta name="twitter:card" content="summary">
<meta property="twitter:title" content="hsecode.github.io">
<link rel="canonical" href="https://hsecode.github.io/">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700;900&family=Roboto:wght@100;300;500;700;900&family=Fredoka+One&display=swap" rel="stylesheet">
<!--<link rel="stylesheet" href="css/common.css">-->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--<div class="section01"></div>
<section id="container">
<section class="section02"></section>
<section class="section03"></section>
<section class="section04"></section>
<section class="section05"></section>
</section>-->
<div class="portfolioWrap">
<div class="decoItem">
<span class="decoItem__line"></span>
</div>
<div class="container">
<header>
<div class="header__inbox">
<h1 class="logo"><a href="#">< / SEONGEUN ></a></h1>
<nav class="gnb">
<button type="button" class="gnb__button">메뉴 열기</button>
<ul class="gnb__list">
<li><a href="#">about</a></li>
<li><a href="#">works</a></li>
<li><a href="#">career</a></li>
<li><a href="#">lab</a></li>
</ul>
</nav>
</div>
</header>
<!-- contents -->
<section class="visualArea">
<div class="visual__content">
<h2 class="visual__title">< / <strong>hsecode</strong> ></h2>
<p class="visual__desc">It's only crazy until you do it.</p>
</div>
</section>
<section class="aboutArea">
<div class="aboutArea__inbox">
<h2 class="section__title">About</h2>
<div class="profile flexWrap">
<div class="flexWrap__leftBox">
<picture class="profile__img">
<img src="http://placehold.it/300x300" alt="프로필 이미지">
</picture>
<h3 class="profile__name">허성은 (@hsecode)</h3>
<strong class="profile__job">Web Publisher | Markup Developer</strong>
<ul class="profile__contactList">
<li><address>mail : <a href="mailto:5647454@gmail.com" title="">5647454@gmail.com</a></address></li>
<li><address>phone : <a href="tel:01063750617" title="">010-6375-0617</a></address></li>
</ul>
</div>
<div class="flexWrap__rightBox">
<dl class="infoList">
<div class="infoList__row">
<dt>생년월일 : </dt>
<dd>92.06.17</dd>
</div>
<div class="infoList__row">
<dt>자격증 : </dt>
<dd>정보처리기사 (2019년 취득)<br>웹디자인기능사 (2017년 취득)</dd>
</div>
<div class="infoList__row">
<dt>성향 : </dt>
<dd>성찰하는, 진취적인, 내향적인, 계획적인</dd>
</div>
<div class="infoList__row">
<dt>성향 : </dt>
<dd>성찰하는, 진취적인, 내향적인, 계획적인</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<section class="nextSection">
test
</section>
<!-- //contents -->
</div>
</div>
<script src="portfolio/js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.5/ScrollTrigger.min.js"></script>-->
<script>
/*const trigger = new ScrollTrigger.default();
trigger.add('[data-trigger]');*/
/*
gsap.registerPlugin(ScrollTrigger);
gsap.to(".type1", {
scrollTrigger: {
trigger: "visual",
scrub: true,
},
x: 400, duration: 2,
});*/
gsap.registerPlugin(ScrollTrigger);
gsap.to(".anitext", {
scrollTrigger: ".anitext", x: 0, y:250, rotate:-18, duration: 1, });
/*
gsap.defaults({ease: "power1", duration: 3});
const tl = gsap.timeline();
tl.from(".section03", {xPercent: -100})
.from(".section04", {xPercent: 100})
.from(".section05", {yPercent: 100});
ScrollTrigger.create({
animation: tl,
trigger: "#container",
start: "top top",
end: "+=4000",
pin: true,
scrub: true,
anticipatePin: 1
});*/
$(function(){
$('.gnb__button').click(function(){
$('.gnb').toggleClass('active');
});
});
</script>
</body>
</html>