Skip to content

Commit 66a7491

Browse files
jigar-sablejigar-sable
committed
init: codebase added
1 parent 53021cd commit 66a7491

38 files changed

+4260
-485
lines changed

‎.vscode/settings.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"typescript.tsdk": "node_modules\\typescript\\lib",
3+
"typescript.enablePromptUseWorkspaceTsdk": true
4+
}

‎app/Footer.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { social } from "@/types/main";
2+
import { useTheme } from "next-themes";
3+
import Image from "next/image";
4+
import Link from "next/link";
5+
import React from "react";
6+
import * as Fa from 'react-icons/fa';
7+
8+
export default function Footer({ socials, name }: { socials: social[], name: string }) {
9+
10+
const { theme, setTheme } = useTheme()
11+
12+
return (
13+
<footer className="w-full bg-white dark:bg-grey-800 text-gray-500 dark:text-gray-300">
14+
15+
<div className="lg:max-w-6xl mx-auto md:mx-6 lg:mx-auto py-4 lg:py-6 flex flex-col-reverse md:flex-row gap-2 md:gap-0 justify-between items-center">
16+
17+
<p className="text-sm mt-2 md:mt-0">Made with
18+
<span className='animate-pulse'> ❤️ </span>
19+
by
20+
<span className="text-violet-600"> {name}</span></p>
21+
22+
<div className="hidden lg:flex items-center gap-2">
23+
<Link href={'https://nextjs.org'} target="_blank">
24+
<Image alt="Next.js" width={45} height={45} src="/nextjs.svg" className={`${theme === 'dark' ? 'invert' : 'invert-0'} opacity-80 hover:opacity-100 transition-opacity`} />
25+
</Link>
26+
<p className="text-sm">X</p>
27+
<Link href={'https://vercel.com'} target="_blank">
28+
<Image alt="Tailwind CSS" width={52} height={52} src="/vercel.svg" className={`${theme === 'dark' ? 'invert' : 'invert-0'} opacity-80 hover:opacity-100 transition-opacity`} />
29+
</Link>
30+
</div>
31+
32+
{/* Social Links */}
33+
<div className="flex lg:hidden items-center gap-2">
34+
{socials.map((s: any) => (
35+
<Link href={s.link} target="_blank" rel="noreferrer" key={s.name} className="grid place-items-center p-3 rounded-full text-lg hover:bg-gray-100 hover:dark:bg-grey-900 transition-colors">
36+
{
37+
// @ts-ignore
38+
React.createElement(Fa[`${s.icon}`])
39+
}
40+
</Link>
41+
))}
42+
</div>
43+
44+
</div>
45+
46+
</footer>
47+
)
48+
}

