Trendy Rรฉsumรฉ

Hello, this is my trendy new rรฉsumรฉ. Wanna make one for yourself too?
If any of you are here for my latest(or English) rรฉsumรฉ, please leave an issue here or contact me for updates,
since I don't have much time to keep track of my works nowadays.๐
๐ Preview
โค๏ธ Use case
Add yours too!
- trendy-resume.now.sh
- kdw.now.sh
- seungmin.io
- about.mingeun.com (inspired from design)
๐ Make one for youself!
1. Duplicate this repository
You can just clone this repo to your account, or use this repo as a template!
2. Development on your local machine
git clone https://github.com/your-nickname/some-repository.git
# this clone link is from the repo that you generated at the previous step!
cd some-repository
# move to your newly cloned folder
yarn
# to install dependencies
# of course, you can use npm
# - but just be sure to delete yarn.lock because it'll be useless if then
yarn dev
# run the dev server in your local
3. Setup deployment
โ ๏ธ This project uses Next.js for server-side rendering!!!โ ๏ธ Keep this in mind while developing features related to paging, rendering, generating values etc.
๐
You can deploy to services that supports Next.js like ZEIT, Github Pages, Heroku.
4. Configurations
Now, look through the files and feel free to customize for yourself!
๐ Documentation
I'm still working on a more proper documentation and make more things customizable, so you can either wait, hack, or help me by contributing via Issues and Pull Requests!
๐ Infomation
Example
{
"title": "Rรฉsumรฉ",
"author": "junhoyeo",
"catchphrase": {
"text": "Frontend is \nINEVITABLEโข",
"description": [
"๋ถ๊ฐ๋ฅํ ํ๋ก ํธ์๋๋ ์๋ค๊ณ ๋ฏฟ์ต๋๋ค.",
"๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ค๋๋ ์ฑ์ฅํ๊ธฐ ์ํ ๋
ธ๋ ฅ์ ํ๊ณ ์์ฃ ."
]
}
}
Preview
About
Name | Description | Location |
---|---|---|
Config | The JSON config file | src/data/info.json |
Type | Typing of object | src/utils/types.ts (interface IInfo ) |
Fields
Field | Description | Example |
---|---|---|
title |
Title | Rรฉsumรฉ |
author |
Author name next to title | junhoyeo |
catchphrase.text |
Main Catchphrase | Frontend is \nINEVITABLEโข |
catchphrase.description |
Description below main catchphrase(rendered line by line) | ["๋ถ๊ฐ๋ฅํ ํ๋ก ํธ์๋๋ ์๋ค๊ณ ๋ฏฟ์ต๋๋ค.", "๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ค๋๋ ์ฑ์ฅํ๊ธฐ ์ํ ๋
ธ๋ ฅ์ ํ๊ณ ์์ฃ ."] |
๐ค Social Links
See above for preview.
Example
[
{
"name": "github",
"icon": "fab fa-github",
"href": "https://github.com/junhoyeo"
},
{
"name": "facebook",
"icon": "fab fa-facebook",
"href": "https://www.facebook.com/juno3704"
}
]
About
Name | Description | Location |
---|---|---|
Config | The JSON config file that contains list of objects | src/data/social.json |
Type | Typing of a single object | src/utils/types.ts (interface ILink ) |
Fields
Field | Description | Example |
---|---|---|
name |
Name of the navigation | github |
icon |
Icon className from Font Awesome | fab fa-github |
href |
Location to move when link is clicked | https://github.com/junhoyeo |
๐ต๏ธโโ๏ธ Navigation
See above for preview.
Example
[
{
"name": "ํ",
"href": "#"
},
{
"name": "๊ฐ๋ฐ ์คํ",
"href": "#stacks"
},
{
"name": "์ต๊ทผ ํ๋ก์ ํธ",
"href": "#recent"
},
{
"name": "๋ธ๋ก๊ทธ ์ดํด๋ณด๊ธฐ",
"href": "#blog"
}
]
About
Name | Description | Location |
---|---|---|
Config | The JSON config file that contains list of objects | src/data/navigations.json |
Type | Typing of a single object | src/utils/types.ts (interface INavigation ) |
Fields
Field | Description | Example |
---|---|---|
name |
Name of the navigation | Home , My Stacks , Recent |
href |
Location to move after navigation item is clicked(usually bookmarks with id ) |
#home , #stacks , #recent |
๐ฉ๐ผโ๐ป Avatars
See above for preview.
Example
[
{
"image": "coffee.png"
},
{
"image": "default.png"
},
{
"image": "poze.png",
"contain": true
}
]
About
Name | Description | Location |
---|---|---|
Config | The JSON config file that contains list of objects | src/data/avatar.json |
Type | Typing of a single object | src/utils/types.ts (interface IAvatar ) |
Fields
Field | Description | Required |
---|---|---|
image |
File name of the avatar file, located in the public/static/avatar folder | true |
contain |
object-fit will be contain in the rendered img tag if this field is true (else cover ) |
false |
๐ Stacks
Example
[
{
"name": "React & React Native",
"image": "react.png",
"skill": 90,
"color": "#52C1DE",
"description": "์์ด๋์ด๊ฐ ๋ ์ค๋ฅด๋ฉด ๋ฐ๋ก ๊ตฌํํด ๋ผ ์ ์์ต๋๋ค. Hooks๋ฅผ ์ฌ์ฉํด์ ๊น๋ํ ์ฝ๋๋ฅผ (๋ณดํต ํ์
์คํฌ๋ฆฝํธ๋ก) ์์ฑํฉ๋๋ค."
}
]
Preview
About
Name | Description | Location |
---|---|---|
Config | The JSON config file that contains list of objects | src/data/stacks.json |
Type | Typing of a single object | src/utils/types.ts (interface IStack ) |
Fields
Field | Description | Required |
---|---|---|
name |
Name of stack | true |
image |
file name of the stack image(logo) file, located in the public/static/stacks folder | true |
skill |
Skill proficiency expressed in percentiles(0 to 100 ) |
true |
color |
Brand color for stack(used in image shadow & progress bar color) | true |
description |
Description under stack name | true |
๐ฆ Products
Example
[
{
"image": "static/products/danim.png",
"title": "์ธ์์ ๊ฑฐ๋๋ค, ๋ค๋.",
"parts": [
"APP",
"DESIGN"
],
"category": "์ ํ๋ฆฌ์ผ์ด์
",
"place": "์ 19ํ ์ฑ์ผ - ์ํ ๋ถ๋ฌธ ์ต์ฐ์์(1์)",
"date": "2019.12.21 ~ 2019.12.22",
"description": "์ค์ค๋ก ๋๋ ์์คํ ์ฌ๋์๊ฒ, ํน๋ณํ ์ฌํ์ ์ ๋ฌผํ ์ ์๋๋ก ๋์์ฃผ๋ ์ฑ์
๋๋ค. ๋ง์ถคํ ์ฌํ ์ํ์ ์ ๊ณตํ๊ณ ์ ๋ฌผํ ์ ์๊ฒ ํฉ๋๋ค. ์ธ์ฑ UI๋ฅผ ๋์์ธํ ๋ค React Native๋ฅผ ์ด์ฉํด ๋ชจ๋ฐ์ผ ์ฑ์ ์ ์ํ๋ ๊ฒ์ ๋ด๋นํ์ต๋๋ค.",
"links": [
{
"icon": "fab fa-github",
"text": "๋ชจ๋ฐ์ผ ์ฑ ์ฝ๋ ๋ณด๊ธฐ",
"href": "https://github.com/junhoyeo"
},
{
"icon": "fab fa-github",
"text": "๋ฐฑ์๋ ์ฝ๋ ๋ณด๊ธฐ",
"href": "https://github.com/junhoyeo"
}
]
}
]
Preview
About
Name | Description | Location |
---|---|---|
Config | The JSON config file that contains list of objects | src/data/products.json |
Type | Typing of a single object | src/utils/types.ts (interface IProduct ) |
Fields
Field | Description | Required |
---|---|---|
image |
file name of the product image file, located in the public/static/products folder | true |
title |
Product title | true |
parts |
Array of string parts(tags in top left to express responsibilities) | false |
place |
Place of competition and award performance | false |
date |
Development Period | false |
description |
Product description(visible when card is clicked) | false |
links |
Array of product links with interface ILink (visible when card is clicked) |
false |
๐ Posts
For blog posts(2nd section). All models/fields are same as products.
About
Name | Description | Location |
---|---|---|
Config | The JSON config file that contains list of objects | src/data/products.json |
Type | Typing of a single object | src/utils/types.ts (interface IProduct ) |
๐ญ Sweet Tips
These are the materials I used for designing this blog.
Service or Material | Description | Alternatives |
---|---|---|
Zepeto | You can easily make a cool avatar like youself, and take pictures | Maybe some facial-emoji solutions? |
Smartmockups | Some of the mockups was generated here. It's really great but trial version like mine includes a small watermark in the corner, also it's hard to find multiple device mockups with the same machine. | Photoshop is the best, really. |
Feel free to add yours too!