Building A Filterable Portfolio
What is a portfolio?
A Portfolio is important when you want to showcase you work. It consists of your writings, website you developed, blogs, news, etc. Portfolio is useful when you are applying for a job. Most of the company requires you to have a portfolio before setting up an interview. They will check your portfolio and see what have you done in the past. So making a portfolio is important for your career.
What is filterable portfolio?
A filterable portfolio is like an app that will manage to filter items on your portfolio. Having too many items on your portfolio will be difficult for them to find what they really want to see. They need to check it one by one and it is time consuming. Making your portfolio filterable will solve this problem. They can easily search item, filter it by tags, industry, format, category, etc. It is on point and making life easier.
How to build a filterable portfolio?
Here are the steps on building a filterable portfolio:
1. Download the plugin files that you are going to use.
- In our case we use Filtrify and the files are available to download on the internet. Make sure to read the instructions on how to use and install it.
2. Create your own layout or modify the existing layout.
- You can modify the html file that you download or you can create your own layout. It is much better to create your own layout so you can control and make it more good looking. Just make sure to read the documentation because some elements required to have specific class or id. We use custom css and tailwind css to make it more easy on styling. You also need to make it responsive on different devices. Make it look good on desktop, tablet and mobile. It is easy to achieve using tailwind css.
One of the most important thing on the layout is the filter options. From there is where you can filter the items by tags, industry, category, format, etc. Second one is the items. These items will be the result on what you select on the filter options.
3. Adding content on your portfolio list.
For the portfolio items, It is much easier and less time consuming if you will make your item as json. You can make it first on excel file and organized it. (Please refer to the figure below)
Note: Make sure that you have the proper title for each column, it will reflect on the json file that will be generate.
The next step is to convert it on json file. There are many online tools that will help you to convert excel file to json. Once you convert the json file, you can add it on your editor. You can add it as a separate file or you can put it directly on you script file. In our case we put it on the script file. Some filter plugin have conflicts if you will fetch the data asynchronously. Make sure to test it and see how it goes.
After adding the json file, we add the functionality that will automatically add the whole file on the DOM(Document object model). The method we use is map. Map method is useful for editing arrays and json is array of objects. You can also use forEach method here. After mapping through the array, the next to you do is set up the inner html of your container. We create the html code then just add variables in order to make it dynamic. The output of that will be depends on how many items you have in your json file. So even if you add more items on your json file, you don’t need to create a new content, you just have to add item on json file. (Please refer to the figure below)
4. Setting up the functionality
This step is the hardest and most important thing. In this step, you will setup the filter function. You need to learn how the plugin works in able to modify the functionality.
5. Test the Application
- For testing the application, make sure that there are no error in your code and check each and every possibility that you will do before publishit it.
This is the initial load of the app. It will show all the items.
You can start filtering items based on what you need. In the plugin we used, it will also show home many items are available on that category.
You can also do searching on the category you want to filter.
Once you do the filter, it will also show what is the active filter and it will show how many items found on your filter.
You can also do multi filtering, depending on what plugin you used.
After testing it and no errors or bugs was found. Then you few steps away on publishing your application.
The next step is to make it as a Progress Web Application. It is not required to make this as PWA but it will make your application more accessible. User can use it offline and install it on their devices.
Here are the steps on how to make your portfolio a Progressive Web Application.
1. Create a manifest.json file on your editor inside your folder workspace.
This is the basic setup on manifest.json(Please refer to the image above)
- name – name of your application
- short_name – short name of your application
- start_url – usually it is default as .(period).
- display – standalone
- background_color – the background color of your application
- theme_color – the theme color of your application
- orientation – you can set it up as landscape or portrait
- description – description of your application
- icons – the icon that will show when someone install the app
Please make sure to link it on your html file. You can also check if your manifest json is working through your browser. Go to your application on your browser then go to developer tools > application>manifest.
You can check the properties that you added on the manifest.json
2. The next thing you will do is to set up serviceWorker.js
Most of the code here are available from online. The only thing you need to check is the cacheName and static Assests. cacheName can be named anything. Static assests are the list of your assests in your application. Make sure to include script files, html files and css files in there. This is important in order to save the file on cache memory and able to use it even offline.
You can check if serviceWorker is working on your browser. Go to your web application then developer tools> applications>service workers.
You can also check if it is installable. Please refer to the image below.
3 The next step is to test it online. There are many tools online that will analyze if your application is PWA, optimize of PWA, etc.
There’s also tool on your google chrome browser to check it. Launch your app in chrome, then go to developers tools > Lighthouse.
Make sure to read the final report to correct issues and make it more optimize.
Progressive Web App is also compatible on mobile devices. You can install it and use it offline. Please refer to the figures below.
After checking it on different devices and there’s no issue, you can now publish it and make it live so other people can see your work.
Github Repository Link: https://github.com/EternusGlobal/filterable-portfolio
Github Demo Link: https://eternusglobal.github.io/filterable-portfolio/