Skip to content

Commit

Permalink
added footer and enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcelaya775
jcelaya775 committed Jan 21, 2022
1 parent fe76ac5 commit 104553e
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 77 deletions.
40 changes: 40 additions & 0 deletions components/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react'

export default function Footer() {
return (
<div className='bg-zinc-900 text-[#f0f0f0] h-80'>
<div className='container mx-auto py-24 text-center grid grid-cols-3'>
<ul>
<li>
<h3 className='hover:font-semibold hover:cursor-pointer'>Home</h3>
<h3 className='hover:font-semibold hover:cursor-pointer'>
Projects
</h3>
<h3 className='hover:font-semibold hover:cursor-pointer'>Skills</h3>
<h3 className='hover:font-semibold hover:cursor-pointer'>About</h3>
</li>
</ul>
<ul>
<li>
<h3 className='hover:font-semibold hover:cursor-pointer'>Home</h3>
<h3 className='hover:font-semibold hover:cursor-pointer'>
Projects
</h3>
<h3 className='hover:font-semibold hover:cursor-pointer'>Skills</h3>
<h3 className='hover:font-semibold hover:cursor-pointer'>About</h3>
</li>
</ul>
<ul>
<li>
<h3 className='hover:font-semibold hover:cursor-pointer'>Home</h3>
<h3 className='hover:font-semibold hover:cursor-pointer'>
Projects
</h3>
<h3 className='hover:font-semibold hover:cursor-pointer'>Skills</h3>
<h3 className='hover:font-semibold hover:cursor-pointer'>About</h3>
</li>
</ul>
</div>
</div>
)
}
57 changes: 8 additions & 49 deletions components/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@ import Sidebar from './Sidebar'
import Link from 'next/link'
import Switch from './Switch'
import { useSelector, useDispatch } from 'react-redux'
import { WiDaySunny } from 'react-icons/wi'
import { MdNightlightRound } from 'react-icons/md'
import { FaBeer } from 'react-icons/fa'
import { CgLogOff } from 'react-icons/cg'
import { MdOutlineClose } from 'react-icons/md'

