박성렬 Park Sungryeol
📫Email: sungryeolp@gmail.com
🏡Blog & Portfolio: https://sungryeol.com
👨💻Github: https://github.com/rabelais88
🙋Stackoverflow: https://stackoverflow.com/users/9292770/sungryeol
(2025-01-20 reputation 3,995)
A frontend developer of 7 years of experience,
specialized in web, data-visualization and 3D.
What I’d like to do with your team:
- Develop with clear goals
- Collaborate with team
- Data-oriented fast & effective delivery
Experience
- In case the provided links of projects do not work, please check the videos and screenshots at “works” page of my portfolio.
- In case writings are not accessible, please find copy of the article at Internet Archive, where most of them are archived.
Bigpicture Interactive
lead frontend2018-07 - 2022-08
Web App: LVUP.GG(versus-on)
2018-2022
An online e-sports event management platform where both amateur gamers and professional organizations can freely create and participate in league-sized or larger matches.
- Various bracket visualization and algorithm development using D3.js
- Single Elimination Brackets
- Double Elimination Brackets
- Round Robin Brackets
- Swiss Round Brackets
- full screen, zoom and drag
- save to screenshot
- sharable URL
- Team creation, participation, and team promotion.
- Real-time notification and chat service using Pusher and Sendbird
- Users can purchase and receive products with the points earned from winning the competition.
- Admin dashboard
- Search Engine Optimization(SEO) with Server-Side Rendering(SSR)
- Site traffic analysis using Google Analytics
- Smooth SVG animations using Lottie.js
- User-oriented e2e test using Cypress.io
- Unit tests utilizing Jest
- Implementation of deployment and CI automation and deployment artifact analysis using Docker and Jenkins
- Multilingual support and multilingual management system configuration using Google Spreadsheet, VueI18n and Github Actions
- Speedy CDD and microfrontend development using Storybook
- Flexible agile development and team collaboration based on CDD and BDD
- Typescript, Vue, Vite, Webpack, Docker, D3.js, Jenkins, Git, Lottie, Jira, AWS, Cypress.io, Jest, Storybook, Webpack+React(Storybook)
Web App: Gamecoach Online
2020-2022
An online education platform where esports pro gamers can directly teach and earn money from regular gamers. Ordinary gamers can directly find pro gamers with the desired teaching style and get recommendations.
- Real-time notification for students
- Instructor recommendation & search page
- Advanced knowledge board: filtering and tagging by designating specific elements in the game
- Search Engine Optimization(SEO) with Server-Side Rendering(SSR)
- Site traffic analysis using Google Analytics
- Real-time notification and chat service using Pusher and Sendbird
- Customer payment & instructor wage payment service using a third-party payment service:Payple
- Smooth SVG animations using Lottie.js
- Unit tests utilizing Jest
- Implementation of deployment and CI automation and deployment artifact analysis using Docker and Jenkins
- Speedy CDD and microfrontend development using Storybook
- Flexible agile development and team collaboration based on CDD and BDD
- Typescript, Vue, Vite, Webpack, Docker, Jenkins, Git, Lottie, Jira, AWS, Jest, Storybook, Webpack+React(Storybook)
Open Source Contribution
- Payple official node example source
- TinaCMS: Github Star 8.1k
Miscellaneous
Project reports
- 레벨업의 테크노트:분포도 시각화 개선하기
- 레벨업의 테크노트:닥지지 리더보드 데이터 시각화로 개선하기
- 레벨업의 테크노트:디자인이 프론트엔드와 figma로 대화하는 법
- 레벨업의 테크노트:Node.js 메모리 누수 탐지하기
- 레벨업의 테크노트:구글 시트로 현지화 문자열 업데이트 자동화하기
Write-ups for technical knowledge share
- 레벨업의 테크노트:블로그 사이트 재구성하기 1 - 기획과 디자인
- 레벨업의 테크노트:블로그 사이트 재구성하기 2 - 개발하기
- 레벨업의 테크노트:웹 표준 지키기 - 포커스 표시기
- 레벨업의 테크노트:3D 웹앱 깊이 빠져보기 1
- 레벨업의 테크노트:3D 웹앱 깊이 빠져보기 2
Experience as a scrum master of a devteam
💼 Projects
Contract Project
Noticable Projects
- WebGL 셰이더를 활용한 3D 타이포그래피
- 3D P2P 멀티플레이어 데모
- 한글 박물관 소장품 크기 3D로 비교하기
- Gamecoach Online 2021 한해 추억하기
- 팀 버크만 테스트 결과 3D 데이터 시각화
- WebGL을 활용한 대규모 데이터 렌더링 기술데모
Data Visualization Projects Using D3.js
- 공적 마스크 구입에 관련된 데이터 시각화
- 애니메이션으로 코로나와 유명한 국제적 전염병의 확산세 비교하기
- 국내 코로나19 초기 확산세 분석
- D3.js 줌 기능과 미니맵 기능 구현하기
- 한국 정치의 계보도 시각화
- 회기별 대한민국 국회의원 당선자 분포 시각화
- 회기별 대한민국 국회의원 당선자 분포 시각화 2
- 코로나 19 전국 확산 애니메이션
- covid-19 spread in South Korea
- 지도에서 원형 그래프로 모핑하기
- web worker를 이용한 fetch와 일반 fetch 비교
Noticable Codpen Snippets
- How to properly use Lodash debounce in Vue.js - views above 7k
- Visualizing tournament tree with Vue.js and D3.js - views above 2k
- Vue.js page transition
- Combining Vue.js and D3.js
Related Writings
🛠 Mainly Used Tools
My goal is adaptive development. I rarely put special restrictions on what tools I should be using.
But just in case anyone is wondering, here are some tools that are most frequently asked by fellow co-workers.
Some tools or knowledge might be omitted from here.