Ego

Ego is a one-page portfolio template built with Gatsby and TinaCMS, using JSON files as the data source and styled-components for styling, that compiles a static personal portfolio site.

What is Ego?

Ego is a one-page portfolio site template developed with Gatsby, TinaCMS, and styled-components. It takes content from .json files and compiles it into a static React-based website. The template is currently used as the author's personal portfolio at https://kevinfaveri.now.sh/.

Key Features

• Gatsby framework — Produces a static site using Gatsby, a React-based static site generator that pre-renders pages for fast loading.
• TinaCMS integration — Pairs Gatsby with TinaCMS, a Git-backed content management system, allowing content editing from the repository.
• JSON data source — All site content is stored in .json files, so no database is required; editing content means editing JSON.
• styled-components styling — Uses the styled-components library for CSS-in-JS, letting styles live inside the component files.
• One-page layout — The template presents a single-page structure designed for personal portfolio content, such as an introduction and project showcase.
• Live example — A working deployment of the template runs at https://kevinfaveri.now.sh/, demonstrating the default look and feel.

Who is it for?

• Developers who want a minimal, code-friendly portfolio and are comfortable editing JSON and working with Gatsby.
• Designers who need a fast, customizable single-page site and can use the JSON structure to update content without touching React components.
• Technical bloggers planning a portfolio site with future blog capabilities, since a blog feature is on the roadmap.

What can you do with Ego?

• Showcase your work: Publish a one-page portfolio that highlights your projects, skills, and contact information.
• Customize the design: Use styled-components to adjust colors, layout, and typography directly in the component code.
• Manage content via GitHub: Update your portfolio by editing .json files and pushing changes, which then trigger a Gatsby rebuild.

How does Ego work?

Ego uses Gatsby's build process to compile React components and the content from JSON files into static HTML, CSS, and JavaScript. Content lives in .json files that are fed into the site at build time. The template also integrates TinaCMS, so editors can manage those JSON files from a web interface, though inline editing is noted as a roadmap item.

Roadmap

The project's roadmap lists several planned enhancements:

• Blog feature
• Dynamic page generation
• Editable menu
• Emoji parser on every render
• TinaCMS inline editing

FAQ

What is Ego?

Ego is a one-page portfolio template built with Gatsby, TinaCMS, and styled-components. It uses JSON files as the data source to generate a static portfolio site.

Does Ego have a blog?

Not currently. A blog feature is listed on the roadmap, so it is planned but not yet implemented in the current version.

How do I update the content?

Content is stored in .json files, so you can edit those files directly in the repository. The site rebuilds with Gatsby to reflect changes.

What does the roadmap include?

The roadmap lists a blog feature, dynamic page generation, an editable menu, an emoji parser on every render, and TinaCMS inline editing.