A React-based single-page application created for a freelance client. This project was a demo site for a startup, and consisted of building out a responsive landing page and user dashboard from a Figma design.
Hi, I'm Derek Lam.
I’m a frontend developer who enjoys bringing concepts to life with impactful websites and web apps.
About Me
Hi! I'm Derek, a frontend developer based in Los Angeles, CA, and recent Computer Science graduate from California Polytechnic State University - San Luis Obispo. I am passionate about creating user experiences that are both performant and responsive, whether it be transforming another person's design into code, or building personal web app projects for myself and others.
As a developer, I'm constantly trying to improve upon my current skills/technologies while learning new ones. Currently, I have professional work experience with HTML, CSS, JS/TS, ReactJS, Bootstrap, and jQuery. As for new skills, I'm not only learning new technologies like TailwindCSS and GatsbyJS, but also learning to be better equipped for creating accessible experiences (following WCAG), and for better performance in my websites and web applications.
The following is a list of technologies that I currently work with for personal projects, and also ones that I've had varying levels of experience with and would be willing to pick up again whether for a personal or work-related project.
Technologies I Currently Use
Core
- HTML
- CSS/SASS
- JavaScript (ES6)
Frameworks
- TailwindCSS
- ReactJS
- GatsbyJS
- NextJS
Other Technologies I've Learned
Frontend
- Typescript
- Bootstrap
- jQuery
Backend
- NodeJS
- Express
Work Experience
Below is a list of where I've worked as well as a synopsis of what I gained from the experiences. More information is available on my resume (also linked in the 'My Links' section!)
Upwork
Role: Freelance Frontend Developer
June 2020 - November 2020
Working as a freelance frontend developer for the past few months has been a solid learning experience, whether it be learning how to structure my front-end projects and manage my time more effectively, or just learning new technologies for the job while improving on current skills. I used primarily React to build SPAs, and learned new technologies like TailwindCSS. I was also exposed to working with REST API's and using React Context to manage external data.
Project Jupyter
Role: Software Engineer Intern
June 2019 - June 2020
Project Jupyter was where I had my first work experience with React and TypeScript, and my first time working with a large, open-source codebase implemented with software development patterns that I'd never heard of, like factories. I learned about the power of open source communities and the importance of asking questions to make development in a large organization more approachable. I learned to work closely alongside a UI/UX designer, whether it be collaboratively conducting user research or bouncing ideas off each other.
Cal Poly Extended Ed
Role: Student Web Developer
October 2018 - June 2020
This was my first job as a frontend-focused web developer. It introduced me to writing responsive HTML and CSS, using Bootstrap to drop in already-built components, and using jQuery primarily as a shortcut for DOM manipulation. Whether I was making minor HTML changes, or transforming a design file to a website from scratch, this was an experience full of growth in regards to learning the fundamental frontend dev languages.
Projects
Freelance Project - Salewave
What I Learned
This was my first time using React to build a single page application, as my only prior experience was building components as part of a larger web application, JupyterLab. It was my introduction to using functional components within React, using React Router, and creating custom hooks to abstract functionality such as storing form data, validating form data, and cancelling Axios calls.
Built with:
- React
Binary Tree Visualizer
A React web app that I created with another developer. It visualizes binary trees created from input in a format specified by binarysearch, a collaborative algorithm challenge site. It allows for both inputing a string directly from binarysearch or creating a tree from scratch with interactive controls, and utilizes D3.js to visualize such a tree.
What I Learned
With this React project, I learned how to use D3 at its core as a data-binding tool to create and draw a tree structure from specified input. It was also one of my first projects where I used SASS as a CSS preprocessor and utilized BEM-style CSS. I also learned how to structure my React projects in a way that was more meaningful than listing every component under a components folder.
Built with:
- SASS
- React
- D3
JupyterLab Richtext Mode Extension
An extension for JupyterLab that transforms Markdown cells into rich text-editing cells. The editor for these cells includes standard formatting options that are supported within Markdown such as bold, italic, and underline, while providing support for non-standard Markdown features like syntax highlighting for code blocks and both inline and block-level math equations.
What I Learned
With this extension developed during my time at Project Jupyter, I learned React at a basic level, and learned how to integrate it with a custom-built rich text editor using the ProseMirror toolkit. I was also introduced to the complexity of large codebases and was immediately mortified as to where to find what I needed, but found my place after asking questions through the open source community, my co-interns, and my managers. Although the React code wasn't the most performant, it was an experience meant for growth and left me wanting to learn more.
Built with:
- React
- TypeScript
- ProseMirror
My Links
Here's where you can find more information about me.
Here's where you can contact me.
I'm actively looking for job opportunities as a frontend developer, so if I piqued your interest, feel free to reach out!