release/1.1.1

components/article-card/index.tsx

@@ -11,10 +11,10 @@ const Card = ({ article }: any) => (
         <CardImage
           src={article.attributes.image.data.attributes.url}
           alt={article.attributes.image.url}
-          layout="fixed"
+          layout="responsive"
           width={70}
           height={70}
-          loading="lazy"
+          loading="eager"
         />
       </CardImageContainer>
 

components/project-header/header.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unescaped-entities */
 import * as S from './styles';
 
-const title = 'projects';
+const title = 'Projects';
 const description = "Selected projects I've worked on in the past.";
 
 export const ProjectHeader = () => (

components/project-header/styles.ts

@@ -11,16 +11,20 @@ export const Header = styled('section', {
 
 export const Title = styled('h1', {
 	fontSize: '3rem',
-	fontFamily: 'Sora',
-	fontWeight: 'bold',
+	fontFamily: 'Inter var',
 	letterSpacing: '-0.06em',
 	color: '$textHighlight',
 	fontFeatureSettings: '"ss02" on, "ss03" on, "ss04" on',
 });
 
 export const Subtitle = styled('p', {
-	fontSize: '1.5rem',
+	fontSize: '1.2rem',
 	paddingTop: '1rem',
 	fontFamily: 'Roboto Flex',
 	letterSpacing: '-0.02em',
+	textAlign: 'center',
+
+	'@bp3': {
+		fontSize: '1.5rem',
+	},
 });

components/project/project.tsx

@@ -29,11 +29,11 @@ export const Project: FC<IProject> = ({ project }) => (
       <S.Featured>Featured Project</S.Featured>
       <S.TitleProject>{project.title}</S.TitleProject>
       <S.DescriptionProject>{project.description}</S.DescriptionProject>
-      <div>
+      <S.Tags>
         {project.tags.map((tag) => (
           <S.Tag key={tag}>{tag}</S.Tag>
 				))}
-      </div>
+      </S.Tags>
       <S.Buttons>
         <S.Button href={project.github}>
           <BsGithub size={22} />

components/project/styles.ts

@@ -4,7 +4,6 @@ export const Container = styled('section', {
 	width: '100%',
 	height: '100%',
 	minHeight: '22rem',
-	maxHeight: '25rem',
 	position: 'relative',
 	background: '$mediumBackground',
 	display: 'grid',
@@ -39,12 +38,12 @@ export const Icon = styled('div', {
 });
 
 export const Description = styled('div', {
-	padding: '1rem 2rem',
 	display: 'flex',
 	flexDirection: 'column',
 	justifyContent: 'center',
 	color: '$gray50',
 	height: '100%',
+	padding: '1rem',
 	alignItems: 'flex-start',
 });
 
@@ -80,14 +79,26 @@ export const DescriptionProject = styled('div', {
 	paddingTop: '1.2rem',
 });
 
+export const Tags = styled('div', {
+	display: 'flex',
+	flexDirection: 'column',
+
+	'@bp3': {
+		flexDirection: 'row',
+	},
+});
+
 export const Tag = styled('span', {
 	fontSize: '1.2rem',
 	fontFamily: 'Roboto Flex',
 	letterSpacing: '-0.01em',
 	fontWeight: '200',
+	lineHeight: '1.5',
 
-	'& + &': {
-		paddingLeft: '1rem',
+	'@bp3': {
+		'& + &': {
+			paddingLeft: '1rem',
+		},
 	},
 });
 

features/projects/styles.ts

@@ -4,7 +4,6 @@ import { styled } from 'styles/theme';
 export const Wrapper = styled('section', {
 	display: 'flex',
 	flexDirection: 'column',
-	paddingBottom: '5rem',
 
 	textRendering: 'optimizeLegibility',
 	WebkitFontSmoothing: 'antialiased',
@@ -15,9 +14,13 @@ export const Wrapper = styled('section', {
 
 export const Grid = styled('section', {
 	display: 'grid',
-	gridTemplateRows: 'repeat(auto-fit, minmax(20rem, 1fr))',
+	gridTemplateRows: 'repeat(auto-fit, minmax(250px, 1fr))',
 	gridTemplateColumns: '1fr',
 	position: 'relative',
 	gap: '4rem 0',
-	padding: '5rem 1rem',
+	padding: '5rem .5rem',
+
+	'@bp3': {
+		padding: '5rem 1rem',
+	},
 });

features/site/author-header/styles.ts

@@ -50,7 +50,7 @@ export const Container = styled('section', {
 			transition: '$transitonTheme',
 
 			'&:hover': {
-				color: '$secondary',
+				color: '$primary',
 			},
 		},
 		'a + a': {

features/site/header/index.tsx

@@ -30,13 +30,13 @@ const Header: React.FC = () => {
     <St.Header>
       <St.Nav>
         <div className={activeLink(pathname, '/')}>
-          <Link href="/">home</Link>
+          <Link href="/" prefetch>home</Link>
         </div>
         <div className={activeLink(pathname, '/blog', '/blog/article/')}>
-          <Link href="/blog">blog</Link>
+          <Link href="/blog" prefetch={false}>blog</Link>
         </div>
         <div className={activeLink(pathname, '/projects')}>
-          <Link href="/projects">projects</Link>
+          <Link href="/projects" prefetch={false}>projects</Link>
         </div>
       </St.Nav>
       <St.DarkMode onClick={handleSwitchTheme}>

features/site/header/styles.ts

@@ -7,8 +7,9 @@ export const Header = styled('header', {
 	width: '100%',
 	maxWidth: '57.6rem',
 	margin: '0 auto',
-	padding: '2rem 1rem 0 0',
 	fontSize: '1.4rem',
+	padding: '0 .5rem',
+	paddingTop: '1.5rem',
 
 	'@bp5': {
 		padding: '6rem 0 0 0',
@@ -20,7 +21,7 @@ export const Nav = styled('nav', {
 	alignItems: 'center',
 	justifyContent: 'space-between',
 	color: '$gray50',
-
+	fontWeight: 200,
 	'div.active': {
 		a: {
 			color: '$textHighlight',
@@ -32,7 +33,6 @@ export const Nav = styled('nav', {
 		textDecoration: 'none',
 		padding: '0 1rem',
 		letterSpacing: '-0.06em',
-		fontFamily: 'Roboto Flex, sans-serif',
 		fontWeight: 200,
 		position: 'relative',
 		transition: 'color 0.2s ease',

pages/_app.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 import type { AppProps } from 'next/app';
 import { ApolloProvider } from '@apollo/react-hooks';
 import React, { useEffect, useState } from 'react';
@@ -9,6 +10,7 @@ import '../styles/styles.css';
 import Prism from 'prismjs';
 import Head from 'next/head';
 import { LoadingIndicator } from 'components/loading';
+import { getCssText } from 'styles/theme';
 
 require('prismjs/components/prism-typescript');
 require('prismjs/components/prism-javascript');
@@ -41,6 +43,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           <Head>
             <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover" />
             <link rel="manifest" href="manifest.json" />
+            <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
           </Head>
           <Component {...pageProps} />
         </ApolloProvider>

pages/projects/index.tsx

@@ -6,6 +6,7 @@ import { Project } from 'components/project';
 import { NextSEO } from 'components/SEO';
 import * as S from 'features/projects/styles';
 import { projects } from 'features/projects/data';
+import FadeIn from 'react-fade-in';
 
 const Projects: React.FC = () => (
   <Layout>
@@ -20,7 +21,9 @@ const Projects: React.FC = () => (
       <ProjectHeader />
       <S.Grid>
         {projects.map((project) => (
-          <Project key={project.link} project={project} />
+          <FadeIn transitionDuration={500}>
+            <Project key={project.link} project={project} />
+          </FadeIn>
 				))}
       </S.Grid>
     </S.Wrapper>