Shana Odem's Professional Portfolio

Shana Odem

Software Engineer

front-end and basic back-end experience

Who I Am

Resume Overview

Degree
BSEE - UW, Seattle
Awards
  • Staff Recognition - UC, Berkeley
  • Outstanding Undergrad - UW, Seattle
Skills
  • Programming - OO, Procedural, Event-driven
  • Leadership
  • Project Mgmt
  • Technical Writing
Experience
  • Freelance Front End Software Engineer
  • DRAM Test Engineer
  • Undergraduate Research Assistant
  • Lead Technology Help Desk Staff
Other Interests
  • Outdoors - gardening, hiking, camping
  • Signal Processing - theory, audio apps
View LinkedIn
Self portrait

American-Canadian Dual Citizenship

What I Do

What I Do: Skills

Web Development

Programming

Development Tools

Operating Systems

Other

  • Leadership
  • Project Mgmt
  • Technical Writing
  • Research

Concepts

  • DRY
  • OOP
  • Accessibility (WCAG)
  • SEO
Beginner
  • exposure to concepts and basics
  • limited experience
Intermediate
  • efficiently completes most tasks
  • complex tasks require extra time
Advanced
  • efficient with any task
  • capable of mentoring others
Expert
  • the "go-to" person
  • capable of leading projects

What I Do: Web Development

Desktop view of my KanbanBoard project. Tablet view of my KanbanBoard project. Mobile view of my KanbanBoard project.

KanbanBoard App (Work In Progress)

This project is a simplified version of the KanbanFlow app, and is currently a work in progress.

I created this project to expand my React.js and Redux.js skills. The UI components are mostly complete. Cards cannot be moved on touch devices. Working on the ability to create a new board, edit card color, and other user functionality.

My roles: design, user experience (UX), and front-end development.

  • React
  • Redux
  • Redux-Thunk
  • SCSS
  • Bootstrap
  • JavaScript (ES6)
  • Firebase
  • Firestore
  • Visual Studio Code
Desktop view of my online resume. Tablet view of my online resume. Mobile view of my online resume.

Online Resume

This project was created to learn React.js, including JSX and pure react, class-based and stateless functional components, state and props, one-way data flow and one source of truth, and other core concepts.

This project is responsive with accessibility features and print stylings. Since server-side rendering is not setup for this project, a JavaScript fallback page was created.

Decoupled the HTML, CSS, and JavaScript with the use of BEM and SUIT CSS methodologies. Made HTML semantics a priority for readability, accessibility and SEO purposes.

My roles: design, user experience (UX), and front-end development.

  • React
  • CSS3
  • JavaScript (ES6)
  • Node
  • Visual Studio Code
Desktop view of my portfolio. Tablet view of my portfolio. Mobile view of my portfolio.

My Portfolio

My portfolio highlights my professional career, and the advancement of my web development skills. The site is responsive with JavaScript fallbacks, accessibility features, and print stylings.

Decoupled the HTML, CSS, and JavaScript with the use of BEM and SUIT CSS methodologies. Made HTML semantics a priority for readability, accessibility and SEO purposes. Optimized page load time, and configured the host server to use gzip compression and browser caching.

Improved my workflow with task automation using Gulp, CSS streamlining using Sass, and unit and integration testing using Mocha. Gained basic backend skills, such as validating data, and sending emails, as well as creating AJAX requests to send and receive JSON data.

My roles: design, user experience (UX), and front-end and back-end development.

  • HTML5
  • SCSS
  • JavaScript
  • PHP
  • Mocha
  • Gulp
  • Node
  • Sublime
  • Draw.io
  • Server Config
Desktop view of Whiney Cat Audio's website Tablet view of Whiney Cat Audio's website Mobile view of Whiney Cat Audio's website

Whiney Cat Audio

Whiney Cat Audio is a Seattle recording studio, whose aim is to highlight their services, studio space, and past work. The site is responsive with JavaScript fallbacks, accessibility features, and print stylings.

Decoupled the HTML, CSS, and JavaScript with the use of BEM. Made HTML semantics a priority for readability, accessibility and SEO purposes. Optimized page load time,and configured the host server to use gzip compression and browser caching. Performed cross-browser and user acceptance testing. Provided annotated wireframes for the client.

Improved my method of maintaining my code base by using BEM. Expanded upon my CSS and JavaScript skills with creating interactive features, such as section tabs and interchanging third-party media.

My roles: co-design, user experience (UX), and front-end development.

  • HTML5
  • CSS3
  • JavaScript
  • Photoshop
  • Illustrator
  • Vim
  • Draw.io
  • Server Config
Desktop view of Brian Pake's website Tablet view of Brian Pake's website Mobile view of Brian Pake's website

Brian Pake's Portfolio

Brian Pake is a Seattle audio engineer and musician, whose aim is to highlight his musical and engineering career by displaying his work through audio, video, and media press. The site is responsive with JavaScript fallbacks, accessibility features, and print stylings.