‎app/Header.tsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
'use client';
2+
import { useState, useEffect } from 'react'
3+
import { useTheme } from 'next-themes'
4+
import Link from 'next/link'
5+
import { Link as ScrollLink } from 'react-scroll'
6+
import { FiSun, FiMoon } from 'react-icons/fi'
7+
import { FaNodeJs } from 'react-icons/fa'
8+
import { CgClose, CgMenuRight } from 'react-icons/cg'
9+
10+
export default function Header({ logo }: { logo: string }) {
11+
12+
const [navCollapse, setNavCollapse] = useState(true)
13+
const [scroll, setScroll] = useState(false)
14+
const { theme, setTheme } = useTheme()
15+
16+
useEffect(() => {
17+
const updateScroll = () => {
18+
window.scrollY >= 90 ? setScroll(true) : setScroll(false)
19+
}
20+
window.addEventListener('scroll', updateScroll)
21+
}, [])
22+
23+
const navs = ['home', 'about', 'projects', 'experience', 'contact']
24+
25+
return (
26+
<header className={`backdrop-filter backdrop-blur-lg ${scroll ? 'border-b bg-white bg-opacity-40' : 'border-b-0'} dark:bg-grey-900 dark:bg-opacity-40 border-gray-200 dark:border-b-0 z-30 min-w-full flex flex-col fixed`}>
27+
<nav className="lg:w-4/5 w-full md:px-6 lg:px-0 mx-auto py-4 hidden md:flex items-center justify-between">
28+
29+
<Link href={"/"} className="lg:ml-8 hover:text-violet-700 hover:dark:text-violet-500 transition-colors duration-300">
30+
{logo === "Jigar Sable" ? <FaNodeJs size={28} /> : <span className='text-lg font-medium'>{logo.split(' ')[0]}</span>}
31+
</Link>
32+
33+
<ul className="flex items-center gap-8">
34+
{navs.map((e, i) => (
35+
<li key={i}>
36+
<ScrollLink
37+
className="hover:text-violet-700 hover:dark:text-violet-500 transition-colors capitalize cursor-pointer"
38+
to={e}
39+
offset={-60}
40+
smooth={true}
41+
duration={500}
42+
isDynamic={true}
43+
>
44+
{e}
45+
</ScrollLink>
46+
</li>
47+
))}
48+
<div
49+
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
50+
className="hover:bg-gray-100 hover:dark:bg-violet-700 p-1.5 rounded-full cursor-pointer transition-colors">
51+
{theme === 'dark' ? <FiSun /> : <FiMoon />}
52+
</div>
53+
</ul>
54+
</nav>
55+
56+
<nav className='p-4 flex sm:hidden items-center justify-between'>
57+
{logo === "Jigar Sable" ? <FaNodeJs size={28} /> : <span className='text-lg font-medium'>{logo.split(' ')[0]}</span>}
58+
<div className="flex items-center gap-4">
59+
<div
60+
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
61+
className="bg-gray-100 dark:bg-violet-700 p-1.5 rounded-full cursor-pointer transition-colors">
62+
{theme === 'dark' ? <FiSun /> : <FiMoon />}
63+
</div>
64+
<CgMenuRight size={20} onClick={() => setNavCollapse(false)} />
65+
</div>
66+
</nav>
67+
<div className={
68+
!navCollapse ? "min-h-screen absolute flex flex-col p-4 gap-5 md:hidden top-0 right-0 bottom-0 bg-gray-100/95 backdrop-filter backdrop-blur-sm dark:bg-grey-900/95 z-50 w-3/4 ease-in duration-300" :
69+
"min-h-screen absolute flex flex-col p-4 gap-5 md:hidden top-0 right-[-100%] bottom-0 bg-gray-100/95 backdrop-filter backdrop-blur-sm dark:bg-grey-900/95 z-50 w-3/4 ease-in duration-300"}>
70+
<CgClose className="self-end my-2" size={20} onClick={() => setNavCollapse(true)} />
71+
72+
{navs.slice(0, 4).map((e) => (
73+
<ScrollLink
74+
key={e}
75+
className="hover:text-purple-600 py-1.5 px-4 rounded transition-colors capitalize cursor-pointer"
76+
to={e}
77+
offset={-60}
78+
smooth={true}
79+
duration={500}
80+
isDynamic={true}
81+
onClick={() => setNavCollapse(true)}
82+
>
83+
{e}
84+
</ScrollLink>
85+
))}
86+
<ScrollLink
87+
to="contact"
88+
offset={-60}
89+
smooth={true}
90+
duration={500}
91+
onClick={() => setNavCollapse(true)}
92+
className="px-6 py-1.5 rounded-md bg-violet-600 hover:bg-violet-700 text-white text-center">
93+
Contact
94+
</ScrollLink>
95+
</div>
96+
97+
</header>
98+
)
99+
}

‎app/HomePage.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
'use client';
2+
import { data } from "@/types/main";
3+
import About from "@/components/About";
4+
import Hero from "@/components/Hero";
5+
import Skills from "@/components/skills/Skills";
6+
import Projects from "@/components/projects/Projects";
7+
import Socials from "@/components/Socials";
8+
import Experiences from "@/components/experience/Experiences";
9+
import Contact from "@/components/Contact";
10+
import CallToAction from "@/components/CallToAction";
11+
import Header from "./Header";
12+
import Footer from "./Footer";
13+
14+
interface Props {
15+
data: data,
16+
}
17+
18+
const HomePage = ({ data }: Props) => {
19+
return (
20+
<>
21+
<Header logo={data.main.name} />
22+
<Hero mainData={data.main} />
23+
<Socials socials={data.socials} />
24+
<About aboutData={data.about} name={data.main.name} />
25+
<Skills skillData={data.skills} />
26+
<Projects projectsData={data.projects} />
27+
<Experiences experienceData={data.experiences} educationData={data.educations} />
28+
<Contact />
29+
<CallToAction />
30+
<Footer socials={data.socials} name={data.main.name} />
31+
</>
32+
)
33+
}
34+
35+
export default HomePage

‎app/globals.css

Lines changed: 16 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,31 @@
1-
:root {
2-
--max-width: 1100px;
3-
--border-radius: 12px;
4-
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
5-
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
6-
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
1+
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); */
72

