Skip to content

Commit

Permalink
feat: add dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
moonbamijam committed Jan 22, 2024
1 parent ea34546 commit 3c13ecb
Show file tree
Hide file tree
Showing 16 changed files with 178 additions and 76 deletions.
17 changes: 10 additions & 7 deletions app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Metadata } from 'next';
import Providers from './providers';
import '@styles/globals.css';

import Header from '@components/header/Header';
Expand All @@ -18,13 +19,15 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
<html lang="en">
<body className="bg-rich-black">
<Header />
<main>
{children}
</main>
<Footer />
<html lang="en" suppressHydrationWarning>
<body className=" dark:bg-rich-black">
<Providers >
<Header />
<main>
{children}
</main>
<Footer />
</Providers>
</body>
</html>
)
Expand Down
52 changes: 26 additions & 26 deletions app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,30 +39,30 @@ const Home = async () => {
const { project: projects } = await useFetch(`${process.env.API_PROJECTS}`)
return (
<>
<Image src={ AkaneDream } alt="" id="home-bg" style={{ width: '100%', height: '930px' }} className=" object-cover absolute z-[-100] mix-blend-lighten opacity-[0.3] " />
<Image src={ AkaneDream } alt="" id="home-bg" style={{ width: '100%', height: '930px' }} className=" object-cover absolute z-[-100] opacity-[0.5] dark:opacity-[0.3] " />
<BackToTop id={"#home"} />
<div className="container relative">
<section id="home" className="relative h-[930px] flex flex-col justify-between items-center">
<section id="home" className="relative h-[930px] flex flex-col justify-between items-center">
<div className=" w-full px-[30px] lg:px-[50px] xl:px-[100px] 2xl:px-[200px] mt-[200px] lg:mt-[250px] flex flex-col lg:flex-row justify-between items-center gap-y-[50px] ">
<div className="description">
<h1 className="text-6xl md:text-7xl lg:text-8xl font-bold mb-8">Heya~!</h1>
<p className="w-[400px] lg:w-[450px] xl:w-[600px] text-sm lg:text-base xl:text-xl ">My name is <strong className="highlight">Moonbami</strong>, and I am currently pursuing a career for being a <strong className="highlight">full-stack web developer</strong>. I am still a novice, but I am making <strong className="highlight">progress and learning</strong> on a daily basis.</p>
<div className="description ">
<h1 className="switch-text-color text-6xl md:text-7xl lg:text-8xl font-bold mb-8">Heya~!</h1>
<p className="switch-text-color w-[400px] lg:w-[450px] xl:w-[600px] text-sm lg:text-base xl:text-xl ">My name is <strong className="highlight">Moonbami</strong>, and I am currently pursuing a career for being a <strong className="highlight">full-stack web developer</strong>. I am still a novice, but I am making <strong className="highlight">progress and learning</strong> on a daily basis.</p>
</div>
<img className="w-[250px] h-[250px] md:w-[300px] md:h-[300px] lg:w-[350px] lg:h-[350px] border-[3px] border-solid border-white rounded-lg" src={`${process.env.API_AVATAR}`} alt="Jam Moonbami" />
<img className="w-[250px] h-[250px] md:w-[300px] md:h-[300px] lg:w-[350px] lg:h-[350px] border-[3px] border-solid border-black dark:border-white rounded-lg" src={`${process.env.API_AVATAR}`} alt="Jam Moonbami" />
</div>
<ScrollForMore />
</section>

<section id="about" className="px-[30px] lg:px-[50px] xl:px-[100px] 2xl:px-[200px] py-[100px] flex flex-col justify-between items-center bg-rich-black ">
<section id="about" className="px-[30px] lg:px-[50px] xl:px-[100px] 2xl:px-[200px] py-[100px] flex flex-col justify-between items-center ">
<div className="content w-full flex flex-col gap-[100px]">
<div className="about-me flex flex-col lg:flex-row justify-between items-center lg:items-start 2xl:justify-evenly ">
<Image src={ Me } alt="me" className="w-[300px] h-[300px] lg:w-[400px] lg:h-[400px] premium:w-[500px] premium:h-[500px] mb-4 object-cover rounded-lg" />
<div className="about-me flex flex-col gap-[30px] ">
{details.length > 0 ? details.map((detail: AboutType) =>
(<>
<div className="description">
<h1 className="capitalize text-6xl font-bold mb-2">{ detail.title }</h1>
<p className="w-[400px] lg:w-[450px] xl:w-[600px]">{ detail.desc }</p>
<h1 className="switch-text-color capitalize text-6xl font-bold mb-2">{ detail.title }</h1>
<p className="switch-text-color w-[400px] lg:w-[450px] xl:w-[600px]">{ detail.desc }</p>
</div>
<div className="details flex">
<div className="labels flex flex-col gap-2">
Expand All @@ -84,11 +84,11 @@ const Home = async () => {
</div>
</section>

<section id="stack" className="bg-black relative px-[30px] lg:px-[50px] xl:px-[100px] 2xl:px-[200px] py-[100px] flex flex-col justify-between items-center">
<section id="stack" className="bg-gray-300 dark:bg-black relative px-[30px] lg:px-[50px] xl:px-[100px] 2xl:px-[200px] py-[100px] flex flex-col justify-between items-center">
<div className="content w-full flex flex-col items-center gap-[100px]">
<div className="title flex flex-col items-center ">
<h1 className=" text-6xl font-bold mb-[15px] " >Stacks</h1>
<p className="text-center w-[400px]" >All of my current technology stack that I really enjoy using. Looking forward to learn more.</p>
<div className="title flex flex-col items-center ">
<h1 className="switch-text-color text-6xl font-bold mb-[15px] " >Stacks</h1>
<p className="switch-text-color text-center w-[400px]" >All of my current technology stack that I really enjoy using. Looking forward to learn more.</p>
</div>
<div className="stacks grid grid-cols-5 sm:grid-cols-6 lg:grid-cols-7 gap-2">
<StackIcon href={"https://www.javascript.com/"} src={"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg"} alt={"javascript logo"} />
Expand All @@ -109,18 +109,18 @@ const Home = async () => {
</div>
</section>

<section id="project" className="relative bg-deep-koamaru px-[30px] lg:px-[50px] xl:px-[100px] 2xl:px-[200px] py-[100px] flex flex-col justify-between items-center">
<section id="project" className="relative px-[30px] lg:px-[50px] xl:px-[100px] 2xl:px-[200px] py-[100px] flex flex-col justify-between items-center">
<div className="content w-full flex flex-col items-center gap-[150px]">
<div className="title flex flex-col items-center ">
<h1 className=" text-6xl font-bold mb-[15px] " >Projects</h1>
<p className="text-center w-[400px]" >These are the projects I made all throughout my coding career. I am happy to present it to you.</p>
<h1 className="switch-text-color text-6xl font-bold mb-[15px] " >Projects</h1>
<p className="switch-text-color text-center w-[400px]" >These are the projects I made all throughout my coding career. I am happy to present it to you.</p>
</div>
<div className="projects flex flex-col gap-[100px]">
<div className="flex flex-col premium:flex-row-reverse gap-[15px] ">
<img src={ `${process.env.API_TSUKIWA}` } className="w-[400px] h-[220px] md:w-[640px] md:h-[480px] lg:w-[800px] lg:h-[400px] object-contain rounded-lg" />
<div className="description">
<li className="text-3xl md:text-4xl lg:text-5xl font-bold mb-2 " >tsukiwa</li>
<p className="w-[400px] md:w-[600px]">
<li className="switch-text-color text-3xl md:text-4xl lg:text-5xl font-bold mb-2 " >tsukiwa</li>
<p className="switch-text-color w-[400px] md:w-[600px]">
A place where your “Waifus” matter. This is a website that you can rank, rate, organize and flex your waifus all over the world. This is still currently in designing phase because of my schedule being strict to my academics and gaming. But, I swear that this will be in production once I get free time.
<br /><br />
You can visit the GitHub repository <Link href="https://github.com/MoonbamiOfficial/tsukiwa-web.git" target='_blank' className="text-blue-400">here</Link>.
Expand All @@ -130,8 +130,8 @@ const Home = async () => {
<div className="flex flex-col premium:flex-row-reverse gap-[15px] ">
<video src={ `${process.env.API_REALPOP}` } muted autoPlay className="w-[400px] h-[220px] md:w-[640px] md:h-[480px] lg:w-[800px] lg:h-[400px] object-contain rounded-lg" />
<div className="description">
<li className="text-3xl md:text-4xl lg:text-5xl font-bold mb-2 " >Realpop</li>
<p className="w-[400px] md:w-[600px]">
<li className="switch-text-color text-3xl md:text-4xl lg:text-5xl font-bold mb-2 " >Realpop</li>
<p className="switch-text-color w-[400px] md:w-[600px]">
An online store of K-Pop photocards. This is an e-commerce website that are dedicated for photocards. This is a school project from my subject called DCIT 26. This is soon going to be in production so if you have any questions, please wait for its release.
<br /><br />
You can visit the GitHub repository <Link href="https://github.com/MoonbamiOfficial/realpop-web.git" target='_blank' className="text-blue-400">here</Link>.
Expand All @@ -141,8 +141,8 @@ const Home = async () => {
<div className="flex flex-col premium:flex-row-reverse gap-[15px] ">
<img src={ `${process.env.API_SPA}` } className="w-[400px] h-[220px] md:w-[640px] md:h-[480px] lg:w-[800px] lg:h-[400px] object-contain rounded-lg" />
<div className="description">
<li className="text-3xl md:text-4xl lg:text-5xl font-bold mb-2 " >Student Portal App</li>
<p className="w-[400px] md:w-[600px]">
<li className="switch-text-color text-3xl md:text-4xl lg:text-5xl font-bold mb-2 " >Student Portal App</li>
<p className="switch-text-color w-[400px] md:w-[600px]">
This is another school project from my subject called ITEC 80. It’s a software for students to monitor their academics. This is a team project so I didn’t do all of these by myself, special thanks to my members!
<br /><br />
You can visit the GitHub repository <Link href="https://github.com/MoonbamiOfficial/student-portal-app.git" target='_blank' className="text-blue-400">here</Link>.
Expand All @@ -161,8 +161,8 @@ const Home = async () => {
<Image src={ lost } alt="" style={{ width: '100%', height: '500px' }} className=" object-cover absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] -z-50 opacity-[0.3] " />
<div className="content flex flex-col items-center gap-[30px]">
<div className="title flex flex-col items-center">
<h1 className=" text-6xl font-bold mb-[15px] " >Contact Me</h1>
<p className="text-center w-[400px]" >If you have any concerns, questions or if you just want to be friends with me. Please, contact me to any of these that you prefer.</p>
<h1 className="switch-text-color text-6xl font-bold mb-[15px] " >Contact Me</h1>
<p className="switch-text-color text-center w-[400px]" >If you have any concerns, questions or if you just want to be friends with me. Please, contact me to any of these that you prefer.</p>
</div>
<hr className="w-full" />
<div className=" socmeds grid grid-cols-2 gap-[30px]">
Expand All @@ -172,7 +172,7 @@ const Home = async () => {
<SocMed href={"https://github.com/MoonbamiOfficial"} src={ GitHubLogo } text={"GitHub"} />
</div>
<hr className="w-full" />
<p className="last-phrase text-center w-[400px] ">I do have more social media accounts but these are my commonly used ones.</p>
<p className="switch-text-color last-phrase text-center w-[400px] ">I do have more social media accounts but these are my commonly used ones.</p>
</div>
</section>
</div>
Expand All @@ -184,7 +184,7 @@ const SocMed = (props: Props) => {
return (
<Link href={ props.href } className="flex items-center gap-2">
<Image src={ props.src } alt="" className="w-[50px]" />
<p className="font-bold text-xl capitalize">{ props.text } </p>
<p className="switch-text-color font-bold text-xl capitalize">{ props.text } </p>
</Link>
)
}
Expand Down
14 changes: 14 additions & 0 deletions app/providers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
'use client'

import { ThemeProvider } from "next-themes"


const Providers = ({ children }: { children: React.ReactNode }) => {
return (
<ThemeProvider attribute="class" enableSystem defaultTheme="system" >
{ children }
</ThemeProvider>
)
}

export default Providers
8 changes: 5 additions & 3 deletions components/BackToTop.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,11 @@ const BackToTop = (props: Props) => {
return () => window.removeEventListener('scroll', handleBackToTop)
}, [])
return (
<button onClick={() => handleScrollIntoView( `${ props.id }`)} className={`${ backToTop } fixed text-4xl md:text-5xl z-[100] right-8 sm:right-12 sm:bottom-12 bottom-8 lg:right-24 lg:bottom-16 flex flex-col items-center gap-2 animate-bounce transition-all`}>
<IoIosArrowDropupCircle />
<h1 className="text-base hidden lg:block ">Back to Top</h1>
<button onClick={() => handleScrollIntoView( `${ props.id }`)} className={`${ backToTop } fixed text-4xl md:text-5xl z-[100] right-8 sm:right-12 sm:bottom-12 bottom-8 lg:right-24 lg:bottom-16 flex flex-col items-center gap-2 animate-bounce transition-all`}>
<div className="rounded-full bg-black dark:bg-transparent">
<IoIosArrowDropupCircle />
</div>
<h1 className=" text-black dark:text-white text-base hidden lg:block ">Back to Top</h1>
</button>
)
}
Expand Down
4 changes: 2 additions & 2 deletions components/Detail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ const Detail = (props: Props) => {
<>
<div key={ props._id } className="details flex">
<div className="label flex">
<span className="capitalize w-[115px] ">{ props.label }</span>
<span className="switch-text-color capitalize w-[115px] ">{ props.label }</span>
<span>: &#160;</span>
</div>
<span className="capitalize flex flex-wrap w-[200px] lg:w-[300px] xl:w-[400px]">{ props.detail }</span>
<span className="switch-text-color capitalize flex flex-wrap w-[200px] lg:w-[300px] xl:w-[400px]">{ props.detail }</span>
</div>
</>
)
Expand Down
10 changes: 7 additions & 3 deletions components/ScrollForMore.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
'use client'

import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'
import { FaCaretDown } from 'react-icons/fa'
import { FaCaretDown } from "react-icons/fa6";

const ScrollForMore = () => {
const { setTheme, resolvedTheme } = useTheme()
const [ scrollSign, setScrollSign ] = useState("opacity-100")

const handleScrollSign = () => {
Expand All @@ -17,8 +19,10 @@ const ScrollForMore = () => {
}, [])
return (
<div id="scroll-sign" className={`${ scrollSign } flex flex-col items-center gap-1 mb-[30px] animate-bounce transition-opacity`} >
<p>Scroll down for more!</p>
<FaCaretDown />
<p className="switch-text-color">Scroll down for more!</p>
<div className="rounded-full bg-black p-1 dark:bg-transparent">
<FaCaretDown />
</div>
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion components/StayTuned.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const StayTuned = async (props: Props) => {
return (
<div id="" className=" container relative">
<section className="content pb-[300px] mt-[200px] lg:mt-[250px] flex flex-col gap-10 items-center justify-center">
<h1 className="font-bold text-7xl text-center w-[700px]">Please stay tuned for this page!</h1>
<h1 className="switch-text-color font-bold text-7xl text-center w-[700px]">Please stay tuned for this page!</h1>
<img src={`${ props.src }`} alt="" className="w-[300px] h-[300px] object-cover rounded-full" />
</section>
</div>
Expand Down
46 changes: 46 additions & 0 deletions components/ThemeSwitchBtn.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
'use client'

import { useTheme } from "next-themes"
import { MouseEventHandler, ReactNode, useEffect, useState } from "react"
import { BsMoonStars, BsSun } from "react-icons/bs"
import { GiStripedSun } from "react-icons/gi"

type Props = {
onClick?: MouseEventHandler
icon?: ReactNode
}

const ThemeSwitchBtn = () => {
const [ mounted, setMounted ] = useState(false)
const { setTheme, resolvedTheme } = useTheme()

useEffect(() => setMounted(true), [])

if(!mounted)
return (
<Button icon={ <GiStripedSun /> } />
)

if(resolvedTheme === 'dark') {
return (
<Button onClick={() => setTheme('light')} icon={ <BsSun /> } />
)
}

if(resolvedTheme === 'light') {
return (
<Button onClick={() => setTheme('dark')} icon={ <BsMoonStars /> } />
)
}
}

const Button = (props: Props) => {
return (
<button onClick={ props.onClick } className=" rounded-full bg-rich-black hover:bg-electric-pink p-2 text-xl " >
{ props.icon }
</button>
)
}


export default ThemeSwitchBtn
6 changes: 3 additions & 3 deletions components/about/Topic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ type Props = {

const Topic = (props: Props) => {
return (
<div className={`topics flex flex-col ${ props.className } justify-between items-center lg:items-start 2xl:justify-evenly`}>
<div className={`topics switch-text-color flex flex-col ${ props.className } justify-between items-center lg:items-start 2xl:justify-evenly`}>
<Image src={ Earth } alt="image" className="w-[300px] h-[300px] lg:w-[400px] lg:h-[400px] premium:w-[500px] premium:h-[500px] mb-4 object-cover rounded-lg" />
<div className="flex flex-col gap-[30px] ">
<div className="description">
<h1 className="capitalize text-6xl font-bold mb-2">{ props.title }</h1>
<p className="w-[400px] lg:w-[450px] xl:w-[600px]">{ props.desc }</p>
<h1 className="switch-text-color capitalize text-6xl font-bold mb-2">{ props.title }</h1>
<p className="switch-text-color w-[400px] lg:w-[450px] xl:w-[600px]">{ props.desc }</p>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 3c13ecb

Please sign in to comment.