🚀 개발자가 아니어도 쉽게 수정 가능한 포트폴리오 템플릿
인라인 편집 기능으로 실시간으로 내용을 수정하고, 이미지를 업로드하고, 레이아웃을 커스터마이징하세요.
- Ctrl + E 또는 편집 버튼으로 편집 모드 활성화
- 텍스트, 이미지, 아이콘을 클릭해서 바로 수정
- 변경사항 자동 저장 (localStorage)
- 개발 모드에서 파일 시스템 저장 지원
- 모바일, 태블릿, 데스크톱 최적화
- 다크모드/라이트모드 지원
- 부드러운 애니메이션과 트랜지션
- Hero: 인삿말, 프로필 이미지, 소셜 링크
- About: 경험, 스킬, 스토리, 취미
- Projects: 프로젝트 갤러리 (이미지/비디오)
- Contact: 연락처 정보, QR 코드, 문의 양식
- 의미있는 파일명 자동 생성 (hero-profile, about-background 등)
- 기존 파일 자동 삭제로 저장 공간 관리
- QR 코드로 연락처 저장 (vCard 3.0)
- 푸터 네비게이션 자동 동기화
- SNS 공유 시 프로필 이미지 자동 썸네일 (Open Graph)
# 저장소 클론
git clone https://github.com/Mrbaeksang/my-site-template.git
# 브랜치 확인 (기본 브랜치는 main입니다)
cd my-site-template
git branch
# 만약 master 브랜치에 있다면 main으로 전환
git checkout main
# 또는 처음부터 main 브랜치 지정하여 클론
git clone -b main https://github.com/Mrbaeksang/my-site-template.git
cd my-site-template
# 패키지 설치
npm install
# 개발 서버 실행
npm run dev-
편집 모드 켜기
- 개발 환경:
Ctrl + E또는 우하단 ✏️ 버튼 클릭 - 편집 가능한 요소에 마우스를 올리면 편집 아이콘이 나타남
- 개발 환경:
-
텍스트 편집
- 텍스트에 마우스 호버 → 편집 아이콘 클릭
- 내용 수정 → Enter 또는 ✓ 버튼으로 저장
- Esc 또는 × 버튼으로 취소
-
이미지/비디오 업로드
- 미디어 요소 호버 → 설정 아이콘 클릭
- 파일 선택 또는 URL 입력
- 자동으로 최적화된 파일명으로 저장
-
배경 설정
- 각 섹션 상단의 설정 아이콘 클릭
- 이미지/비디오/색상 중 선택
- 투명도 조절 가능
vibeCoding/
├── app/
│ ├── api/
│ │ ├── delete-image/
│ │ ├── og-image/
│ │ ├── update-component/
│ │ ├── update-field/
│ │ ├── upload-image/
│ │ └── upload-video/
│ ├── globals.css
│ ├── layout.tsx
│ ├── page.tsx
│ └── safelist.css
├── components/
│ ├── editable/
│ │ ├── editable-background.tsx
│ │ ├── editable-icon.tsx
│ │ ├── editable-list.tsx
│ │ ├── editable-media.tsx
│ │ └── editable-text.tsx
│ ├── ui/
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── toast.tsx
│ │ ├── toaster.tsx
│ │ └── use-toast.ts
│ ├── about.tsx
│ ├── contact.tsx
│ ├── footer.tsx
│ ├── global-save-button.tsx
│ ├── header.tsx
│ ├── hero.tsx
│ ├── navbar.tsx
│ ├── projects.tsx
│ ├── save-field-button.tsx
│ ├── save-to-file-button.tsx
│ ├── site-title.tsx
│ ├── theme-provider.tsx
│ └── theme-toggle.tsx
├── contexts/
│ └── inline-editor-context.tsx
├── hooks/
│ └── use-toast.ts
├── lib/
│ ├── cleanup-storage.ts
│ ├── constants.ts
│ ├── metadata.ts
│ ├── reset-images.ts
│ └── utils.ts
├── public/
│ └── uploads/
├── components.json
├── package.json
└── tsconfig.json
app/globals.css에서 CSS 변수를 수정하세요:
:root {
--primary: 221.2 83.2% 53.3%; /* 메인 색상 */
--primary-foreground: 210 40% 98%; /* 메인 텍스트 색상 */
--background: 0 0% 100%; /* 배경색 */
--foreground: 222.2 84% 4.9%; /* 텍스트 색상 */
}app/page.tsx에서 섹션을 관리하세요:
export default function Page() {
return (
<>
<Header /> {/* 헤더 네비게이션 */}
<Hero /> {/* 히어로 섹션 */}
<About /> {/* 소개 섹션 */}
<Projects /> {/* 프로젝트 섹션 */}
<Contact /> {/* 연락처 섹션 */}
<Footer /> {/* 푸터 */}
</>
)
}각 컴포넌트의 defaultInfo 객체를 수정하세요:
// components/hero.tsx
const defaultInfo = {
greeting: "안녕하세요,",
name: "홍길동입니다",
title: "프론트엔드 개발자",
description: "창의적인 웹 경험을 만듭니다"
}- Framework: Next.js 15 - React 프레임워크
- Language: TypeScript - 타입 안정성
- Styling: Tailwind CSS - 유틸리티 CSS
- Icons: Lucide React - 아이콘 라이브러리
- Theme: next-themes - 다크모드
- QR Code: qrcode - QR 코드 생성
.env.local 파일을 생성하고 필요한 환경 변수를 설정하세요:
# 개발 환경 설정
NODE_ENV=development
# 추가 설정 (선택사항)
NEXT_PUBLIC_SITE_URL=http://localhost:3000- 위 버튼 클릭 또는 Vercel에서 직접 임포트
- 환경 변수 설정
- 배포 완료!
# 프로덕션 빌드
npm run build
# 프로덕션 실행
npm start기여는 언제나 환영입니다!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
MIT License - 자유롭게 사용하세요!
백상 (Mrbaeksang)
- YouTube: @Mrbaeksang95
- Website: devcom.kr
- Email: qortkdgus95@gmail.com
이 템플릿이 도움이 되었다면 ⭐️ 스타를 눌러주세요!
Made with ❤️ by Mrbaeksang