diff --git a/v2/package-lock.json b/v2/package-lock.json index 509021c..8f410a3 100644 --- a/v2/package-lock.json +++ b/v2/package-lock.json @@ -13,6 +13,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", @@ -1228,6 +1229,31 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.394.tgz", "integrity": "sha512-0IbC2cfr8w5LxTz+nmn2cJTGafsK9iauV2r5A5scfzyovqLrxuLoxOHE5OBobP3oVIggJT+0JfKnw9sm87c8Hw==" }, + "node_modules/embla-carousel": { + "version": "8.0.0-rc17", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0-rc17.tgz", + "integrity": "sha512-evF49b88VOitvqFtlvhvKVSu96Y8A+QSFdhok87Bfm8R7OYuk95FT+o8+M1GQLi/EhGDUlT193HTVAR0Wt2neQ==" + }, + "node_modules/embla-carousel-react": { + "version": "8.0.0-rc17", + "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0-rc17.tgz", + "integrity": "sha512-x4aFprwFB+PQO9EsHHZsrDxARb0uYNBYn9mr5oDFdBdPez4M8G1r5yidWbUcT9pNUc8AQXC9sGzlfauBfBxVOw==", + "dependencies": { + "embla-carousel": "8.0.0-rc17", + "embla-carousel-reactive-utils": "8.0.0-rc17" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.1 || ^18.0.0" + } + }, + "node_modules/embla-carousel-reactive-utils": { + "version": "8.0.0-rc17", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0-rc17.tgz", + "integrity": "sha512-eluEOK/u5HdjYaTLC4bUG3iTCnyX7RsYix3il0aH4ZECOKa5fS+pVK2vrM17Mgw6C5Hyjcr3r3lfJtGerVzVsQ==", + "peerDependencies": { + "embla-carousel": "8.0.0-rc17" + } + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", @@ -5259,6 +5285,26 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.394.tgz", "integrity": "sha512-0IbC2cfr8w5LxTz+nmn2cJTGafsK9iauV2r5A5scfzyovqLrxuLoxOHE5OBobP3oVIggJT+0JfKnw9sm87c8Hw==" }, + "embla-carousel": { + "version": "8.0.0-rc17", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0-rc17.tgz", + "integrity": "sha512-evF49b88VOitvqFtlvhvKVSu96Y8A+QSFdhok87Bfm8R7OYuk95FT+o8+M1GQLi/EhGDUlT193HTVAR0Wt2neQ==" + }, + "embla-carousel-react": { + "version": "8.0.0-rc17", + "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0-rc17.tgz", + "integrity": "sha512-x4aFprwFB+PQO9EsHHZsrDxARb0uYNBYn9mr5oDFdBdPez4M8G1r5yidWbUcT9pNUc8AQXC9sGzlfauBfBxVOw==", + "requires": { + "embla-carousel": "8.0.0-rc17", + "embla-carousel-reactive-utils": "8.0.0-rc17" + } + }, + "embla-carousel-reactive-utils": { + "version": "8.0.0-rc17", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0-rc17.tgz", + "integrity": "sha512-eluEOK/u5HdjYaTLC4bUG3iTCnyX7RsYix3il0aH4ZECOKa5fS+pVK2vrM17Mgw6C5Hyjcr3r3lfJtGerVzVsQ==", + "requires": {} + }, "emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", diff --git a/v2/package.json b/v2/package.json index d1e7370..286d286 100644 --- a/v2/package.json +++ b/v2/package.json @@ -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", diff --git a/v2/src/Components/Container/Container.tsx b/v2/src/Components/Container/Container.tsx index 7bd1537..ae6bd14 100644 --- a/v2/src/Components/Container/Container.tsx +++ b/v2/src/Components/Container/Container.tsx @@ -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 (
diff --git a/v2/src/Components/NavLink/NavLink.tsx b/v2/src/Components/NavLink/NavLink.tsx index d0006da..ec9de88 100644 --- a/v2/src/Components/NavLink/NavLink.tsx +++ b/v2/src/Components/NavLink/NavLink.tsx @@ -8,10 +8,12 @@ type LinkProps = ComponentProps; type Props = LinkProps & { activeClassName?: string | undefined; + isExternal?: boolean; }; export default function NavLink({ className, + isExternal, activeClassName, children, ...props @@ -23,7 +25,11 @@ export default function NavLink({ }`; return ( - + {children} ); diff --git a/v2/src/Components/Navbar/Navbar.tsx b/v2/src/Components/Navbar/Navbar.tsx index 92cba9c..751a65e 100644 --- a/v2/src/Components/Navbar/Navbar.tsx +++ b/v2/src/Components/Navbar/Navbar.tsx @@ -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, }, ]; @@ -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} > / {link.text} @@ -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} > / diff --git a/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx b/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx index 4d860d4..8439827 100644 --- a/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx +++ b/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx @@ -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 ( -
    - {options.map((option) => ( -
  • - -
    -
    -

    {option.tagline}

    -

    {option.title}

    -
    -
    - {option.tags.map((tag) => ( -

    - / {tag} +

    +
      + {options.map((option, idx) => ( +
    • + +
      +
      +

      {option.tagline}

      +

      + {option.title}

      - ))} +
      +
      + {option.tags.map((tag) => ( +

      + / {tag} +

      + ))} +
      +
      +
      +
      -
    -
    - -
    - -
    • - ))} -
+ + + ))} + +
); } diff --git a/v2/src/Components/ProjectsSelect/projects.ts b/v2/src/Components/ProjectsSelect/projects.ts index edc599e..f2ff8b3 100644 --- a/v2/src/Components/ProjectsSelect/projects.ts +++ b/v2/src/Components/ProjectsSelect/projects.ts @@ -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; @@ -10,6 +12,7 @@ type Project = { image: StaticImageData; backgroundColor?: string; backgroundImage?: string; + externalLink?: string; }; export const projects: Project[] = [ @@ -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", + }, ]; diff --git a/v2/src/app/home/Projects.tsx b/v2/src/app/home/Projects.tsx index 3ea0453..6156017 100644 --- a/v2/src/app/home/Projects.tsx +++ b/v2/src/app/home/Projects.tsx @@ -5,7 +5,7 @@ import React from "react"; export default function Projects() { return ( -
+

-
+
- {/* */} +
diff --git a/v2/src/app/project/adopting-bitcoin/page.styles.css b/v2/src/app/project/adopting-bitcoin/page.styles.css new file mode 100644 index 0000000..0270565 --- /dev/null +++ b/v2/src/app/project/adopting-bitcoin/page.styles.css @@ -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; +} diff --git a/v2/src/app/project/adopting-bitcoin/page.tsx b/v2/src/app/project/adopting-bitcoin/page.tsx index 01a2926..eaa10a4 100644 --- a/v2/src/app/project/adopting-bitcoin/page.tsx +++ b/v2/src/app/project/adopting-bitcoin/page.tsx @@ -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"; @@ -27,14 +28,7 @@ export const metadata: Metadata = { export default function AdoptingBitcoinPage() { return ( <> - - +
OTHER PROJECTS

- +
@@ -323,12 +317,6 @@ export default function AdoptingBitcoinPage() { } const projectData = { - colors: { - pageColor: "#EEDB5F", - frameColor: "#000", - footerBackgroundColor: "#EEDB5F", - footerTextColor: "#000", - }, tags: ["branding", "identity", "website"], client: "Galoy INC", year: "2023", diff --git a/v2/src/assets/images/projects/ai4all.jpg b/v2/src/assets/images/projects/ai4all.jpg new file mode 100644 index 0000000..e0017d8 Binary files /dev/null and b/v2/src/assets/images/projects/ai4all.jpg differ diff --git a/v2/src/assets/images/projects/bolt-fun.jpg b/v2/src/assets/images/projects/bolt-fun.jpg new file mode 100644 index 0000000..ad320d1 Binary files /dev/null and b/v2/src/assets/images/projects/bolt-fun.jpg differ