How to override hugo academic landing page

[mapple13]

Hello all!

I've been building up my website, starting from the Hugo Academic template.
I tried modifying the landing page style, but found it more difficult to modify the existing one, and it's actually easier to make my own style using a raw HTML file.

The following is the part of the customized HTML that I want to use.

# Documentation: https://hugoblox.com/docs/managing-content/

title: ""
subtitle: ""
summary: ""
authors: []
tags: []
categories: []
date: 2024-01-04T14:43:15-05:00
lastmod: 2024-01-04T14:43:15-05:00
featured: false
---

<!-- Avatar and Intro -->
<section id="section-resume-biography" class="relative hbb-section blox-resume-biography" style="padding: 2rem 0;">
  <div class="home-section-bg"></div>

<div class="flex flex-col items-center justify-center text-center px-4 py-16 bg-[#FFFDF6] text-gray-800">

  <!-- Profile picture -->
  <img class="avatar avatar-circle"
       width="1200" height="1200"
       src="/authors/admin/avatar.jpg"
       alt="MyName">

  <!-- Name -->
  <h1 class="text-2xl font-semibold text-gray-900 mb-2">MyName</h1>

  <!-- Affiliation -->
  <h3 class="font-semibold mb-1">Assistant Professor</h3>
  <div class="mb-2">
      <a href="google.com" target="_blank" rel="noopener">
      <div>Department of XXXX</div>
      </a></div>
  <h4 class="font-semibold mb-1">[email protected]</h4>

<ul class="network-icon dark:text-zinc-100">

Here is my question:
When I try this code under content/about/index.html, this code works well and shows the contents under the menu "about".
What I want to do is to show this page as the landing page.
I did some research and felt that changing the landing page itself can be quite tricky.
So I tried customizing the landing page itself but then it screws up.

1. If I change the content/_index.md to conent/index.html to put my customized HTML code, the landing page itself shows well but the navigation link on menu tab is screwed up. Is there a way to fix the url link for other tabs? For instance, the previous menu tab had url link as url: '/About'. It's going to be great if I can simply fix these url links to other tabs.

2. Another option is to keep the content/_index.md and override the existing template. Is there a way to keep the existing formatting (e.g., background colors, navigation menu, etc) and just add content? I tried adding layouts/index.html but then the existing formatting is all gone. To me, overriding the whole landing page seems to be quite difficult to work with.

My current content/_index.md file looks like this:

---
# Leave the homepage title empty to use the site title
title: ''
date: 2022-10-24
type: landing

---

I don't want to use existing hugo blocks. I am trying to find ways to add my customized HTML codes.

Thank you all for your attention and help!