-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add nav bar, adds common css height properties, centers hero components
- Loading branch information
Showing
3 changed files
with
61 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| --- | ||
| --- | ||
| <header class="mt-8 text-lg uppercase"> | ||
| <div class="flex justify-between place-items-center"> | ||
| <div class="flex justify-between place-items-center"> | ||
| <a href="/"></></a> | ||
| </div> | ||
| <nav class=""> | ||
| <ul class="flex place-items-center gap-x-20"> | ||
| <li class=""> | ||
| <a href="/">Home</a> | ||
| </li> | ||
| <li class=""> | ||
| <a href="#about">About</a> | ||
| </li> | ||
| <li class=""> | ||
| <a href="#projects">Projects</a> | ||
| </li> | ||
| <li class=""> | ||
| <a href="mailto:[email protected]"> | ||
| <button class="text-pink-600 hover:border-pink-500 border border-pink-600 py-2 px-4 rounded text-lg"> | ||
| CONTACT | ||
| </button> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </header> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,39 @@ | ||
| --- | ||
| import Layout from '../layouts/Layout.astro'; | ||
| import programmerImage from '../assets/programmer.svg' | ||
| import Navigation from '../components/Navigation.astro'; | ||
| --- | ||
|
|
||
| <Layout title="Lea Tinoso"> | ||
| <main class="text-slate-50 bg-slate-950 h-screen"> | ||
| <div class="flex h-full"> | ||
| <section class="flex w-3/5"> | ||
| <div class="m-auto"> | ||
| <h1 class="text-6xl font-bold leading-normal">Hey, I'm <span class="text-pink-600">Lea</span></h1> | ||
| <h2 class="text-4xl font-normal">a <span class="text-pink-600">Full-Stack</span> Software Engineer</h2> | ||
| <p class="text-gray-400 my-9 text-lg"> | ||
| I code backend with <span class="underline hover:text-white"><a href="https://rubyonrails.org/" target="_blank" rel="noopener noreferrer">Ruby on Rails</a></span> & <span class="underline hover:text-white"><a href="https://nestjs.com/" target="_blank" rel="noopener noreferrer">Nest.js</a></span> and dive into <span class="underline hover:text-white"><a href="https://react.dev/" target="_blank" rel="noopener noreferrer">React.js</a></span> for the frontend. | ||
| </p> | ||
| <div> | ||
| <a href="https://app.luminpdf.com/viewer/64f89185f9890d8d81e74775" target="_blank" rel="noopener noreferrer"> | ||
| <button class="bg-pink-600 hover:bg-pink-500 text-white py-2 px-4 rounded mr-8 text-lg">View Cv</button> | ||
| </a> | ||
| <a href="mailto:[email protected]"> | ||
| <button class="text-pink-600 hover:border-pink-500 border border-pink-600 py-2 px-4 rounded text-lg">Email</button> | ||
| </a> | ||
| <main class="px-24 h-screen flex flex-col"> | ||
| <Navigation/> | ||
| <section class="flex flex-1 place-items-center"> | ||
| <div class="flex"> | ||
| <section class="flex"> | ||
| <div class=""> | ||
| <h1 class="text-6xl font-bold leading-normal">Hey, I'm <span class="text-pink-600">Lea</span></h1> | ||
| <h2 class="text-4xl font-normal">a <span class="text-pink-600">Full-Stack</span> Web Software Engineer</h2> | ||
| <p class="text-gray-400 my-9 text-lg"> | ||
| I code backend with <span class="underline hover:text-white"><a href="https://rubyonrails.org/" target="_blank" rel="noopener noreferrer">Ruby on Rails</a></span> & <span class="underline hover:text-white"><a href="https://nestjs.com/" target="_blank" rel="noopener noreferrer">Nest.js</a></span> and dive into <span class="underline hover:text-white"><a href="https://react.dev/" target="_blank" rel="noopener noreferrer">React.js</a></span> for the frontend. | ||
| </p> | ||
| <div> | ||
| <a href="https://app.luminpdf.com/viewer/64f89185f9890d8d81e74775" target="_blank" rel="noopener noreferrer"> | ||
| <button class="bg-pink-600 hover:bg-pink-500 text-white py-2 px-4 rounded mr-8 text-lg">View CV</button> | ||
| </a> | ||
| <a href="mailto:[email protected]"> | ||
| <button class="text-pink-600 hover:border-pink-500 border border-pink-600 py-2 px-4 rounded text-lg"> | ||
| </button> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="flex"> | ||
| <div class="m-auto"> | ||
| <img class="w-5/6" src={programmerImage}> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </section> | ||
| <section class="flex"> | ||
| <div class=""> | ||
| <img class="w-5/6" src={programmerImage}> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </section> | ||
| </main> | ||
| </Layout> |