Projects
Portfolio Website
By: Collin Geersen
Project Description
This portfolio website acts as an interactive resume for Collin Geersen to show off his professional journey. This site includes: education, skills, projects, and additional information regarding Collin Geersen. This website project shows real-world skills that Collin Geersen has in web development.
Project Goals
There are three main goals with this project: create a professional interactive resume
site, learn/strengthen technical relevant skills, and create a foundation to
display current and future projects of mine in one convenient place. All three of
these goals were achieved when the website was launched for public viewing. 🎉
Project Toolchain
This project uses:
Languages
Technologies
Dev Utilities
Things Learned
During the course of this project I learned a great deal of valuable programming and web development skills/techniques.
Skills Gained
A non-exhaustive list of gained skills:
- SASS/SCSS
- WebComponents
- Parcel
- TypeScript
- figma
- ESLint
- Node.JS
SASS/SCSS:
Learned the power of using a CSS preprocessor with SCSS. One of the
great features of a preprocessor is the nesting of rules. Though native CSS has
added this feature, the syntax of SCSS is better in my opinion as there are
additional provided nesting selectors.
Furthermore, the
power of variables and at-rules like @mixins, @extends,
and @if were learned. These powerful features completely change how
I write and think about CSS and allow me create more
streamlined and dynamic stylesheets.
WebComponents: Learned how to use the WebComponents API to create self contained components that bundle HTML, CSS, and JavaScript into one JavaScript file that can be used in accordance with DRY principles. Learning this API also helped me master the concept of the Shadow DOM and Shadow Root.
Parcel: Bundler used for this site. Very good batteries included bundler that demonstrates bundling concepts in a straightforward manner that will allow me to use more advanced options like Webpack in the future. Learned extensive skills in tandem with the Node environment and how to configure a project with JSON files.
TypeScript: Converted scripts from JavaScript over to TypeScript and learned how to use the tsc. Additionally, learned how to leverage the power of it's type system in TypeScript.
figma: Used as a great SVG tool that can help in the design and work flow process. Using this great tool made me see why it is used by so many companies in their teams with the amount of collaboration tools it has.
Node.JS: Learned how to create Node projects, work within the node environment, and how to use npm.
ESLint: Very useful linting tool for TypeScript that is very easy to work with and configure to a project.
Skills Reinforced
Additionally, I strengthened existing skills with the creation of this site.
A non-exhaustive list of improved skills:
- HTML
- CSS
- JavaScript
- SVG
- git
- GitHub
HTML:
Greatly improved my understanding of responsive design, modern HTML
syntax, and common HTML techniques/design patterns.
For responsive design, proper HTML structure and nesting was
used to create wrappers for flexible layouts. Modern HTML syntax
entails leveraging newer tags for better semantics and DOM parsing.
Gaining experience of common HTML techniques/design patterns
is very important to not write in an idiosyncratic or hackish way
and also allows for design layouts that are familiar to the user.
CSS: To create responsive designs I learned modern CSS syntax, mastered CSS units, and utilized media queries. Modern CSS syntax includes additions like: min/max, clamp, and shorthands (i.e. margin-inline). Understanding CSS units is important for fluid designs especially within the context of relative units, like em vs rem. For media queries, I strengthened my abilities to create dynamic stylesheets based on screen sizes and device types. Additionally, proper BEM naming notation was learned.
JavaScript: Delved deep into DOM manipulation with JavaScript and their relevant APIs. Learned JQuery features and how to translate them in equivalent modern native JavaScript.
SVG: Learned how to style and animate SVG with both CSS and JavaScript.
git: Used the command-line interface consistent with common industry workflows.
GitHub: Greatly improved working with remote repositories and using GitHub Pages to host a website.
Things I Would Do Different
When I make another website for my portfolio in the future it will not be entirely from
the ground up like this one. For this iteration of my portfolio website, I wanted to
create the totality of the site from the ground up to gain as much knowledge of how
everything on the frontend works. Now that I have made this website myself in its
entirety, I can use frameworks with utmost confidence. In the future if I ever need
to manually edit specific parts of a framework I have that knowledge base.
An analogous example of this would be writing a Domain Specific Language "gluing" parts
of a project together.
So, for things I would do differently, I would use a CSS
framework like Bootstrap and a JavaScript framework like React to create a new
portfolio website. The process of making everything from the ground up for this
project makes me appreciate the work maintainers do for these frameworks.
Also, for future website projects I want to move away from GitHub Pages because of its limitations regarding the backend. For this project it was not an issue because of the goals set, but for future projects I would like to experiment with cutting-edge technologies like server-side rendering. For this I will have to setup a server with a provider, which will also allow me to strengthen my skills with-in servers and explore more of the domain of the backend.
Future Extensions of Project
Work on this iteration of my portfolio website is still not finished. I wish to expand upon the linked projects on the projects page as my portfolio increases. Also, I want to generate more content for my CSS snippets project page. ✨