Skip to content

Commit

Permalink
Add landing featured list
Browse files Browse the repository at this point in the history
  • Loading branch information
@Emroni
Emroni committed Aug 5, 2024
1 parent 60691b7 commit cf54040
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 78 deletions.
1 change: 1 addition & 0 deletions src/@types/common.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
interface Experiment {
date: string;
disabled?: boolean;
featured?: boolean;
image: string;
index: string;
path: string;
Expand Down
94 changes: 63 additions & 31 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,71 @@
'use client';
import { experiments } from '@/setup';
import { Box, Card, CardActionArea, CardContent, CardHeader, CardMedia, Grid, Typography } from '@mui/material';
import { Box, Card, CardActionArea, CardContent, CardHeader, CardMedia, Divider, Grid, Typography } from '@mui/material';

export default function Home() {

return <Box overflow="auto" padding={3}>
<Card>
<CardHeader title="Experimental" />
<CardContent>
<Typography>
Just some experimental digital artwork
</Typography>
</CardContent>
</Card>
<Grid container marginTop={0} overflow="auto" spacing={3}>
{experiments.map((experiment, index) => !experiment.disabled && (
<Grid item key={index} xs={12} md={6} lg={4} xl={3}>
<CardActionArea href={experiment.path}>
<Card>
<CardMedia image={experiment.image} sx={{ paddingTop: '100%' }} />
<CardHeader
subheader={(
<Box display="flex" gap={1}>
<Typography>{experiment.index}</Typography>
<Typography color="grey.700">|</Typography>
<Typography>{experiment.date}</Typography>
</Box>
)}
title={experiment.title}
/>
</Card>
</CardActionArea>
</Grid>
))}
</Grid>
return <Box display="flex" flexDirection="column" gap={6} overflow="auto" padding={3}>
<Box>
<Card>
<CardHeader title="Experimental" />
<CardContent>
<Typography>
Just some experimental digital artwork
</Typography>
</CardContent>
</Card>
</Box>
<Box display="flex" flexDirection="column" gap={2}>
<Typography variant="h4">
Featured
</Typography>
<Divider />
<Grid container overflow="auto" spacing={3}>
{experiments.filter(experiment => experiment.featured).map((experiment, index) => (
<Grid item key={index} xs={12} md={6} lg={4} xl={3}>
<CardActionArea href={experiment.path}>
<Card>
<CardMedia image={experiment.image} sx={{ paddingTop: '100%' }} />
<CardHeader
subheader={(
<Box display="flex" gap={1}>
<Typography>{experiment.index}</Typography>
<Typography color="grey.700">|</Typography>
<Typography>{experiment.date}</Typography>
</Box>
)}
title={experiment.title}
/>
</Card>
</CardActionArea>
</Grid>
))}
</Grid>
<Divider />
</Box>
<Box>
<Grid container overflow="auto" spacing={3}>
{experiments.filter(experiment => !experiment.disabled && !experiment.featured).map((experiment, index) => (
<Grid item key={index} xs={12} md={6} lg={4} xl={3}>
<CardActionArea href={experiment.path}>
<Card>
<CardMedia image={experiment.image} sx={{ paddingTop: '100%' }} />
<CardHeader
subheader={(
<Box display="flex" gap={1}>
<Typography>{experiment.index}</Typography>
<Typography color="grey.700">|</Typography>
<Typography>{experiment.date}</Typography>
</Box>
)}
title={experiment.title}
/>
</Card>
</CardActionArea>
</Grid>
))}
</Grid>
</Box>
</Box>;

}
95 changes: 48 additions & 47 deletions src/setup/experiments.ts
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,73 @@
import _ from 'lodash';

const items: [string, string, boolean?][] = [
['animal/1', '2019-11-10', true],
['animal/2', '2019-12-05', true],
['arcs', '2018-04-14', true],
['art/1', '2019-10-28', true],
['cubes', '2018-06-02', true],
const items: [string, string, boolean?, boolean?][] = [
['animal/1', '2019-11-10', false, true],
['animal/2', '2019-12-05', false, true],
['arcs', '2018-04-14', false, true],
['art/1', '2019-10-28', false, true],
['cubes', '2018-06-02', false, true],
['cubic/1', '2019-08-20'],
['cubic/2', '2019-08-20'],
['cubic/3', '2019-08-20'],
['cubic/4', '2019-09-27', true],
['cubic/5', '2019-10-07', true],
['cubic/6', '2019-10-10', true],
['cubic/7', '2019-10-15', true],
['drops', '2017-06-02', true],
['duality', '2019-05-20'],
['eye/1', '2019-08-23', true],
['eye/2', '2019-08-23', true],
['eye/3', '2019-09-10', true],
['face', '2018-03-27', true],
['flocking/1', '2019-08-21', true],
['flocking/2', '2019-08-21', true],
['flocking/3', '2019-08-23', true],
['foggy-forest', '2018-03-31', true],
['followers', '2018-06-03', true],
['cubic/4', '2019-09-27', false, true],
['cubic/5', '2019-10-07', false, true],
['cubic/6', '2019-10-10', false, true],
['cubic/7', '2019-10-15', false, true],
['drops', '2017-06-02', false, true],
['duality', '2019-05-20', true],
['eye/1', '2019-08-23', false, true],
['eye/2', '2019-08-23', false, true],
['eye/3', '2019-09-10', false, true],
['face', '2018-03-27', false, true],
['flocking/1', '2019-08-21', false, true],
['flocking/2', '2019-08-21', false, true],
['flocking/3', '2019-08-23', false, true],
['foggy-forest', '2018-03-31', false, true],
['followers', '2018-06-03', false, true],
['hexagon/1', '2019-08-11'],
['hexagon/2', '2019-08-11'],
['hexagon/3', '2019-08-11'],
['hexagon/4', '2019-08-11'],
['hexagon/5', '2019-08-11'],
['kaleidoscope/1', '2019-08-18', true],
['kaleidoscope/2', '2019-08-18', true],
['kaleidoscope/3', '2019-08-18', true],
['mobius', '2017-06-01', true],
['morph', '2017-10-31', true],
['mother-box', '2017-12-04', true],
['nebula', '2017-10-30', true],
['pixeliser', '2018-04-14', true],
['plotter/1', '2019-09-17', true],
['plotter/2', '2019-09-18', true],
['kaleidoscope/1', '2019-08-18', false, true],
['kaleidoscope/2', '2019-08-18', false, true],
['kaleidoscope/3', '2019-08-18', false, true],
['mobius', '2017-06-01', false, true],
['morph', '2017-10-31', false, true],
['mother-box', '2017-12-04', false, true],
['nebula', '2017-10-30', false, true],
['pixeliser', '2018-04-14', false, true],
['plotter/1', '2019-09-17', false, true],
['plotter/2', '2019-09-18', false, true],
['polyhedron/1', '2019-08-14'],
['polyhedron/2', '2019-08-14'],
['rings', '2018-06-21', true],
['ripples', '2017-06-07', true],
['rings', '2018-06-21', false, true],
['ripples', '2017-06-07', false, true],
['simplex-noise/1', '2019-08-09'],
['simplex-noise/2', '2019-08-11'],
['solar', '2018-04-02', true],
['solar', '2018-04-02', false, true],
['sphere/1', '2019-08-13'],
['sphere/2', '2019-08-13'],
['sphere/3', '2020-01-30', true],
['tau', '2018-06-15', true],
['tree-of-thoughts', '2017-11-01', true],
['trigonometry', '2017-08-08', true],
['tunnel/1', '2019-08-19', true],
['tunnel/2', '2019-08-19', true],
['tunnel/3', '2019-09-29', true],
['wander-lost', '2019-05-28', true],
['wave/1', '2019-08-21', true],
['wave/2', '2019-10-04', true],
['wave/3', '2019-11-09', true],
['worlds-end', '2018-02-22', true],
['sphere/3', '2020-01-30', false, true],
['tau', '2018-06-15', false, true],
['tree-of-thoughts', '2017-11-01', false, true],
['trigonometry', '2017-08-08', false, true],
['tunnel/1', '2019-08-19', false, true],
['tunnel/2', '2019-08-19', false, true],
['tunnel/3', '2019-09-29', false, true],
['wander-lost', '2019-05-28', false, true],
['wave/1', '2019-08-21', false, true],
['wave/2', '2019-10-04', false, true],
['wave/3', '2019-11-09', false, true],
['worlds-end', '2018-02-22', false, true],
];

items.sort((a, b) => a[1] < b[1] ? 1 : -1);

export const experiments: Experiment[] = items.map(([name, date, disabled], index) => ({
export const experiments: Experiment[] = items.map(([name, date, featured, disabled], index) => ({
date,
disabled,
featured,
image: `/assets/images/${name.replace('/', '-')}.png`,
index: (items.length - index).toString().padStart(3, '0'),
path: `/${name}`,
Expand Down

0 comments on commit cf54040

Please sign in to comment.