Latest stuff. Changed colors. Etc.
11
components/NavBar.vue
Normal file
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-end px-8 py-4">
|
||||
<div class="grow"></div>
|
||||
<a href="/" class="px-4 text-white">Home</a>
|
||||
<a href="/about" class="px-4 text-white">About Me</a>
|
||||
<a href="/projects" class="px-4 text-white">Projects</a>
|
||||
</div>
|
||||
</template>
|
|
@ -2,26 +2,28 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-charcoal min-h-max h-screen">
|
||||
<div class="bg-dark-green w-screen flex flex-col items-center gap-8">
|
||||
<div class="position-self-center my-4 text-white text-4xl lg:text-8xl text-center">Ben Shiller</div>
|
||||
<div class="justify-self-end flex flex-row gap-8 lg:gap-32">
|
||||
<LinkIconText img-src="/logos/github.svg" link="https://github.com/shillerben">GitHub</LinkIconText>
|
||||
<LinkIconText img-src="/logos/gitea.svg" link="https://git.shillerben.com/shillerben">Gitea</LinkIconText>
|
||||
<LinkIconText img-src="/logos/linkedin.svg" link="https://www.linkedin.com/in/ben-shiller/">LinkedIn</LinkIconText>
|
||||
<div class="bg-dark-blue min-h-max h-screen">
|
||||
<div class="bg-blue w-screen">
|
||||
<NavBar/>
|
||||
<div class="flex flex-col items-center gap-8">
|
||||
<div class="position-self-center my-4 text-white text-4xl lg:text-8xl text-center">Ben Shiller</div>
|
||||
<div class="justify-self-end flex flex-row gap-8 lg:gap-32">
|
||||
<LinkIconText img-src="/logos/github.svg" link="https://github.com/shillerben">GitHub</LinkIconText>
|
||||
<LinkIconText img-src="/logos/gitea.svg" link="https://git.shillerben.com/shillerben">Gitea</LinkIconText>
|
||||
<LinkIconText img-src="/logos/linkedin.svg" link="https://www.linkedin.com/in/ben-shiller/">LinkedIn</LinkIconText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-charcoal p-4">
|
||||
<div class="flex flex-col bg-light-grey text-charcoal mx-auto lg:w-1/2 content-center">
|
||||
<p class="text-xl text-center my-2">
|
||||
Welcome to my website! My name is Ben Shiller, and I'm a software devolper at ISA. I got a B.S. in Computer Engineering
|
||||
from Texas A&M University in 2020, and now I'm working towards a M.S. in Computer Science at the University of Texas at Austin.
|
||||
</p>
|
||||
<p class="text-xl text-center my-2">
|
||||
Eventually I'll get around to making this into something cool, but for now you can check out my other projects on my
|
||||
<a href="https://git.shillerben.com/shillerben" class="text-dark-green">Gitea</a>!
|
||||
<div class="bg-dark-blue p-4">
|
||||
<div class="flex flex-col text-white mx-auto lg:w-1/2 content-center">
|
||||
<p class="text-xl lg:text-2xl text-center py-2">
|
||||
Welcome to my website! My name is Ben Shiller, and I'm a software devolper at Innovative Signal Analysis. I received my B.S. in Computer Engineering
|
||||
from Texas A&M University in 2020, and I am currently working towards a M.S. in Computer Science at the University of Texas at Austin.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
17
pages/Projects.vue
Normal file
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-dark-blue bg-cover min-h-screen">
|
||||
<NavBar/>
|
||||
<div class="flex flex-col place-content-center p-8">
|
||||
<p class="text-white text-xl lg:text-3xl text-center">
|
||||
This page is a work in progress. You can check out my projects on my <a href="https://git.shillerben.com" class="text-turquoise">Gitea</a>
|
||||
and on my <a href="https://github.com/shillerben" class="text-turquoise">GitHub</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
|
@ -2,26 +2,28 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex place-content-center h-screen w-screen">
|
||||
<div class="flex flex-col lg:flex-row place-content-center gap-4 lg:gap-8">
|
||||
<img src="/homepage-me.png" class="mx-auto lg:my-auto justify-self-center lg:justify-self-end w-64 h-64 lg:w-96 lg:h-96"/>
|
||||
<div class="flex flex-col gap-4 place-content-center place-self-center lg:justify-self-start">
|
||||
<p class="text-center text-white text-2xl lg:text-4xl w-64 lg:w-96">
|
||||
Howdy! My name is Ben Shiller, and I am a software developer.
|
||||
</p>
|
||||
<div class="flex flex-row gap-4 place-content-start lg:place-content-center">
|
||||
<!-- <a href="/projects" class="bg-white border-white h-8 w-28"> -->
|
||||
<a href="/projects" class="border-white border-4 h-8 w-28">
|
||||
<div class="text-center">
|
||||
<!-- <div class="border-white border-4 text-black">Projects</div> -->
|
||||
<div class="text-white">Projects</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/about" class="border-white border-4 h-8 w-28">
|
||||
<div class="text-center">
|
||||
<div class="text-white">About Me</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="bg-black bg-cover bg-center bg-no-repeat bg-fixed" style="background-image: url(/homepage-bg2.png)">
|
||||
<div class="flex place-content-center h-screen w-screen">
|
||||
<div class="flex flex-col lg:flex-row place-content-center gap-4 lg:gap-8">
|
||||
<img src="/homepage-me.png" class="mx-auto lg:my-auto justify-self-center lg:justify-self-end w-64 h-64 lg:w-96 lg:h-96"/>
|
||||
<div class="flex flex-col gap-4 place-content-center place-self-center lg:justify-self-start">
|
||||
<p class="text-center text-white text-2xl lg:text-4xl w-64 lg:w-96">
|
||||
Howdy! My name is Ben Shiller, and I am a software developer.
|
||||
</p>
|
||||
<div class="flex flex-row gap-4 place-content-start lg:place-content-center">
|
||||
<!-- <a href="/projects" class="bg-white border-white h-8 w-28"> -->
|
||||
<a href="/projects" class="border-white border-4 h-8 w-28">
|
||||
<div class="text-center">
|
||||
<!-- <div class="border-white border-4 text-black">Projects</div> -->
|
||||
<div class="text-white">Projects</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/about" class="border-white border-4 h-8 w-28">
|
||||
<div class="text-center">
|
||||
<div class="text-white">About Me</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -29,12 +31,12 @@
|
|||
</template>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-image: url(/homepage-bg.png);
|
||||
/* body {
|
||||
background-image: url(/homepage-bg2.png);
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-color: black;
|
||||
}
|
||||
} */
|
||||
</style>
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
BIN
public/homepage-bg2-1080p.png
Normal file
After Width: | Height: | Size: 2.6 MiB |
BIN
public/homepage-bg2-4kuhd.png
Normal file
After Width: | Height: | Size: 8.9 MiB |
BIN
public/homepage-bg2-ipad.png
Normal file
After Width: | Height: | Size: 2.0 MiB |
BIN
public/homepage-bg2-phone.png
Normal file
After Width: | Height: | Size: 1015 KiB |
BIN
public/homepage-bg2.png
Normal file
After Width: | Height: | Size: 13 MiB |
|
@ -5,10 +5,15 @@ srcDir = '.'
|
|||
module.exports = {
|
||||
theme: {
|
||||
colors: {
|
||||
"blue": "#005EB8",
|
||||
"dark-blue": "#005A81",
|
||||
"lightest-blue": "#BFECFF",
|
||||
"light-blue": "#80D9FF",
|
||||
/* From image of desktop */
|
||||
"dark-blue": "#011126",
|
||||
"blue": "#0367A6",
|
||||
"light-blue": "#05AFF2",
|
||||
"lightest-blue": "#05DBF2",
|
||||
"turquoise": "#05F2DB",
|
||||
|
||||
/* other colors */
|
||||
"black": "#000000",
|
||||
"white": "#FFFFFF",
|
||||
"charcoal": "#343434",
|
||||
"grey": "#6A6A6A",
|
||||
|
@ -18,7 +23,7 @@ module.exports = {
|
|||
"dark-green": "#228b22",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Arial", "sans-serif"],
|
||||
sans: ["Helvetica", "sans-serif"],
|
||||
}
|
||||
},
|
||||
plugins: [],
|
||||
|
|