Skip to content

Commit 0744c32

Browse files
TheNickOfTimeTheNickOfTime
committed
Merge branch 'dev'
2 parents f1a82ef + f728f00 commit 0744c32

File tree

9 files changed

+377
-83
lines changed

9 files changed

+377
-83
lines changed

‎src/components/home/featured/featured-projects.scss

+145-26
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,37 @@
99
align-items: flex-start;
1010
}
1111

12-
#project-cards {
13-
display: flex;
14-
flex-direction: column;
15-
gap: 2rem;
12+
#gallery-container {
13+
position: relative;
14+
15+
#gallery {
16+
gap: 4rem !important;
17+
18+
#gallery-cards {
19+
margin: 0 2rem;
20+
21+
.previous,
22+
.secondary,
23+
.next,
24+
.hidden {
25+
display: none;
26+
}
27+
}
28+
}
29+
30+
.gallery-button {
31+
position: absolute !important;
32+
background: none !important;
33+
bottom: 2rem;
34+
35+
&#previous {
36+
left: 5%;
37+
}
38+
39+
&#next {
40+
right: 5%;
41+
}
42+
}
1643
}
1744
}
1845

@@ -29,37 +56,129 @@
2956
padding-bottom: 0.25em;
3057
}
3158
}
59+
}
60+
61+
@media screen and (min-width: $medium-min-width) and (max-width: $medium-max-width) {
62+
#gallery-container {
63+
#gallery-cards {
64+
grid-template-columns: repeat(3, 70%);
65+
66+
.previous {
67+
grid-column: 1/2;
68+
}
69+
70+
.primary {
71+
grid-column: 2/3;
72+
}
73+
74+
.secondary {
75+
grid-column: 3/4;
76+
}
77+
78+
.next,
79+
.hidden {
80+
display: none;
81+
}
82+
}
83+
}
84+
}
85+
86+
@media screen and (min-width: $large-min-width) {
87+
#gallery-cards {
88+
grid-template-columns: repeat(4, 40%);
89+
90+
.previous {
91+
grid-column: 1/2;
92+
}
93+
94+
.primary {
95+
grid-column: 2/3;
96+
}
97+
98+
.secondary {
99+
grid-column: 3/4;
100+
}
101+
102+
.next {
103+
grid-column: 4/5;
104+
}
105+
106+
.hidden {
107+
display: none;
108+
}
109+
}
110+
}
111+
112+
#featured-projects {
113+
#projects-title {
114+
#all-projects {
115+
border: 0.25rem solid $color-primary;
116+
background-color: transparent;
117+
color: $color-primary;
118+
119+
&:hover {
120+
background-color: $color-primary;
121+
color: $background-primary;
122+
}
123+
}
124+
}
125+
126+
#gallery-container {
127+
display: flex;
128+
flex-direction: row;
129+
flex-wrap: nowrap;
130+
overflow: hidden;
32131

33-
#projects-container {
34-
max-width: 100%;
35132
background-color: $background-secondary;
36133
border-radius: 2rem;
37-
box-shadow: 0 0 0.5rem $background-primary inset;
134+
box-shadow: 0 0 1rem $background-shadow inset;
38135

39-
#project-cards {
136+
#gallery {
40137
display: flex;
41-
overflow-x: scroll;
42-
align-items: flex-start;
43-
gap: 2rem;
44-
padding: 2rem;
45-
padding-bottom: 4rem;
46-
47-
.project-card {
48-
min-width: 400px;
138+
flex-direction: column;
139+
// justify-content: center;
140+
align-items: center;
141+
gap: 3rem;
142+
padding: 3rem 0;
143+
144+
#gallery-cards {
145+
display: grid;
146+
justify-content: center;
147+
gap: 2rem;
148+
}
149+
150+
#gallery-bullets {
151+
display: flex;
152+
gap: 1rem;
153+
154+
color: $text-secondary;
155+
156+
.current {
157+
color: $text-primary;
158+
}
49159
}
50160
}
51-
}
52-
}
53161

54-
#projects-title {
55-
#all-projects {
56-
border: 0.25rem solid $color-primary;
57-
background-color: transparent;
58-
color: $color-primary;
162+
.gallery-button {
163+
display: flex;
164+
align-items: center;
165+
position: relative;
166+
z-index: 1;
167+
168+
&#previous {
169+
padding-left: 3rem;
170+
background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
171+
}
59172

60-
&:hover {
61-
background-color: $color-primary;
62-
color: $background-primary;
173+
&#next {
174+
padding-right: 3rem;
175+
background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
176+
}
177+
178+
button {
179+
width: 4rem;
180+
aspect-ratio: 1;
181+
}
63182
}
64183
}
65184
}

‎src/components/home/featured/featured-projects.tsx

+61-7
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@ import { Project, Projects } from 'src/types/project';
33

44
import ProjectCard from '../../projects/project-card/project-card';
55
import './featured-projects.scss';
6+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7+
import { faCaretLeft, faCaretRight, faCircle } from '@fortawesome/free-solid-svg-icons';
8+
import { useState } from 'react';
69

