jaron/folio
1
0
Fork 0
mirror of https://github.com/jaronpate/folio.git synced 2026-10-18 17:06:56 +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
+3 -2
View File
@@ -1,3 +1,4 @@
/* Sohne Buch */
/*@font-face {
font-family: 'SohneBuch';
src:
@@ -7,7 +8,7 @@
}*/
/* Plantin MT Pro */
/* @font-face {
@font-face {
font-family: 'Plantin MT Pro';
src: url('~/assets/fonts/Plantin MT Pro/PlantinMTProRg.TTF')
format('truetype');
@@ -59,7 +60,7 @@
font-weight: 300;
font-style: italic;
font-display: swap;
} */
}
/* Redaction */
@font-face {
app/assets/css/main.css
+10 -9
View File
@@ -3,20 +3,21 @@
:root {
/*--font: 'Baskervville', serif;*/
/*--font: 'EB Garamond', serif;*/
/* --font: 'Plantin MT Pro', serif; */
--font: 'Plantin MT Pro', serif;
/*--font: 'Young Serif', serif;*/
/* --font: "SohneBuch", sans-serif; */
--font-plain: 'SohneBuch', sans-serif;
--font: 'Redaction', serif;
--font-hover: 'Redaction 70', serif;
/* --font-hover: var(--font); */
/*--font: 'SohneBuch', sans-serif;*/
/*--font-plain: 'SohneBuch', sans-serif;*/
/*--font: 'Redaction', serif;*/
/*--font-hover: 'Redaction 70', serif;*/
--font-plain: var(--font);
--font-hover: var(--font);
--text: #333;
--muted: #666;
--bg: #fbfbf7;
--bg-secondary: #efefe8;
--bg: #f6f7f9;
--bg-secondary: #e9ebef;
--dot-color: #666;
--color-white-500: #fbfbf7;
--color-white-500: #f6f7f9;
--gap: 1rem;
app/layouts/main.vue
+39 -49
View File
@@ -37,36 +37,29 @@ onMounted(() => {
defaults: { ease: 'power3.out' },
});
// trace lines draw down the page
tl.from('.trace', {
scaleY: 0,
transformOrigin: 'top center',
duration: 1.4,
ease: 'power3.inOut',
tl.from('.header-lower', {
autoAlpha: 0,
y: 12,
duration: 0.9,
ease: 'power2.out',
})
// header panel fades in as the lines pass it
.from('.name', { yPercent: 110, duration: 0.9 }, 0.2)
.from(
'.header-lower',
{ autoAlpha: 0, duration: 0.9, ease: 'power2.out' },
0.3,
'.title',
{ yPercent: 120, autoAlpha: 0, duration: 0.8 },
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(
['.footer-upper', '.footer-lower'],
{ 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.9);
.from('.header-upper', { autoAlpha: 0, duration: 0.7 }, 0.55);
// body content waits for the intro
tl.from(
'main',
{ autoAlpha: 0, y: 16, duration: 0.8, ease: 'power2.out' },
0.7,
0.4,
);
}, pageEl.value);
@@ -88,10 +81,6 @@ onMounted(() => {
</filter>
</svg>
<div class="page-wrapper" ref="pageEl">
<div class="trace left"></div>
<div class="trace right"></div>
<header class="header">
<div class="header-upper">
<slot name="header-upper">
@@ -168,6 +157,7 @@ onMounted(() => {
margin: 0 auto;
display: flex;
flex-direction: column;
/*gap: 1.5rem;*/
min-height: 100vh;
position: relative;
}
@@ -178,23 +168,6 @@ main {
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'] {
position: fixed;
}
@@ -222,6 +195,12 @@ svg[height='0'] {
flex-direction: column;
}
.footer {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.header-upper {
height: 8vh;
}
@@ -237,12 +216,14 @@ svg[height='0'] {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 16px;
border-top: 1px solid var(--muted);
border-bottom: 1px solid var(--muted);
padding: 2rem;
padding: 3.25rem 2.5rem;
min-height: 22vh;
color: var(--color-white-500);
border-radius: 16px;
overflow: hidden;
position: relative;
isolation: isolate;
@@ -257,15 +238,16 @@ svg[height='0'] {
background-position: left top;
background-repeat: no-repeat;
filter: url(#grainy);
border-radius: 16px;
z-index: -1;
}
.footer-upper {
border-top: 1px solid var(--muted);
border-bottom: 1px solid var(--muted);
padding: 2rem;
padding: 3.25rem 2.5rem;
color: var(--color-white-500);
min-height: 10vh;
min-height: 16vh;
border-radius: 16px;
overflow: hidden;
position: relative;
isolation: isolate;
}
@@ -279,6 +261,7 @@ svg[height='0'] {
background-position: center;
background-repeat: no-repeat;
filter: url(#grainy);
border-radius: 16px;
z-index: -1;
}
@@ -317,10 +300,17 @@ svg[height='0'] {
@media (max-width: 768px) {
.page-wrapper {
--main-width: 100vw;
padding: 0 1rem;
}
.trace {
display: none;
.header-lower,
.footer-upper {
border-radius: 12px;
}
.header-lower::before,
.footer-upper::before {
border-radius: 12px;
}
}
</style>
app/pages/index.vue
+50 -22
View File
@@ -269,7 +269,7 @@ onMounted(() => {
<template>
<div ref="pageRoot">
<NuxtLayout name="main">
<section class="selected-work">
<section class="rows">
<h5>Selected Work</h5>
<div class="section__content">
<a
@@ -295,7 +295,7 @@ onMounted(() => {
</a>
</div>
</section>
<section class="projects">
<section class="rows">
<h5>Projects</h5>
<div class="section__content">
<a
@@ -356,44 +356,66 @@ onMounted(() => {
<style scoped>
section {
margin-top: 2rem;
margin-top: calc(var(--gap) * 2);
}
section > .section__content {
padding: 0 2rem;
padding: 0 calc(var(--gap) * 2);
}
/* section:not(:has(h5)) > .section__content {
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 {
--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-style: italic;
color: var(--muted);
display: flex;
align-items: center;
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 {
margin-bottom: 2rem;
margin-bottom: calc(var(--gap) * 2);
}
.work {
@@ -467,10 +489,16 @@ section:last-of-type {
justify-content: center;
}
.rows > .section__content {
display: flex;
flex-direction: column;
gap: var(--gap);
}
.project,
.work {
/*border-bottom: 1px solid var(--muted);*/
padding: var(--gap) 0;
/*padding: var(--gap) 0;*/
display: block;
text-decoration: none;
color: inherit;