Skip to content

Commit

Permalink
feat: make page updates and improvements
Browse files Browse the repository at this point in the history 
- add new projects
- add floating contact button
- update page animations
- change toast provider to sonner
- organize project images into `/public/projects` folder
- update next version
  • Loading branch information
@jeremy0x
jeremy0x committed Nov 14, 2024
1 parent 59a3ca0 commit 1371615
Show file tree
Hide file tree
Showing 31 changed files with 508 additions and 207 deletions.
30 changes: 8 additions & 22 deletions app/contact/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
"use client";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from "react-toastify";

import { useState, useEffect } from "react";
import { ImSpinner9 } from "react-icons/im";
import { BiSolidPaperPlane } from "react-icons/bi";
import { motion, AnimatePresence } from "framer-motion";
import { Toaster } from "sonner";

import { handleSubmit } from "@/utils/handleSubmit";
import { fadeInAnimation } from "@/utils/framerAnimations";
import { Blur, InputField, Navbar, Socials } from "@/components";
import ParticlesComponent from "@/components/Particles";

export default function Page() {
const [isLoading, setIsLoading] = useState(false);
Expand All @@ -29,10 +28,12 @@ export default function Page() {
<Blur />
<Navbar />

<ParticlesComponent id="tsparticles" />

<div className="z-10 mx-auto flex flex-col items-center justify-center gap-20 px-2 pb-16 pt-36 sm:px-8 lg:flex-row lg:py-20">
<article className="z-10 grid max-w-2xl flex-1 gap-10 text-center">
<div className="space-y-5">
<h1 className="text-4xl font-extrabold uppercase tracking-widest">
<h1 className="text-3xl font-black uppercase tracking-widest">
Contact
</h1>
<p className="max-w-lg text-sm leading-loose tracking-wider text-gray-400">
Expand All @@ -43,7 +44,7 @@ export default function Page() {
</div>

<div className="grid gap-10 text-sm">
<div className="grid gap-2">
<div className="hidden md:grid md:gap-2">
<h2 className="text-lg font-bold tracking-widest">
Address
</h2>
Expand All @@ -54,13 +55,6 @@ export default function Page() {
<div className="grid gap-2">
<h2 className="text-lg font-bold tracking-widest">Email</h2>
<p className="leading-loose tracking-wider text-gray-400">
<a
href="mailto:[email protected]"
className="underline-offset-2 hover:underline"
>
[email protected]
</a>
<br />
<a
href="mailto:[email protected]"
className="underline-offset-2 hover:underline"
Expand All @@ -77,7 +71,7 @@ export default function Page() {
method="POST"
className="grid w-full max-w-xl flex-1 gap-10 rounded-xl backdrop-blur backdrop-filter md:bg-neutral-900/30 md:p-14 md:shadow-xl"
>
<h1 className="text-center text-2xl font-extrabold uppercase tracking-widest sm:text-4xl">
<h1 className="text-center text-2xl font-black uppercase tracking-widest sm:text-3xl">
Contact Form
</h1>

Expand Down Expand Up @@ -126,15 +120,7 @@ export default function Page() {
)}
</form>

<ToastContainer
position="bottom-right"
theme="dark"
stacked
pauseOnHover
pauseOnFocusLoss
draggable
bodyClassName="font-sans"
/>
<Toaster position="bottom-right" theme="dark" />
</div>

<div className="hidden sm:block">
Expand Down
6 changes: 3 additions & 3 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Hanken_Grotesk } from "next/font/google";
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";

const inter = Inter({ subsets: ["latin"] });
const hankenGrotesk = Hanken_Grotesk({ subsets: ["latin"] });

export const metadata: Metadata = {
title: "Jeremiah Aworetan | Skilled Frontend Developer in Nigeria",
Expand Down Expand Up @@ -47,7 +47,7 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={inter.className}>
<body className={hankenGrotesk.className}>
{children}
<Analytics />
<SpeedInsights />
Expand Down
100 changes: 62 additions & 38 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@ import Image from "next/image";
import { useState } from "react";
import { BsArrowRight } from "react-icons/bs";
import { motion, AnimatePresence } from "framer-motion";
import { FaGithub } from "react-icons/fa";

import ParticlesComponent from "@/components/Particles";
import { Blur, Navbar, Preloader, Socials } from "@/components";
import {
fadeInAnimation,
fadeInFromLeftAnimation,
} from "@/utils/framerAnimations";
Blur,
FloatingContactIcon,
Navbar,
Preloader,
Socials,
} from "@/components";
import { fadeInAnimation } from "@/utils/framerAnimations";

export default function Home() {
const [isLoading, setIsLoading] = useState(true);
Expand All @@ -27,23 +31,21 @@ export default function Home() {
>
<ParticlesComponent id="tsparticles" />
<motion.div className="page-content" {...fadeInAnimation}>
<Navbar animationDelay={4} />
<Navbar />

<Blur />

<motion.div className="z-20 grid gap-2">
<motion.p
{...fadeInAnimation}
transition={{ delay: 1, duration: 1 }}
className="z-10 text-xs font-normal tracking-widest text-gray-400 sm:text-sm"
>
I am
Hey, I&apos;m
</motion.p>

<motion.h1
className="relative z-10 text-7xl font-black tracking-wide sm:text-9xl"
{...fadeInAnimation}
transition={{ delay: 1.5, duration: 1 }}
>
<span className="relative inline-block">
<span className="relative z-10">JEREMY</span>
Expand Down Expand Up @@ -77,51 +79,73 @@ export default function Home() {
<motion.p
className="z-10 text-right text-sm font-medium tracking-wider text-gray-400 sm:text-lg"
{...fadeInAnimation}
transition={{ delay: 2.5, duration: 1.5 }}
>
a frontend developer
</motion.p>

<Link href="/projects">
<motion.div
{...fadeInFromLeftAnimation}
transition={{ delay: 3, duration: 1 }}
className="group relative mt-8 flex w-fit items-center gap-2"
whileHover="hover"
whileFocus="hover"
>
<BsArrowRight className="text-sm text-gray-500 transition-colors group-hover:text-white sm:text-lg" />
<span className="relative">
<span className="text-xs font-medium uppercase tracking-wider text-gray-400 transition-colors group-hover:text-white sm:text-sm">
View Projects
<div className="mt-10 flex items-center justify-between">
<Link href="/projects">
<motion.div
{...fadeInAnimation}
className="group relative flex w-fit items-center gap-2"
whileHover="hover"
whileFocus="hover"
>
<BsArrowRight className="text-sm text-gray-500 transition-colors group-hover:text-white sm:text-lg" />
<span className="relative">
<span className="text-xs font-medium uppercase tracking-wider text-gray-400 transition-colors group-hover:text-white sm:text-sm">
View Projects
</span>
<motion.div
className="absolute bottom-0 left-0 h-[1px] w-full bg-neutral-400"
initial={{ scaleX: 1 }}
variants={{
hover: { scaleX: 0 },
}}
transition={{ duration: 0.3 }}
/>
</span>
</motion.div>
</Link>

<Link href="https://github.com/jeremy0x" target="_blank">
<motion.div
{...fadeInAnimation}
className="group relative flex w-fit items-center gap-2"
whileHover="hover"
whileFocus="hover"
>
<FaGithub className="text-sm text-gray-500 transition-colors group-hover:text-white sm:text-lg" />
<span className="relative">
<span className="text-xs font-medium uppercase tracking-wider text-gray-400 transition-colors group-hover:text-white sm:text-sm">
GitHub
</span>
<motion.div
className="absolute bottom-0 left-0 h-[1px] w-full bg-neutral-400"
initial={{ scaleX: 1 }}
variants={{
hover: { scaleX: 0 },
}}
transition={{ duration: 0.3 }}
/>
</span>
<motion.div
className="absolute bottom-0 left-0 h-[1px] w-full bg-neutral-400"
initial={{ scaleX: 1 }}
variants={{
hover: { scaleX: 0 },
}}
transition={{ duration: 0.3 }}
/>
</span>
</motion.div>
</Link>
</motion.div>
</Link>
</div>
</motion.div>

<motion.div
{...fadeInAnimation}
transition={{ delay: 4, duration: 3 }}
>
<motion.div {...fadeInAnimation}>
<Image
src="/arrow-up.svg"
alt=""
width={0}
height={0}
className="absolute right-4 top-20 w-20 animate-pulse opacity-80 md:right-28"
className="absolute -right-4 top-20 w-20 animate-pulse opacity-80 md:right-10"
/>
</motion.div>

<Socials animationDelay={4} />
<Socials />
<FloatingContactIcon />
</motion.div>
</motion.main>
)}
Expand Down
Loading

0 comments on commit 1371615

Please sign in to comment.