LAYNE CHEN

LOAD ING

000%

Front-end Developer

Based in Taipei, Taiwan

LAYNE CHEN

[02.]

about

Proficient in modern web development, with expertise in TypeScript/JavaScript (ES6), React, and Angular. Skilled at implementing dynamic user interfaces using Three.js, GLSL, and GSAP. Experienced in back-end development with Node.js, Express, and MongoDB. Knowledgeable in DevOps practices, including Docker, AWS (S3, Route 53, CloudFront), and CI/CD pipelines using GitHub Actions.

skill

[03.]

Languages

  • TypeScript (JavaScript)
  • HTML
  • CSS/Sass

Frontend

  • Next.js
  • React
  • React Router
  • React Redux
  • Angular
  • Angular Universal
  • Webpack
  • Zustand
  • RxJS
  • Karma/Jasmine
  • Tailwind CSS
  • Bootstrap
  • Material UI
  • PrimeNg
  • Three.js
  • GLSL
  • GSAP

Backend

  • Node.js
  • Express
  • Mongoose
  • MongoDB
  • RESTful API

DevOps

  • Docker
  • AWS S3
  • AWS Route 53
  • AWS CloudFront

Tools & Platforms

  • Git (Sourcetree)
  • GitLab
  • GitHub Actions
  • Google Search Console
  • Google Analytics

Design

  • Figma
  • Illustrator
  • Photoshop

experience

[04.]

Frontend Developer

  • KunYou Technology Co., LTD., Full-time
  • June 2023 - July 2024, 1yr 2mos
  • Taipei, Taipei City, Taiwan, On-site

Facilitated the official website's SEO and achieved 100 in the Lighthouse index with Angular Universal's SSG tech

Utilized UI framework PrimeNG and data-visualizing package ECharts to materialize UI/UX drafts and RWD

Used RxJS to execute asynchronous requests and fulfilled API integration

Used Karma/Jasmine to implement Unit Test and achieve 98% code coverage

Acquired AA level of web accessibility standard in developing public sector projects

project

[05.]

Portfolio website header of Layne Chen, featuring a dynamic gold abstract 3D object in the center. A wavy green background covers the page. The name 'LAYNE CHEN' is displayed in large, bold, cream-colored text at the bottom. Navigation links such as 'GitHub', 'LinkedIn', and 'Resume' are positioned at the top alongside a hamburger menu. The text 'Front-end Developer' appears on the left, while 'Based in Taipei, Taiwan' is on the right.

Layne Chen Portfolio #2024

# frontend

  • TypeScript
  • HTML
  • CSS
  • Next.js
  • Tailwind CSS
  • Three.js
  • GSAP
  • AWS S3
  • AWS Route 53
  • AWS CloudFront

overview

Showcases my work and expertise as a front-end developer and 3D enthusiast. Built using cutting-edge web technologies, the portfolio leverages the power of WebGL, Three.js, and GSAP, ensuring optimal performance, responsiveness, and immersive user experiences with custom shaders. Integrates Static Site Generation (SSG) with Next.js, allowing for fast load times while improving crawlability for better SEO. Incorporates AWS S3 as the origin for static website hosting, paired with CloudFront for efficient content delivery. Deployment is streamlined through GitHub Actions for Continuous Integration and Continuous Deployment (CI/CD).

[ demo ][ code ]
Web interface displaying a music memory-sharing platform with a dark theme. The layout features a header with the title 'Share Your Memories' and includes options for searching, bookmarks, profile, and logout. The main section shows a grid of memory cards, each with an image, title, hashtags, description, and a like count. The right sidebar includes a form labeled 'Create a memory' with fields for title, message, and tags, along with submit and clear buttons. Pagination is visible below the grid of memory cards.

Share Your Memories #2022

# full stack

  • JavaScript
  • HTML
  • CSS
  • React (hooks)
  • React Router
  • React Redux
  • Material UI
  • Node.js
  • Express
  • Mongoose
  • MongoDB
  • RESTful API
  • Axios

overview

Create a platform where people could share treasured memories with anyone throughout the globe. Each user can register a whole new account to enable full functionality coming with the application, or just simply log in via Google Oauth 2.0 to enjoy the full access. You can create, delete, edit your posts, and bookmark, comment on, or give a thumbs-up to other users' posts. Each post delivers Youtube video recommendations based on respective content. You can venture around further if any posts pique your interest.

[ demo ][ code ]
Dark-themed web interface titled 'Learn English with Dictionary' designed to facilitate English learning. The page has a central search bar for entering keywords and an orange search button. A sidebar on the left has 'Home' and 'Result' options, with instructions in the center section under the heading 'Let's Get Started.' The instructions guide users on how to search for definitions, and an illustration of a person with raised fists is displayed. On the right, a panel displays the word 'none' with pronunciation and multiple definitions categorized as noun, adverb, and pronoun, each with examples.

Learn English with Dictionary #2022

# frontend

  • JavaScript
  • HTML
  • CSS
  • React (hooks)
  • React Redux
  • Material UI
  • Axios

overview

Solve the inconvenience of encountering unknown words upon reading an English passage and having to look up elsewhere. Read multiple professional-written passages fetched via New York Times API with a juxtaposed dictionary to facilitate English learning. Co-located design of text and relevant keyword tags. You can explore more in a topic-oriented way.

[ demo ][ code ]