Trendy Résumé

Trendy Résumé is an open-source Next.js template by Junho Yeo that turns a set of JSON files into a single-page résumé website themed like a shopping mall. It is built with TypeScript, runs with server-side rendering, and is designed to be customized by editing JSON config files in the src/data folder. The template includes sections for a header with a catchphrase, social links, navigation, avatar images, skill stacks, product cards, and blog post cards.

Key Features

• Next.js server-side rendering — The project is a Next.js application, so all pages are rendered on the server and can be deployed to platforms that support Next.js like Vercel (ZEIT), GitHub Pages, or Heroku.
• JSON-driven content — All content is stored in seven JSON files: info.json, social.json, navigations.json, avatar.json, stacks.json, products.json, and posts.json, with no database required.
• TypeScript typing — Each config object is typed with interfaces (IInfo, ILink, INavigation, IAvatar, IStack, IProduct) defined in src/utils/types.ts, giving you compile-time checks when editing data.
• Shopping-mall inspired layout — The design uses device mockups (iMac and iPad) and a header with a catchphrase and author name, giving the résumé a distinctive product-catalog feel.
• Skill bars with brand colors — Each stack entry supports a name, logo image, skill percentile (0–100), brand color for the progress bar and shadow, and a description.
• Product and post cards — Cards display an image, title, tags, category, place, date, description, and links; descriptions and links become visible when the card is clicked.
• Social links with Font Awesome — Social icons are added as Font Awesome class names (e.g. fab fa-github) with a URL for each link.

Who is it for?

Trendy Résumé is aimed at developers who want a standout personal page without building a site from scratch. Frontend developers can edit the JSON files and TypeScript types to reflect their own stacks and projects. Job seekers can present skills and competition awards in a visually distinct layout. Bloggers can reuse the product card component for post listings, since the posts model uses the same fields as products. Students can use the included GitHub template feature to generate a copy and customize it for their portfolio.

What can you do with it?

• Build a personal résumé site — Fill in the JSON config files with your info, social links, and stacks, then run yarn dev to preview locally.
• Showcase projects and awards — Add product entries with images, tags, competition results, dates, and links; the cards expand to show descriptions and links on click.
• Deploy to multiple platforms — Because it is Next.js, you can push the repository to Vercel, GitHub Pages, or Heroku for a live site.
• Use as a blog index — The posts section accepts the same schema as products, so list write-ups and link out to full articles.

How does it work?

1. Use the "Use this template" button on GitHub or clone the repository.
2. Install dependencies with yarn (or npm, deleting yarn.lock).
3. Run yarn dev to start the local development server.
4. Edit the JSON files in src/data and the TypeScript types in src/utils/types.ts.
5. Deploy to a service that supports Next.js.

Pricing

Trendy Résumé is a free, open-source GitHub template. There are no paid tiers or license fees mentioned in the repository; you can clone or generate your own copy without charge.

FAQ

Does Trendy Résumé use server-side rendering?

Yes, the project uses Next.js and explicitly warns that it is built for server-side rendering, so you should keep that in mind for any features that involve paging, rendering, or generating values.

Can I use npm instead of yarn?

Yes, you can use npm, but the README recommends deleting yarn.lock if you do, since it will be useless when using npm.

How do I add social links?

Edit social.json with a list of objects containing a name, a Font Awesome icon class name, and an href. The icon names are taken from Font Awesome.

Is there documentation in other languages?

The repository includes a Korean translation of the README (README.ko.md). The main documentation is still in progress according to the author, who asks for contributions via Issues and Pull Requests.