π« ddongule-simple-portfolio
db.json
and some assets(images
, markdowns
) then it's all done!
π See Example! π (ddongule's portfolio)
πΏ Features
π₯ One Page Layoutπ₯ Responsive Webπ₯ Dark/Light Themeπ₯ Language Support (Korean/English)
πͺ How To Use
1. Clone this repository
$ git clone https://github.com/ddongule/ddongule-simple-portfolio
2. Go into the repository
$ cd ddongule-simple-portfolio
3. Install Dependencies and Start Development Server
-
Using NPM
$ npm install $ npm start
-
Using Yarn
$ yarn $ yarn start
π Start Developing! Let's Go!
4. π Quick Start
If you do not want to use any of the items below, feel free to delete it from
db.json
! It will work fine!
-
example) You can choose sections that you want to use! Just delete it from
db.json
-
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"] } ] }
-
π°π· πΊπΈ 0. Select Default Language!
Default Language : English
-
Go to
/src/db.json
πΊπΈ [Default] Set Default Language as English"meta": { ... "defaultLanguage": "English" ... }
π°π· Set Default: KoreanIf you want to use Korean as your default language, just copy and paste the code below the line.
"meta": { ... "defaultLanguage": "Korean" ... }
π 1. Main Title Section.
-
Go to
/src/db.json
"aboutMe": { ... "nickName": "type your own title!" ... }
π 2. About Me Section.
- Change Main Image
-
Put your image to
/public/assets/images
jpg
,gif
,png
-
Go to
/src/db.json
"aboutMe": { ... "profileImg": "../assets/images/yourImageFileName" ... }
-
Change Introduction Text
-
πΊπΈ Go to/src/assets/static/markdown/aboutMySelf.english.md
- (+) To use the Korean version, you should write
aboutMySelf.korean.md
too.
Write With Markdown! Then You'll See..
The Result will be like this!
-
h1, h2, h3
# h1 ## h2 ### h3
-
Bold text with Highlight
-
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+
-
-
Enter
<br />
-
Code
`React.js` `HTML/CSS(SASS)` `Javascript`
-
CheckList (Black & White)
& Check List(Black & White)
-
CheckList (HighLight)
- Check List(Black & White)
-
Ordered List
1. Ordered List 2. Ordered List 3. Ordered List 4. Ordered List
-
Link
[TextToShow](https://www.your.link)
- (+) To use the Korean version, you should write
π 3. Skill Sets Section.
Write down your Professional Skill Sets here!
β¨ Customize your own SkillSets Section!
- Go to
/src/db.json
"skillSets": [
{
"category": "Front End Skills",
"skills": [
{ "skill": "Javascript", "level": "5" },
...
]
},
...
]
π 4. Projects Section.
Write down the Projects you have made!
β¨ Customize your own Projects Section!
- Go to
/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.
},
...
]
π 5. Timestamp Section.
Write down your Timestamps you have made!
β¨ Customize your own Timestamp Section!
- Go to
/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.
},
...
]
π 6. Experiences Section.
Write down your Experiences that you have!
β¨ Customize your own Experiences Section!
- Go to
/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/"
},
...
]
π 7. Education Section.
Write down your Educations!
β¨ Customize your own Education Section!
- Go to
/src/db.json
"educations": [
{
"title": "Woowa University",
"term": "2013.03 - 2017.03",
"description": "[Graduated] Computer Science and Engineering"
},
...
]
π Bug Reporting
How to Contribute?
- 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!
π