7-
const ProjectCards = () => {
10+
const Gallery = () => {
811
const projects: Projects = import.meta.glob('/src/projects/portfolio/*.mdx', {
912
eager: true,
1013
});
@@ -13,12 +16,63 @@ const ProjectCards = () => {
1316
return project.metadata.featured;
1417
});
1518

19+
const [galleryIndex, setGalleryIndex] = useState(0);
20+
21+
const handleButtonClick = (direction: number) => {
22+
const newIndex = Math.min(
23+
Math.max(galleryIndex + direction, 0),
24+
featuredProjects.length - 1
25+
);
26+
27+
setGalleryIndex(newIndex);
28+
};
29+
30+
const handleBulletClick = (newIndex: number) => {
31+
setGalleryIndex(newIndex);
32+
};
33+
1634
return (
17-
<div id='projects-container'>
18-
<div id='project-cards'>
19-
{featuredProjects.map((project) => (
20-
<ProjectCard project={project} />
21-
))}
35+
<div id='gallery-container'>
36+
<div className='gallery-button' id='previous'>
37+
<button onClick={() => handleButtonClick(-1)}>
38+
<FontAwesomeIcon icon={faCaretLeft} size='2x' />
39+
</button>
40+
</div>
41+
<div id='gallery'>
42+
<div id='gallery-cards'>
43+
{featuredProjects.map((project, index) => (
44+
<div
45+
className={`card-container ${
46+
index == galleryIndex - 1
47+
? 'previous'
48+
: index == galleryIndex
49+
? 'primary'
50+
: index == galleryIndex + 1
51+
? 'secondary'
52+
: index == galleryIndex + 2
53+
? 'next'
54+
: 'hidden'
55+
}`}
56+
>
57+
<ProjectCard project={project.metadata} />
58+
</div>
59+
))}
60+
</div>
61+
<div id='gallery-bullets'>
62+
{featuredProjects.map((_, index) => (
63+
<FontAwesomeIcon
64+
className={index == galleryIndex ? 'current' : ''}
65+
icon={faCircle}
66+
size='2xs'
67+
onClick={() => handleBulletClick(index)}
68+
/>
69+
))}
70+
</div>
71+
</div>
72+
<div className='gallery-button' id='next'>
73+
<button onClick={() => handleButtonClick(1)}>
74+
<FontAwesomeIcon icon={faCaretRight} size='2x' />
75+
</button>
2276
</div>
2377
</div>
2478
);
@@ -34,7 +88,7 @@ export default function FeaturedProjects() {
3488
</NavLink>
3589
</div>
3690
{/* <div id='projects-container'> */}
37-
<ProjectCards />
91+
<Gallery />
3892
{/* </div> */}
3993
</div>
4094
);

‎src/components/projects/project-browser/project-browser-context.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { createContext } from 'react';
2-
import { MultiselectOptions, Project } from 'src/types/project';
2+
import { MultiselectOptions, ProjectMetadata } from 'src/types/project';
33
// import { ShowOptions, SortByOptions, SortOrderOptions } from './project-browser-options';
44
// import
55

66
export interface ProjectBrowserContextType {
77
// projects: Projects;
8-
filteredProjects: Project[];
8+
filteredProjects: ProjectMetadata[];
99
show: string;
1010
tags: MultiselectOptions;
1111
types: MultiselectOptions;

‎src/components/projects/project-browser/project-browser.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// Dependencies ------------------------------------------------------------------------------------
44
import { useEffect, useState } from 'react';
55

6-
import { Project, Projects, MultiselectOptions } from 'src/types/project';
6+
import { Project, MultiselectOptions, ProjectMetadata } from 'src/types/project';
77
import { ProjectBrowserContext, ProjectBrowserContextType } from './project-browser-context';
88
import { ShowOptions, SortByOptions, SortOrderOptions } from './project-browser-options';
99
import FilterAndSortProjects from './project-filtering-sorting';
@@ -14,13 +14,17 @@ import ProjectGrid from '../project-grid/project-grid';
1414
// Component ---------------------------------------------------------------------------------------
1515
export function ProjectBrowser() {
1616
// Variables ---------------------------------------------------------------
17-
const projects: Projects = import.meta.glob('/src/projects/portfolio/*.mdx', {
18-
eager: true,
19-
});
17+
const allProjects: Project[] = Object.values(
18+
import.meta.glob('/src/projects/portfolio/*.mdx', {
19+
eager: true,
20+
})
21+
);
22+
const projects: ProjectMetadata[] = allProjects.map((project: Project) => project.metadata);
23+
console.log(projects);
2024

2125
const allTags: MultiselectOptions = Object.values(projects).reduce(
22-
(previous: MultiselectOptions, current: Project) => {
23-
const uniqueKeys = current.metadata.tags
26+
(previous: MultiselectOptions, current: ProjectMetadata) => {
27+
const uniqueKeys = current.tags
2428
.filter((key: string) => !Object.keys(previous).includes(key))
2529
.map((key: string) => [key, false]);
2630
return { ...previous, ...Object.fromEntries(uniqueKeys) };
@@ -29,9 +33,9 @@ export function ProjectBrowser() {
2933
);
3034

3135
const allTypes: MultiselectOptions = Object.values(projects).reduce(
32-
(previous: MultiselectOptions, current: Project) => {
33-
const unique = !Object.keys(previous).includes(current.metadata.type);
34-
return unique ? { ...previous, ...{ [current.metadata.type]: false } } : previous;
36+
(previous: MultiselectOptions, current: ProjectMetadata) => {
37+
const unique = !Object.keys(previous).includes(current.type);
38+
return unique ? { ...previous, ...{ [current.type]: false } } : previous;
3539
},
3640
{}
3741
);

0 commit comments

Comments
 (0)