I have a question about modeling a UI to code

Lets say you have a UI finished

Now you need to model it to code

For simplicity ignore functionality just focus on designing the model classes

For further simplicity Imagine that the UI is grouped into material cards.

Lets say the UI of the User Profile Page looks like this:

1) HEADER
- user profile banner
- user profile image
- username
- first and last name
- total posts
- total likes
- button to add to favorites
- dropdown to report user
- button to share profile

2) BIO
- short description
- user birthday
- location

3) ANNOYNCEMENTS
- "X% off on Y"
- "going live at X:YZ"
- etc

4) GALLERY
- group of images posted on profile timeline

5) TIMELINE
- text/video/audio
- number of likes on post
- user profile image
- username
- user first and last name
- post date
- etc

---

Now im having a mixed feeling what is right thing to do. In my User model i have a date of birth field among other fields as well as profile image url to s3 bucket. This means that i already have half the information for HEADER card from User model, but now i would need to create a Profile model to fill in the remaining fields.

Especially for BIO card:
- short description (Profile model)
- user birthday (User model)
- location (Profile model)

Is this weird? Mixing data with 2 models on 1 page on 1 or multiple card sections?

This feels messy to me and as if im gonna hit a wall if i continue long enough like this. A better solution to me is to have a Profile model handle everything on the Profile page and be able to cover all cards and fields on each card. But this doesnt seem like a realistic or possible way to do it since specific fields are required for User model.

Am i overcomplicating and overthinking this shit?

Tell me is it normal to mix 2 or more different models to show data in 1 card on 1 page or how would you suggest doing it better?