diff options
| -rw-r--r-- | src/components/Navbar.astro | 10 | ||||
| -rw-r--r-- | src/layouts/Default.astro | 9 | ||||
| -rw-r--r-- | src/pages/index.astro | 17 | ||||
| -rw-r--r-- | src/styles/Navbar.css | 72 | ||||
| -rw-r--r-- | src/styles/index.css | 46 |
5 files changed, 132 insertions, 22 deletions
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index c9deb28..03bc27c 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -2,6 +2,9 @@ import "../styles/Navbar.css" --- <nav> + <button class="nav-toggle" aria-label="toggle navigation"> + <span class='hamburger'></span> + </button> <ul class="nav-list"> <li><a href="/" class="nav-link">Home</a></li> <li><a href="#" class="nav-link">Projects</a></li> @@ -11,3 +14,10 @@ import "../styles/Navbar.css" <li><a href="#" class="nav-link">Contacts</a></li> </ul> </nav> + +<script> + document.querySelector('.nav-toggle').addEventListener('click', function() { + this.classList.toggle('active'); + document.querySelector('.nav-list').classList.toggle('show'); + }); +</script> diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index 7b56234..e28d85c 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -42,7 +42,14 @@ import Navbar from '../components/Navbar.astro'; footer { text-align: center; font-size: 2.4vh; - padding: 1.3vh; + } + + h1, h2, h3, h4, h5, h6 { + font-weight: 500; + } + + h2 { + font-size: 2.5vh; } a { diff --git a/src/pages/index.astro b/src/pages/index.astro index b68a55c..1f6061d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -12,16 +12,16 @@ import '../styles/index.css'; <Image src={Profile} class="avatar" alt="Andrew Lee" height={200} width={200} /> <h1 id="title">Hey, I'm Andrew Lee!</h1> <div class="social"> - <a href="https://linkedin.alee14.me"> + <a href="https://linkedin.alee14.me" target="_blank"> <Icon name="fa6-brands:linkedin" /> </a> - <a href="https://github.alee14.me"> + <a href="https://github.alee14.me" target="_blank"> <Icon name="fa6-brands:github" /> </a> - <a href="https://youtube.alee14.me"> + <a href="https://youtube.alee14.me" target="_blank"> <Icon name="fa6-brands:youtube" /> </a> - <a href="https://instagram.alee14.me"> + <a href="https://instagram.alee14.me" target="_blank"> <Icon name="fa6-brands:instagram" /> </a> </div> @@ -58,21 +58,22 @@ import '../styles/index.css'; </ul> <h2>Vultr (Web Server)</h2> <ul> - <li>OS: Ubuntu Server</li> + <li>OS: Ubuntu Server 22.04 LTS</li> <li>CPU: Intel Xeon Processor (Skylake, IBRS)</li> <li>RAM: 1 GB</li> - <li>Storage: 25 GB (and 50 GB for Block Storage)</li> + <li>Storage: 25 GB (and 100 GB for Block Storage)</li> </ul> <h2>Proxmox</h2> <ul> <li>Model: Lenovo ThinkCentre M800</li> - <li>CPU: Intel Core i5-6500</li> + <li>CPU: Intel Core i5 6500</li> <li>RAM: 16 GB RAM</li> <li>Storage: 500 GB SSD, 2 TB SSD</li> </ul> </div> - <div class="box"> + <div class="box latest-posts"> <h1>Latest Posts</h1> + <p>Hello world</p> </div> </div> </main> diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css index e17decd..9dbf797 100644 --- a/src/styles/Navbar.css +++ b/src/styles/Navbar.css @@ -25,3 +25,75 @@ a.nav-link:hover { a.nav-link:active { color: #609460; } + +@media (max-width: 768px) { + ul.nav-list { + flex-direction: column; + align-items: center; + gap: 2vh; + } +} + +.nav-toggle { + background: transparent; + border: none; + cursor: pointer; + display: none; +} + +.nav-toggle .hamburger { + width: 30px; + height: 2px; + background: white; + display: block; + position: relative; +} + +.nav-toggle .hamburger::before, .nav-toggle .hamburger::after { + content: ''; + background: white; + display: block; + position: absolute; + width: 100%; + height: 100%; +} + +.nav-toggle .hamburger::before { + top: -10px; +} + +.nav-toggle .hamburger::after { + bottom: -10px; +} + +@media (max-width: 768px) { + .nav-toggle { + display: block; + padding: 20px; + } + + + ul.nav-list { + flex-direction: column; + align-items: center; + gap: 2vh; + display: none; + } + + ul.nav-list.show { + display: flex; + } + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + .nav-list.show a.nav-link { + animation: fadeIn 0.5s ease-in-out forwards; + } +} diff --git a/src/styles/index.css b/src/styles/index.css index 5c05c0b..9f383cd 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -8,19 +8,10 @@ border-radius: 20%; } -h1 { - font-weight: 500; -} - #title { font-size: 4vh; } -h2 { - font-weight: 500; - font-size: 2.5vh; -} - ul { padding-left: 20px; font-size: 1.1em; @@ -48,11 +39,11 @@ p { } .information { - display: flex; - flex-direction: column; - flex-wrap: wrap; + display: grid; + grid-template-columns: 1fr 0.7fr; + grid-template-rows: auto auto; gap: 2vh; - padding: 30px 30px 30px 30px + padding: 30px; } .box { @@ -61,3 +52,32 @@ p { background: #3B513B; border-radius: 20px; } + +.box:nth-child(1), .box:nth-child(2) { + grid-column: 1; +} + +.latest-posts { + grid-column: 2; + grid-row: 1 / span 2; +} + +/* Mobile view */ +@media (max-width: 768px) { + .social { + font-size: 5vh; + gap: 3vh; + } + + .information { + grid: auto auto auto / 1fr; + } + + .box:nth-child(1), .box:nth-child(2), .latest-posts { + grid-column: 1; + } + + .latest-posts { + grid-row: auto; + } +} |