Skip to content

Revamp Portfolio with Animations and SEO Improvements #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
google-labs-jules wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Revamp Portfolio with Animations and SEO Improvements #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
*.log

# env files (can opt-in for committing if needed)
.env*
Expand Down
11 changes: 2 additions & 9 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
@import "tailwindcss";

:root {
--background: #ffffff;
--foreground: #171717;
--background: #121212;
--foreground: #f5f5f5;
}

@theme inline {
Expand All @@ -13,13 +13,6 @@
--font-mono: "Mozilla Text", monospace;
}

@media (prefers-color-scheme: dark) {
:root {
--background: #1e1e1e;
--foreground: #ededed;
}
}

body {
background: var(--background);
color: var(--foreground);
Expand Down
59 changes: 43 additions & 16 deletions app/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,66 @@ import Achievements from "@/components/Achievements";
import Education from "@/components/Education";
import Experience from "@/components/Experience";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Projects from "@/components/Projects";
import Skills from "@/components/Skills";
import Hero from "@/components/Hero";
import Section from "@/components/Section";

export const metadata = {
title:
"Kuldeep Solanki - Full Stack Developer Portfolio | React.js, Node.js, Next.js",
title: "Kuldeep Solanki - Full Stack Developer",
description:
"Professional portfolio showcasing full stack web development projects by Kuldeep Solanki. Expertise in React.js, Next.js, Node.js, Express.js, MongoDB, and modern web technologies. Available for hire in India.",
"Welcome to the portfolio of Kuldeep Solanki, a full stack developer specializing in React, Next.js, and Node.js. Explore my projects, skills, and experience.",
keywords: [
"Kuldeep Solanki",
"Full Stack Developer",
"React Developer",
"Next.js Developer",
"Node.js Developer",
"Portfolio",
"Web Developer India",
],
openGraph: {
title:
"Kuldeep Solanki - Full Stack Developer Portfolio | React.js, Node.js, Next.js",
title: "Kuldeep Solanki - Full Stack Developer Portfolio",
description:
"Professional portfolio showcasing full stack web development projects by Kuldeep Solanki. Expertise in React.js, Next.js, Node.js, Express.js, MongoDB, and modern web technologies.",
"Explore the work of Kuldeep Solanki, a full stack developer with expertise in modern web technologies.",
images: [
{
url: "/og-image.jpg",
width: 1200,
height: 630,
alt: "Kuldeep Solanki Portfolio",
},
],
},
twitter: {
title:
"Kuldeep Solanki - Full Stack Developer Portfolio | React.js, Node.js, Next.js",
card: "summary_large_image",
title: "Kuldeep Solanki - Full Stack Developer Portfolio",
description:
"Professional portfolio showcasing full stack web development projects by Kuldeep Solanki. Expertise in React.js, Next.js, Node.js, Express.js, MongoDB, and modern web technologies.",
"Check out my portfolio! As a full stack developer, I build modern, user-focused web applications.",
images: ["/twitter-image.jpg"],
},
};

const Home = () => {
return (
<>
<Header />
<Hero />
<main>
<Skills />
<Experience />
<Projects />
<Education />
<Achievements />
<Section>
<Skills />
</Section>
<Section>
<Experience />
</Section>
<Section>
<Projects />
</Section>
<Section>
<Education />
</Section>
<Section>
<Achievements />
</Section>
</main>
<Footer />
</>
Expand Down
83 changes: 0 additions & 83 deletions components/Header.js
View file
Open in desktop

This file was deleted.

116 changes: 116 additions & 0 deletions components/Hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
"use client";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Sphere, MeshDistortMaterial } from "@react-three/drei";
import Image from "next/image";
import { HiDocumentDownload as ResumeIcon } from "react-icons/hi";
import { MdLocationOn as LocationIcon } from "react-icons/md";
import {
FaGithub as GithubIcon,
FaLinkedin as LinkedinIcon,
FaTwitter as TwitterIcon,
} from "react-icons/fa";

const Hero = () => {
return (
<div className="h-screen relative text-white">
<div className="absolute top-0 left-0 w-full h-full z-10 p-5">
<header className="flex flex-col gap-5">
<div className="flex flex-row gap-4 items-center">
<div className="hidden sm:flex justify-center items-center min-w-[50px]">
<Image
src="/portrait.jpg"
width={100}
height={100}
alt="portrait"
className="object-cover rounded-3xl border-2 border-[#b7b7b7]"
quality={100}
/>
</div>
<div className="text flex flex-col gap-2 w-full">
<h1 className="text-xl sm:text-2xl font-semibold">
Hey there, I'm Kuldeep Solanki!
</h1>
<p className="text-sm text-[#b7b7b7] flex items-center gap-1">
<LocationIcon />
<span>Gujarat, India</span>
</p>
<div className="flex flex-row gap-3 text-sm text-[#b7b7b7]">
<a
className="flex flex-row items-center gap-1 cursor-pointer hover:text-white transition-colors"
href="/Kuldeep-Solanki-Resume.pdf"
rel="noopener noreferrer"
download
>
<ResumeIcon />
<p>Resume</p>
</a>
<a
className="flex flex-row items-center gap-1 cursor-pointer hover:text-white transition-colors"
href="https://github.com/kuldp18"
rel="noopener noreferrer"
target="_blank"
>
<GithubIcon />
<p>Github</p>
</a>
<a
className="flex flex-row items-center gap-1 cursor-pointer hover:text-white transition-colors"
href="https://www.linkedin.com/in/ksolanki8"
rel="noopener noreferrer"
target="_blank"
>
<LinkedinIcon />
<p>Linkedin</p>
</a>
<a
className="flex flex-row items-center gap-1 cursor-pointer hover:text-white transition-colors"
href="https://x.com/itskuldeep8"
rel="noopener noreferrer"
target="_blank"
>
<TwitterIcon />
<p>Twitter</p>
</a>
</div>
</div>
</div>
<div className="text-justify text-[#b7b7b7] text-[12px] md:text-[16px]">
<p>
Full-Stack Web Developer with a passion for building practical,
user-focused web applications that solve real-world problems.
</p>
</div>
</header>
<div className="flex flex-col items-center justify-center h-[calc(100%-180px)]">
<h1 className="text-6xl font-bold">Kuldeep Solanki</h1>
<p className="text-2xl mt-4">Full Stack Developer</p>
<button
className="mt-8 px-6 py-3 bg-purple-600 rounded-full text-lg hover:bg-purple-700 transition-colors"
onClick={() =>
document
.querySelector("main")
.scrollIntoView({ behavior: "smooth" })
}
>
Learn More
</button>
</div>
</div>
<Canvas>
<OrbitControls enableZoom={false} autoRotate />
<ambientLight intensity={1} />
<directionalLight position={[3, 2, 1]} />
<Sphere args={[1, 100, 200]} scale={2.4}>
<MeshDistortMaterial
color="#3d1c56"
attach="material"
distort={0.5}
speed={2}
/>
</Sphere>
</Canvas>
</div>
);
};

export default Hero;
18 changes: 18 additions & 0 deletions components/Section.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
"use client";
import { motion } from "framer-motion";

const Section = ({ children }) => {
return (
<motion.section
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="my-10"
>
{children}
</motion.section>
);
};

export default Section;
Loading