Skip to Main Content
Jessica G. Abejar

The Mini Projects Repo

Designed and developed a page for all my mini projects.

  • Main Skills & Tools: HTML5, CSS3 (Responsive Web Design, Media Queries, Flexbox, Grid, Variables), JavaScript
  • Other Skills & Tools: Content Creation, CodePen, SVG Background, Visual Studio Code, normalize.css, Google Fonts, Font Awesome, Git, GitHub, GitHub Pages, Chrome DevTools, W3C HTML & CSS Validation, WAVE Accessibility Checker, AChecker, Lighthouse
Screenshot of The Mini Projects Repo

The Original 24-Hour Portfolio

Before this project, I had originally wanted to create a quick, one-page tech portfolio in 24 hours, but soon I ended up becoming curious with Gatsby and decided to create a portfolio with Gatsby instead. After creating this site and writing a blogpost on doing mini projects, I wanted to go back and do a static HTML/CSS/JS project, and thus the Mini Projects Repo came into fruition.

During a CodeNewbie chat on side projects, I mentioned working on mini side projects. When a fellow CodeNewbie asked what kind of projects I made, I listed many projects ranging from CSS animations to buttons and accordions to tutorial projects that went the extra mile.

I realized how much I loved and enjoyed my mini projects and how much I have learned from them. I wanted to properly house them somewhere, so I created the Mini Projects Repo, where I can showcase some of my favorite projects.

Designing with Code

I began the process by drafting a quick paper wireframe. I knew I wanted to create a single page that displayed the mini projects in a grid. I also wanted a small navigation menu with three items: an anchor link to projects, an anchor link to a connect section with external links to my tech presence online, and a dark-mode button.

Paper wireframe of the mobile version of The Mini Projects Repo.
Paper wireframe of the desktop version of The Mini Projects Repo.

While I do recommend even going as far as creating a low-fidelity digital wireframe, I am glad that I even did a paper wireframe as I usually begin coding mini projects without giving design too much thought. My process is starting to evolve, and I am realizing the importance of designing before coding. It helps map out the MVP (minimum viable product) and can provide reference when you get stuck.

I began coding in CodePen and moved onto Visual Studio Code after deciding that I would like the responsive design to be mobile-first.

SVG Background

I wanted to try SVGs. At first, I thought I could create my own SVG background, but then I found this SVG background generator. I decided learning to create my own SVG background can be reserved for another day and I can at least experiment with this generated background. I used my "tech" theme color as my accent color in the SVG background and throughout the page.

Responsive Menu

I wanted to create a menu that exhibited different behaviors depending on browser size. At first I had wanted to create a menu that was fixed at the bottom but ultimately decided to leave the menu at the top of the page. I chose a fixed menu with button-like anchor links plus an actual button to change color themes; upon scrolling, the menu and its contents would shrink. This was my first time working with a script that triggered a function onscroll and that also used the window object. I found a code sample and refactored it to my needs and writing convention (ie: using addEventListener() and functions as named variables).

Connect Section

Before the Projects Section, I worked on coding the Connect Section, which was a flexbox that consisted of Font Awesome icons and links to all my tech-related platforms. I added a small CSS animation to give it a little pop!

Projects Grid

I choose to use CSS Grid for my projects section. The width of this section is wider than the other sections and has no background color except for the text. Of all features that I used in this project, I was incredibly excited to use <details> and <summary>. I didn't include this feature originally, but as I started writing, the contents of each card was getting longer than expected. I found this to be a great opportunity to use <details> and <summary>, which I had learned about when studying web accessibility.

In Summary

This was a fun 24-hour project where I was able to practice HTML/CSS/JS once again. I am happy that I was able to create the portfolio I had first envisioned for my tech projects and was able to use this to showcase my mini projects. As I continue to practice and make and redo mini projects, I look forward to growing my collection!