Made HTML semantics a priority for readability, accessibility and SEO purposes. Organized CSS based on OOCSS. Optimized page load time, and configured the host server to use gzip compression and browser caching. Performed cross-browser and user acceptance testing. Provided annotated wireframes for the client.

Expanded upon my CSS and JavaScript skills with creating interactive features, such as lazy loading third-party media, expand and collapse sections, and photo galleries.

My roles: co-design, user experience (UX), and front-end development.

  • HTML5
  • CSS3
  • JavaScript
  • Vim
  • Draw.io
  • Server Config

How I Work

Diagram of interconnected bubbles, which represents the big picture view of the components within a project.
A gear symbol representing project details.
A graphical chart representing the project evaluation process.

Big Picture

  • Project Scope
  • Architectural Design
  • Component Identification
  • Component Coupling
  • What-if Scenarios

Details

  • Tool Configuration
  • Design Implementation
  • Refactorization
  • Documentation
  • Test Implementation

Evaluation

  • Test Result Analysis
  • Solution Verification
  • Quality Assessment
  • Feedback Review
  • Improvement Identification
  • A group of people representing communication.
    Communication

    Have used JIRA, email, and meetings to inform coworkers and clients about project status, updates, issue awareness and resolution. e.g. Help Desk, Test Engr, & Web Dev

  • Pencil representing the task of documenting information.
    Documentation

    Created and maintained user instructions for classroom technology operation. Created help desk workflow charts, and end-of-semester reports for management co-review. e.g. Help Desk Staff

  • Organization diagram.
    Organization

    Have used various CSS methodologies (BEM, SUIT CSS, & OOCSS) and property orderings to increase maintainability and scalability. e.g. Web Dev

  • Priorization checklist.
    Priorization

    Split my comprehensive to-do list into prioritized sections. Each section is broken into smaller prioritized tasks based on importance and chronological order. e.g. All Projects

Where I Have Been

Hotel Audiovisual Technician

PSAV Portland, OR & San Francisco, CA

Operated audio, video, and lighting equipment. Worked closely with a team to organize and set up equipment. Provided in-person technical support.

  • Teamwork
  • Troubleshooting
  • Interpersonal Skills
-
Projection screen.

Led Technology Help Desk Staff

University of California, Berkeley

Award: Campus Staff Spot Recognition

Led a campus-wide technology help desk. Provided leadership through training and supervising student employees, and overseeing a transition period with overhaul of new departmental procedures. Tracked issues using JIRA. Created user instructions. Provided email, telephone, and in-person technical support.

  • Leadership
  • Project Mgmt
  • Technical Writing
-
Desktop Computer.

Undergraduate Research Assistant

Noise Lab University of Washington, Seattle

Assisted graduate students in researching 2D materials for nanophotonic devices, as well as reading and analyzing academic papers. Assisted in creating nanophotonic LEDs and lasers.

  • Research
  • Critical Thinking
  • Academic Reading
-
Magnifying glass.

Bachelor of Science, Electrical Engineering

University of Washington, Seattle

Award: Outstanding EE Undergraduate Student

Learned so many things about circuits, computers, the universe, and myself. The most influential thing I learned was how to teach myself efficiently. I gained a better understanding of how I think.

  • Analytical Skills
  • Self-teaching
  • Project Mgmt
Graduation Cap.

DRAM Test Engineer

Micron Boise, ID

Maintained a version controlled automated test program, including test software releases. Collected, analyzed, and documented test results. Worked with a team to evolve test methodologies to ensure test program efficiency. Performed written and spoken dialogs with overseas teams.

  • Testing
  • Code Maintenance
  • Multicultural Comm
-
Electrical Circuit Component.

Freelance Front End Software Engineer

Seattle, WA

Created responsive, accessible, and SEO friendly websites for clients. Used React.js and ES6 to develop reusable UI app components. Created modular HTML templates, and decoupled HTML, CSS, and JavaScript. Performed unit, cross-browser, and user interface testing. Used AJAX to transfer JSON data, and PHP and SQL to perform back-end functionality.

  • Web Development
  • Accessibility
  • SEO
- Present
Laptop Computer.

Why Web Development

The following are the main reasons why I have chosen web development instead of an electrical engineering topic, such as electrical circuitry, computer hardware, or embedded systems.

Programming vs. Circuitry

While earning my BSEE, I found my passion for the art of programming was much stronger than the art of circuitry.

App vs. HardWare Programming

While my exposure to hardware programming has helped me become a better programmer, I prefer application programming.

User Experience

I enjoy analyzing user needs to find and create solutions to meet those needs, whether the users are internal or external clients.

Web Development

I enjoy building and improving applications to have a strong user focus by blending my technical user support background with my programming and engineering skills. I enjoy making a design come alive by implementing its interactive features with the use of code. I am able to keep the big picture insight while digging through the details of implementation. I have worked in various fast-paced environments, and willingly taken on the challenge of learning something new outside my comfort zone. My top priorities are maintainability, scalability, efficiency, and user experience. To accomplish my goals, I prioritize collaboration, organization, and documentation.