many style improvements for home page
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
export default function ExperiencePage() {
|
||||
return (
|
||||
<div>
|
||||
<div id="spacer" className='h-[6rem] w-full' />
|
||||
<h1>Work Page</h1>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
export default function AboutSectionLayout({ children }: { children: React.ReactNode}) {
|
||||
return (
|
||||
<div id="about-section">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -3,29 +3,12 @@ import Link from 'next/link';
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div>
|
||||
<Link href="/about/me">
|
||||
<p>About me</p>
|
||||
</Link>
|
||||
|
||||
<Link href="/about/resume">
|
||||
<p>My resume</p>
|
||||
</Link>
|
||||
|
||||
<Link href="/about/skills">
|
||||
<p>Skills</p>
|
||||
</Link>
|
||||
|
||||
<Link href="/about/education">
|
||||
<p>Education</p>
|
||||
</Link>
|
||||
|
||||
<Link href="/about/experience">
|
||||
<p>Experience</p>
|
||||
</Link>
|
||||
|
||||
<Link href="/about/music">
|
||||
<p>Music</p>
|
||||
</Link>
|
||||
<Link href="/about/me">About me</Link>
|
||||
<Link href="/about/resume">My resume</Link>
|
||||
<Link href="/about/skills">Skills</Link>
|
||||
<Link href="/about/education">Education</Link>
|
||||
<Link href="/about/experience">Experience</Link>
|
||||
<Link href="/about/music">Music</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@ export const metadata = {
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
const [bg, setBg] = useState('bg-slate-900');
|
||||
const [pageIsScrolled, setPageIsScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
switch (pathname) {
|
||||
@@ -35,6 +36,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
}
|
||||
}, [pathname])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 0) {
|
||||
setPageIsScrolled(true);
|
||||
} else {
|
||||
setPageIsScrolled(false);
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<Head>
|
||||
@@ -44,7 +55,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<body className={inter.className}>
|
||||
<Navbar />
|
||||
<Navbar pageIsScrolled={pageIsScrolled} />
|
||||
<SiteTree />
|
||||
<IconContext.Provider value={{}}>
|
||||
<MDXProvider components={components}>
|
||||
|
||||
48
app/page.tsx
48
app/page.tsx
@@ -1,34 +1,50 @@
|
||||
'use client';
|
||||
import { useColorShift } from "@/components/logo";
|
||||
import { ColorListType } from "@/components/logo/useColorShift";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Home() {
|
||||
const router = useRouter();
|
||||
const { firstColor, secondColor, thirdColor } = useColorShift(14000);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="hero" className="min-h-[50vh]">
|
||||
<div id="hero-mask" className="bg-gradient-to-b from-black to-slate-900 p-4 flex flex-col min-h-[50vh]">
|
||||
<div id="an-avatar-will-go-here" className="h-32" />
|
||||
<h1 className="px-4 text-sky-300 text-3xl uppercase">Mikayla Dobson <br />Software Engineer</h1>
|
||||
<p className="mt-4 px-4 text-sky-300 tracking-wide font-light">Software design at the confluence of efficiency, ingenuity, and artistry</p>
|
||||
<div id="a-backdrop-image-will-go-here" className="h-48" />
|
||||
</div>
|
||||
<div aria-description="spacer" className="h-[6rem] w-full" />
|
||||
<div id="hero" className="bg-gradient-to-b from-black to-slate-900 p-4 flex flex-col min-h-[50vh]">
|
||||
<span className={"px-4 mb-2 mt-4 bg-clip-text text-transparent uppercase text-3xl sm:text-6xl font-extrabold bg-opacity-100 animate-text-gradient bg-gradient-to-r " + `from-${firstColor.split('-').slice(1).join('-')} to-${secondColor.split('-').slice(1).join('-')}`}>
|
||||
Mikayla Dobson
|
||||
</span>
|
||||
<h2 className={"px-4 uppercase text-2xl text-transparent font-bold bg-opacity-100 animate-text-gradient bg-clip-text bg-gradient-to-r " + `from-${secondColor.split('-').slice(1).join('-')} to-${thirdColor.split('-').slice(1).join('-')}`}>Software Engineer</h2>
|
||||
|
||||
<div id="hero-mask" className="bg-gradient-to-b from-black to-slate-900 bg-opacity-10 p-4 flex flex-col min-h-[50vh]">
|
||||
<p className="mt-4 text-sky-300 tracking-wide">Software design with style, ingenuity, and artistry.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center">
|
||||
<h2 className="text-blue-300 text-2xl">Hi! My name is Mikayla.</h2>
|
||||
{/* <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-center pb-24">
|
||||
<Link passHref href="/about">
|
||||
<Image className="rounded-full mb-4" src="/img/profile.jpeg" alt="image of Mikayla Dobson" width={125} height={125} />
|
||||
</Link>
|
||||
<h2 className="text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2>
|
||||
<p className="px-4 sm:px-12">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p>
|
||||
|
||||
<div id="actions" className="flex justify-around mt-8">
|
||||
<button className="border-white border-[1px] p-2 w-2/5 rounded-md" onClick={() => router.push('/contact')}>
|
||||
<Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-white border-[1px] p-2 w-2/5 rounded-md" href="/contact">
|
||||
Tell me what I can do for you
|
||||
</button>
|
||||
<button className="hidden sm:block border-white border p-2 w-2/5 rounded-md" onClick={() => router.push('/projects')}>
|
||||
</Link>
|
||||
<Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-white border p-2 w-2/5 rounded-md" href="/projects">
|
||||
And check out some of my work while you're at it
|
||||
</button>
|
||||
<button className="block sm:hidden border-white border p-2 w-2/5 rounded-md" onClick={() => router.push('/projects')}>
|
||||
Check out my projects
|
||||
</button>
|
||||
</Link>
|
||||
<Link className="sm:hidden flex flex-col items-center justify-center px-4 border-white border p-2 w-2/5 rounded-md" href="/projects">
|
||||
Check out my work
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -13,7 +13,7 @@ interface HoverState {
|
||||
|
||||
const SHIFT_INTERVAL = 3000;
|
||||
|
||||
export default function Navbar() {
|
||||
export default function Navbar({ pageIsScrolled = false }) {
|
||||
const navbarColorShift = useColorShift(SHIFT_INTERVAL);
|
||||
const { shift } = navbarColorShift;
|
||||
|
||||
@@ -77,42 +77,46 @@ export default function Navbar() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="navbar" className="w-full h-auto fixed flex flex-nowrap items-baseline justify-apart px-8 py-4 bg-black text-white">
|
||||
<Link href="/" className="w-1/4">
|
||||
<div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart px-8 py-4 " + (mobileMenuOpen ? "bg-[#131313] " : pageIsScrolled ? "bg-black" : "bg-inherit ") + " text-white transition-colors duration-200"}>
|
||||
<Link passHref href="/" className="w-1/4">
|
||||
<InlineLogo customHookInstance={navbarColorShift} />
|
||||
</Link>
|
||||
|
||||
<div className="hidden md:inline-flex justify-end w-3/4">
|
||||
<Link href="/about" onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} className={`ml-2 ${colors.firstColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.about ? '[5000ms]' : '0'}`}>
|
||||
<Link passHref href="/about" onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} className={`ml-2 ${colors.firstColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.about ? '[5000ms]' : '0'}`}>
|
||||
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>About</p>
|
||||
</Link>
|
||||
|
||||
<Link href="/projects" onMouseOver={() => mouseOver("projects")} onMouseOut={() => mouseOut('projects')} className={`ml-2 ${colors.secondColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.projects ? '[5000ms]' : '0'}`}>
|
||||
<Link passHref href="/projects" onMouseOver={() => mouseOver("projects")} onMouseOut={() => mouseOut('projects')} className={`ml-2 ${colors.secondColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.projects ? '[5000ms]' : '0'}`}>
|
||||
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase border-white border-2 p-2 rounded-lg border-opacity-50'>Projects</p>
|
||||
</Link>
|
||||
|
||||
<Link href="/contact" onMouseOver={() => mouseOver('contact')} onMouseOut={() => mouseOut('contact')} className={`ml-2 ${colors.thirdColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.contact ? '[5000ms]' : '0'}`}>
|
||||
<Link passHref href="/contact" onMouseOver={() => mouseOver('contact')} onMouseOut={() => mouseOut('contact')} className={`ml-2 ${colors.thirdColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.contact ? '[5000ms]' : '0'}`}>
|
||||
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>Contact</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex md:hidden justify-end w-3/4">
|
||||
<button onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
|
||||
<div aria-expanded={mobileMenuOpen} aria-roledescription="mobile-only navbar" className="inline-flex md:hidden justify-end h-full w-3/4">
|
||||
<button className={(mobileMenuOpen ? "bg-[#131313]" : "bg-inherit")} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
|
||||
<RxActivityLog size="24" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex flex-col items-end md:hidden fixed top-24 w-[50vw] place-self-end bg-black ${mobileMenuOpen ? 'translate-x-[50vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
|
||||
<div onMouseLeave={() => setMobileMenuOpen(false)} className={`flex flex-col rounded-bl-lg justify-end md:hidden fixed top-24 w-[25vw] text-right place-self-end bg-[#131313] ${mobileMenuOpen ? 'translate-x-[75vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
|
||||
{/* <div className="bg-black h-48" /> */}
|
||||
<Link href="/about" className="w-full">
|
||||
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/" className="w-full">
|
||||
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>Home</p>
|
||||
</Link>
|
||||
|
||||
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/about" className="w-full">
|
||||
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>About</p>
|
||||
</Link>
|
||||
|
||||
<Link href="/projects" className="w-full">
|
||||
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/projects" className="w-full">
|
||||
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase p-2 border-opacity-50'>Projects</p>
|
||||
</Link>
|
||||
|
||||
<Link href="/contact" className="w-full">
|
||||
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/contact" className="w-full">
|
||||
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>Contact</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -18,8 +18,8 @@ const nextConfig = {
|
||||
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
|
||||
reactStrictMode: true,
|
||||
experimental: {
|
||||
mdxRs: true,
|
||||
serverActions: true,
|
||||
// mdxRs: true,
|
||||
// serverActions: true,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"@next/mdx": "^13.4.4",
|
||||
"autoprefixer": "10.4.14",
|
||||
"eslint": "8.41.0",
|
||||
"eslint-config-next": "13.4.4",
|
||||
"eslint-config-next": "^12.0.4",
|
||||
"next": "13.4.4",
|
||||
"postcss": "8.4.24",
|
||||
"react": "18.2.0",
|
||||
@@ -26,9 +26,9 @@
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/uuid": "^9.0.1",
|
||||
"@types/node": "20.2.5",
|
||||
"@types/react": "18.2.7",
|
||||
"@types/react-dom": "18.2.4"
|
||||
"@types/react-dom": "18.2.4",
|
||||
"@types/uuid": "^9.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/backdrops/jean-beller-peW5dg2-cLI-unsplash.jpg
Normal file
BIN
public/backdrops/jean-beller-peW5dg2-cLI-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 MiB |
BIN
public/img/profile.jpeg
Normal file
BIN
public/img/profile.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
@@ -5,6 +5,14 @@ module.exports = {
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
safelist: [
|
||||
{
|
||||
pattern: /from-.*/,
|
||||
},
|
||||
{
|
||||
pattern: /to-.*/,
|
||||
}
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
transitionTimingFunction: {
|
||||
@@ -20,6 +28,7 @@ module.exports = {
|
||||
'logo-throw-right': 'logoThrowRight 1s ease forwards',
|
||||
'logo-throw-down': 'logoThrowDown 1s ease forwards',
|
||||
'fade-in': 'fadeIn 1s ease forwards',
|
||||
'text-gradient': 'textGradient 15s ease infinite'
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
@@ -38,6 +47,13 @@ module.exports = {
|
||||
'0%': { transform: 'translateY(0)'},
|
||||
'100%': { transform: 'translateY(80px)' }
|
||||
},
|
||||
|
||||
textGradient: {
|
||||
'0%': { opacity: 0},
|
||||
'12%': { opacity: 100 },
|
||||
'88%': { opacity: 98 },
|
||||
'100%': { opacity: 0 }
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user