Profile picture

Andrew Vallejo

Front-End Engineer
Pronouns he/him
Open Resume Email Directly

About me

If I was Batman and my gadgets were experiences, I'd have a pretty rad utility belt. I've been a manager, unicycle club founder, bartender, professional photographer, nomadic traveler, graphic designer, and now a front-end engineer throughout my career. These experiences have unlocked skills I continue to hone: management, socializing, negotiating, innovating, problem-solving, empathizing, listening, and understanding the language of coding. And like Batman, I'm always adding new gadgets to my utility belt, and I look forward to collaborating alongside other superheroes in my next role.

The bat suit that I wear when I code contains:

🗻 A belt of gadgets containing: JavaScript, HTML5, CSS3, React, SQL, Express, Node.JS, Fastify, Markdown

🏎 In the trunk of the Batmobile: PostgreSQL, Heroku, Redux, Cypress, Mocha, Figma, GraphQL, Sass, Tailwind CSS, Axios, Swagger, Postman, Visual Studio Code, Git, Github, Context-API, Global State Management

🦇 The location of Batcave (Github)

🕵🏻‍♂️ The Batsuit (Resume)

Preferred locations

  • Denver, CO
Open to other locations and/or remote work

Previous industries

  • Hospitality
  • Restaurants
  • Retail

Skills

  • Adobe Illustrator
  • Adobe Photoshop
  • Apple
  • Chrome
  • CSS3
  • Cypress
  • Express
  • Git
  • GitHub
  • Google
  • GraphQL
  • Heroku
  • HTML5
  • JavaScript
  • Mocha
  • Npm
  • PostgreSQL
  • React
  • Redux
  • Sass
  • SQL
  • User Experience Design / UX
  • User Interface Design / UI

Currently learning

  • Node.js

Projects

Pokedex

Pokedex

Project scope time 20 hours
Collaborators

Tools Used

  • CSS3
  • React
  • Redux

» I rethemed my project (originally skill-test for a company)

« Phasebook Deployment

» Into this one

« Pokedex Deployment

I want to share a story about understanding what you can do when you use your learning styles "for you" and not "against you."

The skill test was a 10-day assignment in which I had to replicate a wireframe while also adding the required features.

The only required tech was React, so I decided to test out "how I do under pressure" as a means to make this project more worth-wild to my growth. So I threw in Redux and TailwindCSS since these are tools I've been looking forward to using for a while now.

My first PR was setting up the repo and installing the dependencies. My second branch set up the Redux store and got everything connected. By the end of that day, I came to regret my choice because of the unneeded layers of complexity I decided to add to the assignment.

