Skip to content

Commit

Permalink
feat: projects select component, fix flickering colors issue, update …
Browse files Browse the repository at this point in the history
…navbar
  • Loading branch information
MTG2000 committed Dec 27, 2023
1 parent 0e824a9 commit 354634c
Show file tree
Hide file tree
Showing 13 changed files with 156 additions and 58 deletions.
46 changes: 46 additions & 0 deletions v2/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions v2/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@types/react-dom": "18.2.4",
"autoprefixer": "10.4.14",
"class-variance-authority": "^0.6.0",
"embla-carousel-react": "^8.0.0-rc17",
"eslint": "8.40.0",
"eslint-config-next": "13.4.2",
"framer-motion": "^10.12.12",
Expand Down
4 changes: 3 additions & 1 deletion v2/src/Components/Container/Container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ interface Props {
children: JSX.Element | JSX.Element[];
wide?: boolean;
className?: string;
id?: string;
}

export default function Container({ children, wide, className }: Props) {
export default function Container({ id, children, wide, className }: Props) {
return (
<div
id={id}
className={`page-container
${wide && "wide"} ${className}`}
>
Expand Down
8 changes: 7 additions & 1 deletion v2/src/Components/NavLink/NavLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ type LinkProps = ComponentProps<typeof Link>;

type Props = LinkProps & {
activeClassName?: string | undefined;
isExternal?: boolean;
};

export default function NavLink({
className,
isExternal,
activeClassName,
children,
...props
Expand All @@ -23,7 +25,11 @@ export default function NavLink({
}`;

return (
<Link {...props} className={finalClasses}>
<Link
{...props}
className={finalClasses}
{...(isExternal && { target: "_blank", rel: "noopener noreferrer" })}
>
{children}
</Link>
);
Expand Down
13 changes: 11 additions & 2 deletions v2/src/Components/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,29 @@ import Container from "../Container/Container";
import NavLink from "../NavLink/NavLink";

const links = [
{
text: "Projects",
href: "/#projects",
},
{
text: "Twitter",
href: "https://twitter.com/peakshift",
isExternal: true,
},
{
text: "BOLT.FUN",
href: "https://bolt.fun",
isExternal: true,
},
{
text: "Contact",
href: "mailto:team@peakshift.com",
isExternal: true,
},
{
text: "Book Consultation",
href: "https://calendly.com/johnsbeharry",
isExternal: true,
},
];

Expand Down Expand Up @@ -101,8 +109,7 @@ export default function Navbar() {
className={`md:pr-20 block font-normal uppercase hover:text-primary`}
activeClassName="text-primary"
href={link.href}
target="_blank"
rel="noopener noreferrer"
isExternal={link.isExternal}
>
<span className="">/</span> {link.text}
</NavLink>
Expand Down Expand Up @@ -155,6 +162,8 @@ export default function Navbar() {
className={`md:pr-20 block font-normal uppercase hover:text-primary`}
activeClassName="text-primary"
href={link.href}
isExternal={link.isExternal}
onClick={toggleNav}
>
<span className="" aria-hidden>
/
Expand Down
90 changes: 54 additions & 36 deletions v2/src/Components/ProjectsSelect/ProjectsSelect.tsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,66 @@
"use client";
import React from "react";
import { projects } from "./projects";
import Link from "next/link";
import { serifText } from "@/assets/fonts";
import Image from "next/image";
import useEmblaCarousel from "embla-carousel-react";

export default function ProjectsSelect() {
const options = projects;
interface Props {
excludeProjects?: string[];
}

export default function ProjectsSelect({ excludeProjects }: Props) {
const [emblaRef] = useEmblaCarousel();

const options = projects.filter(
(project) => !excludeProjects?.includes(project.slug)
);

return (
<ul>
{options.map((option) => (
<li key={option.slug}>
<Link
href={`/project/${option.slug}`}
className={`p-24 block uppercase border border-gray-900 max-w-[600px]`}
style={{
...(option.backgroundColor && {
backgroundColor: option.backgroundColor,
}),
}}
>
<div className="flex justify-between gap-36 text-body5 md:text-body1 font-medium">
<div>
<p>{option.tagline} </p>
<p className={`${serifText.className}`}>{option.title}</p>
</div>
<div>
{option.tags.map((tag) => (
<p key={tag} className="whitespace-nowrap">
/ {tag}
<div className="" ref={emblaRef}>
<ul className="flex gap-24">
{options.map((option, idx) => (
<li key={idx} className="shrink-0 grow-0 basis-[min(80%,600px)]">
<Link
href={option.externalLink ?? `/project/${option.slug}`}
{...(option.externalLink && {
target: "_blank",
rel: "noopener noreferrer",
})}
className={`p-24 flex flex-col uppercase border border-gray-900 max-w-[600px] h-full`}
style={{
...(option.backgroundColor && {
backgroundColor: option.backgroundColor,
}),
}}
>
<div className="flex flex-wrap justify-between gap-x-36 gap-y-16 font-medium">
<div>
<p className="md:text-body1">{option.tagline} </p>
<p className={`${serifText.className} text-body5`}>
{option.title}
</p>
))}
</div>
<div>
{option.tags.map((tag) => (
<p key={tag} className="whitespace-nowrap">
/ {tag}
</p>
))}
</div>
</div>
<div className="mt-auto">
<Image
src={option.image}
alt=""
className="max-w-[450px] w-full mx-auto my-42 shadow-2xl"
/>
</div>
</div>
<div>
<Image
src={option.image}
alt=""
className="w-full max-w-[450px] mx-auto my-42"
/>
</div>
</Link>
</li>
))}
</ul>
</Link>
</li>
))}
</ul>
</div>
);
}
21 changes: 21 additions & 0 deletions v2/src/Components/ProjectsSelect/projects.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { StaticImageData } from "next/image";

import AdoptingBitcoinImage from "@/assets/images/projects/adopting-bitcoin.jpg";
import AI4ALLImage from "@/assets/images/projects/ai4all.jpg";
import BoltFunImage from "@/assets/images/projects/bolt-fun.jpg";

type Project = {
title: string;
Expand All @@ -10,6 +12,7 @@ type Project = {
image: StaticImageData;
backgroundColor?: string;
backgroundImage?: string;
externalLink?: string;
};

export const projects: Project[] = [
Expand All @@ -21,4 +24,22 @@ export const projects: Project[] = [
backgroundColor: "#EADC72",
image: AdoptingBitcoinImage,
},
{
title: "AI4ALL",
slug: "ai4all",
tagline: "DEMOCRATISING ACCESS TO AI",
tags: ["experience", "brand"],
backgroundColor: "#FF6B00",
image: AI4ALLImage,
externalLink: "https://bolt.fun/tournaments/ai4all",
},
{
title: "BOLT.FUN",
slug: "bolt-fun",
tagline: "BUILDING A VIRTUAL INCUBATOR HELPING FOUNDERS GO FROM 0-1",
tags: ["experience", "community"],
backgroundColor: "#AF59FE",
image: BoltFunImage,
externalLink: "https://bolt.fun",
},
];
2 changes: 1 addition & 1 deletion v2/src/app/home/Projects.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import React from "react";

export default function Projects() {
return (
<section className="min-h-[min(95vh,1440px)]">
<section id="projects" className="min-h-[min(95vh,1440px)]">
<Container wide>
<h2
className={`${condensedHeadings.className} text-primary text-h2 lg:text-[48px] font-light mb-24`}
Expand Down
4 changes: 2 additions & 2 deletions v2/src/app/home/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import WorkWithUs from "./WorkWithUs";
export default function Home() {
return (
<>
<main className="">
<main className="overflow-hidden">
<Hero />
{/* <Projects /> */}
<Projects />
<ResearchLab />
<WorkWithUs />
</main>
Expand Down
7 changes: 7 additions & 0 deletions v2/src/app/project/adopting-bitcoin/page.styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
body:has(#adopting-bitcoin-page) {
--page-bg-color: #eedb5f;
--text-color: #000;
--frame-color: #000;
--footer-bg-color: #eedb5f;
--footer-text-color: #000;
}
18 changes: 3 additions & 15 deletions v2/src/app/project/adopting-bitcoin/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import AdoptingBitcoinWireframe from "./assets/adopting-bitcoin-wireframe.svg";
import AdoptingBitcoinPosterImage from "./assets/adopting-bitcoin-poster.jpg";
import ScatteredCardsImage from "./assets/scattered-cards.png";
import MerchImage from "./assets/merch.png";
import "./page.styles.css";

import { condensedHeadings, monoText, serifText } from "@/assets/fonts";
import ColorsPalette from "../Components/ColorsPalette";
Expand All @@ -27,14 +28,7 @@ export const metadata: Metadata = {
export default function AdoptingBitcoinPage() {
return (
<>
<SetPageColor
pageBackgroundColor={projectData.colors.pageColor}
frameColor={projectData.colors.frameColor}
textColor="#000"
footerBackgroundColor={projectData.colors.footerBackgroundColor}
footerTextColor={projectData.colors.footerTextColor}
/>
<Container className="overflow-hidden">
<Container id="adopting-bitcoin-page" className="overflow-hidden">
<section
id="project-header"
className={`${monoText.className} uppercase flex flex-col gap-36 py-80`}
Expand Down Expand Up @@ -315,20 +309,14 @@ export default function AdoptingBitcoinPage() {
>
OTHER PROJECTS
</h2>
<ProjectsSelect />
<ProjectsSelect excludeProjects={["adopting-bitcoin"]} />
</section>
</Container>
</>
);
}

const projectData = {
colors: {
pageColor: "#EEDB5F",
frameColor: "#000",
footerBackgroundColor: "#EEDB5F",
footerTextColor: "#000",
},
tags: ["branding", "identity", "website"],
client: "Galoy INC",
year: "2023",
Expand Down
Binary file added v2/src/assets/images/projects/ai4all.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added v2/src/assets/images/projects/bolt-fun.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 354634c

Please sign in to comment.