Bank Global - quarter-long project

GitHub repo with all commits: https://github.com/brandalx/BANKGLOBAL

Netlify deploy: https://bank-global.netlify.app

Hi there! 👋

I've just completed a quarter-long front-end project and I'd love for you to check it out. I'm working on becoming a full stack web developer and there's always more to learn. I've also been honing my UX/UI design skills, follow the link below to see what I've been up to and how far I've come in my web development journey.

ℹ A little information about this project:

• This project was built using HTML, CSS, and JavaScript.
• I utilized Bootstrap 5 for responsive design and UIkit for the modal element.
• This project is using AOS library to make scroll animations
• This project used an animista web site to add some cool UI animations for pictures
• This project also was creating by using some external sources from the in
• The layout was designed in Figma and served as a reference for the project.
• In order to achieve a consistent and visually appealing look across all pages, I also utilized a library of high quality 3D illustrations.

Features:

1. Light/Dark toggle

I developed a feature for toggling between light and dark modes on a website using CSS variables and JavaScript. The feature automatically detects the user's current window mode and can switch between modes accordingly. Additionally, it has the ability to remember the toggle state when the user navigates to a different page, using SesionStorage. This allows the user to have a consistent experience as they move between pages on the site.

2. Site layout

I designed the layout for the website using Figma, a widely recognized app for UX and UI design. As graphic designer with a background in UX and UI design, it was easy for me to conceptualize a freestyle online banking website. I made an effort to keep the layout as simple as possible to ensure that the responsive features would work smoothly.

• Figma was a helpful tool in this process, as it allows for easy collaboration and iteration on design ideas. As well it have some features which can help to make layout build faster (this feature called CSS inpection. Such all the parts in figma has some declared styles, like color, background, font-family etc.) You can see full site layout if you'll go on follow link Layout of Bank Global.

2. Site Illustrations

I wanted to enhance the visual appeal of my website for its users, so I decided to incorporate some 3D illustrations on all of the pages. I have prior experience with 3D design software like Blender and Cinema 4D, so I was able to create these illustrations myself. However, to save time, I also utilized some free images that were available on the internet. Overall, I wanted to ensure that the website had a consistent and inspiring look.

• Here is the web site you can use to find similar illustrations: Freepik

• However, not all of them was in a cool HD quality to use them. To solve this issue i've used AI free website to increase quality of the images. You can try it by yourself! Here is the link: Picwish

• By the way for main pictues of each section i wanted to use some more special and decided to use free library of 30 free to use illustrations created by member of Figma communtity, Alzea Arafat. You can try this library for free, follow the link: SALY - 3D Illustration Pack