improved light/dark mode
This commit is contained in:
@@ -21,25 +21,25 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
|
||||
const [pageIsScrolled, setPageIsScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (pathname === '/contact') setOverlay(true);
|
||||
// useEffect(() => {
|
||||
// if (pathname === '/contact') setOverlay(true);
|
||||
|
||||
switch (pathname) {
|
||||
case '/contact':
|
||||
setBg('bg-darkPlum');
|
||||
break;
|
||||
case '/about':
|
||||
setBg("bg-blue-100 dark:bg-slate-900");
|
||||
break;
|
||||
case "/links":
|
||||
setBg("bg-sky-100 dark:bg-slate-900");
|
||||
break;
|
||||
case '/':
|
||||
default:
|
||||
setBg('bg-slate-400 dark:bg-slate-900');
|
||||
break;
|
||||
}
|
||||
}, [pathname])
|
||||
// switch (pathname) {
|
||||
// case '/contact':
|
||||
// setBg('bg-purple-300 dark:bg-darkPlum');
|
||||
// break;
|
||||
// case '/about':
|
||||
// setBg("bg-blue-100 dark:bg-slate-900");
|
||||
// break;
|
||||
// case "/links":
|
||||
// setBg("bg-sky-100 dark:bg-slate-900");
|
||||
// break;
|
||||
// case '/':
|
||||
// default:
|
||||
// setBg('bg-slate-400 dark:bg-slate-900');
|
||||
// break;
|
||||
// }
|
||||
// }, [pathname])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('scroll', () => {
|
||||
@@ -63,12 +63,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
<Navbar pageIsScrolled={pageIsScrolled} />
|
||||
<SiteTree />
|
||||
<IconContext.Provider value={{}}>
|
||||
<main className={`${bg} min-h-screen`}>
|
||||
<div>
|
||||
<div id="navbar-spacer" className="h-[6rem] w-full bg-opacity-75 bg-slate-300 dark:bg-black " />
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
<div>
|
||||
<div id="navbar-spacer" className="h-[6rem] w-full bg-slate-300 dark:bg-black " />
|
||||
{children}
|
||||
</div>
|
||||
</IconContext.Provider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -6,8 +6,8 @@ import { RxArrowRight } from "react-icons/rx";
|
||||
|
||||
export default function LinksPage() {
|
||||
return (
|
||||
<div className="flex flex-col items-center bg-gradient-to-b from-slate-300 to-sky-100 dark:from-black dark:to-slate-900 bg-fixed">
|
||||
<section className="flex flex-col flex-wrap w-11/12 m-12">
|
||||
<div className="flex flex-col min-h-screen min-w-screen items-center bg-gradient-to-b from-slate-300 to-sky-100 dark:from-black dark:to-slate-900 bg-fixed">
|
||||
{/* <section className="flex flex-col flex-wrap w-11/12 m-12">
|
||||
<h1 className="text-3xl w-full my-8">Check out my work on...</h1>
|
||||
<Panel width="1/2">
|
||||
<div className="flex flex-col items-center p-8">
|
||||
@@ -22,12 +22,12 @@ export default function LinksPage() {
|
||||
<a href="https://subsequent.media" target="_blank">Subsequent Media</a>
|
||||
</div>
|
||||
</Panel>
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
<section id="social-media-gallery" className="w-3/5 my-12 flex flex-col items-center bg-black text-white rounded">
|
||||
<h1 className="text-3xl w-full text-center my-8">...or on your favorite social media platform:</h1>
|
||||
<h1 className="text-3xl w-full text-center mt-16 mb-8 text-indigo-600 dark:text-white">Find me on your favorite corner of the internet:</h1>
|
||||
<section id="link-gallery" className="bg-indigo-600 dark:bg-stone-300 w-3/5 my-12 p-6 flex flex-col items-center text-white rounded">
|
||||
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex flex-wrap justify-center w-full">
|
||||
<SocialMedia
|
||||
label="LinkedIn"
|
||||
href="https://www.linkedin.com/in/mikayla-dobson"
|
||||
@@ -52,7 +52,7 @@ export default function LinksPage() {
|
||||
logo={<FaBandcamp />}
|
||||
/>
|
||||
|
||||
<SocialMedia
|
||||
{/* <SocialMedia
|
||||
label="YouTube (coming soon)"
|
||||
href="youtube.com"
|
||||
logo={<FaYoutube />}
|
||||
@@ -64,7 +64,7 @@ export default function LinksPage() {
|
||||
href="patreon.com"
|
||||
logo={<FaPatreon />}
|
||||
disabled
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
52
app/page.tsx
52
app/page.tsx
@@ -4,36 +4,38 @@ import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col w-full">
|
||||
<div id="hero" className="bg-gradient-to-b from-slate-300 to-slate-400 dark:from-black dark:to-slate-900 p-4 flex flex-col items-end">
|
||||
<ColorChangeName />
|
||||
<main className="min-h-screen bg-fixed bg-gradient-to-b from-slate-300 to-slate-400 dark:from-black dark:to-slate-900">
|
||||
<div className="flex flex-col w-full">
|
||||
<div id="hero" className=" p-4 flex flex-col items-end">
|
||||
<ColorChangeName />
|
||||
|
||||
{/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat">
|
||||
<Image fill src="/backdrops/jean-beller-peW5dg2-cLI-unsplash.jpg" alt="geometric pattern in wood and metal" />
|
||||
</div> */}
|
||||
</div>
|
||||
{/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat">
|
||||
<Image fill src="/backdrops/jean-beller-peW5dg2-cLI-unsplash.jpg" alt="geometric pattern in wood and metal" />
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-start">
|
||||
<div className="flex flex-col w-full sm:w-2/3 relative mt-6 sm:mt-0 sm:bottom-12 items-center text-center">
|
||||
<Link passHref href="/about">
|
||||
<Image className="rounded-full my-4" src="/img/profile.jpeg" alt="image of Mikayla Dobson" width={125} height={125} />
|
||||
</Link>
|
||||
<h2 className="text-slate-700 dark:text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2>
|
||||
<p className="px-4 sm:px-12 dark:text-white">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p>
|
||||
<div className="flex flex-col items-start">
|
||||
<div className="flex flex-col w-full sm:w-2/3 relative mt-6 sm:mt-0 sm:bottom-12 items-center text-center">
|
||||
<Link passHref href="/about">
|
||||
<Image className="rounded-full my-4" src="/img/profile.jpeg" alt="image of Mikayla Dobson" width={125} height={125} />
|
||||
</Link>
|
||||
<h2 className="text-slate-700 dark:text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2>
|
||||
<p className="px-4 sm:px-12 dark:text-white">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p>
|
||||
|
||||
<div id="actions" className="flex justify-around my-8">
|
||||
<Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-slate-700 dark:border-white dark:text-white border-[1px] p-2 w-2/5 rounded-md" href="/contact">
|
||||
Tell me what I can do for you
|
||||
</Link>
|
||||
<Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
|
||||
And check out some of my work while you're at it
|
||||
</Link>
|
||||
<Link className="sm:hidden flex flex-col items-center justify-center px-4 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
|
||||
Check out my work
|
||||
</Link>
|
||||
<div id="actions" className="flex justify-around my-8">
|
||||
<Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-slate-700 dark:border-white dark:text-white border-[1px] p-2 w-2/5 rounded-md" href="/contact">
|
||||
Tell me what I can do for you
|
||||
</Link>
|
||||
<Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
|
||||
And check out some of my work while you're at it
|
||||
</Link>
|
||||
<Link className="sm:hidden flex flex-col items-center justify-center px-4 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
|
||||
Check out my work
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export default function ProjectsPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Projects Page</h1>
|
||||
<h1>Learn more about my work</h1>
|
||||
|
||||
<p>Contents of this page coming soon!</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user