<?include("main_header.php")?>
			<header class="codrops-header">
				<?include("title.php")?>
			</header>
            <!-- <div class="header-text">오동통.com이라는 이름으로 대박을 꿈꾸며 맛집관련 커뮤니티를 만들며 실패를 겪었지만, 무엇보다도 좋은 경험이었습니다.  <br />
            위꼴사닷컴은 오픈소스SW 프레임워크기반의 웹어플리케이션 '킴스큐'를 활용해서 만들었으나, <br />라이브서버의 부족한 서비스로 인해 사이트가 증발해버려 흔적이 없는데 개인적으로 굉장히 아쉬운 사이트입니다.<br />
            </div> -->
	
    <!-- 2025 01 23 -->  
<div class="main_page">         
    <div id="newversion">
        <button class="accordion">
            <h2>채용하기</h2>
        </button>
        <div class="panel">
            <dl>
                <dt>지원 이력서의 연락처로 연락 주시면 감사하겠습니다</dt>
                <dd></dd>
            </dl>
        </div>
	</div>
	
	<div id="intro">
		<h1 id="title2">
			<span id="title-line1" class="title-line">일하기 </span>
			<span id="title-line2" class="title-line">딱 좋은</span>
			<span id="title-line3" class="title-line">나이입니다</span>
		</h1>
	</div>
    <div id="title-info">
		<p id="desc">최선을 다하겠습니다.</p>
		<p class="credit">모든 분야 경험</p>
		<p class="credit">신입의 마음가짐으로</p>
		<p class="credit">책임감을 갖고 임하겠습니다</p>
		<p class="credit">
			<a href="" class="twitter-follow-button" data-show-count="false" data-size="large">후회없는 탁월한 선택을 하세요</a>
			
		</p>
	</div>

	<div id="download">
		<p><em>오래된 사이트로 최소한의 기록만이 남아있습니다.</em><br /><a href=""></a></p>
		<p><span class="accent">&#9733;</span> 연락처 <span class="accent">&#9733;</span><br />
			<a class="download" href="">지원 이력서의 연락처를 참고해 주세요</a>
		</p>
	</div>
	<div id="showcase">
		<h1>다양한 경험</h1>
		<p>현재의 사이트는 일부의 기록일뿐, 그 이상의 경험을 갖고 있습니다.</p>
		<div class="gallery clearfix">
			<figure>
				<figcaption>웹디자인</figcaption>
                <small>모든 툴</small>
			</figure>
            <figure>
				<figcaption>퍼블리싱</figcaption>
                <small>다양한 웹 환경</small>
			</figure>
            <figure>
				<figcaption>쇼핑몰</figcaption>
                <small>관련업무</small>
			</figure>
			<!-- <figure>
				<a href="http://lifeisvertical.alpina-since1883.com">
					<img src="gallery/alpina.jpg" alt="Alpina - Life Is Vertical">
				</a>
				<figcaption>Alpina - Life Is Vertical<br />
					<small><a href="http://www.cssdesignawards.com/css-web-design-award-winner.php?id=20048">CSS Design Award Winner</a></small>
				</figcaption>
			</figure> -->
			<figure>
				<figcaption>App</figcaption>
                <small>다양한 개발자와의 협업 경험</small>
			</figure>
            <figure>
				<figcaption>힘쓰는 일</figcaption>
                <small>땀 흘리는것을 즐기는 편</small>
			</figure>
            <figure>
				<figcaption>소통</figcaption>
                <small>업무관련 소통 활발</small>
			</figure>
            <figure>
				<figcaption>다양한 협업툴</figcaption>
                <small>협업 관련 협업툴 적극 사용</small>
			</figure>
            <figure>
				<figcaption>새로운 영역</figcaption>
                <small>배움에 있어서 거부감 없음</small>
			</figure>
		</div>
	</div>
    <div id="examples-parallax">
			<h2 id="parallax-it">변화를 두려워하지 않는 성향</h2>
			<h2 id="parallax-it-left">겸손</h2>
			<h2 id="parallax-it-right">열정</h2>
	</div>
    <div class="hire_wrap">
        <div id="hire">
            <h3>축적된 노하우 </h3>
            <!-- <p>저와 함께하신다면 후회없는 선택이 될 것입니다</p> -->
        </div>
        <div id="hire">
            <h3>다양한 스킬</h3>
            <p><a href="#" class="banner"></a></p>
        </div>
    </div>
	<div id="content-wrapper">
		<div id="examples-1">
            <div class="ex1">
			    <h2 id="fade-it">안정감 + 신뢰감</h2>
                <p>흔들림 없이 편안한 캐릭터</p>
            </div>
            <div class="ex2">
			    <h2 id="fly-it" class="ex1">묵직함<p>믿고 맡길 수 있는 든든함</p></h2>
            </div>
            <div class="ex1">
			    <h2 id="spin-it">즐기는 자</h2>
                <p>능동적이고 효율적으로</p>
            </div>
            <div class="ex1">
			    <h2 id="scale-it">Scale It</h2>
                <p>약속을 중요시 합니다.</p>
            </div>
            <div id="scale-it2" class="scale-it">
			    <h2>Scale It2</h2>
                <p>약속을 중요시 합니다.</p>
            </div>
            <div class="ex1">
			    <h2 id="smush-it">Smush It</h2>
                <p>약속을 중요시 합니다.</p>
            </div>
		</div>
		
		<!-- <div id="examples-pin">
			<div id="pin-frame-pin" class="pin-frame"><h2>Pin It</h2></div>
			<div id="pin-frame-slide" class="pin-frame"><h2>Slide It</h2></div>
			<div id="pin-frame-wipe" class="pin-frame"><h2>Wipe It</h2></div>
			<div id="pin-frame-bounce" class="pin-frame"><h2>Bounce It</h2></div>
			<div id="pin-frame-color" class="pin-frame"><h2>Color It</h2></div>
			<div id="pin-frame-unpin" class="pin-frame"><h2>Unpin It</h2></div>
		</div> -->
		
		<!-- <div id="examples-2">
			<h2 id="fling-it">Fling It</h2>
			<h2 id="move-it">Move It</h2>
		</div> -->
		
		
		
		<h2 id="bring-it">Bring It</h2>
    </div>
