🌟 ddongule-simple-portfolio는 개발자를 위한 간단한 포트폴리오 템플릿입니다! 이 템플릿을 커스터마이징해 자신만의 포트폴리오를 만들어보세요! 코드를 보지 않아도 괜찮아요! db.json와 이미지, 마크다운을 편집하면 끝나요!
💛 예시 보러가기 👉 (ddongule's portfolio)
- 🔥 한 페이지에 모든 것을 담았어요!
- 🔥 반응형으로 만들어졌어요.
- 🔥 다크모드/라이트모드가 있어요!
- 🔥 다국어 지원(한국어/영어)
$ git clone https://github.com/ddongule/ddongule-simple-portfolio
$ cd ddongule-simple-portfolio
-
NPM 사용
$ npm install $ npm start -
Yarn 사용
$ yarn $ yarn start
만약 아래의 내용 중 필요없으신 부분이 있다면
db.json에서 Section을 지워버리세요! 그래도 잘 돌아갈거에요!
-
예시)
db.json에서 사용하고 싶은 Section만을 빼놓고 나머지를 지워보세요. 아래처럼요!aboutMe와timestamp만 사용하고 싶으시다면, 이렇게 작성하시면 돼요!-
src/db.json{ "aboutMe": { "name": "그루밍", "nickName": "nickName!", "profileImg": "../assets/images/me.gif", "email": "[email protected]", "githubUrl": "https://github.com/ddongule", "blogUrl": "https://mingule.tistory.com/", "linkedInUrl": "https://www.linkedin.com/" }, "timestamp": [ { "title": "우아한 횽제들", "when": "21.12 ~ ", "organizer": "우아한 횽제들", "tags": ["company"] } ] }
-
초기 언어는 영어로 선택되어 있습니다!
🔥 한국어/영어 중 기본 언어를 고르실 수 있습니다.
-
/src/db.json로 가세요."meta": { ... "defaultLanguage": "English" ... }아래 코드를 그대로 복사, 붙여넣기 하시면 됩니다! (대/소문자를 구별하기 때문에 오타가 생기면 동작하지 않을 수 있습니다.)
"meta": { ... "defaultLanguage": "Korean" ... }
-
/src/db.json로 가세요."aboutMe": { ... "nickName": "type your own title!" ... }
-
/public/assets/images에 사용하실 이미지를 넣으세요.jpg,gif,png
-
/src/db.json로 가세요."aboutMe": { ... "profileImg": "../assets/images/yourImageFileName" ... }
-
/src/assets/static/markdown/aboutMySelf.english.md로 가세요.- (+) 한국어 버전을 사용하시려면,
aboutMySelf.korean.md도 바꾸어 주셔야 합니다.
Markdown으로 작성해보세요! 그럼 아래처럼 보일거에요!
결과는..?! 두근두근 세근네근 💛
-
h1, h2, h3 사용하기
# h1 ## h2 ### h3 -
하이라이트가 있는 굵은 글씨 사용하기
-
yellow
**Hi, my name is ddongule** -
red
+R+Hi, my name is ddongule+R+ -
blue
+B+Hi, my name is ddongule+B+ -
green
+G+Hi, my name is ddongule+G+
-
-
엔터 치기
<br /> -
코드블록 사용하기
`React.js` `HTML/CSS(SASS)` `Javascript` -
흑백 체크리스트 사용하기
& Check List(Black & White) -
색깔이 있는 체크리스트 사용하기
- Check List(Black & White) -
순서가 있는 리스트 사용하기
1. Ordered List 2. Ordered List 3. Ordered List 4. Ordered List -
링크 삽입하기
[보여줄 내용](https://www.your.link)
- (+) 한국어 버전을 사용하시려면,
자신있는 Skill Sets 들을 적어보세요!
✨ SkillSets Section을 커스터마이징 해봐요!
/src/db.json에 가세요.
"skillSets": [
{
"category": "Front End Skills",
"skills": [
{ "skill": "Javascript", "level": "5" },
...
]
},
...
]
만들어보신 프로젝트에 대해서 적어보세요!
✨ Projects Section을 커스터마이징 해봐요!
/src/db.json에 가세요.
"projects": [
{
"imgUrl": "/assets/images/exmaple.png",
"githubUrl": "https://github.com/ddongule",
"projectUrl": "www.ddongule.com",
"title": "ddongule-simple-portfolio",
"term": "21.02.02 v1.3.0",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia ..",
"attribution": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia ..",
"tags": [] // Even if there are no tags to write, you should leave the empty array as is.
},
...
]
걸어온 길에 대해서 하나씩 적어보세요!
✨ Timestamp Section을 커스터마이징 해봐요!
/src/db.json에 가세요.
"timestamp": [
{
"title": "Woowa Sisters",
"when": "21.12 ~ ",
"organizer": "Woowa Sisters",
"tags": ["company"] // Even if there are no tags to write, you should leave the empty array as is.
},
...
]
어떤 경험 이 있으신지 적어보세요!
✨ Experiences Section을 커스터마이징 해봐요!
/src/db.json에 가세요.
"experiences": [
{
"imgUrl": "/assets/images/exmaple.png",
"title": "[Software Engineer] Woowa Sisters Co.",
"term": "21.02 - 현재 진행 중",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia ..",
"experienceUrl": "https://woowacourse.github.io/"
},
...
]
어떤 교육을 받으셨는지 적어보세요!
✨ Education Section을 커스터마이징 해봐요!!
/src/db.json에 가세요.
"educations": [
{
"title": "Woowa University",
"term": "2013.03 - 2017.03",
"description": "[Graduated] Computer Science and Engineering"
},
...
]
- Fork this repository
- Create your own branch:
git checkout -b new-feature - Add and Commit:
git commit -am 'feat: add new feature - Push to your branch:
git push origin new-feature - Submit a Pull Request!🌟