Portfolio

• Scientific Calculator: Trigonometry (sin, cos, tan, cot), logarithms (log, ln), powers, square root, constants (π, e).
• Function Graphs: 2000-point precision plotting, multiple functions, custom coordinate axes, discontinuity handling.
• Matrix Operations: Visual input (2×2 to 5×5), addition, multiplication, determinant calculation.
• Calculus Tools: Numerical derivatives, definite integrals (Simpson's method), summation (Σ).
• Physics Lab: Kinematics, dynamics (F=ma), energy calculations, Ohm's law, 40+ formulas.
• UI/UX: 4 themes, bilingual (UA/EN), responsive design, localStorage persistence.

• Graph Precision: Guaranteed x=0 inclusion for accurate trig functions (sin/cos pass through origin).
• Discontinuity Handling: Custom filtering for tan/cot at asymptotes (threshold 1000).
• Custom Chart.js Plugin: Crisp X=0/Y=0 axes with 2px white lines, proper grid alignment.
• Matrix Visualization: CSS parentheses, dynamic grid, real-time calc with Math.js.

• Code: 1,371 lines JS, 1,400+ lines CSS, 719 lines HTML
• Scope: 5 main sections, 9 specialized tools
• i18n: 200+ translation keys (Ukrainian/English)
• Performance: 2000 graph points, sub-second rendering
• Deployed: GitHub Pages with custom domain support

• Frontend: product catalog, product pages, login/registration, API integration, loading/empty/error states, SSR/CSR fixes for production.
• Backend: REST API, JWT auth and roles (user/admin), cart, image upload/delete, PostgreSQL integration.
• DevOps: Docker Compose, Nginx reverse-proxy, HTTPS via Certbot, volumes for DB and media, reliable restarts without data loss.

• Media in production: moved images to a shared Docker volume, mounted into backend and Nginx, configured static serving and /media/.
• HTTPS but site didn’t open: fixed Nginx server blocks, separated /api and /media, validated config via logs and config tests.
• DB data disappeared after restart: added a persistent PostgreSQL volume and verified data survives down/up.
• Auth worked in curl but not in browser: fixed CORS in FastAPI and made frontend token/error handling consistent.

• Frontend: product catalog, product modal (sizes/colors/quantity), cart sidebar, centered layout and mobile responsiveness, checkout (form + order summary).
• Animations: page transitions and premium micro-interactions via Framer Motion.
• Backend: Express + TypeScript API, auth (JWT), validation, security middleware, PostgreSQL integration.
• DevOps: Dockerfiles + docker-compose for Postgres + backend + frontend (nginx) with environment configs.

• Layout looked “off-center” on 1920×1080: unified section containers and full-width wrappers so the whole UI sits visually centered.
• Checkout UX: reworked layout so the form stays primary and the order summary sits on the right (sticky on desktop only).
• DB not always available in dev: added a safe fallback to a mock DB when PostgreSQL isn’t running.
• API hardening: rate limit + Helmet, CORS config, request validation to keep endpoints predictable.

UI flow demo: catalog → product modal → cart → checkout.