jaron/folio
1
0
Fork 0
mirror of https://github.com/jaronpate/folio.git synced 2026-10-19 01:07:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Layout change :)

Browse Source
This commit is contained in:
Jaron
2026-07-29 20:12:44 -05:00
parent bb2a394db0
commit 91701343f6
4 changed files with 108 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/fonts.css
+6 -5
View File
@@ -1,13 +1,14 @@
/* @font-face { /* Sohne Buch */
/*@font-face {
font-family: 'SohneBuch'; font-family: 'SohneBuch';
src: src:
url('~/assets/fonts/Sohne/Sohne-Buch.woff') format('woff'), url('~/assets/fonts/Sohne/Sohne-Buch.woff') format('woff'),
url('~/assets/fonts/Sohne/Sohne-Buch.ttf') format('truetype'); url('~/assets/fonts/Sohne/Sohne-Buch.ttf') format('truetype');
font-display: swap; font-display: swap;
} */ }*/
/* Plantin MT Pro */ /* Plantin MT Pro */
/* @font-face { @font-face {
font-family: 'Plantin MT Pro'; font-family: 'Plantin MT Pro';
src: url('~/assets/fonts/Plantin MT Pro/PlantinMTProRg.TTF') src: url('~/assets/fonts/Plantin MT Pro/PlantinMTProRg.TTF')
format('truetype'); format('truetype');
@@ -59,7 +60,7 @@
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} */ }
/* Redaction */ /* Redaction */
@font-face { @font-face {
@@ -235,4 +236,4 @@
font-display: swap; font-display: swap;
} }
/* @import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap'); */ /*@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');*/
app/assets/css/main.css
+13 -12
View File
@@ -1,22 +1,23 @@
@import './fonts.css'; @import './fonts.css';
:root { :root {
/* --font: 'Baskervville', serif; */ /*--font: 'Baskervville', serif;*/
/* --font: 'EB Garamond', serif; */ /*--font: 'EB Garamond', serif;*/
/* --font: 'Plantin MT Pro', serif; */ --font: 'Plantin MT Pro', serif;
/* --font: 'Young Serif', serif; */ /*--font: 'Young Serif', serif;*/
/* --font: "SohneBuch", sans-serif; */ /*--font: 'SohneBuch', sans-serif;*/
--font-plain: 'SohneBuch', sans-serif; /*--font-plain: 'SohneBuch', sans-serif;*/
--font: 'Redaction', serif; /*--font: 'Redaction', serif;*/
--font-hover: 'Redaction 70', serif; /*--font-hover: 'Redaction 70', serif;*/
/* --font-hover: var(--font); */ --font-plain: var(--font);
--font-hover: var(--font);
--text: #333; --text: #333;
--muted: #666; --muted: #666;
--bg: #fbfbf7; --bg: #f6f7f9;
--bg-secondary: #efefe8; --bg-secondary: #e9ebef;
--dot-color: #666; --dot-color: #666;
--color-white-500: #fbfbf7; --color-white-500: #f6f7f9;
--gap: 1rem; --gap: 1rem;
app/layouts/main.vue
+39 -49
View File
@@ -37,36 +37,29 @@ onMounted(() => {
defaults: { ease: 'power3.out' }, defaults: { ease: 'power3.out' },
}); });
// trace lines draw down the page tl.from('.header-lower', {
tl.from('.trace', { autoAlpha: 0,
scaleY: 0, y: 12,
transformOrigin: 'top center', duration: 0.9,
duration: 1.4, ease: 'power2.out',
ease: 'power3.inOut',
}) })
// header panel fades in as the lines pass it .from('.name', { yPercent: 110, duration: 0.9 }, 0.2)
.from( .from(
'.header-lower', '.title',
{ autoAlpha: 0, duration: 0.9, ease: 'power2.out' }, { yPercent: 120, autoAlpha: 0, duration: 0.8 },
0.3, 0.35,
) )
// masked title reveal
.from('.name', { yPercent: 110, duration: 0.9 }, 0.55)
.from('.title', { yPercent: 120, autoAlpha: 0, duration: 0.8 }, 0.7)
// footer appears as the lines reach the bottom
.from( .from(
['.footer-upper', '.footer-lower'], ['.footer-upper', '.footer-lower'],
{ autoAlpha: 0, duration: 0.7, ease: 'power2.out' }, { autoAlpha: 0, duration: 0.7, ease: 'power2.out' },
0.9, 0.55,
) )
// nav chrome fades in last .from('.header-upper', { autoAlpha: 0, duration: 0.7 }, 0.55);
.from('.header-upper', { autoAlpha: 0, duration: 0.7 }, 0.9);
// body content waits for the intro
tl.from( tl.from(
'main', 'main',
{ autoAlpha: 0, y: 16, duration: 0.8, ease: 'power2.out' }, { autoAlpha: 0, y: 16, duration: 0.8, ease: 'power2.out' },
0.7, 0.4,
); );
}, pageEl.value); }, pageEl.value);
@@ -88,10 +81,6 @@ onMounted(() => {
</filter> </filter>
</svg> </svg>
<div class="page-wrapper" ref="pageEl"> <div class="page-wrapper" ref="pageEl">
<div class="trace left"></div>
<div class="trace right"></div>
<header class="header"> <header class="header">
<div class="header-upper"> <div class="header-upper">
<slot name="header-upper"> <slot name="header-upper">
@@ -168,6 +157,7 @@ onMounted(() => {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/*gap: 1.5rem;*/
min-height: 100vh; min-height: 100vh;
position: relative; position: relative;
} }
@@ -178,23 +168,6 @@ main {
flex-direction: column; flex-direction: column;
} }
.trace {
position: absolute;
top: 0;
height: 100%;
width: 1px;
background: var(--muted);
z-index: 1;
}
.trace.left {
left: 0;
}
.trace.right {
right: 0;
}
svg[height='0'] { svg[height='0'] {
position: fixed; position: fixed;
} }
@@ -222,6 +195,12 @@ svg[height='0'] {
flex-direction: column; flex-direction: column;
} }
.footer {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.header-upper { .header-upper {
height: 8vh; height: 8vh;
} }
@@ -237,12 +216,14 @@ svg[height='0'] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: center;
gap: 16px; gap: 16px;
border-top: 1px solid var(--muted); padding: 3.25rem 2.5rem;
border-bottom: 1px solid var(--muted); min-height: 22vh;
padding: 2rem;
color: var(--color-white-500); color: var(--color-white-500);
border-radius: 16px;
overflow: hidden;
position: relative; position: relative;
isolation: isolate; isolation: isolate;
@@ -257,15 +238,16 @@ svg[height='0'] {
background-position: left top; background-position: left top;
background-repeat: no-repeat; background-repeat: no-repeat;
filter: url(#grainy); filter: url(#grainy);
border-radius: 16px;
z-index: -1; z-index: -1;
} }
.footer-upper { .footer-upper {
border-top: 1px solid var(--muted); padding: 3.25rem 2.5rem;
border-bottom: 1px solid var(--muted);
padding: 2rem;
color: var(--color-white-500); color: var(--color-white-500);
min-height: 10vh; min-height: 16vh;
border-radius: 16px;
overflow: hidden;
position: relative; position: relative;
isolation: isolate; isolation: isolate;
} }
@@ -279,6 +261,7 @@ svg[height='0'] {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
filter: url(#grainy); filter: url(#grainy);
border-radius: 16px;
z-index: -1; z-index: -1;
} }
@@ -317,10 +300,17 @@ svg[height='0'] {
@media (max-width: 768px) { @media (max-width: 768px) {
.page-wrapper { .page-wrapper {
--main-width: 100vw; --main-width: 100vw;
padding: 0 1rem;
} }
.trace { .header-lower,
display: none; .footer-upper {
border-radius: 12px;
}
.header-lower::before,
.footer-upper::before {
border-radius: 12px;
} }
} }
</style> </style>
app/pages/index.vue
+50 -22
View File
@@ -269,7 +269,7 @@ onMounted(() => {
<template> <template>
<div ref="pageRoot"> <div ref="pageRoot">
<NuxtLayout name="main"> <NuxtLayout name="main">
<section class="selected-work"> <section class="rows">
<h5>Selected Work</h5> <h5>Selected Work</h5>
<div class="section__content"> <div class="section__content">
<a <a
@@ -295,7 +295,7 @@ onMounted(() => {
</a> </a>
</div> </div>
</section> </section>
<section class="projects"> <section class="rows">
<h5>Projects</h5> <h5>Projects</h5>
<div class="section__content"> <div class="section__content">
<a <a
@@ -356,44 +356,66 @@ onMounted(() => {
<style scoped> <style scoped>
section { section {
margin-top: 2rem; margin-top: calc(var(--gap) * 2);
} }
section > .section__content { section > .section__content {
padding: 0 2rem; padding: 0 calc(var(--gap) * 2);
} }
/* section:not(:has(h5)) > .section__content { /* section:not(:has(h5)) > .section__content {
padding: 2rem; padding: 2rem;
} */ } */
section > h5::before {
content: '';
height: 1px;
background: var(--muted);
order: 0;
width: 1rem;
}
section > h5::after {
content: '';
height: 1px;
background: var(--muted);
flex-grow: 1;
}
section > h5 { section > h5 {
--flare-length: 1.125rem; /* how far the flare extends horizontally */
--flare-spread: 1.125rem; /* how far the arms open up/down */
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
color: var(--muted); color: var(--muted);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
margin-top: 0; margin: 0 0 var(--gap) 0;
line-height: 1;
}
section > h5::before {
content: '';
width: var(--flare-length);
height: var(--flare-spread);
flex-shrink: 0;
background-color: var(--muted);
/* Optically center */
transform: translateY(-0.12em);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M20 8H10M10 8C5 8 2.5 4.5 1 2M10 8C5 8 2.5 11.5 1 14' stroke='black' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
center / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M20 8H10M10 8C5 8 2.5 4.5 1 2M10 8C5 8 2.5 11.5 1 14' stroke='black' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
center / 100% 100% no-repeat;
}
section > h5::after {
content: '';
height: var(--flare-spread);
flex-grow: 1;
background-color: var(--muted);
/* Optically center */
transform: translateY(-0.12em);
-webkit-mask:
linear-gradient(#000, #000) left center /
calc(100% - var(--flare-length) * 0.45) 1px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 8H10M10 8C15 8 17.5 4.5 19 2M10 8C15 8 17.5 11.5 19 14' stroke='black' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
right center / var(--flare-length) 100% no-repeat;
mask:
linear-gradient(#000, #000) left center /
calc(100% - var(--flare-length) * 0.45) 1px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 8H10M10 8C15 8 17.5 4.5 19 2M10 8C15 8 17.5 11.5 19 14' stroke='black' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
right center / var(--flare-length) 100% no-repeat;
} }
section:last-of-type { section:last-of-type {
margin-bottom: 2rem; margin-bottom: calc(var(--gap) * 2);
} }
.work { .work {
@@ -467,10 +489,16 @@ section:last-of-type {
justify-content: center; justify-content: center;
} }
.rows > .section__content {
display: flex;
flex-direction: column;
gap: var(--gap);
}
.project, .project,
.work { .work {
/*border-bottom: 1px solid var(--muted);*/ /*border-bottom: 1px solid var(--muted);*/
padding: var(--gap) 0; /*padding: var(--gap) 0;*/
display: block; display: block;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;