Portfolio

CRISTIN.IO (This Website)

CRISTIN.IO (Nuxt Implementation)

CRISTIN.IO (currently implemented using Nuxt) represents the most recent total rebuild of this website. That's right, this page and all of it's webpage friends are brought to you by Nuxt. After becoming familiar with Vue 3 and using it for the previous version of CRISTIN.IO, I was having issues with SEO and performance that, based on my research, Nuxt promised to help with, or even fix entirely right out of the box.

Out of the box, Nuxt includes automatic routing (including automatic dynamic routing), easy to use built-in tools for SEO, performance optimizations like tree-shaking, smart link prefetching, link preloading, and static site generation (with SSR), and a helpful Bundle analyzer tool readily available to gauge where performance improvements could be made across my entire site.

I also was thrilled to move my blog out of ButterCMS, a headless CMS, and into markdown files powered by the Nuxt Content module. Nuxt Content allowed me to finally take full control of the presentation and structure of my blog content without the restrictions and difficulties that come with using a rich text editor to write each post.

GitHub Stats Card for React

GitHub Stats Card for React

A simple stats card showing information about any GitHub usser with public repositories. The GitHub Stats Card for React can be styled with the theme options.

Theme variations can be activated for your card with ease. Choose one of the available theme options (each of which are included in repository README file) for the theme prop. Pass the the theme prop with a value of the option you chose to the GitHub Stats Card for React component instance.

Usage instructions are also included in the repository's README.md file.

Front End Dev Flash Cards App

Weather Charts/Forecast App

YouTube Search App

YouTube Search App

This mini-application allows you to search for and watch content from YouTube. It returns only six results at a time (limitation due to me wanting to avoid paying for the API).

CenturyLink Small Business Site

CenturyLink Small Business Site

Built using a proprietary component library, this website searches for service in a user's zip code and updates content based on product availability along with showcasing small business products. Please note I cannot provide the repository link because it is private.

CRISTIN.IO (Vue 3 Implementation)

CRISTIN.IO (Vue 3 Implementation)

CRISTIN.IO (the Vue 3 implementation) represented the third implementation of this website. Initially built with React, I later rebuilt it using Gatsby, and after that came the Vue 3 version. Each new build came about due to me wanting to learn something new by actually doing it. I highly recommend this method, as React, Gatsby, and now Vue 3 are frameworks I now feel comfortable using and can work with professionally.

CRISTIN.IO (Gatsby Implementation)

CRISTIN.IO (Gatsby Implementation)

CRISTIN.IO (the Gatsby implementation) represented the second implementation of this website. Initially built with React, I rebuilt this site using the Gatsby framework in order to learn the technology. I highly recommend this method, as React and now Gatsby are technologies I feel comfortable using in a professional context.