Spaces:

nkjoy
/

lee

Running

App Files Files Community

lee / index.html

nkjoy

모바일전용이라 글자 조정 - Initial Deployment

6da045c verified 6 months ago

raw

history blame contribute delete

20.8 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>이다은 강사 이력카드</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<style>
	body {
	font-family: 'Noto Sans KR', sans-serif;
	background: linear-gradient(135deg, #fdf4ff 0%, #faf5ff 50%, #f0f9ff 100%);
	font-size: 16px;
	}
	.section-title {
	position: relative;
	padding-bottom: 12px;
	font-weight: 600;
	font-size: 1.5rem;
	}
	.section-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 3px;
	background: linear-gradient(90deg, #ec4899, #8b5cf6);
	border-radius: 2px;
	}
	.card-shadow {
	box-shadow: 0 15px 35px rgba(0,0,0,0.08);
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.3);
	backdrop-filter: blur(10px);
	background: rgba(255,255,255,0.95);
	}
	.gradient-text {
	background: linear-gradient(135deg, #ec4899, #8b5cf6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}
	.header-gradient {
	background: linear-gradient(135deg, #fdf4ff 0%, #faf5ff 100%);
	border-bottom: 1px solid rgba(255,255,255,0.5);
	}
	.footer-gradient {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	}
	.hover-lift {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	.hover-lift:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.12);
	}
	.icon-gradient {
	background: linear-gradient(135deg, #ec4899, #8b5cf6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	/* Mobile Responsive Typography */
	@media (max-width: 768px) {
	body {
	font-size: 15px;
	}
	h1 {
	font-size: 1.8rem !important;
	}
	h2 {
	font-size: 1.4rem !important;
	}
	h3 {
	font-size: 1.1rem !important;
	}
	.section-title {
	font-size: 1.3rem;
	}
	.text-3xl {
	font-size: 1.6rem !important;
	}
	.text-2xl {
	font-size: 1.4rem !important;
	}
	.text-lg {
	font-size: 1.1rem !important;
	}
	.text-sm {
	font-size: 0.9rem !important;
	}
	.text-xs {
	font-size: 0.8rem !important;
	}
	.container {
	padding-left: 1rem;
	padding-right: 1rem;
	}
	.card-shadow {
	padding: 1.5rem !important;
	margin-bottom: 1rem !important;
	}
	.grid {
	gap: 1rem !important;
	}
	table {
	font-size: 0.85rem;
	}
	.w-24 {
	width: 5rem;
	}
	.space-y-4 > * + * {
	margin-top: 0.75rem;
	}
	}

	@media (max-width: 480px) {
	body {
	font-size: 14px;
	}
	h1 {
	font-size: 1.6rem !important;
	}
	h2 {
	font-size: 1.3rem !important;
	}
	h3 {
	font-size: 1rem !important;
	}
	.section-title {
	font-size: 1.2rem;
	}
	.text-3xl {
	font-size: 1.4rem !important;
	}
	.text-2xl {
	font-size: 1.3rem !important;
	}
	table {
	font-size: 0.8rem;
	}
	.w-24 {
	width: 4rem;
	}
	.space-y-4 > * + * {
	margin-top: 0.5rem;
	}
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<!-- Header -->
	<header class="header-gradient py-8">
	<div class="container mx-auto px-4 flex justify-between items-center">
	<div class="flex items-center space-x-6">
	<div class="w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-lg">
	<img src="http://static.photos/education/200x200/42" alt="이다은 강사 프로필 사진" class="w-full h-full object-cover">
	</div>
	<div>
	<h1 class="text-3xl font-bold gradient-text">강사 이력카드</h1>
	<p class="text-gray-600 mt-1">전문강사 이다은</p>
	</div>
	</div>
	</div>
	</header>

	<main class="container mx-auto px-4 py-12">
	<!-- Personal Info Section -->
	<section class="mb-12" data-aos="fade-up">
	<div class="card-shadow p-8 hover-lift">
	<h2 class="text-2xl font-semibold text-gray-800 mb-8 section-title">기본 정보</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div class="space-y-4">
	<div class="flex">
	<span class="w-24 font-medium text-gray-600">성명</span>
	<span class="text-gray-800">이다은</span>
	</div>
	<div class="flex">
	<span class="w-24 font-medium text-gray-600">생년월일</span>
	<span class="text-gray-800">1976.11.29</span>
	</div>
	<div class="flex">
	<span class="w-24 font-medium text-gray-600">소속</span>
	<span class="text-gray-800">국립통일교육원</span>
	</div>
	<div class="flex">
	<span class="w-24 font-medium text-gray-600">직위(급)</span>
	<span class="text-gray-800">전문강사</span>
	</div>
	</div>
	<div class="space-y-4">
	<div class="flex">
	<span class="w-24 font-medium text-gray-600">휴대전화</span>
	<span class="text-gray-800">010 9019 8087</span>
	</div>
	<div class="flex">
	<span class="w-24 font-medium text-gray-600">E-mail</span>
	<span class="text-gray-800">da33csy@naver.com</span>
	</div>
	<div class="flex">
	<span class="w-24 font-medium text-gray-600">주소</span>
	<span class="text-gray-800">경기도 오산시 부산중앙로42<br>오산시티자이2차아파트</span>
	</div>
	<div class="flex">
	<span class="w-24 font-medium text-gray-600">계좌번호</span>
	<span class="text-gray-800">1002 786 982982<br>우리은행</span>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Education Section -->
	<section class="mb-12" data-aos="fade-up" data-aos-delay="100">
	<div class="card-shadow p-8 hover-lift">
	<h2 class="text-2xl font-semibold text-gray-800 mb-8 section-title">학력</h2>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">연도</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">학교명</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">학과(전공)</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">학위</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2012</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">덕성여자대학교</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">사회복지</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">학사</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</section>

	<!-- Career Section -->
	<section class="mb-12" data-aos="fade-up" data-aos-delay="200">
	<div class="card-shadow p-8 hover-lift">
	<h2 class="text-2xl font-semibold text-gray-800 mb-8 section-title">경력</h2>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">연도</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">기관명</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">직위(급)</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">주요업무</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2025</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">오산시민주평화통일자문회</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">자문위원</td>
	<td class="px-4 py-4 text-sm text-gray-800"></td>
	</tr>
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2012~현재</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">통일부 국립통일교육원</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">전문강사</td>
	<td class="px-4 py-4 text-sm text-gray-800"></td>
	</tr>
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2022~현재</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">한반도통일미래센터</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">전문강사</td>
	<td class="px-4 py-4 text-sm text-gray-800"></td>
	</tr>
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2017~현재</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">국방부</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">안보강사</td>
	<td class="px-4 py-4 text-sm text-gray-800"></td>
	</tr>
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2023~현재</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">국립통일교육원 학교통일체험교육</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">강사</td>
	<td class="px-4 py-4 text-sm text-gray-800"></td>
	</tr>
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2023~현재</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">피스메이커</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">대표강사</td>
	<td class="px-4 py-4 text-sm text-gray-800"></td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</section>

	<!-- Certifications Section -->
	<section class="mb-12" data-aos="fade-up" data-aos-delay="300">
	<div class="card-shadow p-8 hover-lift">
	<h2 class="text-2xl font-semibold text-gray-800 mb-8 section-title">자격증</h2>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">연도</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">자격증명</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">발령청</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2018</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">인성지도사1급</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">한국평생학습진흥원</td>
	</tr>
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2018</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">다문화심리상담사1급</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">한국직업능력원</td>
	</tr>
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2014</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">실버라이프코치1급</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">한국심성교육개발원</td>
	</tr>
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2022</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">스피치지도사1급</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">한국교육검정원</td>
	</tr>
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2025</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">흡연예방교육강사1급</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">중앙인재교육평가원</td>
	</tr>
	<tr>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">2025</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">마약예방교육강사1급</td>
	<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-800">중앙인재교육평가원</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</section>

	<!-- Lecture Topics Section -->
	<section class="mb-12" data-aos="fade-up" data-aos-delay="400">
	<div class="card-shadow p-8 hover-lift">
	<h2 class="text-2xl font-semibold text-gray-800 mb-8 section-title">강의 주제 및 내용</h2>
	<div class="space-y-4">
	<div>
	<h3 class="font-bold text-lg text-gray-800 mb-2">북한은 지금 뭐하지?</h3>
	<ul class="list-disc pl-5 space-y-1 text-gray-700">
	<li>북한은 어떤 곳일까?</li>
	<li>북한의 경제</li>
	<li>북한의 문화·생활</li>
	<li>북한의 학교생활</li>
	</ul>
	</div>
	</div>
	</div>
	</section>

	<!-- Media Appearances Section -->
	<section data-aos="fade-up" data-aos-delay="500">
	<div class="card-shadow p-8 hover-lift">
	<h2 class="text-2xl font-semibold text-gray-800 mb-8 section-title">방송출연</h2>
	<div class="space-y-4">
	<div>
	<h3 class="font-bold text-gray-800 mb-2">TV 출연</h3>
	<ul class="list-disc pl-5 space-y-1 text-gray-700">
	<li>채널A "이제만나러갑니다."</li>
	<li>TV조선 "모란봉클럽"</li>
	<li>KBS 출연</li>
	<li>EBS 출연</li>
	</ul>
	</div>
	<div>
	<h3 class="font-bold text-gray-800 mb-2">라디오 출연</h3>
	<ul class="list-disc pl-5 space-y-1 text-gray-700">
	<li>정보 없음</li>
	</ul>
	</div>
	</div>
	</div>
	</section>
	</main>

	<!-- Footer -->
	<footer class="footer-gradient text-white py-12 mt-16">
	<div class="container mx-auto px-4 text-center">
	<p class="text-gray-300">© 2025 이다은 강사. All rights reserved.</p>
	<p class="text-gray-400 mt-2">전문적인 강의와 따뜻한 마음으로 여러분을 만나뵙겠습니다</p>
	</div>
	</footer>

	<script>
	feather.replace();
	AOS.init({
	duration: 800,
	easing: 'ease-out-cubic',
	once: true
	});

	// Add subtle animations to cards on scroll
	document.addEventListener('DOMContentLoaded', function() {
	const cards = document.querySelectorAll('.hover-lift');
	cards.forEach(card => {
	card.addEventListener('mouseenter', () => {
	card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
	});
	});
	});
	</script>
	</body>
	</html>