├── .gitignore ├── README.md ├── app ├── contact │ └── page.jsx ├── favicon.ico ├── globals.css ├── layout.jsx ├── page.jsx ├── projectdetails │ └── page.jsx ├── projects │ └── page.jsx └── template.jsx ├── assets ├── arrow.svg ├── discord.svg ├── github.svg ├── icons │ ├── appwrite.svg │ ├── arrow.svg │ ├── backend.png │ ├── car.svg │ ├── contact.svg │ ├── cpp.png │ ├── creator.png │ ├── css.svg │ ├── docker.svg │ ├── estate.svg │ ├── express.svg │ ├── figma.svg │ ├── git.svg │ ├── github.png │ ├── github.svg │ ├── gql.png │ ├── graphQL.svg │ ├── html.svg │ ├── index.js │ ├── javascript.svg │ ├── linkedin.svg │ ├── mobile.png │ ├── mongodb.svg │ ├── motion.svg │ ├── mui.svg │ ├── nextjs.svg │ ├── nodejs.svg │ ├── pricewise.svg │ ├── react.svg │ ├── redis.png │ ├── redis.svg │ ├── redux.svg │ ├── sass.png │ ├── sass.svg │ ├── shadcnui.svg │ ├── snapgram.svg │ ├── soundoff.png │ ├── soundon.png │ ├── summiz.svg │ ├── tailwindcss.svg │ ├── threads.svg │ ├── threejs.svg │ ├── twitter.svg │ ├── typescript.svg │ └── web.png ├── index.js ├── linkedin.svg └── twitter.svg ├── components.json ├── components ├── About.jsx ├── Badge.jsx ├── Cta.jsx ├── DevImg.jsx ├── Footer.jsx ├── Form.jsx ├── Header.jsx ├── Hero.jsx ├── Logo.jsx ├── MobileNav.jsx ├── Nav.jsx ├── Poster.jsx ├── ProjectCard.jsx ├── Reviews.jsx ├── Socials.jsx ├── ThemeProvider.jsx ├── ThemeToggler.jsx ├── Work.jsx └── ui │ ├── Services.jsx │ ├── badge.jsx │ ├── button.jsx │ ├── card.jsx │ ├── form.jsx │ ├── input.jsx │ ├── label.jsx │ ├── sheet.jsx │ ├── tabs.jsx │ └── textarea.jsx ├── constants └── index.js ├── hooks └── useScrollProgress.jsx ├── jsconfig.json ├── lib └── utils.js ├── next-sanity-studio ├── .eslintrc ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── sanity.cli.js ├── sanity.config.js ├── schemaTypes │ └── index.js └── static │ └── .gitkeep ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── about │ ├── dev.png │ ├── developer.png │ ├── docker.svg │ ├── figma.svg │ ├── firebase.svg │ ├── github.svg │ ├── kubernetes.svg │ ├── notion.svg │ ├── redux.svg │ ├── shape-dark.svg │ ├── shape-light.svg │ ├── terminal.svg │ ├── vscode.svg │ └── wordpress.svg ├── contact │ ├── illustration-dark.svg │ └── illustration-light.svg ├── cta │ ├── wave.png │ └── wave.svg ├── cv.pdf ├── dots-dark.svg ├── dots-light.svg ├── hero │ ├── dev.png │ ├── dev1.png │ ├── developer.png │ ├── hero-bg.png │ ├── shape-1.svg │ ├── shape-2-dark.svg │ └── shape-2-light.svg ├── logo.svg ├── next.svg ├── reviews │ ├── avatar-1.png │ ├── avatar-2.png │ ├── avatar-3.png │ ├── avatar-4.png │ ├── avatar-5.png │ └── avatar-6.png ├── vercel.svg └── work │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── project-bg-dark.png │ └── project-bg-light.png └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Screenshots 4 | 5 | ![Screenshot (401)](https://github.com/premvarma2002/nextjs-shadcn.ui-portfolio/assets/98645019/c6c30a29-bef3-4222-ac7d-7a6058cd0c5c) 6 | ![image](https://github.com/premvarma2002/nextjs-shadcn.ui-portfolio/assets/98645019/d873ec16-00ef-425e-a0c0-36bde7849b41) 7 | ![image](https://github.com/premvarma2002/nextjs-shadcn.ui-portfolio/assets/98645019/81b88543-b926-4a84-a152-43077362b634) 8 | 9 | ## Getting Started 10 | 11 | First, run the development server: 12 | 13 | 14 | npm run dev 15 | # or 16 | yarn dev 17 | # or 18 | pnpm dev 19 | # or 20 | bun dev 21 | ``` 22 | 23 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 24 | 25 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. 26 | 27 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 28 | 29 | ## Learn More 30 | 31 | To learn more about Next.js, take a look at the following resources: 32 | 33 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 34 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 35 | 36 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 37 | 38 | ## Deploy on Vercel 39 | 40 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 41 | 42 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 43 | -------------------------------------------------------------------------------- /app/contact/page.jsx: -------------------------------------------------------------------------------- 1 | import { MailIcon, HomeIcon, PhoneCall } from "lucide-react"; 2 | import Form from "@/components/Form"; 3 | 4 | const Contact = () => { 5 | return ( 6 |
7 | 8 |
9 | {/* Text & Illustration */} 10 |
11 | {/* text */} 12 |
13 |
14 | 15 | Say Hello 👋 16 |
17 |

Lets's Work Together.

18 |

19 | I’m always open to new opportunities and collaborations. Contact me via email, phone, or social media. I look forward to hearing from you soon. 😊 20 |

21 |
22 | {/* illustration */} 23 |
24 |
25 | {/* info text & form */} 26 |
27 | {/* info text */} 28 |
29 | {/* mail */} 30 |
31 | 32 |
vakilverma1982@gmail.com
33 |
34 | {/* address */} 35 |
36 | 37 |
38 | Warur Road, Near Talathi office , Tehsil rajura , Dist 39 | chandrapur 40 |
41 |
42 | {/* phone */} 43 |
44 | 45 |
+91 951 187 2298
46 |
47 |
48 |
49 |
50 |
51 | 52 |
53 | ); 54 | }; 55 | 56 | export default Contact; 57 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/premvarma2002/nextjs-shadcn.ui-portfolio/49f3357d3e094d839bd38659d62276ca64b66588/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | 6 | /* to remove scrollbar */ 7 | body::-webkit-scrollbar { 8 | display: none; 9 | } 10 | 11 | @layer base { 12 | 13 | @layer base { 14 | :root { 15 | --background: 0 0% 100%; 16 | --foreground: 240 19% 16%; 17 | --card: 0 0% 100%; 18 | --card-foreground: 240 19% 16%; 19 | --popover: 0 0% 100%; 20 | --popover-foreground: 240 10% 3.9%; 21 | --primary: 8 99% 67%; 22 | --primary-foreground: 300 0% 100%; 23 | --secondary: 240 19% 16%; 24 | --secondary-foreground: 300 0% 100%; 25 | --tertiary: 27 82% 98%; 26 | --muted: 240 4.8% 95.9%; 27 | --muted-foreground: 237 13% 40%; 28 | --accent: 237 9% 96%; 29 | --accent-foreground: 240 5.9% 10%; 30 | --destructive: 0 84.2% 60.2%; 31 | --destructive-foreground: 0 0% 98%; 32 | --border: 8 82% 92%; 33 | --input: 8 82% 92%; 34 | --ring: 9 99% 67%; 35 | --radius: 0.5rem; 36 | } 37 | 38 | .dark { 39 | --background: 237 22% 28%; 40 | --foreground: 60 9.1% 97.8%; 41 | --card: 240 19% 16%; 42 | --card-foreground:300 0% 100%; 43 | --popover: 20 14.3% 4.1%; 44 | --popover-foreground: 60 9.1% 97.8%; 45 | --primary: 8 99% 67%; 46 | --primary-foreground: 300 0% 100%; 47 | --secondary: 240 19% 16%; 48 | --secondary-foreground: 300 0% 100%; 49 | --tertiary: 237 22% 20%; 50 | --muted: 12 6.5% 15.1%; 51 | --muted-foreground: 237 13% 63%; 52 | --accent: 240 19% 16%; 53 | --accent-foreground:300 0% 100%; 54 | --destructive: 0 72.2% 50.6%; 55 | --destructive-foreground: 60 9.1% 97.8%; 56 | --border: 237 22% 20%; 57 | --input: 237 22% 20%; 58 | --ring: 8 99% 67%; 59 | } 60 | } 61 | 62 | } 63 | @layer base { 64 | * { 65 | @apply border-border; 66 | } 67 | body { 68 | @apply bg-background text-foreground; 69 | } 70 | } 71 | 72 | .h1{ 73 | @apply text-6xl xl:text-[72px] xl:leading-[80px] tracking-[-2px] font-bold; 74 | } 75 | 76 | .h2 { 77 | @apply text-2xl font-bold; 78 | } 79 | .h3 { 80 | @apply text-3xl font-bold; 81 | } 82 | 83 | .h4 { 84 | @apply text-4xl font-semibold; 85 | } 86 | 87 | .subtitle { 88 | @apply text-muted-foreground text-lg mb-8 font-light text-center xl:text-left; 89 | } 90 | 91 | .section-title { 92 | @apply text-4xl font-bold relative w-max flex items-center justify-between gap-x-3 before:bg-dots_light before:dark:bg-dots_dark before:bg-no-repeat before:bg-center before:w-[24px] before:h-[24px]; 93 | } 94 | 95 | .badge { 96 | @apply z-10 w-[200px] h-[68px] bg-white dark:backdrop-blur-[44px] shadow-2xl p-4 rounded-[10px] flex items-center gap-x-4 ; 97 | } 98 | 99 | /* swiper bullets styles */ 100 | .swiper-horizontal > .section-pagination-bullets .swiper-pagination-bullet, 101 | .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { 102 | @apply bg-primary; 103 | } -------------------------------------------------------------------------------- /app/layout.jsx: -------------------------------------------------------------------------------- 1 | import { Outfit } from "next/font/google"; 2 | import "./globals.css"; 3 | 4 | // components 5 | import Header from "@/components/Header"; 6 | import Footer from "@/components/Footer"; 7 | // ThemeProvider 8 | import { ThemeProvider } from "@/components/ThemeProvider"; 9 | 10 | const outfit = Outfit({ subsets: ["latin"] }); 11 | 12 | export const metadata = { 13 | title: "Portfolio", 14 | description: "Generated by create next app", 15 | }; 16 | 17 | export default function RootLayout({ children }) { 18 | return ( 19 | 20 | 21 | 22 |
23 | {children} 24 |