updates

jcelaya775 · Jan 29, 2022 · c0e8a3d · c0e8a3d
1 parent fe7f731
commit c0e8a3d
Show file tree

Hide file tree

Showing 24 changed files with 287 additions and 70 deletions.
diff --git a/components/Card.js b/components/Card.js
@@ -1,6 +1,4 @@
 import React from 'react'
-import Image from 'next/image'
-import img from '../images/hero.jpg'
 
 export default function Item({ text }) {
   return (
@@ -13,7 +11,8 @@ export default function Item({ text }) {
         </p>
 
         <div className='my-10'>
-          <Image src={img} alt='placeholder' />
+          {/* <img src={img} alt='placeholder' /> */}
+          {/* <Image src={img} alt='placeholder' /> */}
         </div>
 
         <button className='btn w-full btn-primary text-[#f0f0f0] hover:bg-cyan-600 gradient-hover shadow-md drop-shadow-md ease-out duration-500'>

diff --git a/components/Hero.js b/components/Hero.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import Navbar from '../components/Navbar'
+import PostImage from './PostImage'
+import Image from 'next/Image'
+import pic from '../public/images/inspo.jpg'
+
+export default function Hero() {
+  return (
+    <div>
+      <div className={`relative bg-slate-100`}>
+        <Navbar />
+        <div className='mx-auto py-48 px-20 max-w-md grid grid-cols-1 gap-24 lg:grid-cols-2 md:max-w-screen-lg lg:max-w-screen-xl 2xl:max-w-screen-2xl'>
+          <div className='container flex flex-col justify-center max-w-screen-xl h-full'>
+            <h1 className='text-6xl text-zinc-00 inline-block font-robo font-bold'>
+              Hi, I&apos;m Jorge
+            </h1>
+
+            <h1 className='mt-6 mb-12 text-zinc-500 text-xl leading-8 font-normal font-robo'>
+              I am a university student studying computer science and
+              mathematics. I love learning and improving my skills in
+              programming and development. While I have a well-established set
+              of skills, from databases to frontend web development, I am always
+              excited to tackle new challenges and provide the highest level of
+              work that I can.
+            </h1>
+
+            <button
+              type='button'
+              className='btn w-fit btn-primary text-[#f0f0f0] hover:bg-cyan-600 gradient-hover shadow-md drop-shadow-md ease-out duration-500'
+            >
+              Contact Me
+            </button>
+          </div>
+
+          {/* TODO: if window width >= md -> render image  */}
+          <div className='image py-10 scale-0 md:scale-100 h-full w-full'>
+            <Image src={pic} />
+          </div>
+          {/* <PostImage source='inspo.jpg' /> */}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/ImageList.js b/components/ImageList.js
@@ -0,0 +1,113 @@
+import * as React from 'react'
+import ImageList from '@mui/material/ImageList'
+import ImageListItem from '@mui/material/ImageListItem'
+import ImageListItemBar from '@mui/material/ImageListItemBar'
+import ListSubheader from '@mui/material/ListSubheader'
+import IconButton from '@mui/material/IconButton'
+import InfoIcon from '@mui/icons-material/Info'
+
+export default function TitlebarImageList() {
+  return (
+    <ImageList>
+      <ImageListItem key='Subheader' cols={2}>
+        <ListSubheader component='div'>December</ListSubheader>
+      </ImageListItem>
+      {itemData.map((item) => (
+        <ImageListItem key={item.img}>
+          <img
+            src={`${item.img}?w=248&fit=crop&auto=format`}
+            srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            alt={item.title}
+            loading='lazy'
+          />
+          <ImageListItemBar
+            title={item.title}
+            subtitle={item.author}
+            actionIcon={
+              <IconButton
+                sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
+                aria-label={`info about ${item.title}`}
+              >
+                <InfoIcon />
+              </IconButton>
+            }
+          />
+        </ImageListItem>
+      ))}
+    </ImageList>
+  )
+}
+
+const itemData = [
+  {
+    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
+    title: 'Breakfast',
+    author: '@bkristastucchio',
+    rows: 2,
+    cols: 2,
+    featured: true,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
+    title: 'Burger',
+    author: '@rollelflex_graphy726',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
+    title: 'Camera',
+    author: '@helloimnik',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
+    title: 'Coffee',
+    author: '@nolanissac',
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
+    title: 'Hats',
+    author: '@hjrc33',
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
+    title: 'Honey',
+    author: '@arwinneil',
+    rows: 2,
+    cols: 2,
+    featured: true,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
+    title: 'Basketball',
+    author: '@tjdragotta',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
+    title: 'Fern',
+    author: '@katie_wasserman',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
+    title: 'Mushrooms',
+    author: '@silverdalex',
+    rows: 2,
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
+    title: 'Tomato basil',
+    author: '@shelleypauls',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
+    title: 'Sea star',
+    author: '@peterlaster',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
+    title: 'Bike',
+    author: '@southside_customs',
+    cols: 2,
+  },
+]
diff --git a/components/Navbar.js b/components/Navbar.js
@@ -7,22 +7,22 @@ import { MdOutlineClose } from 'react-icons/md'
 
 export default function Navbar() {
   const [sidebar, setSidebar] = useState(false)
-  const theme = useSelector((theme) => state.theme.value)
+  const colorScheme = useSelector((state) => state.theme.value)
   const dispatch = useDispatch()
   const burgerRef = useRef()
 
-  useEffect(() => {
-    if (darkMode) {
-      window.document.documentElement.classList.add('dark')
-      localStorage.setItem('vidyaDarkMode', 'true')
-    } else {
-      window.document.documentElement.classList.remove('dark')
-      localStorage.setItem('vidyaDarkMode', 'false')
-    }
-  }, [darkMode])
+  // useEffect(() => {
+  //   if (darkMode) {
+  //     window.document.documentElement.classList.add('dark')
+  //     localStorage.setItem('vidyaDarkMode', 'true')
+  //   } else {
+  //     window.document.documentElement.classList.remove('dark')
+  //     localStorage.setItem('vidyaDarkMode', 'false')
+  //   }
+  // }, [darkMode])
 
   const onClick = () => {
-    setDarkMode(!darkMode)
+    useDispatch()
   }
 
   useEffect(() => {

diff --git a/components/PostImage.js b/components/PostImage.js
@@ -0,0 +1,32 @@
+import Image from 'next/Image'
+import styled from 'styled-components'
+
+const ImageWrap = styled.span`
+  margin: 32px auto;
+  box-sizing: content-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  & > span {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    border-radius: 5px;
+  }
+`
+
+const PostImage = ({ alt, source, width, height }) => {
+  return (
+    <ImageWrap>
+      <Image
+        alt={alt}
+        src={`images/${source}`}
+        width={width}
+        height={height}
+        quality={70}
+      />
+    </ImageWrap>
+  )
+}
+
+export default PostImage
diff --git a/components/Project.js b/components/Project.js
@@ -0,0 +1,27 @@
+import React from 'react'
+// import photo from '../public/images/hero.jpeg'
+
+export default function Project({ align }) {
+  return (
+    <div className='container mx-auto mb-48 w-full'>
+      <div className='container grid grid-cols-1 md:grid-cols-4'>
+        {/* box 1 */}
+        <div className='border-2 w-200 h-96 absolute md:static'>
+          {/* <img src={photo} className='bg-cover' /> */}
+        </div>
+        {/* end box 1 */}
+        {/* box 2 */}
+        <div className='border-2 w-200 h-96 flex flex-col justify-center absolute md:static'>
+          <h1 className='font-black font-lato text-zinc-600'>Project Name</h1>
+          <div className='container rounded-md h-fit w-full bg-zinc-800 flex flex-col justify-center items-center'>
+            <h3 className='font-sans text-[#d6d7da] p-6'>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+              laboriosam ratione dolores aut? Reiciendis, consectetur?
+            </h3>
+          </div>
+        </div>
+        {/* end box 2 */}
+      </div>
+    </div>
+  )
+}
diff --git a/components/Sidebar.js b/components/Sidebar.js
@@ -15,7 +15,7 @@ export default function Sidebar({ isActive }) {
         {items.map((item, key) => (
           <h1
             key={key}
-            className='p-2  hover:cursor-pointer hover:text-emerald-600'
+            className='p-2  hover:cursor-pointer hover:font-semibold'
           >
             {item}
           </h1>

diff --git a/features/theme.js b/features/theme.js
@@ -7,13 +7,35 @@ const initialStateValue = {
   text: '#f0f0f0',
 }
 
+const pallete = {
+  light: {
+    primary: '#00f',
+    secondary: '#DB7093',
+    complementary: '#f00',
+    text: '#f0f0f0',
+  },
+  dark: {
+    primary: '#00f',
+    secondary: '#DB7093',
+    complementary: '#f00',
+    text: '#f0f0f0',
+  },
+}
+
 const themeSlice = createSlice({
   name: 'theme',
   initialState: { value: initialStateValue },
   reducers: {
     changeTheme: (state, action) => {
-      const colors = state.value
-      switch(colors)
+      const theme = action.payload
+
+      switch (theme) {
+        case 'light':
+          break
+        case 'dark':
+          break
+      }
+
       state.value = { ...action.payload }
     },
   },

diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,4 @@
 module.exports = {
   reactStrictMode: true,
+  eslint: { ignoreDuringBuilds: true },
 }