Welcome
to the React site of jenniina.fi
Hero/Intro section: Interactive elements- Color Accessibility
WCAG Contrast Checker Tool. Test color combinations for accessibility - at a glance.
- The Comedian's Companion
A joke app with customizable options. Uses three different API (and my own). Submit a joke. See local jokes.
- Blob Art App
Make blob art your thing. A custom draggables app with blobs that meld into each other. Supports layers. Save or download art.
- Composer Olli Santa (Website)
Olli Santa is a professional choir and orchestra conductor in the Southern Finland area.
- Hair salon website
Website: Parturi Kampaamo Hannastiina
- Media
Media with random quotes or poems. Uses three different API (and my own).
- Drag and Drop
A custom drag-and-drop app. Color the draggable cards and containers and sort them as you wish
- Memory Game
Test your memory with this fun game!
- Quiz App
A quiz app with three difficulty levels, a timer, and a highscore list. The app uses the The Trivia API to fetch questions.
- Custom Select Dropdown
A custom select component that can be used as a single- or multiple-select alternative. Please fill in the survey
- Multistep Form
A three-step fully functional contact form.
- Todo App
A todo-app using localStorage and Mongo-DB when the user is logged in.
- GraphQL
GraphQL site
This is a sub-site of jenniina.fi made with and focusing on ReactJS. Other porfolio items may be found at the portfolio section of the main site.
The site is translated to seven languages, six of which were chosen based on the supported languages of JokeAPI, from which the translation idea came from, and the seventh one being Finnish.
Please report any issues with the site to Jenniina: survey
If you do not want to register, you can try logging in with the test user account:
Features of this site
Site Settings
See Settings at menu bar Settings -icon- Language Select
- The translations are done with the help of Github Copilot (except for English and Finnish), so they may not be perfect
- Light/Dark mode button
- Button to toggle between navigation styles
- Two styles at small screen size and two at large screen size
- Log In and Register buttons. Replaced by User Edit and Logout buttons when logged in
Hero/Intro section
Interactive elements- Hover/focus animation
- Movement according to pointer's enter direction
- Remove with click or Enter when focused
- Reset button on the lower right corner resets the interactive elements
- Press Escape to skip to reset button
- Keyboard focus: move items with arrow keys
- Elements
- Bubbles (See the top of the current page)
- Music notes placed within a staff (Composer Page)
- Four-sided jewels (Store)
- Eight-sided jewels (Cart)
- Draggable blobs (Portfolio)
- Radiating squares standing on their corner (Todo App)
- Inverted triangles (Quiz App)
- Alien eyes : Elements rotate to face cursor (Contact)
- New: Cells, Radiating concentric rings that expand in a loop, shedding tiny particles in an arc, eventually shrinking into nothing (Media)
React Apps
In the Portfolio sectionOther features
- Page transition animation
- Wave animation at the main heading
- Back to top button at the lower right corner and at the footer
- Exit links at the top and bottom of the pages to go back to the main jenniina.fi site
Site Colors
The site colors lightnesses switch in light mode, wherein var(--color-primary-1) becomes the lightest color instead of the darkest.
Animated clip-paths and text rotation on hover with dynamic delay
- var(--color-primary-1)
- var(--color-primary-2)
- var(--color-primary-3)
- var(--color-primary-4)
- var(--color-primary-5)
- var(--color-primary-6)
- var(--color-primary-7)
- var(--color-primary-8)
- var(--color-primary-9)
- var(--color-primary-10)
- var(--color-primary-11)
- var(--color-primary-12)
- var(--color-primary-13)
- var(--color-primary-14)
- var(--color-primary-15)
- var(--color-primary-16)
- var(--color-primary-17)
- var(--color-primary-18)
- var(--color-primary-19)
- var(--color-primary-20)
- var(--color-secondary-1)
- var(--color-secondary-2)
- var(--color-secondary-3)
- var(--color-secondary-4)
- var(--color-secondary-5)
- var(--color-secondary-6)
- var(--color-secondary-7)
- var(--color-secondary-8)
- var(--color-secondary-9)
- var(--color-secondary-10)
- var(--color-secondary-11)
- var(--color-secondary-12)
- var(--color-secondary-13)
- var(--color-secondary-14)
- var(--color-secondary-15)
- var(--color-secondary-16)
- var(--color-secondary-17)
- var(--color-secondary-18)
- var(--color-secondary-19)
- var(--color-secondary-20)
- var(--color-gray-1)
- var(--color-gray-2)
- var(--color-gray-3)
- var(--color-gray-4)
- var(--color-gray-5)
- var(--color-gray-6)
- var(--color-gray-7)
- var(--color-gray-8)
- var(--color-gray-9)
- var(--color-gray-10)
- var(--color-visited)