Skip to content

Commit

Permalink
edited homepage to add pics
Browse files Browse the repository at this point in the history
  • Loading branch information
krishna8421 committed Apr 21, 2024
1 parent aeaa74a commit f3cc861
Show file tree
Hide file tree
Showing 12 changed files with 150 additions and 25 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@gsap/react": "^2.1.0",
"@headlessui/react": "^1.7.19",
"@heroicons/react": "^2.1.3",
"@nextui-org/react": "^2.2.10",
Expand All @@ -29,6 +30,7 @@
"react-dom": "^18",
"react-icons": "^5.0.1",
"react-pdf": "^7.7.1",
"react-simple-typewriter": "^5.0.1",
"sonner": "^1.4.41",
"tailwind-merge": "^2.2.2",
"validator": "^13.11.0",
Expand Down
24 changes: 24 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added public/assets/controller.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/cup.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/girl.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/vr.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
<body
className={`${GeistSans.className} antialiased bg-black text-white`}
>
<HeroHighlight className="w-3xl">
<HeroHighlight>
<Providers>
<main className="max-w-4xl w-full min-h-screen mx-auto flex flex-col justify-between">
<NavBar />
Expand Down
109 changes: 94 additions & 15 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,108 @@
"use client";

import { syncopate } from "@/fonts";
import { syncopate, caveat, rockSalt } from "@/fonts";
import Image from "next/image";
import { IProject, PROJECTS } from "@/constants";
import { IProject, PROJECTS, IProjectCategory } from "@/constants";
import Link from "next/link";
import { motion, useScroll, useTransform, MotionValue } from "framer-motion";
import { useRef, useState } from "react";
import { useRef, useState, useEffect } from "react";
import { FaReact } from "react-icons/fa";
import { useGSAP } from "@gsap/react";
import { gsap } from "gsap";
import { Typewriter } from "react-simple-typewriter";
import { TfiLinkedin } from "react-icons/tfi";
import { MdEmail } from "react-icons/md";

