Reworked KaterinaSemenova site using Next.JS, new libs, Turbopack
1. Stack / libruary usage
1.1 Next.JS, SASS, TS;1.2 Choose React-slick to implement slider: it has fade in/out, dots;
1.3 Next 15^, React 19^ (small compatibility issue), React-dom 19^ (small compatibility issue), TS, SASS, react-loading-skeleton, react-yandex-metrika
1.4 UUID for unqiue array IDs
1.5 Swiper (since 0.3.13)
1.6 Previous: multiple carousel/slider libs, react-accessible-accordion;
2. Commit / process history
- v: 0.0.1 / d: 29.10.24 project/repo init, git-flow init, first commit,
- v: 0.0.1 / d: 30.10.24 The basic structure, layout and styles are copied from the original app, adapted to use Next.JS; implement scroll, add new styles: mixins and link underline animation; still have issue with SASS -> Migration;
- v: 0.0.1 / d: 04.11.24 MySQL connecting attempts;
- v: 0.0.1a / d: 12.11.24 While I have some problems with connecting to the DB, I decided to make a static, local resource storage as it was before; add react-slick lib to implement carousel;
- v: 0.1.0 a / d: 20.11.24 Setteled on the choice of react-slick lib to implement slider; setting styles and small logic touches;
- v: 0.1.5 a / d: 21.11.24 Start GH Action settings and met some deploy issues with paths; after about 56(!SIC) deploys found out how to set next.conifg+nextjs.yml for deploying static app; I have working styles and logic, although some features like fonts and library styles don't work as well; decided to use another lib - Swiper; styling in progress; I am almost satisfied with everything;
- v: 0.1.5 a / d: 10.12.24 Add 'scroll to top' button when rich lowest contacts block; multiple style and logic touches;
- v: 0.1.6 a / d: 11.12.24 Set up font and favico paths using metadata object in layout.tsx;
- v: 0.2.0 / d: 12.12.24 Start skeleton loading implementation;
- v: 0.2.0 / d: 17.12.24 Trying to add Yandex.Metrika script into ; get rid of font path issues by taking lib \*.css files into component and adding them only where they should be; add Yandex.Metrika script into build index.html ; automatisation to go. Next won`t build up with script errors.
- v: 0.2.1 / d: 18.12.24 Scroll button customizing: change arrow type and add timeout to display, but refused to implement in prod. got an issue with SSR/Client render and build diffs; Solved it by adding a `window` type check
- v: 0.2.2a / d: 24.12.24 After multiple attempts to use different slider and carousel libs I`m testing react-multi-carousel;
- v: 0.3.0 / d: 27.12.24 After trying to modify the Slide library multiple times, I decided to go with React-Slick as it covers all my/the designer's implementation requirements; implemented accordion react-accessible-accordion lib => testing; faced some difficultes trying to insert Yandex-Metrika script inside the < Head >, so i used react-yandex-metrika lib with separate component, wich implements Yandex script;
- v: 0.3.0 / d: 14.01.25 Multiple libs update: react/dom/sass/eslint/next/pnpm; small image id refactor (should I use UUID?)
- v: 0.3.1 / d: 15.01.25 Start making slide description; multiple attepmts; face an issue with paragraph height. non of paragraph parents have certain height in PX;
- v: 0.3.2 / d: 16.01.25
Make dynamically changing height based on
height; change my SCSS mixin flex forumla; font size issue to go
- v: 0.3.2 / d: 20.01.25 Package updates; font issues resolved; continue skeleton loading setting;
- v: 0.3.2 / d: 28.01.25 Restore develop branch to main view: w/o accordion, skeleton and descriptions; add conditional render to remove dev issues;
- v: 0.3.3 / d: 04.02.25 Moved away from the idea of a slider with a description, switched to Skeleton implementation;
- v: 0.3.3a / d: 05.02.25 Add UUID lib for unique ids; finnaly found some new Splide-lib to implement carousel/swiper w/o focus issues like it was in the Slick-slider;
- v: 0.3.3a / d: 06.02.25 Pagination dots set via scss selector magic!; SASS^
- v: 0.3.3a / d: 07.02.25 Add typeRoots setting to tsconfig;
- v: 0.3.3b / d: 10.02.25 Multiple libs: keen, nuka, slick, embla, alice, response carousel and others were tested; Now: Flickity; eslint^; pnpm^
- v: 0.3.3.11 / d: 11.02.25 I decided to assign versions based on the number of carousel/slider variations; So 11 will stand for 11 lib - AwesomeSlider. For some reason and due to unsuitable implementation, none of the recent libraries suited my needs;
- v: 0.3.3.11 / d: 12.02.25 Package updates, pnpm update; cleared package.json from multiple libs;
- v: 0.3.3.13 / d: 20.03.25 package updates, pnpm update; return to Swiper lib; created buttons that suit my plan; deploy to GH-Pages to test;
- v: 0.3.3.13d / d: 21.03.25 Continue setting Swiper; get rid of blue background while pushing buttons and achores; set 'Media' for mobile phone (<767px)
- v: 0.3.3.4 / d: 24.03.25 deps update;
- v: 0.3.3.5t / d: 03.04.25 deps update; pure-slider testinZg; replace uuid w/ nanoid;
- v: 0.3.3.5ta / d: 04.04.25 Style and positioning of bullets/description fix; deps update;
- v: 0.3.3.5t / d: 16.04.25 deps update;
- v: 0.3.3.6 / d: 21.04.25 deps update;
- v: 0.3.3.6t / d: 22.04.25 deps update; slider and dots set - testing; add loading skeleton;
- v: 0.3.3.6t / d: 08.05.25 deps update;
- v: 0.3.4 / d: 16.05.25 customizing commitizen
- v: 0.3.4 / d: 20.06.25 deps update;
- v: 0.3.5 / d: 25.06.25 refactor slider/predeploy
- v: 0.4 / d: 27.06.25 Succesfully attempt DB connection; get local version with remote images fetching; next in line is to refuse static data;
- v: 0.4.1 / d: 28.06.25 Refactor fetchData service and main page logic; prepare to refactor skeleton/lazy images;chore;
- v: 0.4.1 / d: 30.06.25 Set up commitlint/husky; Open 2 issues; fix keen-slider implementation;
- v: 0.4.2 / d: 01.07.25
Commitlint/husky/commitizen set up;
Forward for issue[#2](#2);
Testing and loading;
Add concrete aspect ratio to correct implementation of
and size;
- v: 0.4.3.2 / d: 03.07.25 deps update; close issue#6; change preloading condition;
- v: 0.4.3.2t / d: 14.07.25 deps update; deploy for tests;
- v: 0.4.3.3 / d: 16.07.25 deps update; fetch mock data when in dev env; add dark theme and theme state toggler;
- v: 0.4.4t / d: 17.07.25 finish dark theme; add accents colors and rework style system;
- v: 0.4.4.1a / d: 18.07.25 Check GooglePageSpeed insights: refactor header title link, add
- v: 0.4.5.1c / d: 21.07.25 deps update;
- v: 0.4.5.1d / d: 23.07.25 deps update; small scroll script changes;
- v: 0.4.5 / d: 26.08.25 deps update; multiple animations fixes;
- v: 0.4.5 / d: 31.10.25 deps update;
- v: 0.4.5 / d: 21.10.25 deps update;
- v: 0.4.5 / d: 27.11.25 deps update; <<<<<<< HEAD
- v: 0.4.5 / d: 09.01.26 deps update; =======
- v: 0.4.5 / d: 23.01.26 deps update;
- v: 0.4.5 / d: 10.02.26 deps update; webpack vulnerabilities audit; >>>>>>> 0960c730465dfcf6efffa84fca1b57789dfb4262
3. Known issues/to go
[X]UPD: multiple path attempts and setting changings
UPD: moved slick styles to component folder and get rid of unused classes
pnpm 0
UPD: use lib to add Metrika;
UPD: Set two tables in php that contains my Slides data;
[ ] Non typed YM script;
Version naming:
t - test;
a, b, c - test attempts;