Skip to content
/ trendy-resume Public template

๐Ÿ‘‹ Junho's new Rรฉsumรฉ, themed like a shopping mall website! You can make your own with this template too ๐Ÿ”ฅ (2020)

License

Notifications You must be signed in to change notification settings

junhoyeo/trendy-resume

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Trendy Rรฉsumรฉ

Zepeto of junhoyeo
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. ๐Ÿ™

contributions welcome Typed with TypeScript

๐Ÿ‘€ Preview

mockup for imac - 1 mockup for imac - 2 mockup for ipad - 1

preview-from-page-top preview-from-page-bottom

โค๏ธ Use case

Add yours too! ๐Ÿฅฐ

๐Ÿ— 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

Rendered header

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

Rendered stack

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

Rendered product card

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!

About

๐Ÿ‘‹ Junho's new Rรฉsumรฉ, themed like a shopping mall website! You can make your own with this template too ๐Ÿ”ฅ (2020)

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published