A portfolio website is the quickest and easiest way of showcasing your work as a designer. Even if you have a physical portfolio, a website is still an expected extra – and it's vital that it makes your work sing. After understanding the importance of a portfolio website my team decided to take part in the MLH Orientation hackathon to contribute to this amazing developer portfolio template so that it can be of use to every developer who wishes to showcase his/her work in the form of a portfolio.
What it does 🤖
The portfolio website offers customization to a developer according to his/her requirements. It is a static template where individuals can add their professional work to display it in front of their potential employers in the industry. Apart from acting as a summarizer of one individual's experience and professional work, it can also act as a mode of contact and a digital resume!
- The pre-loader: is what you see on the screen while the rest of the page's content is still loading. It is a simple animation to keep the viewer entertained!
- The change in project UI: on Hover, a brief description of the project is provided and if the viewer wishes to understand the project in detail, they can redirect themselves by clicking the arrow button.
- Adding cursor animation: makes the page stand out and improves the UI of the portfolio.
- Google Analytics tracking: helps one keep track of the interactions on the web page.
- Implementing box-shadow on cards: makes the cards more reactive and adds to the uniqueness of the portfolio.
- A custom scroll bar: the gradient colours add to the theme and make the webpage prettier.
How we built it 🛠️
- Changing UI details for project: Using :hover in CSS, we gave a brief detail about the project when one hovers over the project they can read the description and is given an option by using an arrow key to head over to the detailed project page
- Google Analytics tracking: using the tracking code, the setup for google analytics code was done. One can simply generate a tracking code and enter it in the _configure-yml file and can get insights about the web page using Google analytics.
- Adding cursor animation: This was done using HTML, CSS, JS and Jquery which configure the position of the arrow cursor and a circle animation follows it.
- Adding a preloader to the portfolio: Again using HTML, CSS and JS the preloader is coded to animate the page with a loading symbol before the portfolio is visible
- Implementing box-shadow on cards: On hover, we add CSS property to cards to show a box shadow of colour matched to the theme of the portfolio
- Adding a custom scroll bar: Using CSS we turned the normal scrollbar into a gradient coloured one.
Challenges we ran into ⏱️
- While setting up the repository locally we faced some issues
- Resolving conflicts on the pull requests
- When other teams had submitted their PR, some code got trickier to read and adding features that could work without any other feature going wrong was a task in itself
Accomplishments that we're proud of 🏆
- We added a UI feature to preview the project card contents on hover. PR
- Added the code and documentation to configure and set up Google Analytics tracking. PR
- Added a cursor animation. PR
- Added a preloader to the portfolio PR
- Implementing Box shadow on cards PR
- Creating a custom scroll bar PR
What we learned 📖
- How to work on a single project as a team using Git and Github and various new features like sequence diagrams of Github.
- Pair programming, working together in a team and working with members from diverse time zones.
- Learning and Contributing to a web development project considering the varied domains of the team members.
What's next for Recursive Rhino (Team 4) Portfolio ⏭️
- Generate our individual portfolios from the template
- Keep making more contributions to the template and improving the current codebase
- Brainstorming ideas for future projects and working on them