Misael's F. End Learning Day-05 - "CV ATS Web Page part-05 and Finalization"

Hello... 😃👋🏻
It's me Misael Randy Limpaty (ElMyosotisCode) your future Front End Developer Expert.

This project is the continuation and finalization of "ATS Based CV".

In this project finalization session, I did some Visual Tweaks, such as: ✌

• 🚀 Refactored the entire page layout:
  • Pivoted from an initial straight one vertical layout into two Rows vertical layout, which are the Page Header and Main Content.
  • Now, there is a Page Header row contains the Navigation menu and it's a Sticky Navigation to the top of the page.
  • Now, there is a Main Content row contains the CV content, which is also scroll-able.
• 🎨 Implemented a "Floating Card" UI:
  • Added a bunch of floating Card View utilizing box-shadow properties to create a depth effect.

• Credits to IanLunn for the CSS Hover Animation IanLunn's Hover.css

--

Learning Module Session 5 -> CSS Box Model and Properties

💡 Here are some key points I learned through this session:

• Understanding the CSS Box Model:
  • How to effectively use margin, padding, and border to create a visually appealing layout.
  • How to apply box-shadow for depth and visual separation of elements.
• Responsive Design:
  • How to use max-width and margin: auto to center content and ensure it looks good on various screen sizes.
• Sticky Navigation:
  • How to implement a sticky navigation bar that remains at the top of the viewport when scrolling.

Screenshots

Roadmap

So far here are my plan in this project
*May change in the future

• ☑ HTML | Base structure

• ☑ HTML | Every section's content

• ☑ HTML | Opening tags attributes for easier CSS modification

• ☑ HTML | Aria accessibility

• ☑ CSS | Content basic styling

• ☑ CSS | Content placement

• ☑ CSS | Hover animation for anchor-link

• ☑ CSS | Card view box model and styling adjustment