Portfolio

Frontend-focused engineer with strong experience in build systems, tooling, design systems, and technical writing.
I build developer-facing tools, scalable frontend architectures, and production-ready solutions.

---

Enterprise & Large-Scale Projects

Selected long-term and enterprise-level projects developed for large teams and production environments.

• LinkedIn Projects (login required)
  https://www.linkedin.com/in/cengizilhan/details/projects/

---

Open Source Contributions

Selected contributions to large open-source projects, focused on documentation clarity and real-world usage.

• Webpack – Documentation Contribution
  Added clarification to the Webpack documentation based on real production usage, addressing a commonly confusing entry configuration scenario.
  The contribution was reviewed and merged by Webpack maintainers.

  Live documentation:
  https://lnkd.in/dxH2kH57

  Pull Request:
  https://lnkd.in/d9kMAiz5

---

Tools, Scripts & Libraries

Developer tools, plugins, and boilerplates focused on frontend productivity and maintainability.

1. Typography SCSS Generator – Figma Plugin (1800+ users)
   https://www.figma.com/community/plugin/1239294154051662580
   https://github.com/cengizilhan/Typography-SCSS-Generator

2. Webpack Boilerplate (Separate JS / SCSS)
   https://github.com/cengizilhan/webpack-boilerplate-seperate-js-scss

3. Font Calculator – Figma Plugin
   https://www.figma.com/community/plugin/1243685982553847829/Font-Calculator

4. HTML Gulp Boilerplate
   https://github.com/cengizilhan/HTML-Gulp-Boilerplate-Scss-Gsap.js-Sawacrow-

---

NPM Packages

Open-source libraries published on npm, focused on build pipelines and developer experience.

1. webpack-concatjs-plugin (1200+ downloads)
   https://www.npmjs.com/package/webpack-concatjs-plugin

2. copy-paste-detector-js
   https://www.npmjs.com/package/copy-paste-detector-js

3. webpack-error2json
   https://www.npmjs.com/package/webpack-error2json

4. css-reference-finder
   https://www.npmjs.com/package/css-reference-finder

5. scss-mapper
   https://www.npmjs.com/package/scss-mapper

---

Technical Writing

Technical articles focused on frontend architecture, CSS/SCSS systems, JavaScript internals, and developer workflows.

Selected Articles

1. Text Styles Best Practice | Typography SCSS File Structure (3.500+ views)
   Original post:
   https://medium.com/@cngzilhn/text-styles-best-practice-typography-scss-file-structure-24e8074ebfb4

Shared by JavaScript in Plain English:
https://medium.com/javascript-in-plain-english/text-styles-best-practice-typography-scss-file-structure-24e8074ebfb4

2. Senior Frontend Roadmap: Beyond Frameworks
   Original post:
   https://medium.com/@cngzilhn/senior-frontend-roadmap-beyond-frameworks-e49faed58dd4

Shared by JavaScript in Plain English:
https://javascript.plainenglish.io/senior-frontend-roadmap-beyond-frameworks-e49faed58dd4

Other Articles

• Reading Angular’s Mind Through an E-Commerce Project
  https://medium.com/@cngzilhn/reading-angulars-mind-through-an-e-commerce-project-f2ecd7d6db10

• Why --env Parameters Get Ignored in CI/CD npm Scripts — and How to Fix It
  https://medium.com/@cngzilhn/why-env-parameters-get-ignored-in-ci-cd-npm-scripts-and-how-to-fix-it-64a186d1be5a

• JavaScript Bellek Yönetimi: Heap ve Stack Optimizasyonu
  https://medium.com/@sawacrow/javascript-bellek-y%C3%B6netimi-heap-ve-stack-optimizasyonu-8606d66f3c10

• Odak: Task Değiştirme Kaosunu Yönetme
  https://medium.com/@sawacrow/odak-task-de%C4%9Fi%C5%9Ftirme-kaosunu-y%C3%B6netme-d4d8dee61adb

• Before / After Nedir ve Hangi Durumlarda Kullanılır?
  https://medium.com/@sawacrow/before-after-nedir-ve-hangi-durumlarda-kullan%C4%B1l%C4%B1r-002633bab249

• Modern Methods of Adding Icons in HTML
  https://tasarlab.com/htmlde-ikon-eklemenin-modern-yontemleri/

• Creating Font Files with Nucleo
  https://tasarlab.com/nucleo-ile-font-dosyasi-olusturmak/

• Creating Two-Column Input Placeholders
  https://medium.com/@sawacrow/method-to-make-the-input-placeholder-multi-line-88fffb2485fa

• In Responsive Front-end Development – Modern Methods – 1
  https://tasarlab.com/responsive-front-end-gelistirmede-modern-yontemler-1/

• WordPress API Kullanarak Next.js Projesi Yapalım
  https://medium.com/@sawacrow/wordpress-api-kullanarak-next-js-projesi-yapal%C4%B1m-ef009875a45b

• Javascript’de Url Search Parametrelerini Yönetme
  https://medium.com/@sawacrow/javascriptde-url-search-parametrelerini-y%C3%B6netme-4f742ae875f3

---

Front-end Projects (Selected)

Modern frontend applications built with contemporary frameworks and tooling.

1. E-Commerce Platform (Angular, 2026)
   https://github.com/cengizilhan/ecommerce-angular-public

2. Developer Salary Survey Dashboard (Vue.js, 2024)
   https://github.com/cengizilhan/2024-yazilim-maas

3. Glitch Image Slider (Three.js, WebGL)
   https://github.com/sawacrow/Distortion-Glitch-Effect-IMGSlider

---

Back-end Projects

• Shopler Express API (Node.js, Express)
  https://github.com/sawacrow/ExpressApiPublic

• Next.js with WordPress REST API (TypeScript)
  https://github.com/sawacrow/nextjs-wordpress-rest/

---

Chrome Extensions

• Image Fixer
  https://chromewebstore.google.com/detail/image-fixer-instantly-rep/plgcacjbflgmfgklldoliolleahhlgag

---

CodePen Components

Reusable UI components, CSS experiments, and animation demos.

• All Components Collection
  https://codepen.io/collection/OLemmY

• Pulse Animated SVG
  https://codepen.io/sawacrow/pen/qByabjx

• Hover Trigger Slide Change with Swiper (CSS only)
  https://codepen.io/sawacrow/pen/OJwVoPb

• Input Autocomplete with Only CSS
  https://codepen.io/sawacrow/pen/vYaVVLL

• Adaptive Navigation (Mobile / Desktop)
  https://codepen.io/sawacrow/pen/RwBJZoG

• GSAP SVG Animation
  https://codepen.io/sawacrow/pen/qByRBMd

• Scroll-Based GSAP Video Animation
  https://codepen.io/sawacrow/pen/qBMxyWR

• Animated Swiper Pagination
  https://codepen.io/sawacrow/pen/WNKrLVd

---

Video Tutorials

• CSS Practices (YouTube Playlist)
  https://www.youtube.com/watch?v=w3Vho386cXs&list=PLDUL75YNAMAmEB9RAsLpvJN-Lwra_u-5t