Portfolio From Scratch

A comfort zone is a beautiful place, but nothing ever grows there. - Unknown

My best work by far would have to be my portfolio website. I feel like this project accurately represents my talents as it’s one of the few completed and elegant projects I’ve made. I built the entire site from the ground up, applied all of my knowledge of coding into the project, and learned some new aspects of web design.

I built this portfolio from the scratch: hand coding everything without the assistance of frameworks. Frameworks have their uses, but I was more or less proving how much I knew about web design. This was our final project in the Computer Animation and Web Design program. On top of the independent factor, I also wanted to learn new things as a web designer. I find that using frameworks without knowing the underlying technology disrupts learning. I personally think that everyone starting out in coding should start out without frameworks, and work their way up once they fully understand the concepts behind them. Frameworks give you a platform to start coding from. This allows programmers to create websites / apps easily and quickly. However, these frameworks abstract the finer details of the programming language (in this case JavaScript), thus preventing the programmer from learning the language itself, and they become familiar with just one framework (of which there are thousands, compared to the one main language of the web: JavaScript).

Web design has always been a passion of mine. I wanted to make sure to represent that in this work. I already knew most of what I accomplished in this project. For example, I wanted a navigation bar that displays three items on one side, and one or two on the other. This was simple for me as I had learned a specific CSS (Cascading Style Sheets) technology, called Flexbox. Flexbox allows developers to easily create responsive (mobile friendly) layouts. I knew how to lay out elements, such as the title (ALEXANDER CARDOSI), logo, and subheadings properly. Creating gradients was a breeze, and I already had experience with Material Design colors, so I decided to use those. I used my typical code editor, Atom, along with some of my favorite plugins. I utilized a CSS preprocessor, called SASS (Syntactically Awesome Style Sheets), which allows for variables to be stored. CSS later added this feature, but for this project I needed to use the preprocessor.

Along with my pre-existing knowledge, I also learned quite a bit throughout this project. I experimented a bit with CSS and figured out how to edit kerning, add delayed CSS animations, and how to handle SVGs in <img> tags. Most of my focus went into JavaScript, however. I learned how to create a size-changing navigation bar, how to add slide out option and hamburger menu when on mobile, and even how to make my own lightbox (upon clicking an image, a preview is loaded). All of these components were a bit difficult to create, but I’m glad I challenged myself since I learned so much.

This project is one of my favorites. It has so many features I like, and I’m brought back to how much I learned during it. Even though I created it last year, this project still has a modern design and I’m quite proud of it. If I was to make another portfolio, it’d have a completely different design, just to test my skills and give a fresh to look to the website. Overall, I’m very proud of this website and hope to create more like it.

Stepping outside of my comfort zone is what motivated me to create this site. Before starting the project, I had never made a successful navigation bar with mobile support, or changed kerning to further support the design. Building this site with these features, even though I wasn’t comfortable with them, allowed me to further advance my skill set. Having a strong knowledge of web fundamentals will not only make me a better web developer, but a stronger learner as well.

Made with by Alexander Cardosi