Purpose

For the culminating assignment in my master’s degree, I created, curated, and reflected on a digital portfolio that aligns my projects, experiences, and growth with M.Ed. program standards.

Description

The portfolio site uses top-horizontal navigation which adjusts to a hamburger menu based on screen size. While the website is non-linear, the intended order of navigation is (1) Home, (2) About, (3) Goals, (4) Projects, (5) Reflection, (6) Resources. The Projects webpage contains links to additional webpages, and the intended order of navigation is (1) Portfolio Design & Development, (2) Professional Presentation, (3) Internship, (4) Work Samples.

Design

Following an analysis of existing personal and portfolio websites and brainstorming content for my own professional portfolio, I designed the website through the creation of a style guide and site map. I carefully considered how to depict my expertise and growth as an educational technology specialist in a unique visual and professional manner, using the tagline “The Adventure of Learning” to depict my belief that learning is a life-long adventure. Images and graphics were limited in order to provide a simple, professional design, and I selected colors which have an earthy and natural tone.

Development

I developed and implemented the portfolio using several web design and graphic tools. First, I thoroughly reviewed the portfolio content requirements and used Google Docs to create a comprehensive document which contained all the text for each page in my digital portfolio.

To build the website, I used Gatsby framework, which utilizes the JavaScript library React to create a single-page application (SPA) to dynamically rewrite the webpage content based on the user’s navigation, allowing for faster load times. I edited the existing gatsby-creative theme which implements the Start Bootstrap Creative template. I used VS Code text editor to add and edit CSS, HTML, and JavaScript. Lighthouse was used to check website accessibility within the Chrome browser, and I made updates to the font colors to ensure appropriate contrast for accessibility.

Most icons came from Font Awesome Free and were already within the template. I updated the template’s homepage background image with a mountain scene from Pixabay, and I used Canva to create custom logo and icons for the Projects webpage. An iframe was used to embed the YouTube introductory video on the homepage.

I edited the site while it was running on a local server on my computer so that I could view my changes immediately before publishing. When I was satisfied with the changes, I saved the updates to GitHub, where the source code is stored, and I used the platform Vercel to deploy the updated code for online viewing.

My husband, Shawn Leberknight, is a software engineer and reviewed the website frequently during the development process, offering helpful feedback and advice, which I used to edit CSS, HTML, and JavaScript as needed. During the final stages of development, my website was reviewed by the instructor and classmates, and I used their feedback to make additional improvements, such as creating a separate About page, providing more details in my reflection, and adding more reference citations and links. Overall, I am very pleased with my digital portfolio and learned so much during the design and development process.