generated from nhcarrigan/template
feat: move to next.js (!14)
Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/14 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit is contained in:
Naomi the Technomancer
@@ -0,0 +1,46 @@
|
||||
import { Volunteer } from "@/icons/Volunteer";
|
||||
import {
|
||||
faCalendar,
|
||||
faQuestionCircle,
|
||||
faTasks,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
|
||||
interface CertProps {
|
||||
name: string;
|
||||
fileName: string;
|
||||
issuer: string;
|
||||
date: Date;
|
||||
}
|
||||
|
||||
export const Certification = (props: CertProps): JSX.Element => {
|
||||
const { name, fileName, issuer, date } = props;
|
||||
|
||||
return (
|
||||
<div className="w-[300px] h-[300px] border-2 border-solid border-[--foreground] m-auto text-center items-center">
|
||||
<p className="text-xl">{name}</p>
|
||||
<a
|
||||
href={`https://cdn.nhcarrigan.com/certifications/${fileName}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Image
|
||||
src={`https://cdn.nhcarrigan.com/certifications/${fileName}`}
|
||||
alt={name}
|
||||
width={250}
|
||||
height={250}
|
||||
className="m-auto"
|
||||
/>
|
||||
</a>
|
||||
<p>{issuer}</p>
|
||||
<p>
|
||||
{date.toLocaleDateString("en-GB", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client";
|
||||
import { Volunteer } from "@/icons/Volunteer";
|
||||
import {
|
||||
faCalendar,
|
||||
faQuestionCircle,
|
||||
faTasks,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useState } from "react";
|
||||
|
||||
interface JobProps {
|
||||
title: string;
|
||||
company: string;
|
||||
start: Date;
|
||||
end: Date | null;
|
||||
link: string;
|
||||
type: "volunteer" | "fixed" | "project" | "hypothetical";
|
||||
description: string;
|
||||
logo: string;
|
||||
}
|
||||
|
||||
const IconMap = {
|
||||
volunteer: Volunteer,
|
||||
fixed: faCalendar,
|
||||
project: faTasks,
|
||||
hypothetical: faQuestionCircle,
|
||||
};
|
||||
|
||||
export const Job = (props: JobProps): JSX.Element => {
|
||||
const { title, company, start, end, link, type, description, logo } = props;
|
||||
const [showDescription, setShowDescription] = useState(false);
|
||||
const toggleDescription = () => {
|
||||
setShowDescription(!showDescription);
|
||||
};
|
||||
const color =
|
||||
type === "hypothetical"
|
||||
? "text-[--primary]"
|
||||
: end
|
||||
? "text-[--former]"
|
||||
: "text-[--current]";
|
||||
const border =
|
||||
type === "hypothetical"
|
||||
? "border-[--primary]"
|
||||
: end
|
||||
? "border-[--former]"
|
||||
: "border-[--current]";
|
||||
return (
|
||||
<li className={`mb-10 ms-6 ${color}`}>
|
||||
<span
|
||||
className={`absolute flex items-center justify-center w-6 h-6 bg-[--background] rounded-full -start-3 ${color}`}
|
||||
>
|
||||
<FontAwesomeIcon icon={IconMap[type]} className="text-3xl" />
|
||||
</span>
|
||||
<h3 className={`flex items-center mb-1 text-lg font-semibold`}>
|
||||
{title} for {company}
|
||||
</h3>
|
||||
<time className="block mb-2 text-sm font-normal leading-none">
|
||||
{start.toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}{" "}
|
||||
-{" "}
|
||||
{end
|
||||
? end.toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
: "Present"}
|
||||
</time>
|
||||
{showDescription && (
|
||||
<div
|
||||
className="mb-4 text-base font-normal"
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
></div>
|
||||
)}
|
||||
<button
|
||||
onClick={toggleDescription}
|
||||
className={`inline-flex items-center px-4 py-2 text-sm font-medium border-double border-4 ${border}`}
|
||||
>
|
||||
{showDescription ? "Hide Details" : "Show Details"}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { Rule } from "./rule";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faBars,
|
||||
faTimes,
|
||||
faSun,
|
||||
faMoon,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { NavItems } from "@/config/NavItems";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
const Navigation = (): JSX.Element => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const prefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)",
|
||||
).matches;
|
||||
const isDark = savedTheme === "dark" || (!savedTheme && prefersDark);
|
||||
document.documentElement.classList.toggle("dark", isDark);
|
||||
setIsDarkMode(isDark);
|
||||
}, []);
|
||||
|
||||
const toggleMenu = () => {
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
document.documentElement.classList.toggle("dark", !isDarkMode);
|
||||
localStorage.setItem("theme", !isDarkMode ? "dark" : "light");
|
||||
setIsDarkMode(!isDarkMode);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed w-full top-0 z-50">
|
||||
<nav className="w-full flex justify-between items-center h-14 px-4 bg-[--background] text-[--foreground]">
|
||||
<a href="/">
|
||||
<Image
|
||||
src="https://cdn.nhcarrigan.com/logo.png"
|
||||
alt="nhcarrigan's logo"
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</a>
|
||||
<div className="flex items-center">
|
||||
<button onClick={toggleDarkMode} className="mr-4">
|
||||
<FontAwesomeIcon icon={isDarkMode ? faSun : faMoon} size="lg" />
|
||||
</button>
|
||||
<button onClick={toggleMenu}>
|
||||
<FontAwesomeIcon icon={isOpen ? faTimes : faBars} size="2x" />
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
{isOpen && (
|
||||
<div className="bg-[--background] text-[--foreground]">
|
||||
{NavItems.map((item, index) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="block py-2 px-4 text-2xl hover:bg-[--foreground] hover:text-[--background]"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{index % 2 ? "🩷" : "🩵"} {item.text}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Rule />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function ClientNavigation() {
|
||||
const pathname = usePathname();
|
||||
const isRootPath = pathname === "/";
|
||||
|
||||
if (isRootPath) return null;
|
||||
return <Navigation />;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Rule } from "./rule";
|
||||
|
||||
interface ReviewProps {
|
||||
name: string;
|
||||
date: Date;
|
||||
content: string;
|
||||
sourceIcon: IconDefinition;
|
||||
sourceUrl: string;
|
||||
sourceName: string;
|
||||
}
|
||||
|
||||
export const Review = (props: ReviewProps): JSX.Element => {
|
||||
const { name, date, content, sourceIcon, sourceUrl, sourceName } = props;
|
||||
return (
|
||||
<li className="mb-10 ms-6">
|
||||
<span className="absolute flex items-center justify-center w-6 h-6 bg-[--background] text-[--foreground] rounded-full -start-3">
|
||||
<FontAwesomeIcon icon={sourceIcon} />
|
||||
</span>
|
||||
<div className="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:bg-gray-700 dark:border-gray-600">
|
||||
<time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">
|
||||
{date.toLocaleDateString("en-GB")}
|
||||
</time>
|
||||
<div className="text-md font-normal text-gray-500 dark:text-gray-300">
|
||||
Review from{" "}
|
||||
<a
|
||||
href={sourceUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-semibold text-[#abfcec] hover:underline"
|
||||
>
|
||||
{name}
|
||||
</a>{" "}
|
||||
via{" "}
|
||||
<span className="bg-gray-100 text-gray-800 text-xs font-normal me-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">
|
||||
{sourceName}
|
||||
</span>
|
||||
<Rule />
|
||||
<p className="text-sm">{content}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import styles from "./rule.module.css";
|
||||
|
||||
export const Rule = (): JSX.Element => {
|
||||
return <hr className="border-dashed border-2 border-[--primary-color]"></hr>;
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
interface SocialProps {
|
||||
icon: IconDefinition;
|
||||
link: string;
|
||||
label: string;
|
||||
alt: string;
|
||||
color: string;
|
||||
background: string;
|
||||
}
|
||||
|
||||
export const Social = (props: SocialProps): JSX.Element => {
|
||||
const { icon, link, label, alt, background, color } = props;
|
||||
|
||||
return (
|
||||
<a
|
||||
className="flex w-2/5 m-auto justify-between items-center border-solid border-2 rounded-3xl h-14 p-8 my-4"
|
||||
style={{
|
||||
borderColor: color,
|
||||
color,
|
||||
background,
|
||||
}}
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={label}
|
||||
>
|
||||
<FontAwesomeIcon icon={icon} aria-label={alt} size="3x" />
|
||||
<strong>{label}</strong>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user