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. 🙏

• 🇰🇷 한국어 (Korean)

👀 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!