├── .eslintrc.json ├── jsconfig.json ├── public ├── dummy.pdf ├── favicon.ico ├── images │ ├── circular-text.png │ ├── projects │ │ ├── devdreaming.jpg │ │ ├── fashion-studio-website.jpg │ │ ├── portfolio-cover-image.jpg │ │ ├── agency-website-cover-image.jpg │ │ ├── crypto-screener-cover-image.jpg │ │ └── nft-collection-website-cover-image.jpg │ ├── profile │ │ ├── developer-pic-1.png │ │ └── developer-pic-2.jpg │ ├── articles │ │ ├── smooth scrolling in reactjs.png │ │ ├── create loading screen in react js.jpg │ │ ├── pagination component in reactjs.jpg │ │ ├── What is Redux with easy explanation.png │ │ ├── What is higher order component in React.jpg │ │ ├── form validation in reactjs using custom react hook.png │ │ ├── create modal component in react using react portals.png │ │ └── todo list app built using react redux and framer motion.png │ └── svgs │ │ ├── external-link.svg │ │ ├── linkedin.svg │ │ ├── twitter.svg │ │ ├── logo-github.svg │ │ ├── pinterest.svg │ │ ├── dribbble-icon.svg │ │ ├── moon-filled-to-sunny-filled-loop-transition.svg │ │ ├── sunny-filled-loop-to-moon-filled-loop-transition.svg │ │ ├── miscellaneous_icons_1.svg │ │ └── CircularText.svg ├── All-Texts │ ├── prompts.txt │ ├── styles.txt │ ├── pages.txt │ └── Icons.txt ├── vercel.svg ├── thirteen.svg └── next.svg ├── next.config.js ├── website images ├── about-light-mobile.png ├── home-dark-desktop.png ├── home-light-desktop.png ├── about-light-desktop.png ├── articles-light-mobile.png ├── home-dark-mobile-full.png ├── projects-dark-desktop.png ├── projects-light-mobile.png └── articles-light-desktop.png ├── src ├── pages │ ├── _app.js │ ├── api │ │ └── hello.js │ ├── _document.js │ └── index.js └── styles │ ├── globals.css │ └── Home.module.css ├── package.json ├── .gitignore ├── .github └── FUNDING.yml └── README.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /public/dummy.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/dummy.pdf -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/images/circular-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/circular-text.png -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /website images/about-light-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/website images/about-light-mobile.png -------------------------------------------------------------------------------- /website images/home-dark-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/website images/home-dark-desktop.png -------------------------------------------------------------------------------- /website images/home-light-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/website images/home-light-desktop.png -------------------------------------------------------------------------------- /public/All-Texts/prompts.txt: -------------------------------------------------------------------------------- 1 | Prompt to generate developer image using midjourney: 2 | 3 | - A developer wearing glasses, digital art, profile picture, white background -------------------------------------------------------------------------------- /public/images/projects/devdreaming.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/projects/devdreaming.jpg -------------------------------------------------------------------------------- /src/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '@/styles/globals.css' 2 | 3 | export default function App({ Component, pageProps }) { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /website images/about-light-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/website images/about-light-desktop.png -------------------------------------------------------------------------------- /website images/articles-light-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/website images/articles-light-mobile.png -------------------------------------------------------------------------------- /website images/home-dark-mobile-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/website images/home-dark-mobile-full.png -------------------------------------------------------------------------------- /website images/projects-dark-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/website images/projects-dark-desktop.png -------------------------------------------------------------------------------- /website images/projects-light-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/website images/projects-light-mobile.png -------------------------------------------------------------------------------- /public/images/profile/developer-pic-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/profile/developer-pic-1.png -------------------------------------------------------------------------------- /public/images/profile/developer-pic-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/profile/developer-pic-2.jpg -------------------------------------------------------------------------------- /website images/articles-light-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/website images/articles-light-desktop.png -------------------------------------------------------------------------------- /public/images/projects/fashion-studio-website.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/projects/fashion-studio-website.jpg -------------------------------------------------------------------------------- /public/images/projects/portfolio-cover-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/projects/portfolio-cover-image.jpg -------------------------------------------------------------------------------- /public/images/articles/smooth scrolling in reactjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/articles/smooth scrolling in reactjs.png -------------------------------------------------------------------------------- /public/images/projects/agency-website-cover-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/projects/agency-website-cover-image.jpg -------------------------------------------------------------------------------- /public/images/projects/crypto-screener-cover-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/projects/crypto-screener-cover-image.jpg -------------------------------------------------------------------------------- /public/images/articles/create loading screen in react js.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/articles/create loading screen in react js.jpg -------------------------------------------------------------------------------- /public/images/articles/pagination component in reactjs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/articles/pagination component in reactjs.jpg -------------------------------------------------------------------------------- /public/images/articles/What is Redux with easy explanation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/articles/What is Redux with easy explanation.png -------------------------------------------------------------------------------- /public/images/projects/nft-collection-website-cover-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/projects/nft-collection-website-cover-image.jpg -------------------------------------------------------------------------------- /src/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /public/images/articles/What is higher order component in React.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/articles/What is higher order component in React.jpg -------------------------------------------------------------------------------- /public/images/articles/form validation in reactjs using custom react hook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/articles/form validation in reactjs using custom react hook.png -------------------------------------------------------------------------------- /public/images/articles/create modal component in react using react portals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/articles/create modal component in react using react portals.png -------------------------------------------------------------------------------- /public/images/articles/todo list app built using react redux and framer motion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/HEAD/public/images/articles/todo list app built using react redux and framer motion.png -------------------------------------------------------------------------------- /src/pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /public/images/svgs/external-link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "developer-portfolio-starter-code", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "eslint": "8.36.0", 13 | "eslint-config-next": "13.2.4", 14 | "framer-motion": "^10.6.0", 15 | "next": "14.2.10", 16 | "react": "18.2.0", 17 | "react-dom": "18.2.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.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 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/svgs/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/svgs/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [codebucks27] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /public/images/svgs/logo-github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/svgs/pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/svgs/dribbble-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/All-Texts/styles.txt: -------------------------------------------------------------------------------- 1 | colors: { 2 | dark: "#1b1b1b", 3 | light: "#f5f5f5", 4 | primary: "#B63E96", // 240,86,199 5 | primaryDark: "#58E6D9", // 80,230,217 6 | } 7 | 8 | backgroundImage: { 9 | circularLight: 10 | "repeating-radial-gradient(rgba(0,0,0,0.4) 2px,#f5f5f5 5px,#f5f5f5 100px)", 11 | 12 | circularDark: 13 | "repeating-radial-gradient(rgba(255,255,255,0.5) 2px,#1b1b1b 8px,#1b1b1b 100px)", 14 | 15 | circularLightLg: 16 | "repeating-radial-gradient(rgba(0,0,0,0.4) 2px,#f5f5f5 5px,#f5f5f5 80px)", 17 | 18 | circularDarkLg: 19 | "repeating-radial-gradient(rgba(255,255,255,0.5) 2px,#1b1b1b 8px,#1b1b1b 80px)", 20 | 21 | circularLightMd: 22 | "repeating-radial-gradient(rgba(0,0,0,0.4) 2px,#f5f5f5 5px,#f5f5f5 60px)", 23 | 24 | circularDarkMd: 25 | "repeating-radial-gradient(rgba(255,255,255,0.5) 2px,#1b1b1b 8px,#1b1b1b 60px)", 26 | 27 | circularLightSm: 28 | "repeating-radial-gradient(rgba(0,0,0,0.4) 2px,#f5f5f5 5px,#f5f5f5 40px)", 29 | 30 | circularDarkSm: 31 | "repeating-radial-gradient(rgba(255,255,255,0.5) 2px,#1b1b1b 8px,#1b1b1b 40px)", 32 | }, 33 | 34 | 35 | boxShadow: { 36 | "3xl": "0 15px 15px 1px rgba(80,230,217, 0.4)", 37 | } 38 | 39 | 40 | screens: { 41 | "2xl": { max: "1535px" }, 42 | // => @media (max-width: 1535px) { ... } 43 | 44 | xl: { max: "1279px" }, 45 | // => @media (max-width: 1279px) { ... } 46 | 47 | lg: { max: "1023px" }, 48 | // => @media (max-width: 1023px) { ... } 49 | 50 | md: { max: "767px" }, 51 | // => @media (max-width: 767px) { ... } 52 | 53 | sm: { max: "639px" }, 54 | // => @media (max-width: 639px) { ... } 55 | 56 | xs: { max: "479px" }, 57 | // => @media (max-width: 479px) { ... } 58 | }, 59 | 60 | backgroundColor:["#121212", "rgba(131,58,180,1)","rgba(253,29,29,1)","rgba(252,176,69,1)","rgba(131,58,180,1)", "#121212"], 61 | -------------------------------------------------------------------------------- /public/images/svgs/moon-filled-to-sunny-filled-loop-transition.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles/globals.css: -------------------------------------------------------------------------------- 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; 7 | 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 | } 75 | 76 | * { 77 | box-sizing: border-box; 78 | padding: 0; 79 | margin: 0; 80 | } 81 | 82 | html, 83 | body { 84 | max-width: 100vw; 85 | overflow-x: hidden; 86 | } 87 | 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)); 96 | } 97 | 98 | a { 99 | color: inherit; 100 | text-decoration: none; 101 | } 102 | 103 | @media (prefers-color-scheme: dark) { 104 | html { 105 | color-scheme: dark; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Next.Js Website Tutorial: Create a Stunning Portfolio Website with Nextjs, Tailwind CSS and Framer-motion🌟 2 | 3 | ![GitHub stars](https://img.shields.io/github/stars/codebucks27/Next.js-Developer-Portfolio-Starter-Code?style=social&logo=ApacheSpark&label=Stars)   4 | ![GitHub forks](https://img.shields.io/github/forks/codebucks27/Next.js-Developer-Portfolio-Starter-Code?style=social&logo=KashFlow&maxAge=3600)   5 | ![Github Followers](https://img.shields.io/github/followers/codebucks27.svg?style=social&label=Follow)  
6 | 7 | This repository contains starter code for Portfolio website created using NextJs.
8 | 9 | For Demo and Final Code checkout following link👇:
10 | [Nextjs Portfolio Website](https://devdreaming.com//videos/nextjs-tutorial-build-portfolio-tailwind-css-framer-motion#code-links)
11 | 12 | If you want to learn how to create it please follow below tutorial👇:
13 | https://youtu.be/Yw7yWHigGKI
14 | [![YouTube Video Views](https://img.shields.io/youtube/views/Yw7yWHigGKI?style=social)](https://youtu.be/Yw7yWHigGKI)
15 | 16 | --- 17 | ✨ Checkout my brand new Saas application -> [AI Headshot Generator](https://www.smartheadshots.ai) 18 | 19 | --- 20 | 21 | ### Images of The Portfolio Website: 22 | 23 | ![Nextjs Portfolio Website](https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/blob/main/website%20images/home-light-desktop.png) 24 | ![Nextjs Portfolio Website Dark Mode](https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/blob/main/website%20images/home-dark-desktop.png) 25 | ![Next.js Portfolio Website](https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/blob/main/website%20images/about-light-desktop.png) 26 | ![Next js Portfolio Website](https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/blob/main/website%20images/projects-dark-desktop.png) 27 | ![Portfolio Website In Next.js](https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/blob/main/website%20images/articles-light-desktop.png) 28 | ![Responsive Portfolio Website In Nextjs](https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/blob/main/website%20images/about-light-mobile.png) 29 | ![Responsive Portfolio Website In Next js](https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/blob/main/website%20images/projects-light-mobile.png) 30 | ![Mobile Responsive Portfolio Website In Next.js](https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code/blob/main/website%20images/articles-light-mobile.png) 31 | 32 | 33 | ### Resources Used in This Project 34 | 35 | - Profile image in the home page created by using https://www.midjourney.com/ tool. 36 | - Profile image in the about page by [Albert Dera](https://unsplash.com/@albertdera?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) 37 | on [Unsplash](https://unsplash.com/photos/ILip77SbmOE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText). 38 | - Fonts from https://fonts.google.com/
39 | - Icons from https://iconify.design/
40 | - LightBulb Svg from https://lukaszadam.com/illustrations
41 | 42 | ### External Libraries used in this project: 43 | 44 | - [framer-motion](https://www.framer.com/motion/)
45 | - [Tailwind css](https://tailwindcss.com/)
46 | 47 | 48 | -------------------------------------------------------------------------------- /public/images/svgs/sunny-filled-loop-to-moon-filled-loop-transition.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import Image from 'next/image' 3 | import { Inter } from 'next/font/google' 4 | import styles from '@/styles/Home.module.css' 5 | 6 | const inter = Inter({ subsets: ['latin'] }) 7 | 8 | export default function Home() { 9 | return ( 10 | <> 11 | 12 | Create Next App 13 | 14 | 15 | 16 | 17 |
18 |
19 |

20 | Get started by editing  21 | src/pages/index.js 22 |

23 | 40 |
41 | 42 |
43 | Next.js Logo 51 |
52 | 13 59 |
60 |
61 | 62 |
63 | 69 |

70 | Docs -> 71 |

72 |

73 | Find in-depth information about Next.js features and API. 74 |

75 | 76 | 77 | 83 |

84 | Learn -> 85 |

86 |

87 | Learn about Next.js in an interactive course with quizzes! 88 |

89 | 90 | 91 | 97 |

98 | Templates -> 99 |

100 |

101 | Discover and deploy boilerplate example Next.js projects. 102 |

103 | 104 | 105 | 111 |

112 | Deploy -> 113 |

114 |

115 | Instantly deploy your Next.js site to a shareable URL 116 | with Vercel. 117 |

118 | 119 |
120 |
121 | 122 | ) 123 | } 124 | -------------------------------------------------------------------------------- /public/All-Texts/pages.txt: -------------------------------------------------------------------------------- 1 | HOME PAGE: 2 | 3 | - Turning Vision Into Reality With Code And Design. 4 | - As a skilled full-stack developer, I am dedicated to turning ideas into innovative web applications. 5 | Explore my latest projects and articles, showcasing my expertise in React.js and web development. 6 | 7 | -------------------------------------------------------------- 8 | 9 | ABOUT PAGE: 10 | 11 | - Passion Fuels Purpose! 12 | - Hi, I'm CodeBucks, a web developer and UI/UX designer with a passion for creating beautiful, functional, 13 | and user-centered digital experiences. With 4 years of experience in the field. I am always looking for 14 | new and innovative ways to bring my clients' visions to life. 15 | 16 | - I believe that design is about more than just making things look pretty – it's about solving problems and 17 | creating intuitive, enjoyable experiences for users. 18 | 19 | - Whether I'm working on a website, mobile app, or 20 | other digital product, I bring my commitment to design excellence and user-centered thinking to 21 | every project I work on. I look forward to the opportunity to bring my skills and passion to your next project. 22 | 23 | -------------------------------------------------------------- 24 | 25 | EXPERIENCE: 26 | 27 | Software Engineer @Google 28 | 2022-Present | Mountain View, CA 29 | Worked on a team responsible for developing new features for Google's 30 | search engine, including improving the accuracy and relevance of search results and 31 | developing new tools for data analysis and visualization. 32 | 33 | Intern @Facebook 34 | Summer 2021 | Menlo Park, CA. 35 | Worked on a team responsible for developing a new mobile app feature that allowed users to create and 36 | share short-form video content, including designing and implementing a new user interface and developing 37 | the backend infrastructure to support the feature. 38 | 39 | Software Developer @Amazon 40 | 2020-2021 | Seattle, WA. 41 | Worked on a team responsible for developing Amazon's mobile app, including implementing new features such 42 | as product recommendations and user reviews, and optimizing the app's performance and reliability. 43 | 44 | Software Developer Intern @Microsoft 45 | Summer 2019 | Redmond, WA. 46 | Worked on a team responsible for developing new features for Microsoft's Windows operating system, 47 | including implementing a new user interface for a system settings panel and optimizing the performance of 48 | a core system component. 49 | 50 | Teaching Assistant @MIT 51 | Fall 2018 | Massachusetts Ave, Cambridge, MA. 52 | Assisted in teaching a course on computer programming, held office hours to help students with assignments, 53 | and graded exams and assignments. 54 | 55 | 56 | -------------------------------------------------------------- 57 | 58 | EDUCATION: 59 | 60 | Bachelor Of Science In Computer Science 61 | 2016-2020 | Massachusetts Institute Of Technology (MIT) 62 | Relevant courses included Data Structures and Algorithms, Computer Systems Engineering, and Artificial 63 | Intelligence. 64 | 65 | Master Of Computer Science 66 | 2020-2022 | Stanford University 67 | Completed a master's project on deep learning, developing a new neural network architecture for natural 68 | language understanding. 69 | 70 | Online Coursework 71 | 2016-2020 | Coursera And EdX 72 | Completed coursework in advanced topics such as Reinforcement Learning, Computer Vision, and Machine 73 | Learning Engineering. 74 | 75 | -------------------------------------------------------------- 76 | 77 | PROJECTS PAGE: 78 | 79 | - Imagination Trumps Knowledge! 80 | 81 | Crypto Screener Application 82 | A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. 83 | It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your 84 | local currency. 85 | 86 | React Portfolio Website 87 | A professional portfolio website using React JS, Framer-motion, and Styled-components. It has smooth 88 | page transitions, cool background effects, unique design and it is mobile responsive. 89 | 90 | -------------------------------------------------------------- 91 | 92 | ARTICLES PAGE: 93 | 94 | - Words Can Change The World! 95 | 96 | Build A Custom Pagination Component In Reactjs From Scratch 97 | Learn how to build a custom pagination component in ReactJS from scratch. 98 | Follow this step-by-step guide to integrate Pagination component in your ReactJS project. 99 | 9 min read 100 | 101 | Creating Stunning Loading Screens In React: Build 3 Types Of Loading Screens 102 | Learn how to create stunning loading screens in React with 3 different methods. 103 | Discover how to use React-Loading, React-Lottie & build a custom loading screen. 104 | Improve the user experience. 105 | 10 min read 106 | 107 | Form Validation In Reactjs: Build A Reusable Custom Hook For Inputs And Error Handling 108 | 109 | Silky Smooth Scrolling In Reactjs: A Step-By-Step Guide For React Developers 110 | 111 | Creating An Efficient Modal Component In React Using Hooks And Portals 112 | 113 | Build A Fabulous Todo List App With React, Redux And Framer-Motion 114 | 115 | Redux Simplified: A Beginner's Guide For Web Developers 116 | 117 | What Is Higher Order Component (Hoc) In React? 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /src/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: space-between; 5 | align-items: center; 6 | padding: 6rem; 7 | min-height: 100vh; 8 | } 9 | 10 | .description { 11 | display: inherit; 12 | justify-content: inherit; 13 | align-items: inherit; 14 | font-size: 0.85rem; 15 | max-width: var(--max-width); 16 | width: 100%; 17 | z-index: 2; 18 | font-family: var(--font-mono); 19 | } 20 | 21 | .description a { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | gap: 0.5rem; 26 | } 27 | 28 | .description p { 29 | position: relative; 30 | margin: 0; 31 | padding: 1rem; 32 | background-color: rgba(var(--callout-rgb), 0.5); 33 | border: 1px solid rgba(var(--callout-border-rgb), 0.3); 34 | border-radius: var(--border-radius); 35 | } 36 | 37 | .code { 38 | font-weight: 700; 39 | font-family: var(--font-mono); 40 | } 41 | 42 | .grid { 43 | display: grid; 44 | grid-template-columns: repeat(4, minmax(25%, auto)); 45 | width: var(--max-width); 46 | max-width: 100%; 47 | } 48 | 49 | .card { 50 | padding: 1rem 1.2rem; 51 | border-radius: var(--border-radius); 52 | background: rgba(var(--card-rgb), 0); 53 | border: 1px solid rgba(var(--card-border-rgb), 0); 54 | transition: background 200ms, border 200ms; 55 | } 56 | 57 | .card span { 58 | display: inline-block; 59 | transition: transform 200ms; 60 | } 61 | 62 | .card h2 { 63 | font-weight: 600; 64 | margin-bottom: 0.7rem; 65 | } 66 | 67 | .card p { 68 | margin: 0; 69 | opacity: 0.6; 70 | font-size: 0.9rem; 71 | line-height: 1.5; 72 | max-width: 30ch; 73 | } 74 | 75 | .center { 76 | display: flex; 77 | justify-content: center; 78 | align-items: center; 79 | position: relative; 80 | padding: 4rem 0; 81 | } 82 | 83 | .center::before { 84 | background: var(--secondary-glow); 85 | border-radius: 50%; 86 | width: 480px; 87 | height: 360px; 88 | margin-left: -400px; 89 | } 90 | 91 | .center::after { 92 | background: var(--primary-glow); 93 | width: 240px; 94 | height: 180px; 95 | z-index: -1; 96 | } 97 | 98 | .center::before, 99 | .center::after { 100 | content: ''; 101 | left: 50%; 102 | position: absolute; 103 | filter: blur(45px); 104 | transform: translateZ(0); 105 | } 106 | 107 | .logo, 108 | .thirteen { 109 | position: relative; 110 | } 111 | 112 | .thirteen { 113 | display: flex; 114 | justify-content: center; 115 | align-items: center; 116 | width: 75px; 117 | height: 75px; 118 | padding: 25px 10px; 119 | margin-left: 16px; 120 | transform: translateZ(0); 121 | border-radius: var(--border-radius); 122 | overflow: hidden; 123 | box-shadow: 0px 2px 8px -1px #0000001a; 124 | } 125 | 126 | .thirteen::before, 127 | .thirteen::after { 128 | content: ''; 129 | position: absolute; 130 | z-index: -1; 131 | } 132 | 133 | /* Conic Gradient Animation */ 134 | .thirteen::before { 135 | animation: 6s rotate linear infinite; 136 | width: 200%; 137 | height: 200%; 138 | background: var(--tile-border); 139 | } 140 | 141 | /* Inner Square */ 142 | .thirteen::after { 143 | inset: 0; 144 | padding: 1px; 145 | border-radius: var(--border-radius); 146 | background: linear-gradient( 147 | to bottom right, 148 | rgba(var(--tile-start-rgb), 1), 149 | rgba(var(--tile-end-rgb), 1) 150 | ); 151 | background-clip: content-box; 152 | } 153 | 154 | /* Enable hover only on non-touch devices */ 155 | @media (hover: hover) and (pointer: fine) { 156 | .card:hover { 157 | background: rgba(var(--card-rgb), 0.1); 158 | border: 1px solid rgba(var(--card-border-rgb), 0.15); 159 | } 160 | 161 | .card:hover span { 162 | transform: translateX(4px); 163 | } 164 | } 165 | 166 | @media (prefers-reduced-motion) { 167 | .thirteen::before { 168 | animation: none; 169 | } 170 | 171 | .card:hover span { 172 | transform: none; 173 | } 174 | } 175 | 176 | /* Mobile */ 177 | @media (max-width: 700px) { 178 | .content { 179 | padding: 4rem; 180 | } 181 | 182 | .grid { 183 | grid-template-columns: 1fr; 184 | margin-bottom: 120px; 185 | max-width: 320px; 186 | text-align: center; 187 | } 188 | 189 | .card { 190 | padding: 1rem 2.5rem; 191 | } 192 | 193 | .card h2 { 194 | margin-bottom: 0.5rem; 195 | } 196 | 197 | .center { 198 | padding: 8rem 0 6rem; 199 | } 200 | 201 | .center::before { 202 | transform: none; 203 | height: 300px; 204 | } 205 | 206 | .description { 207 | font-size: 0.8rem; 208 | } 209 | 210 | .description a { 211 | padding: 1rem; 212 | } 213 | 214 | .description p, 215 | .description div { 216 | display: flex; 217 | justify-content: center; 218 | position: fixed; 219 | width: 100%; 220 | } 221 | 222 | .description p { 223 | align-items: center; 224 | inset: 0 0 auto; 225 | padding: 2rem 1rem 1.4rem; 226 | border-radius: 0; 227 | border: none; 228 | border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); 229 | background: linear-gradient( 230 | to bottom, 231 | rgba(var(--background-start-rgb), 1), 232 | rgba(var(--callout-rgb), 0.5) 233 | ); 234 | background-clip: padding-box; 235 | backdrop-filter: blur(24px); 236 | } 237 | 238 | .description div { 239 | align-items: flex-end; 240 | pointer-events: none; 241 | inset: auto 0 0; 242 | padding: 2rem; 243 | height: 200px; 244 | background: linear-gradient( 245 | to bottom, 246 | transparent 0%, 247 | rgb(var(--background-end-rgb)) 40% 248 | ); 249 | z-index: 1; 250 | } 251 | } 252 | 253 | /* Tablet and Smaller Desktop */ 254 | @media (min-width: 701px) and (max-width: 1120px) { 255 | .grid { 256 | grid-template-columns: repeat(2, 50%); 257 | } 258 | } 259 | 260 | @media (prefers-color-scheme: dark) { 261 | .vercelLogo { 262 | filter: invert(1); 263 | } 264 | 265 | .logo, 266 | .thirteen img { 267 | filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); 268 | } 269 | } 270 | 271 | @keyframes rotate { 272 | from { 273 | transform: rotate(360deg); 274 | } 275 | to { 276 | transform: rotate(0deg); 277 | } 278 | } 279 | -------------------------------------------------------------------------------- /public/images/svgs/miscellaneous_icons_1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/svgs/CircularText.svg: -------------------------------------------------------------------------------- 1 | 3 | 28 | 52 | 71 | 91 | 111 | 132 | 149 | 165 | 183 | 201 | 219 | 238 | 255 | 274 | 292 | 307 | 325 | 347 | 360 | 369 | 380 | 390 | 404 | 418 | 428 | 436 | 444 | 452 | -------------------------------------------------------------------------------- /public/All-Texts/Icons.txt: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export const GithubIcon = ({ className, ...rest }) => ( 4 | 12 | 13 | 17 | 18 | ); 19 | 20 | export const TwitterIcon = ({ className, ...rest }) => ( 21 | 29 | 30 | 34 | 35 | ); 36 | // #0A66C2 37 | export const LinkedInIcon = ({ className, ...rest }) => ( 38 | 46 | 47 | 48 | 49 | 50 | 54 | 55 | 56 | ); 57 | 58 | export const PinterestIcon = ({ className, ...rest }) => ( 59 | 67 | 68 | 72 | 73 | ); 74 | 75 | export const DribbbleIcon = ({ className, ...rest }) => ( 76 | 84 | 85 | 89 | 93 | 94 | ); 95 | 96 | export const SunIcon = ({ className, ...rest }) => ( 97 | 105 | 112 | 113 | 114 | 120 | 121 | 122 | 129 | 130 | 131 | 136 | 137 | 138 | 139 | 140 | 141 | 149 | 156 | 157 | 158 | 165 | 172 | 173 | 174 | 181 | 188 | 189 | 190 | 197 | 204 | 205 | 206 | 207 | 208 | 209 | 216 | 223 | 230 | 231 | 232 | 239 | 246 | 253 | 254 | 255 | 262 | 263 | 270 | 271 | 272 | ); 273 | 274 | export const MoonIcon = ({ className, ...rest }) => ( 275 | 283 | 284 | 292 | 293 | 300 | 307 | 308 | 309 | 316 | 323 | 324 | 331 | 332 | 333 | 334 | 340 | 341 | 342 | 349 | 350 | 351 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 371 | 378 | 385 | 386 | 387 | 394 | 401 | 408 | 409 | 410 | 418 | 419 | 426 | 427 | 428 | ); 429 | 430 | export const CircularText = ({ className, ...rest }) => ( 431 | 440 | 441 | 442 | ); 443 | 444 | export const LinkArrow = ({ className, ...rest }) => ( 445 | 453 | 454 | 462 | 463 | ); 464 | 465 | --------------------------------------------------------------------------------