export default function HomePage() {
const name = "Apoorva";
const myRoles = ["3D Artist", "XR Designer", "UX Specialist"];

// const featuredProjects: Record<IProjectCategory, IProject | undefined> = {
// "3D": PROJECTS.find((project) => project.category === "3D"),
// "UX/XR": PROJECTS.find((project) => project.category === "UX/XR"),
// Graphics: PROJECTS.find((project) => project.category === "Graphics"),
// };

// const renderFeaturedProjects = () => {
// return Object.values(featuredProjects).map((project, index) => {
// if (!project) return null;
// return <div key={index} className=""></div>;
// });
// };

return (
<main className="">
<section className="px-2 mt-32">
<h1
className={`${syncopate.className} text-5xl md:text-8xl text-center`}
>
Apoorva Kumari
</h1>
<p
className={`${syncopate.className} text-xm sm:text-md md:text-xl text-gray-100 text-center mt-4 md:mt-6`}
>
3D Artist | XR Designer | UX Specialist
</p>
<section className="flex md:flex-row flex-col gap-32 md:gap-8 px-12 pt-24 min-h-[calc(90vh-56px)]">
<div className="flex-1 md:mt-24 space-y-6">
<span className="text-xl text-gray-300">Hey there, It&apos;s</span>
<h1 className={`text-6xl font-bold ${syncopate.className}`}>
{name}
</h1>
<h3 className={`text-2xl text-gray-200 ${rockSalt.className}`}>
<Typewriter
cursor
cursorBlinking
delaySpeed={1000}
deleteSpeed={25}
loop={0}
typeSpeed={75}
words={myRoles}
/>
</h3>
<div>
<Link
href="/contact"
className="underline underline-offset-4 text-sm"
>
Get in touch -&gt;
</Link>
</div>
</div>
<div className="flex-1 relative">
<Image
src="/assets/girl.png"
alt="Girl Image"
width={400}
height={400}
className="rounded-full shadow-2xl"
/>
<motion.div className="absolute -top-8 -left-20 md:-top-16 md:-left-20 animate-float">
<Image
src="/assets/controller.png"
alt="Controller Image"
width={230}
height={230}
/>
</motion.div>
<motion.div className="absolute -top-16 -right-8 md:-top-24 md:-right-8 animate-float">
<Image
src="/assets/cup.png"
alt="Cup Image"
width={250}
height={250}
/>
</motion.div>
<motion.div className="absolute top-20 -right-16 md:top-20 md:-right-36 animate-float">
<Image
src="/assets/vr.png"
alt="VR Image"
width={200}
height={200}
/>
</motion.div>
</div>
</section>
<div className="h-96"></div>

{/* <section className="flex justify-center">
<p className="text-gray-200 text-center max-w-2xl">
🎨 As a 3D Artist, XR Designer, and UX Specialist, I dive into the
realm of immersive experiences with fervor! I thrive on crafting
interactive wonders that defy the limits of technology, sculpting
worlds where imagination knows no bounds. 🚀
</p>
</section> */}

{/* <section className="px-12 py-24">{renderFeaturedProjects()}</section> */}
</main>
);
}
2 changes: 1 addition & 1 deletion src/components/hero-highlight.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const HeroHighlight = ({
className={cn("relative w-full group", containerClassName)}
onMouseMove={handleMouseMove}
>
<div className="absolute inset-0 bg-dot-thick-neutral-900 pointer-events-none" />
<div className="absolute inset-0 bg-dot-thick-neutral-900 pointer-events-none" />
<motion.div
className="pointer-events-none bg-dot-thick-indigo-800 absolute inset-0 opacity-0 transition duration-300 group-hover:opacity-100"
style={{
Expand Down
9 changes: 4 additions & 5 deletions src/components/navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
"use client";
import { motion } from "framer-motion";
import { color, motion } from "framer-motion";
import Link from "next/link";

const NavBar = () => {
const LiClassName =
"hover:underline hover:underline-offset-4 transition-colors duration-200";
const LiClassName = "hover:underline hover:underline-offset-4";
const whileHover = { scale: 1.1 };
const transition = { type: "spring", stiffness: 300, duration: 0.5 };
const transition = { type: "spring", stiffness: 500, duration: 0.1 };
const initial = { opacity: 0, y: -10 };
const animate = { opacity: 1, y: 0 };

Expand All @@ -23,7 +22,7 @@ const NavBar = () => {
<Link href="/">
<span className="font-bold">apoorva</span>
</Link>
<ul className="flex gap-6">
<ul className="flex gap-8">
<Link href="/">
<motion.li
className={LiClassName}
Expand Down
12 changes: 11 additions & 1 deletion src/fonts/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
import { Syncopate } from "next/font/google";
import { Syncopate, Caveat, Rock_Salt } from "next/font/google";

export const syncopate = Syncopate({
weight: "700",
subsets: ["latin"],
});

export const caveat = Caveat({
weight: "400",
subsets: ["latin"],
});

export const rockSalt = Rock_Salt({
weight: "400",
subsets: ["latin"],
});
15 changes: 13 additions & 2 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Config } from "tailwindcss";
import { type Config } from "tailwindcss";
import svgToDataUri from "mini-svg-data-uri";
import { nextui } from "@nextui-org/react";
import tailwindForms from "@tailwindcss/forms";
Expand All @@ -13,7 +13,18 @@ const config: Config = {
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
extend: {
keyframes: {
float: {
"0%": { transform: "translateY(0px)" },
"50%": { transform: "translateY(-2px)" },
"100%": { transform: "translateY(0px)" },
},
},
animation: {
float: "float 2s ease-in-out infinite",
},
},
},
darkMode: "class",
plugins: [
Expand Down

0 comments on commit f3cc861

Please sign in to comment.