export default function Navbar() {
Expand All @@ -16,50 +12,13 @@ export default function Navbar() {

useEffect(() => {
const burger = burgerRef.current

burger.addEventListener('mouseenter', mouseEnter)
burger.addEventListener('click', burgerClick)
burger.addEventListener('mouseleave', mouseLeave)

return () => {
burger.removeEventListener('mouseenter', mouseEnter)
burger.removeEventListener('click', burgerClick)
burger.removeEventListener('mouseleave', mouseLeave)
}
}, [])

const mouseEnter = (event) => {
event.preventDefault()

console.log(sidebar)

// if (!sidebar) {
// const [b1, b2, b3] = document.querySelectorAll('.block')

// b1.classList.remove('w-5')
// b1.classList.add('w-8')
// b3.classList.remove('w-8')
// b3.classList.add('w-5')
// }
}

const mouseLeave = (event) => {
event.preventDefault()

console.log(sidebar)

// if (!sidebar) {
// console.log('mouse leave on burger')
// // if sidebar not enabled -> animate burger
// const [b1, b2, b3] = document.querySelectorAll('.block')

// b1.classList.remove('w-8')
// b1.classList.add('w-5')
// b3.classList.remove('w-5')
// b3.classList.add('w-8')
// }
}

const burgerClick = (event) => {
event.preventDefault()
const burger = burgerRef.current
Expand All @@ -70,7 +29,7 @@ export default function Navbar() {
return (
<div>
<div className='ease-in duration-500'>{sidebar && <Sidebar />}</div>
<div className='relative z-20 w-full h-16 bg-blue-500 drop-shadow-2xl flex justify-center items-center px-10'>
<div className='relative z-20 w-full h-16 bg-zinc-900 drop-shadow-2xl flex justify-center items-center px-10'>
{/* Navbar items */}
<div className='container flex justify-center items-center lg:max-w-screen-2xl sm:max-w-screen-md max-w-xs'>
{/* Hamburger and Logo Container */}
Expand All @@ -83,14 +42,14 @@ export default function Navbar() {
ref={burgerRef}
className='space-y-2 rounded-md p-6 hover:cursor-pointer group'
>
<span className='block w-5 group-hover:w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
<span className='block w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
<span className='block w-8 group-hover:w-5 h-[0.20rem] bg-white ease-out duration-500'></span>
<span className='block w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
<span className='block w-5 group-hover:w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
</div>
) : (
<div
ref={burgerRef}
className='p-6 ease-out hover:cursor-pointer hover:animate-spin-slow delay-1000 duration-800'
className='p-6 ease-out hover:cursor-pointer hover:animate-spin-slow duration-500'
>
<MdOutlineClose id='exit' className='text-white w-10 h-10' />
</div>
Expand All @@ -101,22 +60,22 @@ export default function Navbar() {
{/* Links */}
<div className='container flex justify-center font-prompt text-white md:visible invisible'>
<Link href='#' passHref>
<a className='link px-4 py-2 text-lg duration-500 ease-in-out hover:bg-slate-600 hover:bg-opacity-50 hover:to-transparent rounded-md'>
<a className='link px-4 py-2 text-lg duration-500 ease-in-out hover:bg-zinc-100 hover:bg-opacity-10 hover:to-transparent rounded-md'>
Home
</a>
</Link>
<Link href='#' passHref>
<a className='link px-4 py-2 text-lg duration-500 hover:bg-slate-600 hover:bg-opacity-50 hover:to-transparent rounded-md'>
<a className='link px-4 py-2 text-lg duration-500 hover:bg-zinc-100 hover:bg-opacity-10 hover:to-transparent rounded-md'>
About
</a>
</Link>
<Link href='#' passHref>
<a className='link px-4 py-2 text-lg duration-500 hover:bg-slate-600 hover:bg-opacity-50 hover:to-transparent rounded-md'>
<a className='link px-4 py-2 text-lg duration-500 hover:bg-zinc-100 hover:bg-opacity-10 hover:to-transparent rounded-md'>
Projects
</a>
</Link>
<Link href='#' passHref>
<a className='link px-4 py-2 text-lg duration-500 hover:bg-slate-600 hover:bg-opacity-50 hover:to-transparent rounded-md'>
<a className='link px-4 py-2 text-lg duration-500 hover:bg-zinc-100 hover:bg-opacity-10 hover:to-transparent rounded-md'>
Testimonials
</a>
</Link>
Expand Down
4 changes: 2 additions & 2 deletions components/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ export default function Sidebar() {
return (
<div
id='wrapper'
className='absolute ease-in-out duration-500 z-10 py-32 h-full max-w-screen-sm w-[100%] bg-zinc-900 '
className='absolute ease-in-out duration-500 z-10 py-32 h-full max-w-screen-sm w-[100%] bg-zinc-900 bg-opacity-95 backdrop-blur-lg'
>
<div className='flex flex-col justify-start items-start pl-[15%] text-white text-4xl font-robo'>
{items.map((item, key) => (
<h1
key={key}
className='py-2 hover:font-bold hover:decoration-slice hover:cursor-pointer'
className='py-2 ease-in-out hover:font-semibold duration-100 hover:decoration-slice hover:cursor-pointer'
>
{item}
</h1>
Expand Down
34 changes: 8 additions & 26 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,16 @@
import { useSelector } from 'react-redux'
import Navbar from '../components/Navbar'
import Card from '../components/Card'
import Button from '@mui/material/Button'
import Image from 'next/image'
import Footer from '../components/Footer'
import styled, { css } from 'styled-components'
import img from '../images/hero.jpg'
import { current } from '@reduxjs/toolkit'
import Accordion from '../components/Accordion'

// const Button = styled.button`
// background: transparent;
// border-radius: 3px;
// border: 2px solid palevioletred;
// color: palevioletred;
// margin: 0.5em 1em;
// padding: 0.25em 1em;

// ${(props) =>
// props.primary &&
// css`=
// background: palevioletred;
// color: white;
// `}
// `

export default function Home() {
const theme = useSelector((state) => state.theme.value)

return (
<div>
{/* // bg-[#001325] */}
<Navbar />
{/* Hero */}
<div className='bg-slate-100'>
Expand All @@ -46,32 +27,33 @@ export default function Home() {
help.
</h1>

{/* Buttons */}
<button
type='button'
className='btn w-fit gradient-blue gradient-hover ease-out duration-500'
>
Contact Us
</button>
{/* end Buttons */}
</div>

{/* Image */}
<div className='rounded-md'>
<Image src={img} passHref />
</div>
{/* end Image */}
{/* end Hero */}
</div>
</div>
{/* end Hero */}

{/* Content */}
<div className='container mx-auto max-w-lg mt-56 px-10 grid gap-6 grid-cols-1 md:grid-cols-2 md:max-w-screen-lg lg:grid-cols-3'>
<div className='container mx-auto max-w-lg my-56 px-10 grid gap-6 grid-cols-1 md:grid-cols-2 md:max-w-screen-lg lg:grid-cols-3'>
<Card text={'Greetings'} />
<Card text={'Hello'} />
<Card text={'World'} />
<Card text={'Goodbye'} />
<Card text={'Seeyah'} />
<Card text={'Tomrrow'} />
</div>
{/* end Content */}

<Footer />
</div>
)
}

0 comments on commit 104553e

Please sign in to comment.