-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (153 loc) · 8.37 KB
/
index.html
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
158
159
160
161
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<title> 재은's portfolio</title>
<link rel="stylesheet" href="CSS/portfolio.css">
<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=Hi+Melody&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Sunflower:wght@300;500;700&display=swap" rel="stylesheet">
</head>
<body>
<!--Header-->
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about-me">About Me</a></li>
<li><a href="#project">Project</a></li>
<li><a href="#community">Community</a></li>
</ul>
</nav>
<!--Progress Bar-->
<div class="bar-bg">
<span class="bar-ing"></span>
</div>
</header>
<!--Home-->
<section id="home" class="section">
<div class="home-content">
<p class="home-text"></p>
</div>
</section>
<!--About Me-->
<section id="about-me" class="section">
<div class="about-me-content">
<h2>About Me</h2>
<div class="about-me-wrap">
<div class="about-me-img">
<img src="images/바넬로피.jpg">
</div>
<div class="about-info">
<ul>
<li>이름 : 전재은</li>
<li>생년월일 : 2000년 05월 24일</li>
<li>학교 : 이화여자대학교</li>
<li>학과 : 컴퓨터공학과</li>
<li>취미 : 골프, 영화</li>
</ul>
<div class="hobby-icons">
<button type="button" class="golf-icon" id="golf-icon"><img src="images/golf-icon.png" alt="GOLF"></button>
<button type="button" class="movie-icon" id="movie-icon"><img src="images/movie-icon.png" alt="MOVIE"></button>
</div>
</div>
</div>
</div>
</section>
<!-- 골프 사진 슬라이드 모달 -->
<div id="golf-modal" class="golf-modal">
<div class="golf-modal-content">
<div class="golf-slide-container">
<img src="images/golf_1.jpg" class="golf-slide" alt="Golf Image 1">
<img src ="images/golf_2.jpg" class="golf-slide" alt="Golf Image 2" style="display: none;">
<img src ="images/golf_3.jpg" class="golf-slide" alt="Golf Image 3" style="display: none;">
<img src ="images/golf_4.jpg" class="golf-slide" alt="Golf Image 3" style="display: none;">
<img src ="images/golf_5.jpg" class="golf-slide" alt="Golf Image 3" style="display: none;">
<img src ="images/golf_6.jpg" class="golf-slide" alt="Golf Image 3" style="display: none;">
<img src ="images/golf_7.jpg" class="golf-slide" alt="Golf Image 3" style="display: none;">
</div>
</div>
</div>
<!-- 영화 예고편 영상 슬라이드 모달-->
<div id="movie-modal" class="movie-modal">
<div class="movie-modal-content">
<div class="movie-slide-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BOqFRHCrN-k?si=Cg4FYsyafZyene1l" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
<!--Project-->
<section id="project" class="section">
<div class="project-content">
<h2>Project</h2>
<!-- 첫 번째 프로젝트 -->
<div class="project-info">
<h3>일정 추천 관리 앱 (Graduation Project)</h3>
<p><strong>기간</strong>: 2023년 9월 - 2024년 6월</p>
<p><strong>역할</strong>: 프로젝트 기획 및 프론트엔드 개발</p>
<p><strong>사용 기술</strong>: HTML, CSS, JavaScript, React</p>
<p>사용자 데이터를 기반으로 하루 일정을 자동으로 추천해주는 웹 애플리케이션입니다.</p>
<ul>
<li>React로 기존 JavaScript 코드를 전환하여 컴포넌트 기반 구조로 개선</li>
<li>TMap API를 활용하여 지도 서비스와 연동</li>
<li>반응형 UI/UX 설계를 통해 다양한 디바이스에서 최적화된 경험 제공</li>
</ul>
<a href="https://github.com/steamTheRECO/DotheReco">GitHub에서 보기</a>
</div>
<!-- 두 번째 프로젝트 -->
<div class="project-info">
<h3>흑백가이드 웹 개발</h3>
<p><strong>기간</strong>: 2024년 10월 - 2024년 12월</p>
<p><strong>역할</strong>: 프로젝트 리드 및 프론트엔드 개발</p>
<p><strong>사용 기술</strong>: HTML, CSS, JavaScript, Naver Map API</p>
<p>사용자의 위치 기반 맛집 검색 및 리뷰 기능을 제공하는 흑백 테마의 직관적인 웹 애플리케이션입니다.</p>
<ul>
<li>직관적인 흑백 테마 디자인으로 접근성과 가독성 강화</li>
<li>Naver Map API를 활용하여 위치 기반 검색 및 팝업 기능 구현</li>
<li>사용자 즐겨찾기 및 리뷰 정렬 기능 추가</li>
</ul>
<a href="https://github.com/JeonJaeeun/HeukBaekGuide">GitHub에서 보기</a>
</div>
<!-- 세 번째 프로젝트 -->
<div class="project-info">
<h3>AR 게임 개발 (학부 프로젝트)</h3>
<p><strong>기간</strong>: 2024년 3월 - 2024년 6월</p>
<p><strong>역할</strong>: Unity 개발 및 AR 구현</p>
<p><strong>사용 기술</strong>: Unity, C#, Vuforia</p>
<p>AR 기술을 활용하여 QR 코드를 스캔하면 화살표가 표시되는 게임 개발 프로젝트입니다.</p>
<ul>
<li>Unity와 ProBuilder로 게임 맵 제작</li>
<li>Vuforia로 AR 카메라와 QR 코드 인식 기능 구현</li>
<li>팀원들과 협업하며 Unity 사용법 공유</li>
</ul>
<a href="https://github.com/Girlfriends-of-Jihoo/Final_JihoosGirlFriend">GitHub에서 보기</a>
</div>
</div>
<!-- 네 번째 프로젝트 -->
<div class="project-info">
<h3>Edu_Sync 프로젝트</h3>
<p><strong>기간</strong>: 2024년 11월 - 진행 중</p>
<p><strong>역할</strong>: 프론트엔드 개발</p>
<p><strong>사용 기술</strong>: React Native</p>
<p>과외 선생님을 위한 통합 과외 관리 앱 개발 프로젝트입니다.</p>
<ul>
<li>React Native를 사용하여 모바일 환경에서도 최적화된 UI/UX 제공</li>
<li>스케줄 관리, 학생 프로필 관리, 수업 기록 기능 구현</li>
<li>팀원들과의 협업을 통해 지속적으로 기능 개선</li>
</ul>
</div>
</section>
<!--Community-->
<section id="community" class="section">
<div class="community-content">
<h2>Community</h2>
<div class="icons">
<a href="https://github.com/JeonJaeeun"><img src="images/github-icon.png" alt="GitHub"></a>
<a href="https://www.instagram.com/jjjjjja_en/?igsh=ZHRydHBsYXozdHA3"><img src="images/instagram-icon.png" alt="Instagram"></a>
</div>
</div>
</section>
</body>
<script src="JS/portfolio.js"></script>
</html>