resume nextjs

---

Introduce

• Anyone can easily create a pretty web resume (with some coding ..)
• Next.js, Bootstrap CSS is used.
• In fact, https://github.com/uyu423/Resume- legacy ported it with Next.js.
• Sample: https://uyu423.github.io/Resume-nextJs
  • For more examples, refer to EXAMPLE.MD.

Contributors

• YOWU (UYU423)
• Dal-ya
• Taeyeong Kim (Lizard-KIM)
• Taeyang Jin (Heli-OS)
• Hyogeun OH (Zerohertz)

Requirems

• Node.js> 18
  • Node.js 18 The ERR_OSSL_EVP_UNSUPPORTED that occurs from the version 18 or higher to avoid NODE_OPTIONS=--openssl-legacy-provider option is applied.
  • It is recommended to test it in the Node.js version of 18 or later, and recommend using the Node.js version listed in .nvmrc .

Install

 # fork to your github account & git cloning your forked repository
npm install

Run Development Mode

npm run dev

Structure

• Asset/
  • Images, Favicon
• Component/
  • React Components
• Pages/
  • It is only one page for rendering index.html .
• payload/
  • You can pull out your personal web resume just by changing your payload data.
  • It includes the data necessary for the resume rendering.
  • Payload Detail at the bottom
• DOCS/
  • When npm run export (next export) is executed, the static html is rendered and generated at the bottom of docs directory.
  • GitHub Pages' docs/ Directory of Github Pages can be performed to host Github Pages.
  • docs/typedoc/ contains Typedoc html, but does not produce as npm run export . You can create a typeDoc with npm run typedoc .

Payload description

• TypeDoc: https://uyu423.github.io/Resume-nextJS/Typedoc
  • The Rendering Sample Screenshot for all payload within TypeDoc.
• All payloads except _global and footer Payload have disable?: boolean field. If the field is true , it does not render the section of that payload.

Profile

• Profile picture, name, contact means, some notice areas
• Typedoc: iprofile.payload
• TS SAMPLE: payload/profile.ts

Introduce

• Self -introduction area
• TypeDoc: IINTRODUCE.PAYLOD
• TS SAMPLE: Payload/Introduce.ts

Skill

• Introduction area for your own technology
• Typedoc: iskill.payload
• TS SAMPLE: payload/skill.ts

Experience

• (Workplace) Introduction area for experience
• TypeDoc: IEXPERIENCE.PAYLOD
• TS SAMPLE: Payload/Experience.ts

Project

• Introduction area for implementation projects
• TypeDoc: iproject.payload
• TS SAMPLE: Payload/Project.TS

Open source

• Introduction of open source activities
• TypeDoc: IOPENSOURCE.PAYLOD
• Ts sample: payload/opensource.ts

Presentation

• Introduction of presentation activities
• TypeDoc: ipresentation.payload
• Ts sample: payload/presentation.ts

Article

• Blog/SNS post, introduction area for articles
• TypeDoc: IARTICLE.PAYLOD
• TS SAMPLE: Payload/Article.TS

Education

• Introduction to academic
• TypeDoc: Ieducation.payload
• Ts sample: payload/education.ts

ETC

• Introduction to other items (competitions, certifications, service, etc.)
• TypeDoc: IETC.PAYLOD
• TS SAMPLE: Payload/ETC.TS

_Global

• Settings area for global settings (Web Title, SEO, FAVICON, etc.)
• TypeDoc: Iglobal.payload
• Ts sample: payload/_global.ts

Export

npm run export

• STATIC HTML resources are generated at the bottom of /docs .
• Sub path branches change the domain structure (ex. Https://uyu423.github.io/resume) changes homepage field value in package.json to a domain you want to host.
  • If there is pathname in homepage field, there is a logic that adds assetPrefix of next.config.js

Export to Github Pages

Repository Setting

• Options -Github Pages -SOURCE -Select Master Branch /Docs Folder
  • For more information about Github Pages Source, please refer to help.github.com.
• Run npm run export to update static html in docs .
• If you have an external domain, please fill in the Custom Domain item.
  • docs/CNAME file required for the Github Pages Hosting is created automatically during npm run export process.
  • See package.json 's homepage field for docs/CNAME file creation. Modify the HOMEPAGE value when using Custom Domain.
  • If homepage field in package.json is presumed to be *.github.io/* it is regarded as not using the Custom Domain and does not generate docs/CNAME .
  • For more information about external domains, please refer to help.github.com.
• *.github.io If you use the domain as it is http://{username}.github.io/{repository_name} If you connect, you will see a web resume.

Contribution

• If you want additional features, please look. Always Open.

Question?

• When the image is broken in the Production Build
  • See #24
• How do you adjust the order of the section?
  • Currently, you have no choice but to change the rendering order directly from pages/index.tsx .
  • I'm thinking about how to handle it with data or _global payload.
• In the case of an image, CSS 404 in index.html
  • #37 Note