<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>장세빈의 포트폴리오</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Simple line icons-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css" rel="stylesheet" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500&display=swap" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation-->
<a class="menu-toggle rounded" href="#"><i class="fas fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#page-top">Start Bootstrap</a></li>
<li class="sidebar-nav-item"><a href="#page-top">Home</a></li>
<li class="sidebar-nav-item"><a href="#about">About</a></li>
<li class="sidebar-nav-item"><a href="#services">Services</a></li>
<li class="sidebar-nav-item"><a href="#portfolio">Portfolio</a></li>
<li class="sidebar-nav-item"><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Header-->
<header class="masthead d-flex align-items-center">
<div class="container px-4 px-lg-5 text-center">
<h1 class="mb-1">Welcome To My Portfolio!</h1>
<h3 class="mb-5" style="font-size: 30px; margin-top:15px"><em>@by SebinJang</em></h3>
<a class="btn btn-primary btn-xl" href="#about" style="margin-top: 50px;">ABOUT ME</a>
</div>
</header>
<!-- About-->
<section class="content-section bg-light" id="about">
<div class="container px-4 px-lg-5 text-center">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-10">
<h2 style="font-family: 'Noto Serif KR', serif;font-size: 27px; font-style: italic; letter-spacing: 1.5px;">"안녕하세요! 신입개발자가 되고 싶은 장세빈입니다!"</h2>
<p class="lead mb-5" style="font-family: '나눔고딕'; font-size: 17px; margin-top: 20px;">
항상 제가 하는 일들이 사람들에게 나은 삶을 주었으면 하였고, 일반적인 일들을 통해서는 그 한계가 있다고 느낄 수 있었습니다.
<br>
그러던 도중 프로그래밍이라는 것을 접하게 되었고, 프로그래밍을 통해 사람들에게 이로운 서비스를 개발하고
<br>우리의 인생이라는 한정된 시간 안에서 사람들이 시간을 좀 더 가치 있게 쓸 수 있도록 해주고 싶었습니다.
<br>그런 생각이 든 이후, 올 초부터 하루 온 종일 시간을 투자하여 개발 공부를 하고 있습니다.
<!--<a href="https://unsplash.com/">Unsplash</a>-->
</p>
<a class="btn btn-dark btn-xl" href="#services">Find Out More</a>
</div>
</div>
</div>
</section>
<!-- Services-->
<section class="content-section bg-primary text-white text-center" id="services">
<div class="container px-4 px-lg-5">
<div class="content-section-heading">
<h3 class="text-secondary mb-0">Portfolio</h3>
<h2 class="mb-5">Contact</h2>
</div>
<div class="row gx-4 gx-lg-5">
<div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
<span class="service-icon rounded-circle mx-auto mb-3"><i class="icon-screen-smartphone"></i></span>
<h4><strong>Tel.</strong></h4>
<p class="text-faded mb-0">010-3910-9087</p>
</div>
<div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
<span class="service-icon rounded-circle mx-auto mb-3"><i class="icon-pencil"></i></span>
<h4><strong>E-mail</strong></h4>
<p class="text-faded mb-0">been@naver.com</p>
</div>
<div class="col-lg-3 col-md-6 mb-5 mb-md-0">
<span class="service-icon rounded-circle mx-auto mb-3"><i class="icon-like"></i></span>
<h4><strong>Github</strong></h4>
<p class="text-faded mb-0">
wkdtpqls@gihub.io
<!-- <i class="fas fa-heart"></i>
Start Bootstrap! -->
</p>
</div>
<div class="col-lg-3 col-md-6">
<span class="service-icon rounded-circle mx-auto mb-3"><i class="icon-mustache"></i></span>
<h4><strong>Blog</strong></h4>
<p class="text-faded mb-0">wkdtpqlsbolg.com</p>
</div>
<!--
<a class="btn btn-xl btn-light me-4" href="http://l.bsks.ac.kr/~p202206020/" target="_blank">My CV</a>
<a class="btn btn-xl btn-light me-4" href="http://l.bsks.ac.kr/~p202206020/" target="_blank">My Portfolio</a>
-->
</div>
</div>
</section>
<!-- Callout
<section class="callout">
<div class="container px-4 px-lg-5 text-center">
<h2 class="mx-auto mb-5">
Welcome to
<em>my</em>
GitBlog!
</h2>
<a class="btn btn-primary btn-xl" href="https://wkdtpqls.github.io/" target="_blank">Click Now!</a>
</div>
</section>
-->
<!-- Portfolio-->
<section class="content-section" id="portfolio">
<div class="container px-4 px-lg-5">
<div class="content-section-heading text-center">
<h3 class="text-secondary mb-0">Portfolio</h3>
<h2 class="mb-5">My Skills</h2>
</div>
<div class="row gx-0">
<div class="col-lg-6">
<a class="portfolio-item" href="#!">
<div class="caption">
<div class="caption-content">
<div class="h2">JavaScript</div>
<p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
</div>
</div>
<img class="img-fluid" src="assets/img/portfolio-1.jpg" alt="..." />
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#!">
<div class="caption">
<div class="caption-content">
<div class="h2">Python</div>
<p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
</div>
</div>
<img class="img-fluid" src="assets/img/portfolio-2.jpg" alt="..." />
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#!">
<div class="caption">
<div class="caption-content">
<div class="h2">HTML/CSS</div>
<p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
</div>
</div>
<img class="img-fluid" src="assets/img/portfolio-3.jpg" alt="..." />
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#!">
<div class="caption">
<div class="caption-content">
<div class="h2">PHP</div>
<p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
</div>
</div>
<img class="img-fluid" src="assets/img/portfolio-4.jpg" alt="..." />
</a>
</div>
</div>
</div>
</section>
<!-- Call to Action-->
<section class="content-section bg-primary text-white">
<div class="container px-4 px-lg-5 text-center">
<h3 class="text-secondary mb-0" style="font-size: 17px;">Portfolio</h3>
<h1 class="mb-4">My Projects</h1>
<a class="btn btn-xl btn-light me-4" href="http://l.bsks.ac.kr/~p202206020/" target="_blank" style="margin-top: 23px; font-family: '나눔고딕'; font-weight: bold;">JS실습사이트</a>
<a class="btn btn-xl btn-dark" href="http://l.bsks.ac.kr/~p202206020/php/" target="_blank" style="margin-top: 23px; font-family: '나눔고딕';font-weight: bold;">PHP실습사이트</a>
<a class="btn btn-xl btn-light me-4" href="https://wkdtpqls.github.io/" target="_blank" style="margin-left: 20px;margin-top: 23px; font-family: '나눔고딕';font-weight: bold;"> Git Blog </a>
</div>
</section>
<!-- Map-->
<div class="map" id="contact">
<!--<iframe src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>-->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3260.8884722148628!2d129.09700611506904!3d35.18433218031305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3568933dadd775b5%3A0x2686b75d5ca07394!2z67aA7IKw6rK97IOB64yA7ZWZ6rWQ!5e0!3m2!1sko!2skr!4v1669511199479!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<br />
<!--<small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A"></a></small>-->
</div>
<!-- Footer-->
<footer class="footer text-center">
<div class="container px-4 px-lg-5">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#!"><i class="icon-social-facebook"></i></a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#!"><i class="icon-social-twitter"></i></a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white" href="#!"><i class="icon-social-github"></i></a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright © JangSebin website 2022</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top"><i class="fas fa-angle-up"></i></a>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
Leave a comment