8-
--foreground-rgb: 0, 0, 0;
9-
--background-start-rgb: 214, 219, 220;
10-
--background-end-rgb: 255, 255, 255;
11-
12-
--primary-glow: conic-gradient(
13-
from 180deg at 50% 50%,
14-
#16abff33 0deg,
15-
#0885ff33 55deg,
16-
#54d6ff33 120deg,
17-
#0071ff33 160deg,
18-
transparent 360deg
19-
);
20-
--secondary-glow: radial-gradient(
21-
rgba(255, 255, 255, 1),
22-
rgba(255, 255, 255, 0)
23-
);
24-
25-
--tile-start-rgb: 239, 245, 249;
26-
--tile-end-rgb: 228, 232, 233;
27-
--tile-border: conic-gradient(
28-
#00000080,
29-
#00000040,
30-
#00000030,
31-
#00000020,
32-
#00000010,
33-
#00000010,
34-
#00000080
35-
);
36-
37-
--callout-rgb: 238, 240, 241;
38-
--callout-border-rgb: 172, 175, 176;
39-
--card-rgb: 180, 185, 188;
40-
--card-border-rgb: 131, 134, 135;
41-
}
42-
43-
@media (prefers-color-scheme: dark) {
44-
:root {
45-
--foreground-rgb: 255, 255, 255;
46-
--background-start-rgb: 0, 0, 0;
47-
--background-end-rgb: 0, 0, 0;
48-
49-
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
50-
--secondary-glow: linear-gradient(
51-
to bottom right,
52-
rgba(1, 65, 255, 0),
53-
rgba(1, 65, 255, 0),
54-
rgba(1, 65, 255, 0.3)
55-
);
56-
57-
--tile-start-rgb: 2, 13, 46;
58-
--tile-end-rgb: 2, 5, 19;
59-
--tile-border: conic-gradient(
60-
#ffffff80,
61-
#ffffff40,
62-
#ffffff30,
63-
#ffffff20,
64-
#ffffff10,
65-
#ffffff10,
66-
#ffffff80
67-
);
68-
69-
--callout-rgb: 20, 20, 20;
70-
--callout-border-rgb: 108, 108, 108;
71-
--card-rgb: 100, 100, 100;
72-
--card-border-rgb: 200, 200, 200;
73-
}
74-
}
3+
@tailwind base;
4+
@tailwind components;
5+
@tailwind utilities;
756

767
* {
778
box-sizing: border-box;
789
padding: 0;
7910
margin: 0;
8011
}
8112

82-
html,
83-
body {
84-
max-width: 100vw;
85-
overflow-x: hidden;
13+
html {
14+
scroll-behavior: smooth !important;
8615
}
8716

88-
body {
89-
color: rgb(var(--foreground-rgb));
90-
background: linear-gradient(
91-
to bottom,
92-
transparent,
93-
rgb(var(--background-end-rgb))
94-
)
95-
rgb(var(--background-start-rgb));
17+
/* body {
18+
font-family: "Poppins", sans-serif;
19+
} */
20+
21+
::-webkit-scrollbar {
22+
width: 0.5rem;
9623
}
9724

98-
a {
99-
color: inherit;
100-
text-decoration: none;
25+
::-webkit-scrollbar-thumb {
26+
background-color: #6565656a;
10127
}
10228

103-
@media (prefers-color-scheme: dark) {
104-
html {
105-
color-scheme: dark;
106-
}
29+
.scroll-hide::-webkit-scrollbar {
30+
display: none;
10731
}

‎app/head.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
export default function Head() {
22
return (
33
<>
4-
<title>Create Next App</title>
4+
<title>Portfolio | Jigar Sable - Full Stack Developer</title>
55
<meta content="width=device-width, initial-scale=1" name="viewport" />
6-
<meta name="description" content="Generated by create next app" />
6+
<meta name="description" content="Welcome to Jigar's Portfolio. Full-Stack Developer" />
7+
<meta name="keywords" content="jigar sable, portfolio, jigar, full stack dev, nextjs portfolio, portfolio design, portfolio website, personal portfolio" />
78
<link rel="icon" href="/favicon.ico" />
89
</>
910
)

‎app/layout.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1+
'use client';
12
import './globals.css'
3+
import { Poppins } from '@next/font/google'
4+
import { ThemeProvider } from 'next-themes'
5+
6+
const poppins = Poppins({
7+
subsets: ['latin'],
8+
weight: ['300', '400', '500', '600', '700', '800'],
9+
variable: '--font-poppins'
10+
})
211

312
export default function RootLayout({
413
children,
@@ -7,12 +16,13 @@ export default function RootLayout({
716
}) {
817
return (
918
<html lang="en">
10-
{/*
11-
<head /> will contain the components returned by the nearest parent
12-
head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
13-
*/}
1419
<head />
15-
<body>{children}</body>
20+
<ThemeProvider attribute="class">
21+
<body className={`${poppins.className} font-poppins bg-gray-100/50 dark:bg-grey-900 text-black dark:text-white overflow-x-hidden`}>
22+
{/* <body className='bg-gray-100/50 dark:bg-grey-900 text-black dark:text-white overflow-x-hidden'> */}
23+
{children}
24+
</body>
25+
</ThemeProvider>
1626
</html>
1727
)
1828
}

0 commit comments

Comments
 (0)