Sitecore Basic JSS Project (MyPortfolio)

Today I am going to share a project which I have created while learning Sitecore JSS. It is a portfolio template that I have downloaded from a site (link provided at the end of the blog). I just converted the static data of the portfolio template into a dynamic one using Sitecore. The project is created with Sitecore JSS only, no SXA component is used with JSS. Three types of JSS implementation can be followed by a developer for working with Sitecore JSS that are Code first approach, Sitecore first approach, or hybrid one approach. I have followed Code first approach for this project as I already have the portfolio template (HTML + CSS).

The whole portfolio template is divided into n number of components so that coding, as well as the understanding of the project, becomes simple. I also used the rendering parameter in the Brief Info component. It is used to shift the image from left to right location or vice versa. You can further apply more rendering parameters to make the template look more editable and flexible for Content Authors. Moreover, you can try to do the whole project using the Sitecore first approach. I have only used Single-Line Text, Rich Text, Image, Date, General Link, and Content List.

Most of the template items are converted into dynamic data items. You can further add more items and convert them into dynamic data using Sitecore JSS. Some component item links are still hardcoded and you can convert them into a dynamic ones. You can install the package in your Sitecore Instance using Installation Wizard. The package is provided in the GitHub repository. And the code part is provided in the myportfolio folder in the same repository.

Explore it more by making changes and learning Sitecore. Also do not forget to star and fork the repository.

For more learning about Sitecore JSS, you can follow the Sitecore JSS Style Guide (link provided at the end of blog).