diff options
| -rw-r--r-- | src/components/Navbar.astro | 12 | ||||
| -rw-r--r-- | src/pages/index.astro | 55 | ||||
| -rw-r--r-- | src/styles/Navbar.css | 11 | ||||
| -rw-r--r-- | src/styles/index.css | 28 |
4 files changed, 62 insertions, 44 deletions
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 66433b8..c9deb28 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -3,11 +3,11 @@ import "../styles/Navbar.css" --- <nav> <ul class="nav-list"> - <li class="nav-links"><a href="/" class="nav-link">Home</a></li> - <li class="nav-links"><a href="#" class="nav-link">Projects</a></li> - <li class="nav-links"><a href="#" class="nav-link">Downloads</a></li> - <li class="nav-links"><a href="#" class="nav-link">Blog</a></li> - <li class="nav-links"><a href="#" class="nav-link">Guestbook</a></li> - <li class="nav-links"><a href="#" class="nav-link">Contacts</a></li> + <li><a href="/" class="nav-link">Home</a></li> + <li><a href="#" class="nav-link">Projects</a></li> + <li><a href="#" class="nav-link">Downloads</a></li> + <li><a href="#" class="nav-link">Blog</a></li> + <li><a href="#" class="nav-link">Guestbook</a></li> + <li><a href="#" class="nav-link">Contacts</a></li> </ul> </nav> diff --git a/src/pages/index.astro b/src/pages/index.astro index faca29e..6113dd1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -7,29 +7,40 @@ import '../styles/index.css'; <Layout title="Andrew Lee"> <main class="home"> - <Image class="avatar" src="/Alee.png" alt="Andrew Lee" height="200px" width="200px" /> - <h1>Hey, I'm Andrew Lee!</h1> - <div class="social"> - <a href="https://github.alee14.me" class="social-links"> - <Icon name="fa6-brands:github" /> - </a> - <a href="https://youtube.alee14.me" class="social-links"> - <Icon name="fa6-brands:youtube" /> - </a> - <a href="https://instagram.alee14.me" class="social-links"> - <Icon name="fa6-brands:instagram" /> - </a> - <a href="https://discord.alee14.me" class="social-links"> - <Icon name="fa6-brands:discord" /> - </a> + <div class="headline"> + <Image class="avatar" src="/Alee.png" alt="Andrew Lee" height="200px" width="200px" /> + <h1 id="title">Hey, I'm Andrew Lee!</h1> + <div class="social"> + <a href="https://github.alee14.me"> + <Icon name="fa6-brands:github" /> + </a> + <a href="https://youtube.alee14.me"> + <Icon name="fa6-brands:youtube" /> + </a> + <a href="https://instagram.alee14.me"> + <Icon name="fa6-brands:instagram" /> + </a> + <a href="https://discord.alee14.me"> + <Icon name="fa6-brands:discord" /> + </a> + </div> + <div class="description"> + <h2>19 Years Old</h2> + <h2>Student at Pearson Electrotechnology Centre</h2> + <h2>Living in Montreal, Quebec, Canada</h2> + </div> + <div> + <h3><a href="mailto:andrew@alee14.me" class="email-contact">andrew@alee14.me</a></h3> + </div> </div> - <div class="description"> - <h2>19 Years Old</h2> - <h2>Student at Pearson Electrotechnology Centre</h2> - <h2>Living in Montreal, Quebec, Canada</h2> - </div> - <div> - <h3><a href="mailto:andrew@alee14.me">andrew@alee14.me</a></h3> + <div class="infobox"> + <div class="about"> + <h1>About me</h1> + <p>I have been into computers since I was a kid, and it has been my passion for a long time. <br>Currently studying “Computing Support” (more preferably IT) at a vocational school.</p> + </div> + <div class="about"> + <h1>Computer Specs</h1> + </div> </div> </main> </Layout> diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css index 8c239e0..e17decd 100644 --- a/src/styles/Navbar.css +++ b/src/styles/Navbar.css @@ -10,21 +10,14 @@ ul.nav-list { display: flex; flex-direction: row; justify-content: center; + gap: 4vh; } -li.nav-links { - margin: 0 1rem; -} - - a.nav-link { - font-size: 1.2rem; - text-decoration: none; - color: #FFFFFF; + font-size: 2vh; } a.nav-link:hover { - font-weight: 500; color: #9ECD9D; transition: ease-in-out 0.1s; } diff --git a/src/styles/index.css b/src/styles/index.css index ddc1fc6..17d6a52 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1,4 +1,6 @@ .home { + display: flex; + flex-direction: column; text-align: center; } @@ -8,6 +10,9 @@ h1 { font-weight: 500; +} + +#title { font-size: 4vh; } @@ -20,11 +25,6 @@ h2 { line-height: 0.4; } -h3 { - font-weight: 300; - font-size: 1.2rem; -} - .social { display: flex; flex-direction: row; @@ -33,6 +33,20 @@ h3 { gap: 7vh; } -.social-links { - color: #FFFFFF; +.email-contact { + font-weight: 300; + font-size: 2.2vh; +} + +.infobox { + display: flex; + flex-direction: column; + gap: 2vh; +} + +.about { + padding: 1vw; + text-align: left; + background: #3B513B; + border-radius: 20px; } |