Web project of dynamic portfolio

An attempt to create a dynamic website.

Install and commands

• npm i : install npm.
• npm start : run server locally.
• npm run build : clean, lint and build the project.
• npm run clean : clean the dist folder.

Syntax & naming convention

• Functions written in camelCase.
• n in a function/ variable mean number
• r as beginning of function/ variable mean random.
• a in a function/ variable mean array.
• o in a function/ variable mean object.
• No use of ; at end of line.

Roadmap

Generation tools :

• ✅ randomNumber()
• ✅ trueOrFalse()
• ✅ Delta of two values

Color generation :

• ✅ Color generation with real time parameter

Font generation :

• ✅ Font family (array of font)
• ✅ Lineheight
• ✅ Font size
• ✅ Random ratio
• ✅ Google Fonts
• ✅ Bold font import

Layout generation :

• ✅ Margin (body)
• ✅ Margin (elements)
• ✅ Spacing generation
• ✅ Spacing utilisation

Other

• ✅ Modular JS files
• ✅ GSAP Transition
• ✅ GSAP scroll delay
• ✅ Content writing
• ✅ Fixed refresh button
• ✅ Scroll position in refresh
• ✅ Summary of project
• ✅ Image optimization
• ✅ Language
• ✅ Local storage language
• ✅ White/ dark mode
• ✅ Local storage theme
• ✅ Fix EN in nav
• ✅ Finish thumbnails of projects
• Fix display when light theme by default
• Responsive (mobile, wide screen)
• Re-write traductions
• More languages ?
• Improve tablet version
• Desktop
• In real time color gradient moving
• Fix local storage theme
• Optimization lighthouse

Deprecated (not used)

• Weather position with geo-localisation (API, proxy to pass by CORS policy)
• Pallet generator
• Background gradient with square
• Cursor
• Layout
• Gradient with profile picture

Why go dynamic ?

• Better user experience
• Enriched navigation
• Easier to maintain
• More data input
• Personalized experience

Some stuff

Webfontload package to simply load fonts from google fonts https://www.npmjs.com/package/webfontloader

Scroll effect : Thanks to ScrollTrigger and the greensock team for this example I used ! :) https://codepen.io/GreenSock/pen/wvMeNee

Credit(s)

Done by myself

Licence

Free to use for personnal use, contact me if you need anything.