diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml new file mode 100644 index 0000000..7851d24 --- /dev/null +++ b/.github/workflows/staging.yml @@ -0,0 +1,19 @@ +name: build check (mikayla dot dev) + +on: + push: + branches: + - staging +jobs: + build: + runs-on: ubuntu-latest + + steps: + - name: checkout + uses: actions/checkout@v2 + with: + ref: staging + - name: install + run: npm install + - name: build check + run: npm run build diff --git a/app/links/page.tsx b/app/links/page.tsx new file mode 100644 index 0000000..07db926 --- /dev/null +++ b/app/links/page.tsx @@ -0,0 +1,73 @@ +import SocialMedia from "@/components/Links/SocialMedia"; +import Panel from "@/components/ui/Panel"; +import Image from "next/image"; +import { FaBandcamp, FaGithub, FaLinkedin, FaPatreon, FaSoundcloud, FaYoutube } from "react-icons/fa"; +import { RxArrowRight } from "react-icons/rx"; + +export default function LinksPage() { + return ( +
+ +
+

Check out my work on...

+ +
+ The word 'Dropper' in bold white lettering + Dropper +
+ + + +
+ + Subsequent Media +
+ +
+ + +
+ ) +} diff --git a/app/listen/[collectionid]/page.tsx b/app/listen/[collectionid]/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/listen/page.tsx b/app/listen/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/read/[postid]/page.tsx b/app/read/[postid]/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/read/page.tsx b/app/read/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/components/Links/FeaturedLink.tsx b/components/Links/FeaturedLink.tsx new file mode 100644 index 0000000..645c233 --- /dev/null +++ b/components/Links/FeaturedLink.tsx @@ -0,0 +1,15 @@ +import type { LinkProps } from "."; +import Image from "next/image"; +import Panel from "../ui/Panel"; + +export default function FeaturedLink({ href, label, logo, disabled = false}: LinkProps) { + return ( + +
+ {logo} + {label} +
+ + + ) +} diff --git a/components/Links/SocialMedia.tsx b/components/Links/SocialMedia.tsx new file mode 100644 index 0000000..8063bf8 --- /dev/null +++ b/components/Links/SocialMedia.tsx @@ -0,0 +1,12 @@ +import Link from "next/link"; +import type { LinkProps } from "."; + +export default function SocialMedia({ href, label, logo, disabled = false }: LinkProps) { + return ( +
+ + {logo} + +
+ ) +} diff --git a/components/Links/index.tsx b/components/Links/index.tsx new file mode 100644 index 0000000..15687a1 --- /dev/null +++ b/components/Links/index.tsx @@ -0,0 +1,6 @@ +export type LinkProps = { + href: string, + label: string, + logo: JSX.Element, + disabled?: boolean +} diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx index 051c876..581de0f 100644 --- a/components/Navbar/index.tsx +++ b/components/Navbar/index.tsx @@ -1,79 +1,15 @@ import Link from 'next/link' import { InlineLogo, useColorShift } from '../logo' -import { useEffect, useState } from 'react'; -import { UseColorShiftReturnType } from '../logo/useColorShift'; +import { useState } from 'react'; import { RxActivityLog } from "react-icons/rx"; - -interface HoverState { - about: boolean - projects: boolean - contact: boolean -} +import { NavbarButton } from '../ui/Button'; const SHIFT_INTERVAL = 3000; export default function Navbar({ pageIsScrolled = false }) { const navbarColorShift = useColorShift(SHIFT_INTERVAL); - const { shift } = navbarColorShift; - - const [colors, setColors] = useState>({ - firstColor: 'bg-inherit', - secondColor: 'bg-inherit', - thirdColor: 'bg-inherit', - }); - const [hoverState, setHoverState] = useState({ - about: false, - projects: false, - contact: false, - }) const [mobileMenuOpen, setMobileMenuOpen] = useState(false); - function mouseOver(source: keyof HoverState) { - const { colorKeys, actualColorReferences, activeIndex } = identifyActiveButton(); - - setColors({ ...colors, [colorKeys[activeIndex]]: actualColorReferences[activeIndex] }); - setHoverState({ ...hoverState, [source]: true }) - } - - function mouseOut(source: keyof HoverState) { - setHoverState({ ...hoverState, [source]: false }) - setColors({ firstColor: 'bg-inherit', secondColor: 'bg-inherit', thirdColor: 'bg-inherit' }); - } - - function identifyActiveButton() { - const buttonKeys: (keyof HoverState)[] = ['about', 'projects', 'contact']; - const { firstColor, secondColor, thirdColor } = navbarColorShift; - const colorKeys = ['firstColor', 'secondColor', 'thirdColor']; - const actualColorReferences = [firstColor, secondColor, thirdColor]; - - const activeButton = buttonKeys.find(key => hoverState[key]); - const activeIndex = buttonKeys.indexOf(activeButton as keyof HoverState); - - return { colorKeys, actualColorReferences, activeIndex }; - } - - useEffect(() => { - const interval = setInterval(shift, SHIFT_INTERVAL); - return () => clearInterval(interval); - }, []) - - useEffect(() => { - const interval = setInterval(() => { - const { colorKeys, actualColorReferences, activeIndex } = identifyActiveButton(); - - for (const key in hoverState) { - if (hoverState[key as keyof HoverState]) { - setColors({ - ...colors, - [colorKeys[activeIndex]]: actualColorReferences[activeIndex] - }); - } - } - }, 1000); - - return () => clearInterval(interval); - }, [shift]) - return ( <>