made homepage

src/app.css

@@ -42,6 +42,10 @@ button {
  margin-bottom: 5px;
 }
 
+button:hover {
+ background-color: var(--primary);
+}
+
 label {
  display: flex;
  flex-direction: column;
@@ -57,31 +61,9 @@ input {
 
 .content-area {
  background-color: var(--white);
- padding: 1rem;
- margin-left: 10vw;
- margin-right: 10vw;
+ margin-left: 9vw;
+ margin-right: 9vw;
  margin-top: 7px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
 }
-
-.navbutton {
- display: flex;
- justify-content: center;
- align-content: center;
- padding: 10px;
- background: none;
- border: none;
- cursor: pointer;
- transition:
- background-color 0.3s ease,
- transform 0.3s ease,
- border-radius 0.3s ease;
- border-radius: 40px;
-}
-
-.navbutton:hover {
- transform: scale(1.1);
- background-color: var(--background);
- border: none;
-}

src/lib/components/Button.svelte

@@ -0,0 +1,11 @@
+<script>
+export let text = '';
+$$restProps;
+</script>
+
+<button {...$$restProps}>
+ {text}
+</button>
+
+<style>
+</style>

src/lib/components/Logo.svelte

@@ -0,0 +1,18 @@
+<script>
+import logoUrl from '/logo.svg';
+</script>
+
+<div class="logo">
+ <img src={logoUrl} alt="Logo" width="32" height="32" />
+ <span>My Developer Portfolio</span>
+</div>
+
+<style>
+.logo {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 1.2rem;
+ font-weight: bold;
+}
+</style>

src/lib/components/Navbar.svelte

@@ -0,0 +1,52 @@
+<script>
+import Navlink from './Navlink.svelte';
+import Logo from './Logo.svelte';
+import Button from './Button.svelte';
+</script>
+
+<nav class="navbar">
+ <div class="navbar-content">
+ <div class="logo">
+ <Logo />
+ </div>
+
+ <div class="nav-links">
+ <Navlink href="/" text="Home" />
+ <Navlink href="/services" text="Services" />
+ <Navlink href="/portfolio" text="Portfolio" />
+ <Navlink href="/blog" text="Blog" />
+ </div>
+
+ <div class="hire-button">
+ <Button text="Hire Me" />
+ </div>
+ </div>
+</nav>
+
+<style>
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ background-color: #f8f8f8;
+ box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-content {
+ margin-left: 2vw;
+ margin-right: 2vw;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ justify-content: space-around;
+}
+
+.nav-links {
+ display: flex;
+ align-content: center;
+ gap: 1rem;
+ margin-left: 1vw;
+ margin-right: 8vw;
+}
+</style>

src/lib/components/Navlink.svelte

@@ -0,0 +1,20 @@
+<script>
+export let href = '';
+export let text = '';
+</script>
+
+<a {href} class="nav-link">
+ {text}
+</a>
+
+<style>
+.nav-link {
+ text-decoration: none;
+ color: black;
+ font-weight: bold;
+}
+
+.nav-link:hover {
+ color: #6200ea;
+}
+</style>

src/lib/components/Splash.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+export let titleText: string;
+export let subTitleText: string;
+export let buttonText: string;
+export let buttonClick: () => void;
+export let imageUrl: string = '/header-image.jpg';
+</script>
+
+<div class="splash">
+ <div class="splash-bg" style="background: url({imageUrl}) no-repeat center center"></div>
+
+ <div class="splash-content-area">
+ <div class="splash-content">
+ <h1>{titleText}</h1>
+ <h2>{subTitleText}</h2>
+ <button class="download-button" on:click={buttonClick}>{buttonText}</button>
+ </div>
+ </div>
+</div>
+
+<style>
+.splash {
+ position: relative;
+ width: 100%;
+ height: 50vh;
+ overflow: hidden;
+ align-items: center;
+ justify-content: center;
+ align-content: center;
+}
+
+.splash-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ filter: blur(10px);
+ z-index: 1;
+}
+
+h2 {
+ margin: 2rem 0;
+}
+
+h1 {
+ color: white;
+}
+
+.splash-content-area {
+ background: rgba(0, 0, 0, 0.4);
+ position: relative;
+ z-index: 2;
+ width: 100%;
+ height: 100%;
+ display: flex;
+}
+
+.splash-content {
+ padding-right: 5000px;
+ color: white;
+ padding: 2rem;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+</style>

src/routes/+layout.svelte

@@ -1,10 +1,10 @@
 <script>
-import PageTitle from '$lib/PageTitle.svelte';
 import ContentArea from '$lib/ContentArea.svelte';
+import Navbar from '$lib/components/Navbar.svelte';
 import '../app.css';
 </script>
 
-<PageTitle />
+<Navbar />
 <ContentArea>
  <slot></slot>
 </ContentArea>

src/routes/+page.svelte

@@ -1,16 +1,37 @@
 <script lang="ts">
- let count: number = 0;
- let name: string = 'Taylor';
+import Splash from '$lib/components/Splash.svelte';
 
- const increment = () => {
- count += 1;
- };
+function downloadResume() {}
 </script>
 
-<div>
- <h1>Hello {name}</h1>
- <p>the count is currently {count}</p>
- <button on:click={increment}>Click
- me</button>
-
+<div class="about">
+ <Splash
+ titleText="Taylor Neal"
+ subTitleText="Full Stack Developer"
+ buttonClick={downloadResume}
+ buttonText="Download Resume"
+ />
+ <h2>About Me</h2>
+ <p>
+ Hello! I'm Taylor, a passionate software engineer who's been developing software for over 3
+ years. My expertise lies in full stack application development, where I enjoy bringing ideas to
+ life through code. I also enjoy developing games in my free time as well as experimenting with
+ other languages/technologies.
+ </p>
 </div>
+
+<style>
+.about {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+h2 {
+ margin-top: 3rem;
+}
+p {
+ margin: 3rem 20rem;
+ text-align: center;
+}
+</style>