Skills
Web Design
My web design process encompasses wireframing, creating initial sketches with Figma or Adobe XD, and refining multiple prototypes to reach the final design. I focus on crafting modern, responsive, and accessible websites that offer excellent performance.
- Transform prototypes into pixel-perfect HTML and CSS
- Design compelling landing pages and dynamic/static sites with clear visual hierarchy and effective communication principle
- Expertise in UI/UX development, SEO techniques, and interactive design
Web Development
I specialize in developing complex web applications using cutting-edge frameworks like React and Angular and SvelteKit. My backend expertise includes Node/Express servers integrated with MySQL, MongoDB, or PostgreSQL databases.
- Full-stack development with React/NextJS, Angular/NestJS, and SvelteKit
- Creating dynamic single-page applications (SPAs)
- Proficient in TypeScript for developing robust applications
- Expertise in backend development with Python and FastAPI
- Database and caching techniques with Redis or Redux
Backend Development
I specialize in developing secure, scalable RESTful APIs for network-based applications. My APIs are designed to be lightweight, maintainable, and intuitive, following a stateless approach. My development process includes:
- Identify Resources
- Determining Request Verbs for each endpoint
- Mapping Request Headers for each endpoint, including response type and authorization details
- Defining Request and Response Bodies
- Setting Response Status Codes
- Ensuring Cacheability
DevOps and Deployment
I streamline the development lifecycle through efficient CI/CD pipelines, containerization, and cloud services. My focus is on ensuring smooth and automated deployments, scaling applications, and maintaining high availability.
- CI/CD pipelines with Jenkins, GitHub Actions, or GitLab CI
- Containerization with Docker and Kubernetes
- Cloud services like AWS, Azure, and Google Cloud
- Automated testing and deployment strategies
Languages: JS, TS, Python
Front-End: React, Angular, Vue, Pug, HTML, CSS, Sass, Redux, SVG
Back-End: NodeJS, FastAPI
Database: MySQL, Firebase Firestore/RTDB, MongoDB, PostgreSQL, Amazon S3
DevOps: Docker, Kubernetes, GitHub Actions, GitLab
Version Control: Git
Projects
Cisco Hardware Install Guide
Cisco HIG is a web application that helps customers onboard
network devices such as switches, routers, and WAP's. The web
app is built with SvelteKit. The premise of the app is to get
support articles and technical documentation to the user. We
leverage a FastAPI server and MongoDB to regularly update the
content data and developed user-friendly interfaces for
consuming the support articles and technical documentation.
For a future release, we have already developed a feature
using LangChain that provides additional support, Q/A, and
guidance through each step of the installation process. There
are other HIG's that exist out there, such as for the Catalyst
1200 and CBS110 Series Switches. This was a design decision
above my head.
typeorm-fastify-plugin
Typeorm-Fastify-Plugin is a small and lightweight plugin for
use within the Fastify Community. Fastify.io is a fast and low
overhead web framework for Node.js that heavily depends on
it's community of plugins. The plugin enables developers to
create and namespace multiple Database Connections using
Typeorm API and exposes those connections to the Fastify
Server, available app-wide. The plugin is written in
TypeScript, tests are ran with TapJS, and workflows are
automated through Travis-CI and GitHub Actions.
Mad Chatter
The Mad Chatter is a fully-featured social web application
developed with React on the front-end and NodeJS on the
backend. The social app is lightning quick thanks to the help
of Redux Thunks, memoized selectors, and callbacks. File
inputs are intercepted with Multer on the backend and the
social app boasts a direct messaging feature built with
Sockets.io. You can sign up a new account or use:
Email: greg@example.com
Password: test1234
Forkify
Forkify is a Recipe's website built with JavaScript ES6 classes, adhering to the MVC and publisher/subscriber model. Some of the app's features include API search functionality, pagination, the ability to bookmark recipes, star favorites, upload new recipes, increase serving amounts, and much, much more. The web app is bundled with Parcel JS, optimizing code splits, network requests, images, and caching. The API server is deployed to Heroku which fetches its data from MySQL through Sequelize.
Natours
Natours is a tour booking service web app that generates views
server-side (SSR) with Pug templates. Some features include
Stripe Checkout, authentication via web tokens, Mapbox,
automatic emails through nodemailer/@sendgrid and
html-to-text, and much more. Full disclosure: This app is
still being tailored for responsiveness. You can sign up a new
account or use:
Email: isabel@example.com
Password: test12345
MealSteal
The idea behind "MealSteal" (not a great name, I admit😋) is to be a food delivery web application. Built entirely with React and styled-components, this app highlights the benefits of state and context, which enabled me to create a shopping cart. The data is stored and fetched from Firebase RTDB. Additionally, this application takes advantage of the React-Transition-Group to render animations.
MyMapty
MyMapty is one of the first projects I ever built utilizing JavaScript ES6 classes, HTML & CSS. MyMapty gets the end-user location via the Geolocation API and passes these coordinates to the Leaflet library, rendering a beautiful map layer. The user can then map their workouts by interacting with the map and inputting their custom workout data. Workouts are then stored in local storage so they can be accessed across browser refreshes. Users can choose between running and cycling but I plan on adding more options.
CAB Coffee
The inspiration to create CAB Coffee Shop came about during my time at Penn State University. The project is a collaboration between myself and 2 other classmates. The name, CAB, actually comes from the initials of our last names. The project is built with Webpack on the front-end, complete with minifiers, code splitting and much more. Our team is proud that we built a shopping cart view that maintains its state across browser refreshes using vanilla JavaScript.