How do I properly deploy my angular 19 project?

I deployed my angular 19 project in both Vercel and Netlify, but it seems to be broken compared to the local version

deployment page

locally run page

I have tried fixing some of my code but there was no success, i dont know what to fix as this is my first time ever deploying one of my projects

the code can be found here https://github.com/kenryanlukearias/kenryan-portfolio

<body>
<div class="parent">
<div class="child1">
<h1>Kenryan Luke Arias</h1>
<ul class="posts">
<li><a href="mailto:kenryanlbarias@gmail.com">kenryanlbariasgmail.com</a></li>
<li><p>linkedin.com/<a href="https://www.linkedin.com/in/kenryan-luke-arias-a0326b2a8/">kenryan-luke-arias</a></p></li>
<li><p>github.com/<a href="https://github.com/kenryanlukearias">kenryan</a></p></li>
</ul>
</div>
<div class="child2">
<h1>currently</h1>
<ul>
<li>studying at bathspa university rak</li>
<li>creating a robot using arduino</li>
<li>making a website for a project</li>
</ul>
</div>
<p>----------------------------------------------------------------</p>
<div class="child3">
<h1>posts</h1>
<ul class="posts">
<!-- <li>3.25 . </li> -->
<li></li>
<li></li>
</ul>
</div>
</div>
</body>


body {
height:75%;
width: 100%;
}

h1 {
font-size: medium;
font-weight: bold;
margin-bottom: 5px;
}

p {
margin: 0;
}

.parent {
// background-color: red;
display: flex;
margin: 0 auto;
width: 35%;
height: 100%;
justify-content: center;
padding: 10px;
flex-direction: column;
}

a {
color: blue;
text-decoration: underline;
}

a:hover {
color: black;
}

ul {
padding-left: 3rem;
}

.posts {
padding-left: 0;
list-style-type: none;
}

.child1, .child2, .child3 {
margin-bottom: 20px;
}

Continue reading...