innocuous-symmetry/mikayla-dobson-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many style improvements for home page

Browse Source
This commit is contained in:
Mikayla Dobson
2023-07-03 11:51:09 -05:00
parent 22738d083c
commit 3d2f05bfdf
11 changed files with 89 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/about/experience/page.tsx
View File

@@ -1,7 +1,10 @@
export default function ExperiencePage() {
return (
<div>
<div id="spacer" className='h-[6rem] w-full' />
<h1>Work Page</h1>
</div>
)
}

7
app/about/layout.tsx
View File

@@ -1,7 +0,0 @@
export default function AboutSectionLayout({ children }: { children: React.ReactNode}) {
return (
<div id="about-section">
{children}
</div>
)
}

29
app/about/page.tsx
View File

@@ -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>
)
}

13
app/layout.tsx
View File

@@ -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}>

46
app/page.tsx
View File

@@ -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 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="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">
<h2 className="text-blue-300 text-2xl">Hi! My name is Mikayla.</h2>
<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&apos;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>
</>

28
components/Navbar/index.tsx
View File

@@ -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>

4
next.config.js
View File

@@ -18,8 +18,8 @@ const nextConfig = {
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
reactStrictMode: true,
experimental: {
mdxRs: true,
serverActions: true,
// mdxRs: true,
// serverActions: true,
}
}

6
package.json
View File

@@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 MiB

BIN
public/img/profile.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

16
tailwind.config.js
View File

@@ -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 }
}
}
},
},