</div>





    <script type="text/javascript" src="js/main/TweenMax.min.js"></script>
	<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  	<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script> -->
  	<script src="js/main/jquery.lettering-0.6.1.min.js"></script>
	<script src="js/main/jquery.superscrollorama.js"></script>
	<script>
		$(document).ready(function() {
			// set rotation of flash
			TweenMax.set("#newversion", {rotation: 0});

			$('body').css('visibility','visible');

			// hide content until after title animation
			$('#content-wrapper').css('display','none');
			
			// lettering.js to split up letters for animation
			$('#title-line1').lettering();
			$('#title-line2').lettering();
			$('#title-line3').lettering();
			
			// TimelineLite for title animation, then start up superscrollorama when complete
			(new TimelineLite({onComplete:initScrollAnimations}))
				.from( $('#title-line1 span'), .4, {delay: 1, css:{right:'1000px'}, ease:Back.easeOut})
				.from( $('#title-line2'), .4, {css:{top:'1000px',opacity:'0'}, ease:Expo.easeOut})
				.append([
					TweenMax.from( $('#title-line3 .char1'), .25+Math.random(), {css:{top: '-200px', right:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char2'), .25+Math.random(), {css:{top: '300px', right:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char3'), .25+Math.random(), {css:{top: '-400px', right:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char4'), .25+Math.random(), {css:{top: '-200px', left:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char5'), .25+Math.random(), {css:{top: '200px', left:'1000px'}, ease:Elastic.easeOut})
				])
				.from("#newversion", .4, {scale: 5, autoAlpha: 0, ease: Elastic.easeOut})
				.to( $('#title-info'), .5, {css:{opacity:.99, 'margin-top':0}, delay:-1, ease:Quad.easeOut})
				.to( $('#download'), .25, {autoAlpha:1});
			
			function initScrollAnimations() {
				$('#content-wrapper').css('display','block');
				var controller = $.superscrollorama();
			
				// title tweens
				$('.title-line span').each(function() {
					controller.addTween(10, TweenMax.to(this, .5, {css:{top: Math.random()*-200-600, left: (Math.random()*1000)-500, rotation:Math.random()*720-360, 'font-size': Math.random()*300+150}, ease:Quad.easeOut}),200);
				});
				controller.addTween(10, TweenMax.to($('#title-line1'), .75, {css:{top: 600}, ease:Quad.easeOut}),200);
				controller.addTween(10, TweenMax.to($('#title-line2'), .75, {css:{top: 200}, ease:Quad.easeOut}),200);
				controller.addTween(10, TweenMax.to($('#title-line3'), .75, {css:{top: -100}, ease:Quad.easeOut},200));

				// showcase tweens
				controller.addTween('#showcase h1', TweenMax.from( $('#showcase h1'), .75, {css:{letterSpacing:20,opacity:0}, ease:Quad.easeOut}));
				controller.addTween('#showcase p', TweenMax.from( $('#showcase p'), 1, {css:{opacity:0}, ease:Quad.easeOut}));
				$('#showcase .gallery figure').css('position','relative').each(function() {
					controller.addTween('#showcase .gallery', TweenMax.from( $(this), 1, {delay:Math.random()*.2,css:{left:Math.random()*200-100,top:Math.random()*200-100,opacity:0}, ease:Back.easeOut}));
				});

				// hire tweens
				$('#hire h3').lettering().find('span').css('position','relative').each(function() {
					controller.addTween('#hire h3', TweenMax.from( $(this), .25, {delay:Math.random()*.2,css:{left:Math.random()*1200-600,top:Math.random()*600-300,opacity:0}, ease:Expo.easeOut}),200);
				});
				controller.addTween('#hire p', TweenMax.from( $('#hire p'), .5, {css:{opacity:0}}));
				
				// individual element tween examples
				controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
				controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'100%'}, ease:Quad.easeInOut}));
				controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));
				controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'4.5rem'}, ease:Quad.easeInOut}));
				controller.addTween('#scale-it2', TweenMax.fromTo( $('#scale-it2'), .25, {css:{opacity:0.5, backgroundColor:'#fff', width:'30%', borderRadius:'100px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, backgroundColor:'#ddd', width:'80%', borderRadius:'2rem'}, ease:Quad.easeInOut}));
				controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'50px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-1px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing
				
				// set duration, in pixels scrolled, for pinned element
				var pinDur = 4000;
				// create animation timeline for pinned element
				var pinAnimations = new TimelineLite();
				pinAnimations
					.append(TweenMax.from($('#pin-frame-pin h2'), .5, {css:{marginTop:0}, ease: Quad.easeInOut}))
					.append([
						TweenMax.to($('#pin-frame-slide'), 1, {css:{marginLeft:0}}),
						TweenMax.to($('#pin-frame-pin'), 1, {css:{marginLeft:'100%'}})
					], .5)
					.append([
						TweenMax.to($('#pin-frame-wipe'), .5, {css:{top:0}}),
						TweenMax.from($('#pin-frame-wipe h2'), .5, {css:{marginTop:'-600px'}})
					], .5)
					.append(TweenMax.from($('#pin-frame-bounce'), 5, {css:{marginTop:'-100%'}, ease:Bounce.easeOut}), .5)
					.append(TweenMax.from($('#pin-frame-color'), .25, {css:{opacity:0}}), .5)
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'blue'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'orange'}})
					])
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'green'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'red'}})
					])
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'yellow'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'purple'}})
					])
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'orange'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'blue'}})
					])
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'red'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'green'}})
					])
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'#222438'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'#FFB000'}})
					])
					.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
				
				// pin element, use onPin and onUnpin to adjust the height of the element
				controller.pin($('#examples-pin'), pinDur, {
					anim:pinAnimations, 
					onPin: function() {
						$('#examples-pin').css('height','100%');
					}, 
					onUnpin: function() {
						$('#examples-pin').css('height','600px');
					}
				});
				controller.pin($('#examples-2'), 3000, {
					anim: (new TimelineLite())
						.append(
							TweenMax.fromTo($('#fling-it'), 2, 
								{css:{left:-1000, top: 500, rotation: -360}, immediateRender:true}, 
								{css:{left:2000, top: -600, rotation: 360}})
						)
						.append(
							TweenMax.fromTo($('#move-it'), .75, 
								{css:{left: -200, top: 800}, immediateRender:true}, 
								{css:{top: -200}}),
								-1.5 // offset for better timing
						)
						.append(
							TweenMax.to($('#move-it'), .5, 
								{css:{left: 200}})
						)
						.append(
							TweenMax.to($('#move-it'), .5, 
								{css:{top: 0}})
						)
						.append(
							TweenMax.to($('#move-it'), .5, 
								{css:{left: 0}})
						)
				})

				// parallax example, setting duration ties animation to scroll position
				// you can target a scroll position instead of an element (whose position can change)
				controller.addTween(
					'#examples-parallax',
					(new TimelineLite())
						.append([
							TweenMax.fromTo($('#parallax-it-left'), 1, 
								{css:{top: 200}, immediateRender:true}, 
								{css:{top: -600}}),
							TweenMax.fromTo($('#parallax-it-right'), 1, 
								{css:{top: 500}, immediateRender:true}, 
								{css:{top: -1250}})
						]),
					1000 // scroll duration of tween
				);

				$('#bring-it').lettering();
				controller.addTween(
					'#bring-it',
					(new TimelineLite())
						.append([
							TweenMax.from($('#bring-it .char1'), 1, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char2'), .6, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char3'), 1.1, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char4'), .7, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char5'), .9, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char6'), 1.2, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char7'), .6, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char8'), .8, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut})
						])
						,
					1200,
					-100 // offset for better timing
				);
			}
		});
	</script>
<script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
        } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
        } 
    });
    }
</script>

<?include("sub_footer.php")?>



        