Since I had already merged the first pull request, I did not want them to think I gave up immediately on my vision for the project, so I chose to power through it (this wasn't an easy choice either since it took several days to get all of the wires connected).

This decision to not give up immediately ultimately ended up paying off in more ways than what I can write right now. I am proud of myself for including Redux in my project and understanding its nuances to the extent that I will use it in my future applications.

Launch the App Code Repository
Screenshot detail for project Pokedex
Screenshot thumbnail #1 for project Pokedex Screenshot thumbnail #2 for project Pokedex Screenshot thumbnail #3 for project Pokedex

Star Wars RPG Companion

Star Wars RPG Companion

Project scope time 80 hours
Collaborators Profile picture for Lauren  Kessell Profile picture for Joe Ray Profile picture for Caleb Wittman Profile picture for Suzie  Kim

Tools Used

  • CSS3
  • GraphQL
  • HTML5
  • React
  • Sass

Star Wars RPG Companion

This application is a companion for the tabletop RPG game: Star Wars: Edge of the Empire. The companion app allows you to keep track of and store your in-game characters. You may also roll any amount of the featured Star Wars dice so that your adventure may unfold into the legendary campaign it was always meant to be.

About the experience

This was our capstone project and the first time I had the chance to work with folks from the back-end. It was a total of two front-end engineers and four back-end engineers. It was a fantastic opportunity to build a practical application while not knowing the language that most of us knew.

We tried some fancy new techs

We had chosen Apollo and GraphQL as it was a technology that all of us could learn and use with each other. Not only was it cool to learn about a completely alternative way to accessing data, but it was also elevating once we were able to bridge the front-end to the back-end using our respective knowledge.

It's always a minor thing that's the most deceiving

We had decided to save the dice roll feature for last since it did not seem like it would be too difficult. To my surprise, I found that all dies had custom-sided faces that had nothing to do with numbers like standard dice. On top of that, you can roll more than one of the same die, up to 7 different types of dice.

It was an insightful experience since I didn't know anything about the game nor the rules.

Launch the App Code Repository
Screenshot detail for project Star Wars RPG Companion
Screenshot thumbnail #1 for project Star Wars RPG Companion Screenshot thumbnail #2 for project Star Wars RPG Companion

OnlyDevs

OnlyDevs

Project scope time 100 hours
Collaborators Profile picture for Shayan Golafshani Profile picture for Rachael  Carroll

Tools Used

  • CSS3
  • Cypress
  • Express
  • Heroku
  • PostgreSQL
  • React
  • Sass

Only Devs

OnlyDevs provides a way for developers to challenge their knowledge while also studying with the contributions of others.

My thoughts on this project

This project is my favorite project that I made when I was at Turing for many reasons. I wanted to make this app the moment I wanted a tangible way to practice interview questions daily. This project was my first 'niche' project in which I and others could benefit greatly.

Stretch Goals

The next remarkable thing about this project was our stretch goals. Our group initially wanted to make a PWA as stretch technology. The challenge arose when we sought out an API with just a list of technical front-end questions. We also wanted to make our app a social app by making answers available to everyone once posted. To our dismay, that meant we had to create a backend.

It was incredibly challenging overall.

PostgresSQL isn't too bad in retrospect, but learning it for the first time proved difficult. This challenge taught me to save time and trouble by asking somebody in the backend program to teach the query language. The next challenge was Heroku, which, surprisingly, took up 80% of the stress that came in developing a backend. We had to code so many unknowns that it took until being stuck for an entire day to understand what they meant finally.

Upon completion of the project...

...the veil that hid what happens beyond the browser was lifted. I was able to see and understand the connections between the front, middle, and end of an application. That was the moment I felt like a real developer, knowing that I had the power to build an entire website on my own.

Launch the App Code Repository
Screenshot detail for project OnlyDevs
Screenshot thumbnail #1 for project OnlyDevs Screenshot thumbnail #2 for project OnlyDevs Screenshot thumbnail #3 for project OnlyDevs

Thirteen Moons

Thirteen Moons

Project scope time 50 hours
Collaborators

Tools Used

  • CSS3
  • Cypress
  • HTML5
  • JavaScript
  • React
  • Sass
  • User Interface Design / UI
  • Yarn

Thirteen Moons

Thirteen Moons is a playing-card game that acts as a self-routine guide with a spiritual influence. This project was supposed to be a 'flex' project to show our newly earned React skills.

It was more challenging than I expected

I told myself I would keep it to a simple card game to hold back my ambitious nature. Little did I know I would be spending a few days on just the card designs and interactions alone or that I would try to implement React context hooks for the first time (successfully, but most definitely not optimally).

"Mobile-Design First," they say

I did have one more goal, and it was to make it mobile-friendly. I wanted to make something that I could share with my friends and family and that it would also be helpful to them. Most people I know would visit the website on their phones and enjoy it there.

Two problems

  1. Hover elements don't work the same way on the phone. So the fancy card flip animation that I spent so much time on doesn't translate on mobile in the same way
  2. Since it is not a native app, I did not account for the URL bar in the phone browser. Since then, I've learned that mobile websites usually only have the navigation bar on the top while mobile apps have them on the bottom.

It was frustrating to see your application towards the final days. The website would not work on the phone, especially since I had to flip my focus to work on the desktop browsers.

I passed despite the circumstances!

This project ended up passing because it technically fulfilled all of the criteria in the rubric. However, it feels more like a demo of what it could've been.

My reflection

This project felt very stiff for me since I wasn't 'flexing' but trying many new approaches at once, and most of it didn't go in my favor. Yet, this project was pivotal to my growth because it created new options that I would fine-tune in my following projects.

Thirteen Moons was also the first project I went "all-out" with Figma to be as detailed as possible with my wireframe. I now always make a detailed wireframe since I believe it can act as a way to see user stories and the website's features visually.

Launch the App Code Repository
Screenshot detail for project Thirteen Moons
Screenshot thumbnail #1 for project Thirteen Moons Screenshot thumbnail #2 for project Thirteen Moons Screenshot thumbnail #3 for project Thirteen Moons