diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2024-01-02 21:28:31 -0500 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2024-01-02 21:28:31 -0500 |
| commit | dd7a71191a9e887624b2c537a00d8f30bab39337 (patch) | |
| tree | c5fe73efbd1908989f983ef8e09da571c864728f | |
| parent | 9735f3bd1d8f823402814116464f1e3ae344e3e9 (diff) | |
| download | personal-website-dd7a71191a9e887624b2c537a00d8f30bab39337.tar.gz personal-website-dd7a71191a9e887624b2c537a00d8f30bab39337.tar.bz2 personal-website-dd7a71191a9e887624b2c537a00d8f30bab39337.zip | |
Finished first part of homepage
| -rw-r--r-- | astro.config.mjs | 5 | ||||
| -rwxr-xr-x | bun.lockb | bin | 194572 -> 215285 bytes | |||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | src/components/Navbar.astro | 6 | ||||
| -rw-r--r-- | src/components/Navbar.css | 11 | ||||
| -rw-r--r-- | src/env.d.ts | 1 | ||||
| -rw-r--r-- | src/layouts/Default.astro | 22 | ||||
| -rw-r--r-- | src/pages/index.astro | 23 | ||||
| -rw-r--r-- | src/pages/index.css | 30 |
9 files changed, 86 insertions, 16 deletions
diff --git a/astro.config.mjs b/astro.config.mjs index 882e651..5db1b38 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,4 +1,7 @@ import { defineConfig } from 'astro/config'; +import icon from "astro-icon"; // https://astro.build/config -export default defineConfig({}); +export default defineConfig({ + integrations: [icon()], +}); Binary files differdiff --git a/package.json b/package.json index d20aae9..a4dddf5 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "astro": "astro" }, "dependencies": { - "astro": "^4.0.5" + "@iconify-json/fa6-brands": "^1.1.18", + "astro": "^4.0.5", + "astro-icon": "^1.0.2" } }
\ No newline at end of file diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 17da17d..a838438 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -2,8 +2,8 @@ import "./Navbar.css" --- <nav> - <ul> - <li><a href="#">Home</a></li> - <li><a href="#">Projects</a></li> + <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> </ul> </nav> diff --git a/src/components/Navbar.css b/src/components/Navbar.css index 5987d16..7b1a334 100644 --- a/src/components/Navbar.css +++ b/src/components/Navbar.css @@ -3,7 +3,7 @@ nav { padding-top: 20px; padding-bottom: 30px; } -ul { +ul.nav-list { list-style-type: none; margin: 0; padding: 0; @@ -12,22 +12,23 @@ ul { justify-content: center; } -li { +li.nav-links { margin: 0 1rem; } -a { + +a.nav-link { font-size: 1.2rem; text-decoration: none; color: #FFFFFF; } -a:hover { +a.nav-link:hover { font-weight: 500; color: #9ECD9D; transition: ease-in-out 0.1s; } -a:active { +a.nav-link:active { color: #609460; } diff --git a/src/env.d.ts b/src/env.d.ts index f964fe0..acef35f 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1 +1,2 @@ +/// <reference path="../.astro/types.d.ts" /> /// <reference types="astro/client" /> diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index 9cbaf7a..b54dc35 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -11,7 +11,7 @@ import Navbar from '../components/Navbar.astro'; <html lang="en"> <head> <meta charset="UTF-8" /> - <meta name="description" content="Astro description" /> + <meta name="description" content="Andrew Lee Website" /> <meta name="viewport" content="width=device-width" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> @@ -24,7 +24,7 @@ import Navbar from '../components/Navbar.astro'; <Navbar /> <slot /> <footer> - <p>© Copyright 2018-2024, Andrew Lee</p> + <p>Copyright © 2024 Andrew Lee</p> </footer> </body> </html> @@ -39,8 +39,22 @@ import Navbar from '../components/Navbar.astro'; footer { text-align: center; - font-size: 1.3em; - padding: 1rem; + font-size: 2.4vh; + padding: 1.3vh; + } + + a { + text-decoration: none; + color: #d7fcc9; + } + + a:hover { + color: #9ECD9D; + transition: ease-in-out 0.2s; + } + + a:active { + color: #609460; } code { diff --git a/src/pages/index.astro b/src/pages/index.astro index bb8e3a9..4c25869 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,5 +1,6 @@ --- import Layout from '../layouts/Default.astro'; +import { Icon } from 'astro-icon/components' import { Image } from 'astro:assets'; import './index.css'; --- @@ -8,5 +9,27 @@ import './index.css'; <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> + <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> </main> </Layout> diff --git a/src/pages/index.css b/src/pages/index.css index d242483..ddc1fc6 100644 --- a/src/pages/index.css +++ b/src/pages/index.css @@ -3,10 +3,36 @@ } .avatar { - border-radius: 50%; + border-radius: 20%; } h1 { font-weight: 500; - font-size: 2.3rem; + font-size: 4vh; +} + +h2 { + font-weight: 500; + font-size: 2.5vh; +} + +.description { + line-height: 0.4; +} + +h3 { + font-weight: 300; + font-size: 1.2rem; +} + +.social { + display: flex; + flex-direction: row; + justify-content: center; + font-size: 6vh; + gap: 7vh; +} + +.social-links { + color: #FFFFFF; } |