About
Hello! My name is Kayliegh.
As a web developer, I specialized in creating websites for small businesses seeking greater visibility on the web. From design to launch, I enjoyed working with owners to identify goals and bring them to life with quality design and easy-to-maintain builds.
The more experience I gained as a web developer, the more I felt a pull toward engineering. While managing the back-end structure of client's sites and troubleshooting their servers, I realized that I craved more work with databases, servers, and custom code. In between clients, I began building web applications using JavaScript and Python.
In January of 2022 I joined Open Source Labs (OSLabs), a selective community of dedicated engineers with the shared mission of driving creative technological advancements through open source. Together with a team of like-minded engineers, we built kafkaVision, a visualization and monitoring solution for Apache Kafka applications.
I'm actively looking for my next opportunity/challenge with a team that prioritizes community and values hardwork. Let's build something great together!
Technical Toolkit
Frontend React, JavaScript, CSS, HTML, Bootstrap, Tailwind CSS
Other Git, Linux, Wordpress, Testing, OAuth
Work and Projects
kafkaVision - Open Source Product
Stack: Apache Kafka, Prometheus, KafkaJS, Node/Express, TypeScript, JavaScript, React, Chart.js, TailwindCSS, Jest, React-Testing-Library
Visit kafkaVision on GitHub
- Constructed Prometheus monitoring system queries using PromQL to obtain instant and range vector data types to inform graphic representations of a Kafka cluster’s key health metrics
- Leveraged KafkaJS for its implementation of the Kafka client in pure JavaScript to allow our Node.js application to seamlessly communicate with a cluster’s Admin API without the need for additional dependencies
- Configured Webpack with ts-loader and babel-loader to transpile code to JavaScript ES6 and bundle files for an optimized production build; Enabled a webpack-dev-server proxy to leverage hot reloading in development mode
- Employed TypeScript to enforce static type error handling and minimize errors while improving scalability and maintainability across the codebase for future open source contributors
- Integrated React hooks and Context API to form a centralized state tree, allowing fluid data flow and avoiding complicated prop drilling across nested components
- Incorporated Jest and React Testing Library, coupled with Eslint and TypeScript Compiler for static and unit testing to ensure code stability, maintainability, and consistency
Telemedicine Website
Stack: AWS Lightsail (LAMP), Amazon Cloudfront CDN, WordPress, Google Analytics
Visit Green Mind Physicians
- Managed an eCommerce website hosted on an AWS virtual private server configured with Linux/Apache/MySQL/PHP, connecting via SSH to securely access the VPS to diagnose performance bottlenecks and troubleshoot system errors
- Attached AWS Cloudfront CDN to the server to cache static pages and serve files to clients with low latency, contributing to a reduction of page load speeds from an average of 5 seconds to less than 1 second
- Rearchitected website from ground-up to implement SEO best practices in image optimization, content strategy, and structured data, leading to an increase of organic page views by 32% and unique users by 49%
- Migrated to an auto-scaling host platform with more robust security to improve long-term maintainability for a paired-down dev team and to better equip the site to handle rapid traffic growth
- Set up monitoring with JavaScript header tags and synthesized data from Google Analytics, marketing services, and socials to drive development decisions and deliver status reports to the CEO
Python Web Application
Stack: Python, Django, PostgreSQL, Cloudinary, CSS, HTML
Visit Album of the Week
- GitHub Link
- Leveraged Django’s full-stack web framework and Model View Template architecture to facilitate personalized, dynamic webpage creation based on user privileges and social interaction
- Integrated a SQL database to securely store relational data along with Cloudinary’s high-availability cloud storage to host user-uploaded avatars
- 3rd party API integration
Express Web Application
Stack: Node/Express, JavaScript, NoSQL(MongoDB), Bcrypt, React, React-Router, MaterializeCSS, Heroku, Netlify
Visit ByBirdie
- GitHub Link
- Architected RESTful API with Node.js/Express, implementing routers and controller middleware to simplify communication between frontend HTTP requests, NoSQL database, and third-party APIs
- Encrypted user passwords with Bcrypt’s hashing algorithm and SALT rounds to safeguard user information from brute-force and dictionary attacks
- Integrated React Router to synchronize URL routing with application state and allow dynamic rendering of components to lessen request load on the server, emphasizing fast load times on the client and better user experience
- Deployed front and back ends of application to unique online hosting platforms to optimize for fast static page loading, continuous deployment pipelines, and reliable cloud database integration
Hobby Project: Web3 App
Stack: Ethereum, Hardhat, Solidity, JavaScript, Alchemy, React
Visit Halloween NFTs
- GitHub Link
- Just for fun, built a Web3 App that lets users mint an NFT on the Ethereum Blockchain
- Features: React app that connects users to Smart Contract which generates unique SVG images that actually live on the Rinkeby chain of Ethereum Test Network
- Built during Deneb cohort of Buildspace
Custom Coded Static Website
Stack: HTML, CSS, Materialize CSS, GitHub, Netlify
Visit Skyline Appraisal
- GitHub Link
- Example of a custom sites I designed and built for client using HTML and CSS, with a focus on delivering a quick page load, smooth navigation, responsive design, HTTPS encryption, and long-term maintainability
- Designed original branding, logo, and content
- Leveraged automated builds from GitHub/Netlify
- (the first website I coded!)
Case Studies
Page Optimization
How I reduced page load time to < 1 second
After: 100% performance grade from GTMetrix
- Analysis
I used a variety of analytics tools (Server Logs, GTMetrix, Google Analytics, & Lighthouse) to understand what was happening on the site. - Caching
Using the W3 Total Cache WordPress plugin, I optimized caching settings for the page and browser, and activated HTML compression.
- Content Delivery Network (CDN)
I atttached a CloudFront Distribution to my AWS Lightsail Instance to speed up delivery of page content, including images and JavaScript and CSS files. - Tweaking Configs
I adjusted cPanel and WHM configuration settings to remove unused services and add-ons. The largest increases in performance came from disabling Mailman and turning off the SQL setting 'Include databases in disk usage calculations'.
Before: Old, low performance grade from GTMetrix
Troubleshooting an Unresponive Server
How I recovered a website from a locked AWS Lightsail Instance
Shortly after activating a new plugin on a client's WordPress site, the connection timed out. When I went to investigate error logs and delete the problematic plugin, I found the server to be unresponsive and inaccessible.
I attempted to fix the problem by reverting to a backup version of the website, but I was locked out of every new instance of the server. Seeing this wasn't going to be a quick fix, I spun up a temporary website to minimize the impact of the site's downtime on my client.
Finally, after 30 hours of research, reconfiguration, and trial and error, the website was back online. I recorded my troubleshooting process, the lessons I learned, and preventive strategies in this document.
Contact
Let's connect!