Putting in my Projects for my Portfolio

My Fist Website: Part 2

I’ve decided that each thing or functionality I add will become a different branch in order for me to keep things organized. Before I had usually just stayed on the main branch and pushed any changes and updates once I got them to work. Kind of like using only one save file for a game and saving each time you make progress by overriding the save file.

That’s a bad idea for many reasons, but in this case in making branches and updating them I can specifically just change branches and work on whatever file I need to work on. But I digress.

This post is about how I implemented a carousel for my website/portfolio. What I wanted was for each project to just scroll by once a visiter goes to the project page. With that in mind I created a new branch with “git branch <name of the branch>” then immediately added the changes to git with “git add .” and committed them with “git commit -m “<message or not about what was changed>”. This way when I look at my commits I’ll know exactly what has been changed and updated without having to dig any deeper.

Next, I used “npm install react-response-carousel” to install the carousel component I’ll be using. In order to actually incorporate it, the component will have to be imported as so:

Next is pretty simple, which is why I chose to incorporate this carousel. If there’s a simple, no muss, no fuss way of doing something, I’ll always go with that way.

The Carousel component opening and closing tag on line 6 and 34 will be the actual carousel that holds whatever projects or images or things cycled, which in this case are my projects. Each div within the Carousel component, line 7 and 15, line 16 and 24, and line 25 and 33, is one project. Therefore, if I wanted to add another project, I’ll just simply create another div. Within each div is an “img” tag and a div with a className “legend,” which is a section of the carousel slide that holds whatever information or items I want. For the purpose of my website it holds the name of the project and will soon have a button link that’ll take the user to the project’s GitHub repository.

In order for the carousel to automatically go through each div on an endless loop, the attributes will need to be placed within the components with their values. These control how the carousel will be displayed and how it acts.

So far these are the only ones I need, but I may end up playing with a few more attributes and values, which can be found here: https://github.com/leandrowd/react-responsive-carousel, just to learn more about this react carousel and maybe hopefully use this as a reference point for using similar components in the future.