mirror of
https://github.com/CodeF53/personal-site.git
synced 2024-09-19 22:00:35 +00:00
add Header, move links to component shared by homepage and header, move nuxt root to body
This commit is contained in:
parent
b0ded38d5f
commit
addb5c12b7
8 changed files with 157 additions and 72 deletions
|
|
@ -1,16 +1,3 @@
|
|||
body {
|
||||
// fill screen
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
overflow-x: clip;
|
||||
|
||||
// center everything
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row { display: flex; flex-direction: row; }
|
||||
.col { display: flex; flex-direction: column; }
|
||||
.wrap { display: flex; flex-wrap: wrap; }
|
||||
|
|
|
|||
29
assets/styles/structure.scss
Normal file
29
assets/styles/structure.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
body { margin: 0 }
|
||||
|
||||
// by default keep page at the top of the screen
|
||||
:root { --header-height: 0px }
|
||||
// offset page giving room for header when it's present
|
||||
:root:has(header + #page) { --header-height: 3rem }
|
||||
|
||||
#page {
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
// fill vertically exactly to remaining screen size (since we
|
||||
--root-size: calc(100vh - var(--header-height));
|
||||
max-height: var(--root-size);
|
||||
min-height: var(--root-size);
|
||||
// center contents
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
& > * { align-self: center; margin: auto; }
|
||||
}
|
||||
|
||||
// only show scrollbar when needed & make header hide stuff under it
|
||||
body { overflow-y: overlay; }
|
||||
#page {
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
49
components/Header.vue
Normal file
49
components/Header.vue
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="col">
|
||||
<nav class="row gap2 spaceBetween alignCenter">
|
||||
<NuxtLink to="/" class="home interactive" aria-label="home">
|
||||
<img class="pfp" src="/assets/pfp.svg">
|
||||
</NuxtLink>
|
||||
|
||||
<Links />
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
header {
|
||||
position: fixed; top: 0;
|
||||
left: 0; right: 0;
|
||||
|
||||
nav {
|
||||
height: var(--header-height);
|
||||
max-width: 50rem;
|
||||
width: calc(100vw - 2rem);
|
||||
}
|
||||
|
||||
a.home {
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
padding: 0.25rem;
|
||||
border-radius: unset;
|
||||
}
|
||||
.pfp { height: 100%; }
|
||||
|
||||
// mobile responsiveness
|
||||
.links {
|
||||
// first hide labels
|
||||
@media (max-width: 35rem) {
|
||||
span { display: none; }
|
||||
}
|
||||
// then hide blog/email and reduce the gap between links
|
||||
@media (max-width: 20rem) {
|
||||
.blog, .email { display: none; }
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
components/Links.vue
Normal file
60
components/Links.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<ul class="links wrap gap4 centerChildren">
|
||||
<li class="interactive email">
|
||||
<NuxtLink to="mailto:fseusb@gmail.com" aria-label="email">
|
||||
<Icon name="ri:mail-fill" />
|
||||
<span>Email</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="interactive github">
|
||||
<NuxtLink to="https://github.com/CodeF53" aria-label="github">
|
||||
<Icon name="ph:github-logo-fill" />
|
||||
<span>Github</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="interactive blog">
|
||||
<NuxtLink to="https://dev.to/f53" aria-label="blog">
|
||||
<Icon name="ri:article-fill" />
|
||||
<span>Blog</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="interactive portfolio">
|
||||
<NuxtLink to="/portfolio" aria-label="portfolio">
|
||||
<Icon name="ri:file-list-fill" />
|
||||
<span>Portfolio</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<!-- <li class="interactive linkedin">
|
||||
<NuxtLink to="https://www.linkedin.com/in/chase-welsh/" aria-label="linkedin">
|
||||
<Icon name="mdi:linkedin" />
|
||||
<span>LinkedIn</span>
|
||||
</NuxtLink>
|
||||
</li> -->
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.links {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
background-color: var(--accent-light);
|
||||
&, > * { color: var(--accent-dark); }
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
gap: .25rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
||||
> svg {
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
<template>
|
||||
<slot />
|
||||
<Header />
|
||||
|
||||
<div id="page">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
5
layouts/home.vue
Normal file
5
layouts/home.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div id="page">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -4,9 +4,12 @@ export default defineNuxtConfig({
|
|||
typescript: { strict: true, typeCheck: true, shim: false },
|
||||
modules: ['nuxt-lodash', 'nuxt-icon', '@nuxt/content'],
|
||||
|
||||
css: ['~/assets/styles/layout.scss', '~/assets/styles/misc.scss', '~/assets/styles/font.scss', '~/assets/styles/components.scss'],
|
||||
css: ['~/assets/styles/layout.scss', '~/assets/styles/misc.scss', '~/assets/styles/font.scss', '~/assets/styles/components.scss', '~/assets/styles/structure.scss'],
|
||||
|
||||
app: {
|
||||
// no useless root nuxt div
|
||||
rootTag: 'body',
|
||||
|
||||
head: {
|
||||
htmlAttrs: { lang: 'en' },
|
||||
title: 'F53',
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({ layout: 'home' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="home" class="row centerChildren">
|
||||
<img class="pfp" src="/assets/pfp.svg">
|
||||
|
|
@ -11,38 +15,7 @@
|
|||
Fluent in React, Vue, Ruby on Rails, Java, and Python.
|
||||
</p>
|
||||
|
||||
<ul class="links wrap gap4 centerChildren">
|
||||
<li class="interactive">
|
||||
<NuxtLink to="mailto:fseusb@gmail.com" aria-label="email">
|
||||
<Icon name="ri:mail-fill" />
|
||||
<span>Email</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="interactive">
|
||||
<NuxtLink to="https://github.com/CodeF53" aria-label="github">
|
||||
<Icon name="ph:github-logo-fill" />
|
||||
<span>Github</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="interactive">
|
||||
<NuxtLink to="https://dev.to/f53" aria-label="blog">
|
||||
<Icon name="ri:article-fill" />
|
||||
<span>Blog</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="interactive">
|
||||
<NuxtLink to="/portfolio" aria-label="portfolio">
|
||||
<Icon name="ri:file-list-fill" />
|
||||
<span>Portfolio</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<!-- <li class="interactive">
|
||||
<NuxtLink to="https://dev.to/f53" aria-label="blog">
|
||||
<Icon name="mdi:linkedin" />
|
||||
<span>LinkedIn</span>
|
||||
</NuxtLink>
|
||||
</li> -->
|
||||
</ul>
|
||||
<Links />
|
||||
</main>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -51,7 +24,6 @@
|
|||
<li>background: move render to worker thread</li>
|
||||
<li>portfolio sorting, filtering</li>
|
||||
<li>self-host blogs</li>
|
||||
<li>layout for non-homepage pages</li>
|
||||
<li>duplicate site, but with real name and picture</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -77,30 +49,6 @@
|
|||
max-width: var(--content-width);
|
||||
}
|
||||
|
||||
.links {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
background-color: var(--accent-light);
|
||||
&, > * { color: var(--accent-dark); }
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
gap: .25rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
||||
> svg {
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 { color: var(--accent-light); }
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue