Skip to content

Commit

Permalink
next image
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryan-parag
ryan-parag committed Aug 23, 2021
1 parent c8f2ff1 commit 8833e44
Show file tree
Hide file tree
Showing 14 changed files with 1,680 additions and 132 deletions.
4 changes: 2 additions & 2 deletions components/Featured/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ProjectItem } from '@components/Projects'
import { WorkItem } from '@components/Projects'
import List, { ListItem } from '@components/List'
import useSWR from 'swr';
import fetcher from '@utils/fetcher';
Expand All @@ -18,7 +18,7 @@ const Featured = () => {
data ? (
data.items.map(project => (
<ListItem key={project.name}>
<ProjectItem project={project}/>
<WorkItem project={project}/>
</ListItem>
))
)
Expand Down
1 change: 1 addition & 0 deletions components/ImgZoom/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react'
import Zoom from 'react-medium-image-zoom'
import Image from 'next/image'

const ImgZoom = ({src,alt}) => {
return(
Expand Down
15 changes: 13 additions & 2 deletions components/PostList/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import styled from 'styled-components'
import { designTokens } from '../Theme/designTokens'
import List, { ListItem } from '@components/List'
import { truncateString } from '@utils/text'
import Image from 'next/image'
import { LoadingSpinner } from '@components/LoadingBox'

const NewImage = styled.div`
width: ${designTokens.space[7]};
Expand All @@ -12,12 +14,14 @@ const NewImage = styled.div`
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url(${props => props.bg});
position: absolute;
right: ${designTokens.space[1]};
top: 50%;
transform: translateY(-50%) scale(1);
transition: all 120ms ease-out 0ms;
img {
border-radius: ${designTokens.space[1]};
}
@media screen and (max-width: ${designTokens.breakpoints[4]}) {
width: ${designTokens.space[6]};
height: ${designTokens.space[6]};
Expand Down Expand Up @@ -107,7 +111,14 @@ export default function PostList({ posts }) {
</p>
</Content>
</NewContent>
<NewImage bg={post.frontmatter.hero_image}/>
<NewImage>
<Image
src={post.frontmatter.hero_image}
layout="fill"
objectFit="cover"
alt={post.frontmatter?.title}
/>
</NewImage>
</a>
</Link>
</NewPostContainer>
Expand Down
160 changes: 62 additions & 98 deletions components/Projects/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import List, { ListItem } from '@components/List'
import { designTokens } from '@components/Theme/designTokens'
import { truncateString } from '@utils/text'
import Chip from '@components/Chip'
import Image from 'next/image'

const NewProjectImage = styled.img`
const NewProjectImage = styled.div`
width: ${designTokens.space[7]};
height: ${designTokens.space[7]};
position: absolute;
Expand All @@ -17,6 +18,9 @@ const NewProjectImage = styled.img`
border-radius: ${designTokens.space[1]};
box-shadow: 0px 0px 0px 2px var(--grey200);
transition: all 120ms ease-out 0ms;
img {
border-radius: ${designTokens.space[1]};
}
@media screen and (max-width: ${designTokens.breakpoints[4]}) {
width: ${designTokens.space[6]};
height: ${designTokens.space[6]};
Expand Down Expand Up @@ -77,67 +81,41 @@ const NewProjectContent = styled.div`
export const ProjectItem = ({project}) => {
return(
<>
{
project.outbound ? (
<NewProjectAnchorTag
href={project.link}
>
<NewProjectLink>
<Link href={`/work/${project.slug}`}>
<a>
<NewProjectContentContainer>
<NewProjectContent>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: designTokens.space[2]}}>
<h4 style={{ marginTop: '0', marginBottom: '0', marginRight: designTokens.space[3] }}>
{project.name}
</h4>
{
project.time && (
<Chip>{project.time}</Chip>
)
}
</div>
<p style={{ marginBottom: designTokens.space[2] }}>
{truncateString(project.description, 72)}
</p>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: designTokens.space[2]}}>
<h4 style={{ marginTop: '0', marginBottom: '0', marginRight: designTokens.space[2] }}>
{project?.frontmatter?.title}
</h4>
{
project?.frontmatter?.startDate && (
<Chip>{project?.frontmatter?.startDate} - {project?.frontmatter?.endDate}</Chip>
)
}
</div>
<p style={{ marginBottom: designTokens.space[2] }}>
{project?.frontmatter?.description}
</p>
</NewProjectContent>
</NewProjectContentContainer>
{
project.image && (
<NewProjectImage src={project.image} alt={project.name} />
project?.frontmatter?.logo && (
<NewProjectImage>
<Image
src={project?.frontmatter?.logo}
width={designTokens.space[7]}
height={designTokens.space[7]}
alt={project?.frontmatter?.title}
/>
</NewProjectImage>
)
}
</NewProjectAnchorTag>
)
:
(
<NewProjectLink>
<Link href={project.link}>
<a>
<NewProjectContentContainer>
<NewProjectContent>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: designTokens.space[2]}}>
<h4 style={{ marginTop: '0', marginBottom: '0', marginRight: designTokens.space[2] }}>
{project.name}
</h4>
{
project.time && (
<Chip>{project.time}</Chip>
)
}
</div>
<p style={{ marginBottom: designTokens.space[2] }}>
{truncateString(project.description, 72)}
</p>
</NewProjectContent>
</NewProjectContentContainer>
{
project.image && (
<NewProjectImage src={project.image} alt={project.name} />
)
}
</a>
</Link>
</NewProjectLink>
)
}
</a>
</Link>
</NewProjectLink>
</>
)
}
Expand All @@ -152,17 +130,24 @@ export const WorkItem = ({project}) => {
>
<NewProjectContentContainer>
<NewProjectContent>
<h5 style={{ marginTop: '0', marginBottom: designTokens.space[2], marginRight: designTokens.space[3] }}>
<h4 style={{ marginTop: '0', marginBottom: designTokens.space[2], marginRight: designTokens.space[3] }}>
{project.name}
</h4>
<p style={{ marginBottom: designTokens.space[2] }}>
{project.description}
</h5>
<p style={{ fontSize: designTokens.fontSizes[0], color: 'var(--grey600)', marginBottom: designTokens.space[2] }}>
{project.name} • {project.time}
</p>
</NewProjectContent>
</NewProjectContentContainer>
{
project.image && (
<NewProjectImage src={project.image} alt={project.name} />
<NewProjectImage>
<Image
src={project.image}
width={designTokens.space[7]}
height={designTokens.space[7]}
alt={project.name}
/>
</NewProjectImage>
)
}
</NewProjectAnchorTag>
Expand All @@ -175,16 +160,23 @@ export const WorkItem = ({project}) => {
<NewProjectContentContainer>
<NewProjectContent>
<h4 style={{ marginTop: '0', marginBottom: designTokens.space[2], marginRight: designTokens.space[3] }}>
{project.description}
{project.name}
</h4>
<p style={{ marginBottom: designTokens.space[2] }}>
{project.name} • {project.time}
{project.description}
</p>
</NewProjectContent>
</NewProjectContentContainer>
{
project.image && (
<NewProjectImage src={project.image} alt={project.name} />
<NewProjectImage>
<Image
src={project.image}
width={designTokens.space[7]}
height={designTokens.space[7]}
alt={project.name}
/>
</NewProjectImage>
)
}
</a>
Expand All @@ -196,43 +188,15 @@ export const WorkItem = ({project}) => {
)
}

export const WorkList = () => {
const work = [
{
name: 'Masonite',
description: 'Connecting doors to the cloud and simplifying the home-remodeling experience?',
image: '/static/projects/icon-masonite.png',
link:'/work/masonite',
outbound: false,
time: '2019 - Present'
}, {
name: 'DisputeLab',
description: 'Enabling financial enterprises to filter, optimize, and submit thousands of disputes',
image: '/static/projects/icon-disputelab.png',
link:'https://work.ryanparag.com/work/disputelab',
outbound: true,
time: '2017 - 2019'
}, {
name: 'Chargebacks911',
description: 'Helping online merchants optimize profitability by intelligently managing payment disputes',
image: '/static/projects/icon-cb911.png',
link:'/work/chargebacks911',
outbound: false,
time: '2016 - 2019'
}, {
name: 'SoleVenture',
description: 'Giving freelancers the security of steady income and traditional benefits',
image: '/static/projects/icon-sv.png',
link:'https://work.ryanparag.com/work/soleventure',
outbound: true,
time: '2019 - 2020'
}
]
export const WorkList = ({work}) => {

const sorted = work.slice().sort((a, b) => new Date(b.frontmatter.startDate) - new Date(a.frontmatter.startDate))

return(
<List>
{
work.map(project => (
<ListItem key={project.name}>
sorted.map(project => (
<ListItem key={project.frontmatter.title}>
<ProjectItem project={project}/>
</ListItem>
))
Expand Down Expand Up @@ -327,7 +291,7 @@ export default function Projects(){
{
projects.map(project => (
<ListItem key={project.name}>
<ProjectItem project={project}/>
<WorkItem project={project}/>
</ListItem>
))
}
Expand Down
4 changes: 2 additions & 2 deletions notes/showing-my-listening-activity.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,12 +121,12 @@ We would repeat the same function for the currently playing podcast - making sli

Let's see how we can design a single component to account for all 3 of these states:

![component states](../static/showing-my-listening-activity_1.png)
![component states](/../static/showing-my-listening-activity_1.png)

This component can account for each of the scenarios our API response may give us - helping us only surface the correct information in a way that is a bit more seamless to the user.

### What's next?

![podcast subscriptions](../static/showing-my-listening-activity_2.png)
![podcast subscriptions](/../static/showing-my-listening-activity_2.png)

I've been having some fun grabbing my recent top tracks and my recent podcast subscriptions - [check it out!](/listening/music) If you have feedback or ideas of what else could be a fun way to make this information more transparent and tangible, I'd love to know - let me know using the form below.
24 changes: 17 additions & 7 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ import Featured from '@components/Featured'
import Randomizer from '@components/Randomizer'
import FAQ from '@components/FAQ'
import { ArrowRight } from 'react-feather'
import { WorkList } from '@components/Projects'
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

const Index = ({ posts, title, description, ...props }) => {
const Index = ({ posts, work, title, description, ...props }) => {

const sortedPosts = posts.slice().sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date))
const latestPosts = sortedPosts.slice(0, 5)
Expand Down Expand Up @@ -41,12 +42,7 @@ const Index = ({ posts, title, description, ...props }) => {
<main>
<Wrapper>
<h3><Link href="work"><a>Selected Work 💼</a></Link></h3>
<p>I'm in the process of moving over my work to this site, but before that happens:</p>
<ul>
<li>find my work <a className="link" href="https://work.ryanparag.com">here</a> for now</li>
<li><a className="link" href="mailto:[email protected]?subject=Hey Ryan!">contact me</a> for a closer look</li>
</ul>
<br/>
<WorkList work={work} />
<p>
<Link href="work">
<a className="link">
Expand Down Expand Up @@ -104,9 +100,23 @@ export async function getStaticProps() {
}
})

const filesWork = fs.readdirSync(path.join('projects'))

const work = filesWork.map(filename => {
const slug = filename.replace('.md','')
const markdownWithMeta = fs.readFileSync(path.join('projects', filename), 'utf-8')
const {data:frontmatter} = matter(markdownWithMeta)
return {
slug,
frontmatter
}
})


return {
props: {
posts,
work,
title: configData.default.title,
description: configData.default.description,
},
Expand Down
Loading

0 comments on commit 8833e44

Please sign in to comment.