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

consistency fixes, placeholders

Browse Source
This commit is contained in:
Mikayla Dobson
2023-08-02 17:36:12 -05:00
parent be55fcf539
commit ba733113c1
8 changed files with 70 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/about/page.tsx
View File

@@ -14,10 +14,12 @@ export default function Resume() {
return (
<div className="min-h-screen bg-gradient-to-b from-black to-slate-950 bg-fixed flex flex-col items-center p-4 z-10">
<section className="w-full bg-black bg-opacity-80 pb-4">
<section className="w-full pb-4">
<h1 className="uppercase text-4xl text-rose-300 tracking-wide leading-relaxed font-light">Mikayla Dobson</h1>
<h2 className="text-2xl tracking-wide font-light">Software Engineer | Nashville, TN</h2>
<div className="hidden bg-slate-950"></div>
<div className="flex items-center pt-2">
<p className="mr-2">Download a copy for later?</p>
<a download href="/resume/Mikayla Resume 0623.pdf" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-800 p-1 rounded-lg">.pdf</a>
@@ -31,7 +33,7 @@ export default function Resume() {
</section>
<section className="place-self-start mt-8 w-full">
<button onClick={() => setSkillsVisible(!skillsVisible)} className="sticky top-[5.5rem] w-full bg-black flex items-center text-rose-300 uppercase tracking-wide list-none">
<button onClick={() => setSkillsVisible(!skillsVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none" + (skillsVisible ? " bg-black" : "")}>
<span className="font-light text-3xl leading-relaxed">Skills</span>
<RxChevronDown className={`ml-2 transition ${skillsVisible ? "rotate-180" : "rotate-0"}`} />
</button>
@@ -47,14 +49,14 @@ export default function Resume() {
</section>
<section className="place-self-start mt-8 w-full">
<button onClick={() => setEducationVisible(!educationVisible)} className="sticky top-[5.5rem] w-full bg-black flex items-center text-rose-300 uppercase tracking-wide list-none">
<button onClick={() => setEducationVisible(!educationVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none" + (educationVisible ? " bg-black" : "")}>
<h2 className="font-light text-3xl leading-relaxed">Education</h2>
<RxChevronDown className={`ml-2 transition ${educationVisible ? "rotate-0" : "rotate-180"}`} />
</button>
{
educationVisible ? (
<article className={(educationVisible ? "h-auto my-4 opacity-100" : "h-0 opacity-0 my-0") + " transition duration-500 bg-slate-800 bg-opacity-40 shadow shadow-black p-3 rounded-lg"}>
<article className={(educationVisible ? "h-auto my-4 opacity-100 bg-black" : "h-0 opacity-0 my-0") + " transition duration-500 bg-opacity-40 shadow shadow-black p-3 rounded-lg"}>
<h3 className="uppercase text-2xl text-rose-600">Southern Methodist University</h3>
<p className="font-light italic text-rose-300">Dallas, TX - B.A. Music</p>
<div className="h-[1px] w-full my-3 bg-rose-300" />
@@ -66,7 +68,7 @@ export default function Resume() {
</section>
<section className="place-self-start mt-8 w-full">
<button onClick={() => setProjectsVisible(!projectsVisible)} className="sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none">
<button onClick={() => setProjectsVisible(!projectsVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none " + (projectsVisible ? " bg-black" : "")}>
<h2 className="font-light text-3xl leading-relaxed">Projects</h2>
<RxChevronDown className={`ml-2 transition ${projectsVisible ? "rotate-180" : "rotate-0"}`} />
</button>

38
app/contact/page.tsx
View File

@@ -12,29 +12,31 @@ export default function ContactPage() {
}
return (
<div className="flex flex-col mx-24 items-center">
<h1 className="text-3xl my-8 place-self-start">Thanks for your interest! I&apos;m looking forward to hearing from you.</h1>
<div className="min-w-screen min-h-screen bg-gradient-to-b from-black to-darkPlum">
<div className="flex flex-col mx-24 items-center">
<h1 className="text-3xl my-8 place-self-start">Thanks for your interest! I&apos;m looking forward to hearing from you.</h1>
<form onSubmit={handleSubmit} className="w-full">
<div className="flex w-full">
<div className="flex flex-col w-1/2 mr-2">
<label htmlFor="name">Name</label>
<input className="bg-neutral-100 px-1.5 py-1 text-black" value={name} onChange={(e) => setName(e.target.value)} type="text" name="name" id="name" />
<form onSubmit={handleSubmit} className="w-full">
<div className="flex w-full">
<div className="flex flex-col w-1/2 mr-2">
<label htmlFor="name">Name</label>
<input className="bg-neutral-100 px-1.5 py-1 text-black" value={name} onChange={(e) => setName(e.target.value)} type="text" name="name" id="name" />
</div>
<div className="flex flex-col w-1/2 ml-2">
<label htmlFor="email">Email</label>
<input className="bg-neutral-100 px-1.5 py-1 text-black" value={email} onChange={(e) => setEmail(e.target.value)} type="email" name="email" id="email" />
</div>
</div>
<div className="flex flex-col w-1/2 ml-2">
<label htmlFor="email">Email</label>
<input className="bg-neutral-100 px-1.5 py-1 text-black" value={email} onChange={(e) => setEmail(e.target.value)} type="email" name="email" id="email" />
<div className="flex flex-col w-full mt-4">
<label htmlFor="message">Message</label>
<textarea className="bg-neutral-100 px-1.5 py-1 text-black" value={message} onChange={(e) => setMessage(e.target.value)} name="message" id="message" cols={30} rows={5}></textarea>
</div>
</div>
<div className="flex flex-col w-full mt-4">
<label htmlFor="message">Message</label>
<textarea className="bg-neutral-100 px-1.5 py-1 text-black" value={message} onChange={(e) => setMessage(e.target.value)} name="message" id="message" cols={30} rows={5}></textarea>
</div>
<button className="p-2 px-8 mt-8 rounded-lg bg-rose-300 hover:bg-rose-400 text-black" type="submit">Send!</button>
</form>
<button className="p-2 px-8 mt-8 rounded-lg bg-rose-300 hover:bg-rose-400 text-black" type="submit">Send!</button>
</form>
</div>
</div>
)
}

9
app/layout.tsx
View File

@@ -24,14 +24,21 @@ export const metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const [bg, setBg] = useState('bg-slate-900');
const [overlay, setOverlay] = useState(false);
const [pageIsScrolled, setPageIsScrolled] = useState(false);
useEffect(() => {
switch (pathname) {
case '/contact':
setBg('bg-darkPlum');
setOverlay(true);
break;
case '/':
case '/about':
default:
setBg('bg-slate-900');
setOverlay(false);
break;
}
}, [pathname])
@@ -60,7 +67,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<IconContext.Provider value={{}}>
<MDXProvider components={components}>
<main className={`${bg} min-h-screen`}>
<div id="navbar-spacer" className="h-[6rem] w-full" />
<div id="navbar-spacer" className="h-[6rem] w-full bg-black" />
{children}
</main>
</MDXProvider>

42
app/page.tsx
View File

@@ -1,11 +1,11 @@
import { ColorChangeName } from "@/components/Home";
import { ColorChangeName } from "@/components/Home";
import Image from "next/image";
import Link from "next/link";
export default function Home() {
return (
<>
<div id="hero" className="bg-gradient-to-b from-black to-slate-900 p-4 flex flex-col min-h-[50vh]">
<div className="flex flex-col w-full">
<div id="hero" className="bg-gradient-to-b from-black to-slate-900 p-4 flex flex-col items-end">
<ColorChangeName />
{/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat">
@@ -13,25 +13,27 @@ export default function Home() {
</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 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-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">
<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
</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
</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 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-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-white border p-2 w-2/5 rounded-md" href="/projects">
And check out some of my work while you&apos;re at it
</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>
</div>
</>
</div>
)
}

2
app/projects/page.tsx
View File

@@ -2,6 +2,8 @@ export default function ProjectsPage() {
return (
<div>
<h1>Projects Page</h1>
<p>Contents of this page coming soon!</p>
</div>
)
}

4
components/Home/index.tsx
View File

@@ -12,8 +12,8 @@ export const ColorChangeName = () => {
</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-inherit bg-opacity-10 p-4 flex flex-col min-h-[50vh]">
<p className="mt-4 text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
<div id="hero-mask" className="bg-inherit bg-opacity-10 p-4 flex flex-col">
<p className="mt-4 text-right text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
</div>
</>
)

12
components/Navbar/index.tsx
View File

@@ -76,7 +76,7 @@ export default function Navbar({ pageIsScrolled = false }) {
return (
<>
<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"}>
<div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart bg-opacity-95 px-8 py-4 " + (mobileMenuOpen ? "bg-[#131313] " : pageIsScrolled ? "bg-black " : "bg-inherit ") + " text-white transition-all duration-200"}>
<Link passHref href="/" className="w-1/4">
<InlineLogo customHookInstance={navbarColorShift} />
</Link>
@@ -101,21 +101,21 @@ export default function Navbar({ pageIsScrolled = false }) {
</button>
</div>
</div>
<div onMouseLeave={() => setMobileMenuOpen(false)} className={`flex flex-col z-50 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 onMouseLeave={() => setMobileMenuOpen(false)} className={`flex flex-col z-50 rounded-bl-lg justify-end md:hidden fixed top-24 w-[35vw] text-right place-self-end bg-[#131313] ${mobileMenuOpen ? 'translate-x-[65vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
{/* <div className="bg-black h-48" /> */}
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/" className="w-full">
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/" className="w-auto px-2">
<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">
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/about" className="w-auto px-2">
<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 onClick={() => setMobileMenuOpen(false)} passHref href="/projects" className="w-full">
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/projects" className="w-auto px-2">
<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 onClick={() => setMobileMenuOpen(false)} passHref href="/contact" className="w-full">
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/contact" className="w-auto px-2">
<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>

3
tailwind.config.js
View File

@@ -15,6 +15,9 @@ module.exports = {
],
theme: {
extend: {
colors: {
'darkPlum': '#1e0631',
},
transitionTimingFunction: {
'quick-start': 'cubic-bezier(.17,.67,0,.89)',
},