Landing page for a Civil Engineering company, built using only the fundamentals of web development without the use of external libraries.
Note: During the development of this project, I was at the end of the fundamentals module, and for this reason, I had not yet learned React. Due to this, the development was done using only the fundamentals, which allowed me to practice and develop several features from scratch!
The link below is on the website with the Next.js version; the code of this version I can't show.
🌐DEMO LIVE - Click here to check it out on the web!
Responsive page
The page was developed responsively, adapting to different screen sizes and devices. This ensures a consistent and pleasant experience for users, regardless of the device they are using.Show & Hide header on page scroll
The page header is hidden when scrolling down and displayed again when scrolling up. This provides a more immersive experience and allows page content to be viewed without distractions.Parallax
I used the parallax effect at the beginning of the landing page. This creates a sense of depth and movement as the user scrolls through the page. Parallax is applied to elements such as background images, creating an attractive visual effect that keeps the user's attention on the page.
Animations on page scroll
I added subtle animations to page elements as the user scrolls through the content. These animations help guide the user's attention and make the experience more dynamic and engaging.
Images carousel
I implemented an image carousel that displays different projects carried out by the Civil Engineering company. Users can navigate through images using the carousel controls. This allows the company to showcase its expertise and projects in an interactive way.
Big Numbers Effect
I included a "Big Numbers" effect to highlight the company's achievements in large numbers. These numbers are displayed in an animated way, catching the user's attention and conveying the company's experience and credibility.
Whatsapp and Instagram redirect
I added redirect buttons for the company's WhatsApp and Instagram. By clicking these buttons, users are redirected to the respective platforms, allowing them to easily get in touch or access more information about the company.
🎯 Given the visibility that digitalization brought, the company owner provided services to a German engineering company, and is currently being asked to gives lectures at universities in his area of activity;
🎯 ONCET is the first result in google's search;
🎯 Improved responsiveness, computer, laptop, tablet and large, medium and small cell phones;
🎯 Improved communication skills, since there was no Product Owner to pass on the information to me, everything was understood directly with the customer;
🎯 Learned front-end performance optimization with HTML5 and NextJS;
🎯 Learned and improved responsiveness with CSS3 (Grid and flexbox);