# 영식 배 (Youngsik Bae)
> 안녕하세요! 저는 웹 프론트/백엔드와 알고리즘을 좋아하는 개발자입니다. 이 README는 HTML, Java, Python 스택을 중심으로 구성되어 있으며, 백준(BOJ) 프로필과 연결되고, 소개 페이지를 GIF로 보여주도록 구성되어 있습니다.
---
## 🔭 한눈에 보기
- **주요 스택:** HTML · CSS · Java · Python
- **관심사:** 알고리즘 문제 풀이, 웹 개발, 서비스 프로토타이핑
- **위치:** 대한민국
---
## 🛠 기술 스택
간단 설명:
- **HTML/CSS:** 반응형 레이아웃, 접근성 고려한 마크업
- **Java:** 백엔드 서비스, 알고리즘 구현, 콘솔/서버 사이드 로직
- **Python:** 스크립트, 데이터 처리, 자동화, 알고리즘 연습
---
## 🧩 백준(BOJ) 연결
[내 백준 프로필](https://www.acmicpc.net/user/YOUR_BAEKJOON_ID)
> `YOUR_BAEKJOON_ID`를 본인 아이디로 바꾸면 됩니다.
---
## 🚀 프로젝트 섹션
- **프로젝트 A** — 간단한 설명 (HTML + Java)
- **프로젝트 B** — 간단한 설명 (Python 자동화)
---
## 🎞 소개 페이지 GIF
소개 GIF는 `assets/intro.gif`에 위치하며, 아래와 같이 생성할 수 있습니다.
### 예시 intro.html
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{display:flex;align-items:center;justify-content:center;height:100vh;margin:0;font-family:Arial}
.card{width:520px;height:300px;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,0.12);display:flex;flex-direction:column;align-items:center;justify-content:center}
h1{margin:0;font-size:28px}
p{margin:6px 0 0 0}
.dot{width:12px;height:12px;border-radius:50%;margin-top:18px;animation:jump 0.9s infinite;background:#007acc}
@keyframes jump{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
</style>
</head>
<body>
<div class="card">
<h1>영식 배 (Youngsik Bae)</h1>
<p>HTML · Java · Python</p>
<div class="dot"></div>
</div>
</body>
</html>이 HTML을 Puppeteer 또는 화면녹화 도구로 캡처하여 GIF로 변환하면 README 상단에 표시됩니다.
README.md
assets/
intro.gif
projects/
project-a/
project-b/
scripts/
fetch_boj.py
capture.js
- Email: [email protected]
- Blog: https://yourblog.example.com