v1.0 - fixed sizing, animation, and removed broken sites
This commit is contained in:
Spencer Flagg
parent
d7429f13dc
commit
70e969a84c
17 changed files with 304 additions and 137 deletions
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"name": "wedding-schedule",
|
||||
"name": "portfolio-2023",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "wedding-schedule",
|
||||
"name": "portfolio-2023",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "wedding-schedule",
|
||||
"name": "portfolio-2023",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
[
|
||||
{
|
||||
"slug": "flylocal",
|
||||
"type": "client",
|
||||
"company": "FlyLocal",
|
||||
"link": "https://start9.com",
|
||||
"link": "https://iflylocal.com",
|
||||
"project": "data driven web application",
|
||||
"work": "design, architecture, front end, back end, database, devops",
|
||||
"technologies": [
|
||||
"VueJS", "OpenStreetMaps"
|
||||
],
|
||||
"basic-technologies": [
|
||||
"HTML", "SCSS", "SQL"
|
||||
"HTML", "SCSS", "JavaScript", "SQL"
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "start9",
|
||||
"type": "client",
|
||||
"company": "Start9 Labs",
|
||||
"link": "https://start9.com",
|
||||
"project": "landing page & company website",
|
||||
|
|
@ -22,12 +24,13 @@
|
|||
"Eleventy", "GSAP"
|
||||
],
|
||||
"basic-technologies": [
|
||||
"HTML", "SCSS"
|
||||
"HTML", "SCSS", "JavaScript"
|
||||
],
|
||||
"github": "https://github.com/start9labs/start9"
|
||||
},
|
||||
{
|
||||
"slug": "graphic-vizion",
|
||||
"type": "client",
|
||||
"company": "GraphicViZion",
|
||||
"link": "https://graphicvizion.com",
|
||||
"project": "suite of product websites and blogs",
|
||||
|
|
@ -36,17 +39,46 @@
|
|||
"Eleventy"
|
||||
],
|
||||
"basic-technologies": [
|
||||
"HTML", "SCSS"
|
||||
"HTML", "SCSS", "JavaScript"
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "the-seasteading-institute",
|
||||
"type": "client",
|
||||
"company": "The Seasteading Institute",
|
||||
"link": "https://seasteading.org",
|
||||
"project": "company website and blog",
|
||||
"work": "design, WP dev, maintenance, migration",
|
||||
"technologies": [
|
||||
"Wordpress"
|
||||
"Wordpress", "SCSS"
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "wear-vol",
|
||||
"type": "client",
|
||||
"company": "Vol Attire",
|
||||
"link": "https://wearvol.com",
|
||||
"project": "web shop",
|
||||
"work": "design, architecture, full stack dev",
|
||||
"technologies": [
|
||||
"custom ssg"
|
||||
],
|
||||
"basic-technologies": [
|
||||
"HTML", "SCSS", "JavaScript"
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "embassyos-fans",
|
||||
"type": "personal",
|
||||
"company": "EMBASSYOS:FANS",
|
||||
"link": "https://embassyos.fans",
|
||||
"project": "feedback platform",
|
||||
"work": "devops, themeing, maintenance",
|
||||
"technologies": [
|
||||
"Docker", "Coolify", "Linode"
|
||||
],
|
||||
"basic-technologies": [
|
||||
"CSS"
|
||||
]
|
||||
}
|
||||
]
|
||||
7
src/_includes/components/arrows-up.svg
Normal file
7
src/_includes/components/arrows-up.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrows-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-text)" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<line x1="17" y1="3" x2="17" y2="21" />
|
||||
<path d="M4 6l3 -3l3 3" />
|
||||
<path d="M20 6l-3 -3l-3 3" />
|
||||
<line x1="7" y1="3" x2="7" y2="21" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 435 B |
4
src/_includes/components/corner-right-down.svg
Normal file
4
src/_includes/components/corner-right-down.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-corner-right-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-text)" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M6 6h6a3 3 0 0 1 3 3v10l-4 -4m8 0l-4 4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 354 B |
6
src/_includes/components/external-link.svg
Normal file
6
src/_includes/components/external-link.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-external-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-text)" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
|
||||
<line x1="10" y1="14" x2="20" y2="4" />
|
||||
<polyline points="15 4 20 4 20 9" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 452 B |
|
|
@ -9,4 +9,15 @@
|
|||
<h2 class="right">
|
||||
est. 2007
|
||||
</h2>
|
||||
<ul class="menu">
|
||||
<li>
|
||||
<a id="button-freelance-work" >Freelance Work {% include "components/corner-right-down.svg" %}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="button-personal-projects">Personal Projects {% include "components/corner-right-down.svg" %}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="button-personal-projects" href="https://registry.jsonresume.org/spencerflagg" target="_blank">Resume | CV {% include "components/external-link.svg" %}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
|
@ -1,5 +1,21 @@
|
|||
<h3 id="freelance-work">
|
||||
Freelance Work
|
||||
</h3>
|
||||
<ul class="projects">
|
||||
{% for project in projects %}
|
||||
{% include "components/project.njk" %}
|
||||
{% if project.type == "client" %}
|
||||
{% include "components/project.njk" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h3 id="personal-projects">
|
||||
Personal Projects
|
||||
</h3>
|
||||
<ul class="projects">
|
||||
{% for project in projects %}
|
||||
{% if project.type == "personal" %}
|
||||
{% include "components/project.njk" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<button id="back-to-top" class="btn">{% include "components/arrows-up.svg" %}{% include "components/arrows-up.svg" %}</button>
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<script async defer data-website-id="73dbc372-c23e-442e-8538-2e3353c992a5" src="https://analytics.altweb.me/umami.js"></script>
|
||||
<link rel="stylesheet" href="/assets/styles/main.{{env.version}}.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
BIN
src/assets/images/embassyos-fans.png
Normal file
BIN
src/assets/images/embassyos-fans.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
src/assets/images/flylocal.png
Normal file
BIN
src/assets/images/flylocal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
src/assets/images/flylocal2.png~
Normal file
BIN
src/assets/images/flylocal2.png~
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
BIN
src/assets/images/wear-vol.png
Normal file
BIN
src/assets/images/wear-vol.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
|
|
@ -1,110 +1,133 @@
|
|||
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
|
||||
|
||||
/* CREATE SMOOTHER */
|
||||
|
||||
const smoother = ScrollSmoother.create({
|
||||
wrapper: "#wrapper",
|
||||
content: "#content",
|
||||
smooth: 1,
|
||||
smooth: 2,
|
||||
normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies
|
||||
ignoreMobileResize: true, // skips ScrollTrigger.refresh() on mobile resizes from address bar showing/hiding
|
||||
effects: true,
|
||||
preventDefault: true,
|
||||
});
|
||||
|
||||
// let title = document.querySelectorAll("h1");
|
||||
// title.forEach((element) => {
|
||||
// gsap.fromTo(
|
||||
// element,
|
||||
// {
|
||||
// textShadow: `.25rem .15rem 0 var(--c-offset)`,
|
||||
// },
|
||||
// {
|
||||
// scrollTrigger: {
|
||||
// trigger: element,
|
||||
// scrub: true,
|
||||
// start: "center center", // element page
|
||||
// end: "bottom top",
|
||||
// scrub: true,
|
||||
|
||||
// },
|
||||
// textShadow: `.25rem -.15rem 0 var(--c-offset)`
|
||||
// }
|
||||
// );
|
||||
// });
|
||||
/* FADE IN PAGE */
|
||||
|
||||
// let projectImages = document.querySelectorAll(".project__image");
|
||||
// projectImages.forEach((projectImage) => {
|
||||
// gsap.fromTo(
|
||||
// projectImage,
|
||||
// {
|
||||
// boxShadow: `.5rem .5rem 0 var(--c-offset)`,
|
||||
// },
|
||||
// {
|
||||
// scrollTrigger: {
|
||||
// trigger: projectImage,
|
||||
// scrub: true,
|
||||
// start: "bottom bottom", // element page
|
||||
// end: "bottom top",
|
||||
// scrub: true,
|
||||
|
||||
// },
|
||||
// boxShadow: `.5rem -.5rem 0 var(--c-offset)`
|
||||
// }
|
||||
// );
|
||||
// });
|
||||
|
||||
let wrapper = document.querySelectorAll("#wrapper");
|
||||
|
||||
// First, we need to create a ScrollTrigger and assign it to a variable:
|
||||
const trigger = ScrollTrigger.create({
|
||||
trigger: "body",
|
||||
start: "top top",
|
||||
end: "bottom bottom",
|
||||
scrub: true,
|
||||
markers: true
|
||||
gsap.to("#content", {
|
||||
duration: 1,
|
||||
//y: "-10rem",
|
||||
//scale: 1,
|
||||
opacity: 1,
|
||||
filter: "blur(0px)",
|
||||
delay: 0.5,
|
||||
});
|
||||
|
||||
// Next, we can define the function that will be called on every scroll event:
|
||||
function adjustShadows() {
|
||||
// Get the horizontal and vertical scroll positions
|
||||
//const scrollX = window.scrollX;
|
||||
const scrollY = window.scrollY;
|
||||
|
||||
// Get the center of the viewport
|
||||
//const viewportCenterX = window.innerWidth / 2;
|
||||
const viewportCenterY = window.innerHeight / 2;
|
||||
/* ANIMATE SECTIONS */
|
||||
|
||||
// Loop through all divs and text elements on the page
|
||||
const elements = document.querySelectorAll("h1, h2, span, label, .content__field");
|
||||
elements.forEach((element) => {
|
||||
// Get the position of the element relative to the viewport
|
||||
const elementRect = element.getBoundingClientRect();
|
||||
//const elementCenterX = elementRect.x + elementRect.width / 2;
|
||||
const elementCenterY = elementRect.y + elementRect.height / 2;
|
||||
const sections = document.querySelectorAll(".projects .project");
|
||||
|
||||
// Calculate the distance between the element and the center of the viewport
|
||||
//const distanceX = elementCenterX - viewportCenterX;
|
||||
const distanceY = elementCenterY - viewportCenterY;
|
||||
|
||||
// Calculate the angle between the element and the center of the viewport
|
||||
//const angle = Math.atan2(distanceY, distanceX);
|
||||
|
||||
// Calculate the distance between the element and the light source
|
||||
//const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
|
||||
|
||||
// Calculate the shadow offset based on the angle and distance
|
||||
//const shadowOffsetX = distance * Math.cos(angle) / 40;
|
||||
//const shadowOffsetY = distance * Math.sin(angle) / 40;
|
||||
const shadowOffsetY = distanceY * 0.025
|
||||
|
||||
// Set the shadow of the element
|
||||
element.style.textShadow = `0px ${shadowOffsetY}px 4px rgba(0, 0, 0, 0.3)`;
|
||||
sections.forEach(function (section) {
|
||||
gsap.from(section, {
|
||||
duration: 0.5,
|
||||
y: "5rem",
|
||||
opacity: 0,
|
||||
filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: "top 90%", // "triggerElement page"
|
||||
//toggleActions: defaultActions,
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Finally, we can use the ScrollTrigger to call the adjustShadows function on every scroll event:
|
||||
//window.addEventListener("scroll", adjustShadows);
|
||||
const headers = document.querySelectorAll("h3");
|
||||
|
||||
headers.forEach(function (section) {
|
||||
gsap.from(section, {
|
||||
duration: 0.75,
|
||||
//x: "10rem",
|
||||
opacity: 0,
|
||||
filter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: "top 90%", // "triggerElement page"
|
||||
//toggleActions: defaultActions,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/* PIN CONTACT */
|
||||
|
||||
const contact = document.querySelector(".contact");
|
||||
|
||||
gsap.to(contact, {
|
||||
//height: "initial",
|
||||
//'min-height': "initial",
|
||||
//padding: "1rem",
|
||||
scrollTrigger: {
|
||||
trigger: contact,
|
||||
start: "top top",
|
||||
pin: true,
|
||||
pinSpacing: false,
|
||||
endTrigger: 'body', // the element that the scrolling should stop at
|
||||
end: 'bottom', // where the scrolling should stop
|
||||
toggleActions: 'play none none reverse', // what happens when the element goes off screen
|
||||
},
|
||||
});
|
||||
|
||||
// gsap.to("#scroll-to-top", {
|
||||
// scrollTrigger: {
|
||||
// trigger: contact,
|
||||
// start: "top top",
|
||||
// pin: true,
|
||||
// pinSpacing: false,
|
||||
// endTrigger: 'body', // the element that the scrolling should stop at
|
||||
// end: 'bottom', // where the scrolling should stop
|
||||
// toggleActions: 'play none none reverse', // what happens when the element goes off screen
|
||||
// },
|
||||
// });
|
||||
|
||||
|
||||
ScrollTrigger.defaults({ scroller: smoother });
|
||||
/* SCROLL BUTTONS */
|
||||
|
||||
document.querySelector("#button-freelance-work").addEventListener("click", e => {
|
||||
// scroll to the spot where .box-c is in the center.
|
||||
// parameters: element, smooth, position
|
||||
smoother.scrollTo("#freelance-work", true, "center center");
|
||||
// or you could animate the scrollTop:
|
||||
// gsap.to(smoother, {
|
||||
// scrollTop: smoother.offset(".box-c", "center center"),
|
||||
// duration: 1
|
||||
// });
|
||||
});
|
||||
|
||||
document.querySelector("#button-personal-projects").addEventListener("click", e => {
|
||||
// scroll to the spot where .box-c is in the center.
|
||||
// parameters: element, smooth, position
|
||||
smoother.scrollTo("#personal-projects", true, "center center");
|
||||
|
||||
// or you could animate the scrollTop:
|
||||
// gsap.to(smoother, {
|
||||
// scrollTop: smoother.offset(".box-c", "center center"),
|
||||
// duration: 1
|
||||
// });
|
||||
});
|
||||
|
||||
document.querySelector("#back-to-top").addEventListener("click", e => {
|
||||
// scroll to the spot where .box-c is in the center.
|
||||
// parameters: element, smooth, position
|
||||
smoother.scrollTo("h1", true, "center center");
|
||||
|
||||
// or you could animate the scrollTop:
|
||||
// gsap.to(smoother, {
|
||||
// scrollTop: smoother.offset(".box-c", "center center"),
|
||||
// duration: 1
|
||||
// });
|
||||
});
|
||||
|
||||
//ScrollTrigger.defaults({ scroller: smoother }); // this screws up click events
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
@import "normalize";
|
||||
@import "milligram";
|
||||
@import "normalize-custom";
|
||||
@import "tusker";
|
||||
|
||||
@import url("https://api.fonts.coollabs.io/css2?family=Cutive+Mono&display=swap");
|
||||
@import url("https://api.fonts.coollabs.io/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
|
||||
:root {
|
||||
scroll-behavior: unset;
|
||||
font-size: 2vmin;
|
||||
--c-bkg: #fff8f1;
|
||||
--c-text: #613100;
|
||||
|
|
@ -31,6 +33,8 @@ h2 {
|
|||
|
||||
#content {
|
||||
background-color: var(--c-bkg);
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
// background-image: url('../../assets/images/bkg.svg');
|
||||
// background-repeat: repeat;
|
||||
// background-size: 250px 250px;
|
||||
|
|
@ -56,20 +60,11 @@ html{
|
|||
|
||||
body {
|
||||
color: var(--c-text);
|
||||
font-display: optional;
|
||||
font-family: "Cutive Mono", "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
ul,
|
||||
label,
|
||||
ul ul,
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
svg{
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
|
@ -78,7 +73,7 @@ svg{
|
|||
.btn {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0.5rem 1.5rem;
|
||||
padding: 0.4rem 1rem;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
|
|
@ -97,15 +92,10 @@ svg{
|
|||
}
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-display: optional;
|
||||
font-family: "Tusker Grotesk 2500";
|
||||
text-transform: uppercase;
|
||||
font-size: 15rem;
|
||||
|
|
@ -115,12 +105,19 @@ h2 {
|
|||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 7rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(75vh - var(--outside-padding));
|
||||
height: calc(100vh - (3 * var(--outside-padding)) - (3.1 * 1rem));
|
||||
//height: calc(100vh - (2 * var(--outside-padding)));
|
||||
gap: 1rem;
|
||||
h2.left {
|
||||
align-self: flex-start;
|
||||
|
|
@ -131,24 +128,59 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
.menu{
|
||||
display: flex;
|
||||
font-size: 1rem;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
align-self: flex-start;
|
||||
|
||||
li{
|
||||
border-inline-start: .5rem var(--c-text-light);
|
||||
padding-inline-start: .2rem;
|
||||
|
||||
a{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: .5rem;
|
||||
|
||||
svg{
|
||||
height: .9rem;
|
||||
margin-top: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
min-height: 25vh;
|
||||
//min-height: 25vh;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
padding: var(--outside-padding);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--c-offset);
|
||||
gap: 2rem;
|
||||
z-index: 1;
|
||||
|
||||
a{
|
||||
color: var(--c-text);
|
||||
text-decoration: underline;
|
||||
text-decoration-line: dotted;
|
||||
text-decoration-color: #6130002f;
|
||||
text-decoration-thickness: 0.05em;
|
||||
//text-decoration-style: dotted;
|
||||
text-underline-offset: .2em;
|
||||
transition: all 0.2s ease-in-out;
|
||||
&:hover{
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
#input-container{
|
||||
gap: 1rem;
|
||||
gap: .5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
|
@ -159,7 +191,7 @@ header {
|
|||
line-height: 1;
|
||||
align-items: center;
|
||||
min-height: auto;
|
||||
max-width: calc(25ch + .2rem);
|
||||
max-width: calc(15ch + .4rem);
|
||||
background: transparent;
|
||||
color: var(--c-text);
|
||||
border: .12rem solid var(--c-text);
|
||||
|
|
@ -170,12 +202,15 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.contact {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
@media screen and (max-width: 970px) {
|
||||
header {
|
||||
height: calc(100vh - (3 * var(--outside-padding)) - (6.1 * 1rem));
|
||||
}
|
||||
// .contact {
|
||||
// flex-direction: column;
|
||||
// align-items: flex-start;
|
||||
// justify-content: center;
|
||||
// }
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -188,6 +223,7 @@ main {
|
|||
margin: 3rem;
|
||||
padding-bottom: 25rem;
|
||||
}
|
||||
|
||||
.projects {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -221,31 +257,34 @@ main {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
.project__image-wrapper {
|
||||
border-radius: 0;
|
||||
background-color: white;
|
||||
}
|
||||
// .project__image-wrapper {
|
||||
// border-radius: 0;
|
||||
// background-color: white;
|
||||
// }
|
||||
|
||||
.project__image {
|
||||
border-radius: 0;
|
||||
filter: none;
|
||||
mix-blend-mode: normal;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
.project__image-wrapper {
|
||||
border-radius: 1.5rem;
|
||||
background-color: #997d6322;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
// .project__image-wrapper {
|
||||
// border-radius: 1.5rem;
|
||||
// background-color: #997d6322;
|
||||
// transition: all 0.2s ease-in-out;
|
||||
// }
|
||||
|
||||
.project__image {
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--c-text);
|
||||
transition: all 0.2s ease-in-out;
|
||||
filter: grayscale(100%);
|
||||
mix-blend-mode: multiply;
|
||||
transition: 0.2s all 0.5s ease-in-out;
|
||||
//filter: saturate(0) sepia(30%);
|
||||
filter: multiply(rgba(97, 49, 0, 0.6));
|
||||
max-width: none;
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.project__content {
|
||||
|
|
@ -261,6 +300,7 @@ main {
|
|||
|
||||
label {
|
||||
font-size: 0.5rem;
|
||||
font-display: optional;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
|
|
|
|||
28
src/assets/styles/normalize-custom.scss
Normal file
28
src/assets/styles/normalize-custom.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
h1,
|
||||
h2,
|
||||
h3,
|
||||
ul,
|
||||
label,
|
||||
ul ul,
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: var(--c-text);
|
||||
&:hover{
|
||||
color: var(--c-text-light);
|
||||
|
||||
svg{
|
||||
stroke: var(--c-text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: The Schedule
|
||||
title: "Spencer Flagg: Designer, Developer"
|
||||
layout: layouts/base.njk
|
||||
updated: July 15
|
||||
---
|
||||
|
||||
{% include "components/header.njk" %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue