├── README.md ├── public └── vite.svg ├── vercel.json ├── src ├── assets │ ├── images │ │ ├── hero.jpg │ │ └── favicon.ico │ ├── css │ │ ├── Header.css │ │ ├── tomorrow.css │ │ └── index.css │ └── react.svg ├── lib │ └── utils.js ├── main.jsx ├── components │ ├── ui │ │ ├── EducationLoader.jsx │ │ ├── tooltip.jsx │ │ ├── badge.jsx │ │ ├── meteors.jsx │ │ ├── card.jsx │ │ ├── button.jsx │ │ ├── icon-cloud.jsx │ │ ├── flip-words.jsx │ │ ├── sparkles-text.jsx │ │ ├── evervault-card.jsx │ │ └── cool-mode.jsx │ ├── globe.jsx │ ├── AnimatedGrid.jsx │ └── enhanced-portfolio-card.jsx ├── App.jsx └── pages │ ├── About │ └── About.jsx │ ├── Header │ └── Header.jsx │ ├── Experience │ └── Experience.jsx │ ├── Education │ └── Education.jsx │ ├── Skills │ └── Skills.jsx │ ├── Contact │ └── Contact.jsx │ ├── Projects │ └── Projects.jsx │ └── Hero │ └── Hero.jsx ├── postcss.config.js ├── jsconfig.json ├── vite.config.js ├── .gitignore ├── index.html ├── components.json ├── LICENCE ├── eslint.config.js ├── package.json └── tailwind.config.js /README.md: -------------------------------------------------------------------------------- 1 | # 🚢 Hazrat Ali 2 | 3 | # 🚤 Software Engineering 4 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Hazrat-Ali-Portfolio/HEAD/public/vite.svg -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [ 3 | { "source": "/(.*)", "destination": "/" } 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Hazrat-Ali-Portfolio/HEAD/src/assets/images/hero.jpg -------------------------------------------------------------------------------- /src/assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Hazrat-Ali-Portfolio/HEAD/src/assets/images/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | // postcss config 8 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@/*": ["./src/*"] 6 | } 7 | } 8 | } 9 | //json File -------------------------------------------------------------------------------- /src/lib/utils.js: -------------------------------------------------------------------------------- 1 | import { clsx } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | // Utlis 4 | export function cn(...inputs) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import { defineConfig } from "vite"; 3 | import react from "@vitejs/plugin-react"; 4 | 5 | export default defineConfig({ 6 | plugins: [react()], 7 | resolve: { 8 | alias: { 9 | "@": path.resolve(__dirname, "./src"), 10 | }, 11 | }, 12 | }); 13 | // vite config -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | // main jsx 6 | createRoot(document.getElementById("root")).render( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | *gitignore -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hazrat Ali 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": false, 5 | "tsx": false, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "src/assets/css/index.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } 22 | 23 | -------------------------------------------------------------------------------- /src/assets/css/Header.css: -------------------------------------------------------------------------------- 1 | @keyframes elasticBounce { 2 | 0% { 3 | transform: scale(0.8); 4 | } 5 | 40% { 6 | transform: scale(1.15, 0.95); 7 | } 8 | 60% { 9 | transform: scale(0.95, 1.05); 10 | } 11 | 80% { 12 | transform: scale(1.05, 0.95); 13 | } 14 | 100% { 15 | transform: scale(1); 16 | } 17 | } 18 | 19 | .elastic-bounce { 20 | animation: elasticBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); 21 | } 22 | 23 | .nav-link:hover::before { 24 | content: ""; 25 | position: absolute; 26 | inset: -4px; 27 | background: rgba(233, 213, 255, 0.3); 28 | border-radius: 9999px; 29 | z-index: -1; 30 | animation: elasticBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); 31 | } 32 | -------------------------------------------------------------------------------- /src/components/ui/EducationLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Education Loader 3 | const EducationLoader = () => { 4 | return ( 5 |
6 |
7 | {/* Loading Icon */} 8 |
9 | {/* Loading Text */} 10 |

New education is loading...

11 |
12 | 13 | {/* Future Content Section */} 14 |
15 |

Stay tuned!

16 |
17 |
18 | ); 19 | }; 20 | 21 | export default EducationLoader; 22 | -------------------------------------------------------------------------------- /src/components/globe.jsx: -------------------------------------------------------------------------------- 1 | import IconCloud from "./ui/icon-cloud"; 2 | // Globe 3 | const slugs = [ 4 | "typescript", 5 | "javascript", 6 | "dart", 7 | "java", 8 | "react", 9 | "flutter", 10 | "android", 11 | "html5", 12 | "css3", 13 | "nodedotjs", 14 | "express", 15 | "nextdotjs", 16 | "prisma", 17 | "amazonaws", 18 | "postgresql", 19 | "firebase", 20 | "nginx", 21 | "vercel", 22 | "testinglibrary", 23 | "jest", 24 | "cypress", 25 | "docker", 26 | "git", 27 | "jira", 28 | "github", 29 | "gitlab", 30 | "visualstudiocode", 31 | "androidstudio", 32 | "sonarqube", 33 | "figma", 34 | ]; 35 | 36 | function IconCloudDemo() { 37 | return ( 38 |
39 | 40 |
41 | ); 42 | } 43 | 44 | export default IconCloudDemo; 45 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Hazrat Ali 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/ui/tooltip.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip" 3 | // Tooltip 4 | import { cn } from "@/lib/utils" 5 | 6 | const TooltipProvider = TooltipPrimitive.Provider 7 | 8 | const Tooltip = TooltipPrimitive.Root 9 | 10 | const TooltipTrigger = TooltipPrimitive.Trigger 11 | 12 | const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => ( 13 | 21 | )) 22 | TooltipContent.displayName = TooltipPrimitive.Content.displayName 23 | 24 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } 25 | -------------------------------------------------------------------------------- /src/components/ui/badge.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { cva } from "class-variance-authority"; 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const badgeVariants = cva( 7 | "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", 8 | { 9 | variants: { 10 | variant: { 11 | default: 12 | "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", 13 | secondary: 14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", 15 | destructive: 16 | "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", 17 | outline: "text-foreground", 18 | }, 19 | }, 20 | defaultVariants: { 21 | variant: "default", 22 | }, 23 | } 24 | ) 25 | 26 | function Badge({ 27 | className, 28 | variant, 29 | ...props 30 | }) { 31 | return (
); 32 | } 33 | // Budge jsx 34 | export { Badge, badgeVariants } 35 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | // eslint config -------------------------------------------------------------------------------- /src/components/ui/meteors.jsx: -------------------------------------------------------------------------------- 1 | "use client";; 2 | import { useEffect, useState } from "react"; 3 | // Meteors 4 | import { cn } from "@/lib/utils"; 5 | 6 | export const Meteors = ({ 7 | number = 20 8 | }) => { 9 | const [meteorStyles, setMeteorStyles] = useState([]); 10 | 11 | useEffect(() => { 12 | const styles = [...new Array(number)].map(() => ({ 13 | top: -5, 14 | left: Math.floor(Math.random() * window.innerWidth) + "px", 15 | animationDelay: Math.random() * 1 + 0.2 + "s", 16 | animationDuration: Math.floor(Math.random() * 8 + 2) + "s", 17 | })); 18 | setMeteorStyles(styles); 19 | }, [number]); 20 | 21 | return (<> 22 | {[...meteorStyles].map((style, idx) => ( 23 | // Meteor Head 24 | ( 30 | {/* Meteor Tail */} 31 |
33 | ) 34 | ))} 35 | ); 36 | }; 37 | 38 | export default Meteors; 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@radix-ui/react-slot": "^1.1.1", 14 | "@radix-ui/react-tooltip": "^1.1.6", 15 | "class-variance-authority": "^0.7.1", 16 | "clsx": "^2.1.1", 17 | "create-react-router": "^7.1.1", 18 | "framer-motion": "^11.15.0", 19 | "lenis": "^1.2.3", 20 | "lucide-react": "^0.469.0", 21 | "next-themes": "^0.4.4", 22 | "prismjs": "^1.29.0", 23 | "react": "^18.3.1", 24 | "react-dom": "^18.3.1", 25 | "react-icon-cloud": "^4.1.4", 26 | "react-icons": "^5.4.0", 27 | "react-router-dom": "^7.1.1", 28 | "tailwind-merge": "^2.6.0", 29 | "tailwindcss-animate": "^1.0.7" 30 | }, 31 | "devDependencies": { 32 | "@eslint/js": "^9.15.0", 33 | "@types/node": "^22.10.2", 34 | "@types/react": "^18.3.12", 35 | "@types/react-dom": "^18.3.1", 36 | "@vitejs/plugin-react": "^4.3.4", 37 | "autoprefixer": "^10.4.20", 38 | "eslint": "^9.15.0", 39 | "eslint-plugin-react": "^7.37.2", 40 | "eslint-plugin-react-hooks": "^5.0.0", 41 | "eslint-plugin-react-refresh": "^0.4.14", 42 | "globals": "^15.12.0", 43 | "postcss": "^8.4.49", 44 | "tailwindcss": "^3.4.17", 45 | "vite": "^6.0.1" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./assets/css/index.css"; 3 | import Experience from "./pages/Experience/Experience"; 4 | import Contact from "./pages/Contact/Contact"; 5 | import Projects from "./pages/Projects/Projects"; 6 | import Header from "./pages/Header/Header"; 7 | import Hero from "./pages/Hero/Hero"; 8 | import Skills from "./pages/Skills/Skills"; 9 | import Education from "./pages/Education/Education"; 10 | // Apps jsx 11 | import { Route, Routes } from "react-router-dom"; 12 | 13 | export default function App() { 14 | const [isOnePage, setIsOnePage] = useState(false); // Toggle state 15 | 16 | return ( 17 | <> 18 |
19 | {/* Conditional Rendering */} 20 | {isOnePage ? ( 21 | // One-Page Mode: Render all components together 22 | <> 23 | 24 | 25 | 26 | 27 | 28 | 29 | ) : ( 30 | // Router Mode: Use routes for navigation 31 | ` 32 | } /> 33 | } /> 34 | } /> 35 | } /> 36 | } /> 37 | } /> 38 | 39 | )} 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/components/ui/card.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | // Card jsx 3 | import { cn } from "@/lib/utils" 4 | 5 | const Card = React.forwardRef(({ className, ...props }, ref) => ( 6 |
10 | )) 11 | Card.displayName = "Card" 12 | 13 | const CardHeader = React.forwardRef(({ className, ...props }, ref) => ( 14 |
18 | )) 19 | CardHeader.displayName = "CardHeader" 20 | 21 | const CardTitle = React.forwardRef(({ className, ...props }, ref) => ( 22 |
26 | )) 27 | CardTitle.displayName = "CardTitle" 28 | 29 | const CardDescription = React.forwardRef(({ className, ...props }, ref) => ( 30 |
34 | )) 35 | CardDescription.displayName = "CardDescription" 36 | 37 | const CardContent = React.forwardRef(({ className, ...props }, ref) => ( 38 |
39 | )) 40 | CardContent.displayName = "CardContent" 41 | 42 | const CardFooter = React.forwardRef(({ className, ...props }, ref) => ( 43 |
47 | )) 48 | CardFooter.displayName = "CardFooter" 49 | 50 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 51 | -------------------------------------------------------------------------------- /src/components/AnimatedGrid.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const AnimatedGrid = () => { 4 | return ( 5 |
6 |
7 | {/* Grid Container */} 8 |
9 | {/* Horizontal Lines */} 10 |
11 | {[...Array(40)].map((_, i) => ( 12 |
22 | ))} 23 |
24 | 25 | {/* Vertical Lines */} 26 |
27 | {[...Array(40)].map((_, i) => ( 28 |
38 | ))} 39 |
40 |
41 |
42 |
43 | ); 44 | }; 45 | // Animated Grid 46 | export default AnimatedGrid; 47 | -------------------------------------------------------------------------------- /src/components/ui/button.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva } from "class-variance-authority"; 4 | // Button jsx 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", 9 | { 10 | variants: { 11 | variant: { 12 | default: "bg-primary text-primary-foreground hover:bg-primary/90", 13 | destructive: 14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90", 15 | outline: 16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 17 | secondary: 18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80", 19 | ghost: "hover:bg-accent hover:text-accent-foreground", 20 | link: "text-primary underline-offset-4 hover:underline", 21 | }, 22 | size: { 23 | default: "h-10 px-4 py-2", 24 | sm: "h-9 rounded-md px-3", 25 | lg: "h-11 rounded-md px-8", 26 | icon: "h-10 w-10", 27 | }, 28 | }, 29 | defaultVariants: { 30 | variant: "default", 31 | size: "default", 32 | }, 33 | } 34 | ) 35 | 36 | const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => { 37 | const Comp = asChild ? Slot : "button" 38 | return ( 39 | () 43 | ); 44 | }) 45 | Button.displayName = "Button" 46 | 47 | export { Button, buttonVariants } 48 | -------------------------------------------------------------------------------- /src/assets/css/tomorrow.css: -------------------------------------------------------------------------------- 1 | code[class*="language-"], 2 | pre[class*="language-"] { 3 | color: #ccc; 4 | background: 0 0; 5 | font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; 6 | font-size: 1em; 7 | text-align: left; 8 | white-space: pre; 9 | word-spacing: normal; 10 | word-break: normal; 11 | word-wrap: normal; 12 | line-height: 1.5; 13 | -moz-tab-size: 4; 14 | -o-tab-size: 4; 15 | tab-size: 4; 16 | -webkit-hyphens: none; 17 | -moz-hyphens: none; 18 | -ms-hyphens: none; 19 | hyphens: none; 20 | } 21 | pre[class*="language-"] { 22 | padding: 1em; 23 | margin: 0.5em 0; 24 | overflow: auto; 25 | } 26 | :not(pre) > code[class*="language-"], 27 | pre[class*="language-"] { 28 | background: #091121; 29 | } 30 | :not(pre) > code[class*="language-"] { 31 | padding: 0.1em; 32 | border-radius: 0.3em; 33 | white-space: normal; 34 | } 35 | .token.block-comment, 36 | .token.cdata, 37 | .token.comment, 38 | .token.doctype, 39 | .token.prolog { 40 | color: #999; 41 | } 42 | .token.punctuation { 43 | color: #ccc; 44 | } 45 | .token.attr-name, 46 | .token.deleted, 47 | .token.namespace, 48 | .token.tag { 49 | color: #e2777a; 50 | } 51 | .token.function-name { 52 | color: #6196cc; 53 | } 54 | .token.boolean, 55 | .token.function, 56 | .token.number { 57 | color: #f08d49; 58 | } 59 | .token.class-name, 60 | .token.constant, 61 | .token.property, 62 | .token.symbol { 63 | color: #f8c555; 64 | } 65 | .token.atrule, 66 | .token.builtin, 67 | .token.important, 68 | .token.keyword, 69 | .token.selector { 70 | color: #cc99cd; 71 | } 72 | .token.attr-value, 73 | .token.char, 74 | .token.regex, 75 | .token.string, 76 | .token.variable { 77 | color: #7ec699; 78 | } 79 | .token.entity, 80 | .token.operator, 81 | .token.url { 82 | color: #67cdcc; 83 | } 84 | .token.bold, 85 | .token.important { 86 | font-weight: 700; 87 | } 88 | .token.italic { 89 | font-style: italic; 90 | } 91 | .token.entity { 92 | cursor: help; 93 | } 94 | .token.inserted { 95 | color: green; 96 | } 97 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: ["class"], 4 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 5 | theme: { 6 | extend: { 7 | animation: { 8 | meteor: "meteor 5s linear infinite", 9 | }, 10 | keyframes: { 11 | meteor: { 12 | "0%": { 13 | transform: "rotate(215deg) translateX(0)", 14 | opacity: "1", 15 | }, 16 | "70%": { 17 | opacity: "1", 18 | }, 19 | "100%": { 20 | transform: "rotate(215deg) translateX(-500px)", 21 | opacity: "0", 22 | }, 23 | }, 24 | }, 25 | borderRadius: { 26 | lg: "var(--radius)", 27 | md: "calc(var(--radius) - 2px)", 28 | sm: "calc(var(--radius) - 4px)", 29 | }, 30 | colors: { 31 | background: "hsl(var(--background))", 32 | foreground: "hsl(var(--foreground))", 33 | card: { 34 | DEFAULT: "hsl(var(--card))", 35 | foreground: "hsl(var(--card-foreground))", 36 | }, 37 | popover: { 38 | DEFAULT: "hsl(var(--popover))", 39 | foreground: "hsl(var(--popover-foreground))", 40 | }, 41 | primary: { 42 | DEFAULT: "hsl(var(--primary))", 43 | foreground: "hsl(var(--primary-foreground))", 44 | }, 45 | secondary: { 46 | DEFAULT: "hsl(var(--secondary))", 47 | foreground: "hsl(var(--secondary-foreground))", 48 | }, 49 | muted: { 50 | DEFAULT: "hsl(var(--muted))", 51 | foreground: "hsl(var(--muted-foreground))", 52 | }, 53 | accent: { 54 | DEFAULT: "hsl(var(--accent))", 55 | foreground: "hsl(var(--accent-foreground))", 56 | }, 57 | destructive: { 58 | DEFAULT: "hsl(var(--destructive))", 59 | foreground: "hsl(var(--destructive-foreground))", 60 | }, 61 | border: "hsl(var(--border))", 62 | input: "hsl(var(--input))", 63 | ring: "hsl(var(--ring))", 64 | chart: { 65 | 1: "hsl(var(--chart-1))", 66 | 2: "hsl(var(--chart-2))", 67 | 3: "hsl(var(--chart-3))", 68 | 4: "hsl(var(--chart-4))", 69 | 5: "hsl(var(--chart-5))", 70 | }, 71 | }, 72 | }, 73 | }, 74 | plugins: [require("tailwindcss-animate")], 75 | }; 76 | // Tailwind Config -------------------------------------------------------------------------------- /src/components/ui/icon-cloud.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useEffect, useMemo, useState } from "react"; 3 | import { useTheme } from "next-themes"; 4 | import { Cloud, fetchSimpleIcons, renderSimpleIcon } from "react-icon-cloud"; 5 | // Icon cloud 6 | export const cloudProps = { 7 | containerProps: { 8 | style: { 9 | display: "flex", 10 | justifyContent: "center", 11 | alignItems: "center", 12 | width: "100%", 13 | paddingTop: 40, 14 | }, 15 | }, 16 | options: { 17 | reverse: true, 18 | depth: 1, 19 | wheelZoom: false, 20 | imageScale: 2, 21 | activeCursor: "default", 22 | tooltip: "native", 23 | initial: [0.1, -0.1], 24 | clickToFront: 500, 25 | tooltipDelay: 0, 26 | outlineColour: "#000", 27 | maxSpeed: 0.04, 28 | minSpeed: 0.02, 29 | // dragControl: false, 30 | }, 31 | }; 32 | 33 | export const renderCustomIcon = (icon, theme, imageArray) => { 34 | const bgHex = theme === "light" ? "#f3f2ef" : "#080510"; 35 | const fallbackHex = theme === "light" ? "#6e6e73" : "#ffffff"; 36 | const minContrastRatio = theme === "dark" ? 2 : 1.2; 37 | 38 | return renderSimpleIcon({ 39 | icon, 40 | bgHex, 41 | fallbackHex, 42 | minContrastRatio, 43 | size: 42, 44 | aProps: { 45 | href: undefined, 46 | target: undefined, 47 | rel: undefined, 48 | onClick: (e) => e.preventDefault(), 49 | }, 50 | }); 51 | }; 52 | 53 | export default function IconCloud({ 54 | // Default to an empty array if not provided 55 | iconSlugs = [], 56 | 57 | imageArray, 58 | }) { 59 | const [data, setData] = useState(null); 60 | const { theme } = useTheme(); 61 | 62 | useEffect(() => { 63 | if (iconSlugs.length > 0) { 64 | // Check if iconSlugs is not empty 65 | fetchSimpleIcons({ slugs: iconSlugs }).then(setData); 66 | } 67 | }, [iconSlugs]); 68 | 69 | const renderedIcons = useMemo(() => { 70 | if (!data) return null; 71 | 72 | return Object.values(data.simpleIcons).map((icon) => 73 | renderCustomIcon(icon, theme || "dark") 74 | ); 75 | }, [data, theme]); 76 | 77 | return ( 78 | // @ts-ignore 79 | 80 | <> 81 | <>{renderedIcons} 82 | {imageArray && 83 | imageArray.length > 0 && 84 | imageArray.map((image, index) => { 85 | return ( 86 | e.preventDefault()}> 87 | A globe 88 | 89 | ); 90 | })} 91 | 92 | 93 | ); 94 | } 95 | -------------------------------------------------------------------------------- /src/components/ui/flip-words.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useCallback, useEffect, useState } from "react"; 3 | import { AnimatePresence, motion } from "framer-motion"; 4 | import { cn } from "@/lib/utils"; 5 | // Flip Words 6 | export const FlipWords = ({ words, duration = 3000, className }) => { 7 | const [currentWord, setCurrentWord] = useState(words[0]); 8 | const [isAnimating, setIsAnimating] = useState(false); 9 | 10 | 11 | const startAnimation = useCallback(() => { 12 | const word = words[words.indexOf(currentWord) + 1] || words[0]; 13 | setCurrentWord(word); 14 | setIsAnimating(true); 15 | }, [currentWord, words]); 16 | 17 | useEffect(() => { 18 | if (!isAnimating) 19 | setTimeout(() => { 20 | startAnimation(); 21 | }, duration); 22 | }, [isAnimating, duration, startAnimation]); 23 | 24 | return ( 25 | { 27 | setIsAnimating(false); 28 | }} 29 | > 30 | 58 | {/* edit suggested by Sajal: https://x.com/DewanganSajal */} 59 | {currentWord.split(" ").map((word, wordIndex) => ( 60 | 70 | {word.split("").map((letter, letterIndex) => ( 71 | 81 | {letter} 82 | 83 | ))} 84 |   85 | 86 | ))} 87 | 88 | 89 | ); 90 | }; 91 | -------------------------------------------------------------------------------- /src/components/ui/sparkles-text.jsx: -------------------------------------------------------------------------------- 1 | "use client";; 2 | import { useEffect, useState } from "react"; 3 | import { motion } from "framer-motion"; 4 | // Sparkles Text 5 | import { cn } from "@/lib/utils"; 6 | 7 | const SparklesText = ({ 8 | text, 9 | colors = { first: "#9E7AFF", second: "#FE8BBB" }, 10 | className, 11 | sparklesCount = 10, 12 | ...props 13 | }) => { 14 | const [sparkles, setSparkles] = useState([]); 15 | 16 | useEffect(() => { 17 | const generateStar = () => { 18 | const starX = `${Math.random() * 100}%`; 19 | const starY = `${Math.random() * 100}%`; 20 | const color = Math.random() > 0.5 ? colors.first : colors.second; 21 | const delay = Math.random() * 2; 22 | const scale = Math.random() * 1 + 0.3; 23 | const lifespan = Math.random() * 10 + 5; 24 | const id = `${starX}-${starY}-${Date.now()}`; 25 | return { id, x: starX, y: starY, color, delay, scale, lifespan }; 26 | }; 27 | 28 | const initializeStars = () => { 29 | const newSparkles = Array.from({ length: sparklesCount }, generateStar); 30 | setSparkles(newSparkles); 31 | }; 32 | 33 | const updateStars = () => { 34 | setSparkles((currentSparkles) => 35 | currentSparkles.map((star) => { 36 | if (star.lifespan <= 0) { 37 | return generateStar(); 38 | } else { 39 | return { ...star, lifespan: star.lifespan - 0.1 }; 40 | } 41 | })); 42 | }; 43 | 44 | initializeStars(); 45 | const interval = setInterval(updateStars, 100); 46 | 47 | return () => clearInterval(interval); 48 | }, [colors.first, colors.second]); 49 | 50 | return ( 51 | (
60 | 61 | {sparkles.map((sparkle) => ( 62 | 63 | ))} 64 | {text} 65 | 66 |
) 67 | ); 68 | }; 69 | 70 | const Sparkle = ({ id, x, y, color, delay, scale }) => { 71 | return ( 72 | ( 85 | 88 | ) 89 | ); 90 | }; 91 | 92 | export default SparklesText; 93 | -------------------------------------------------------------------------------- /src/pages/About/About.jsx: -------------------------------------------------------------------------------- 1 | import HeroImg from "@/assets/images/hero.jpg"; 2 | 3 | 4 | 5 | export default function About() { 6 | return ( 7 | <> 8 |
9 |
10 |

11 | Hazrat Ali Software Engineering 12 |

13 |
14 |
15 |
16 | payments illustration 23 |
24 |
25 | 26 |
27 |

28 | Hello, I'm Hazrat Ali, a dedicated Software Developer with a passion for crafting robust and innovative solutions. My journey in the world of technology has been an exciting exploration, and I'm thrilled to share a bit about myself with you.{" "} 29 | 30 | Proficient in MERN Stack and Python: I specialize in MERN (MongoDB, Express.js, React, Node.js) stack development, harnessing the power of these technologies to build dynamic and scalable applications. Additionally, my proficiency extends to Python, where I've had the pleasure of working on diverse projects, including those leveraging the Django framework 31 | 32 | , Passion for Problem-Solving: What fuels my enthusiasm for software development is the thrill of problem-Solving. I thrive on challenges, and the dynamic nature of the tech world keeps me constantly engaged. My goal is not just to write code but to architect solutions that stand the test of time. 33 |

34 |

35 | Let's Collaborate: Whether you have a project in mind, wish to discuss the latest trends in tech, or just want to connect with a fellow enthusiast, I'm always open to collaboration and conversation. Feel free to reach out to me via email or connect with me on LinkedIn. 36 |

37 | 38 |
39 |
40 |

41 | Thank you for visiting my corner of the web. Let's embark on a journey of innovation together 42 |

43 | 44 |
45 | 46 | Hazrat Ali, Creator of 47 | 48 |
49 | hero logo 56 | Hazrat Ali 57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | 66 | ); 67 | } 68 | // About js 69 | -------------------------------------------------------------------------------- /src/components/ui/evervault-card.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useMotionValue } from "framer-motion"; 3 | import React, { useState, useEffect } from "react"; 4 | import { useMotionTemplate, motion } from "framer-motion"; 5 | import { cn } from "@/lib/utils"; 6 | // Evervalult Card 7 | export const EvervaultCard = ({ text, className }) => { 8 | let mouseX = useMotionValue(0); 9 | let mouseY = useMotionValue(0); 10 | 11 | const [randomString, setRandomString] = useState(""); 12 | 13 | useEffect(() => { 14 | let str = generateRandomString(1500); 15 | setRandomString(str); 16 | }, []); 17 | 18 | function onMouseMove({ currentTarget, clientX, clientY }) { 19 | let { left, top } = currentTarget.getBoundingClientRect(); 20 | mouseX.set(clientX - left); 21 | mouseY.set(clientY - top); 22 | 23 | const str = generateRandomString(1500); 24 | setRandomString(str); 25 | } 26 | 27 | return ( 28 |
34 |
38 | 43 |
44 |
45 |
46 | {text} 47 |
48 |
49 |
50 |
51 | ); 52 | }; 53 | 54 | export function CardPattern({ mouseX, mouseY, randomString }) { 55 | let maskImage = useMotionTemplate`radial-gradient(250px at ${mouseX}px ${mouseY}px, white, transparent)`; 56 | let style = { maskImage, WebkitMaskImage: maskImage }; 57 | 58 | return ( 59 |
60 |
61 | 65 | 69 |

70 | {randomString} 71 |

72 | 73 |
74 | ); 75 | } 76 | 77 | const characters = 78 | "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; 79 | export const generateRandomString = (length) => { 80 | let result = ""; 81 | for (let i = 0; i < length; i++) { 82 | result += characters.charAt(Math.floor(Math.random() * characters.length)); 83 | } 84 | return result; 85 | }; 86 | 87 | export const Icon = ({ className, ...rest }) => { 88 | return ( 89 | 98 | 99 | 100 | ); 101 | }; 102 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { 3 | FaHome, 4 | FaLaptopCode, 5 | FaUser, 6 | FaBriefcase, 7 | FaGraduationCap, 8 | FaCode, 9 | FaEnvelope, 10 | FaBars, 11 | } from "react-icons/fa"; 12 | import { Link, useLocation } from "react-router-dom"; 13 | // Header jsx 14 | export default function Header() { 15 | const location = useLocation(); 16 | const [activeLink, setActiveLink] = useState(() => { 17 | const path = location.pathname.substring(1) || "home"; 18 | return path; 19 | }); 20 | const [isMenuOpen, setIsMenuOpen] = useState(false); 21 | const [windowWidth, setWindowWidth] = useState(window.innerWidth); 22 | 23 | useEffect(() => { 24 | const handleResize = () => setWindowWidth(window.innerWidth); 25 | window.addEventListener('resize', handleResize); 26 | return () => window.removeEventListener('resize', handleResize); 27 | }, []); 28 | 29 | const navLinks = [ 30 | { id: "home", icon: FaHome, text: "Home", path: "/" }, 31 | { id: "skills", icon: FaCode, text: "Skills", path: "/skills" }, 32 | { 33 | id: "experience", 34 | icon: FaBriefcase, 35 | text: "Experience", 36 | path: "/experience", 37 | }, 38 | { 39 | id: "education", 40 | icon: FaGraduationCap, 41 | text: "Education", 42 | path: "/education", 43 | }, 44 | { id: "projects", icon: FaLaptopCode, text: "Projects", path: "/projects" }, 45 | { id: "contact", icon: FaEnvelope, text: "Contact", path: "/contact" }, 46 | ]; 47 | 48 | return ( 49 |
50 |
51 |
52 | 96 |
97 |
98 | 99 | 113 |
114 | ); 115 | } 116 | -------------------------------------------------------------------------------- /src/assets/css/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @keyframes float-slow { 6 | 0%, 7 | 100% { 8 | transform: translateY(0) rotate(1deg); 9 | } 10 | 50% { 11 | transform: translateY(-10px) rotate(-1deg); 12 | } 13 | } 14 | 15 | @keyframes gradient-shift { 16 | 0% { 17 | background-position: 0% 50%; 18 | } 19 | 50% { 20 | background-position: 100% 50%; 21 | } 22 | 100% { 23 | background-position: 0% 50%; 24 | } 25 | } 26 | 27 | .gradient-text { 28 | background: linear-gradient(90deg, #60a5fa, #34d399, #60a5fa); 29 | background-size: 200% auto; 30 | animation: gradient-shift 4s linear infinite; 31 | -webkit-background-clip: text; 32 | -webkit-text-fill-color: transparent; 33 | } 34 | 35 | .gradient-border { 36 | position: relative; 37 | background: linear-gradient(45deg, #60a5fa, #34d399); 38 | padding: 2px; 39 | border-radius: 0.75rem; 40 | } 41 | 42 | .nav-link { 43 | position: relative; 44 | } 45 | 46 | .nav-link::after { 47 | content: ""; 48 | position: absolute; 49 | width: 0; 50 | height: 2px; 51 | bottom: -4px; 52 | left: 0; 53 | background: linear-gradient(45deg, #60a5fa, #34d399); 54 | transition: width 0.3s ease; 55 | } 56 | 57 | .nav-link:hover::after { 58 | width: 100%; 59 | } 60 | 61 | .code-window { 62 | position: relative; 63 | border-radius: 0.75rem; 64 | overflow: hidden; 65 | transition: all 0.3s ease; 66 | } 67 | 68 | .window-header { 69 | background: #0b466359; 70 | padding: 0.75rem; 71 | display: flex; 72 | align-items: center; 73 | gap: 0.5rem; 74 | } 75 | 76 | .window-dot { 77 | width: 12px; 78 | height: 12px; 79 | border-radius: 50%; 80 | transition: transform 0.3s ease; 81 | } 82 | 83 | .window-dot:hover { 84 | transform: scale(1.2); 85 | } 86 | 87 | .animate-float-slow { 88 | animation: float-slow 7s ease-in-out infinite; 89 | } 90 | 91 | .animate-float { 92 | animation: float 6s ease-in-out infinite; 93 | } 94 | 95 | @keyframes float { 96 | 0%, 97 | 100% { 98 | transform: translateY(0); 99 | } 100 | 50% { 101 | transform: translateY(-20px); 102 | } 103 | } 104 | 105 | .typing-effect::after { 106 | content: "|"; 107 | animation: blink 1s step-end infinite; 108 | margin-left: 2px; 109 | color: #60a5fa; 110 | } 111 | 112 | @keyframes blink { 113 | from, 114 | to { 115 | opacity: 1; 116 | } 117 | 50% { 118 | opacity: 0; 119 | } 120 | } 121 | 122 | /* Enhanced Prism.js styling */ 123 | pre[class*="language-"] { 124 | background: #091121 !important; 125 | padding: 1.5rem !important; 126 | margin: 0 !important; 127 | font-size: 0.95rem !important; 128 | } 129 | 130 | .token.comment { 131 | color: #8b9cb3 !important; 132 | font-style: italic; 133 | } 134 | 135 | .token.string { 136 | color: #a5d6ff !important; 137 | } 138 | 139 | .token.keyword { 140 | color: #ff79c6 !important; 141 | } 142 | 143 | .token.function { 144 | color: #66e7ff !important; 145 | } 146 | 147 | @layer base { 148 | :root { 149 | --background: 0 0% 100%; 150 | --foreground: 0 0% 3.9%; 151 | --card: 0 0% 100%; 152 | --card-foreground: 0 0% 3.9%; 153 | --popover: 0 0% 100%; 154 | --popover-foreground: 0 0% 3.9%; 155 | --primary: 0 0% 9%; 156 | --primary-foreground: 0 0% 98%; 157 | --secondary: 0 0% 96.1%; 158 | --secondary-foreground: 0 0% 9%; 159 | --muted: 0 0% 96.1%; 160 | --muted-foreground: 0 0% 45.1%; 161 | --accent: 0 0% 96.1%; 162 | --accent-foreground: 0 0% 9%; 163 | --destructive: 0 84.2% 60.2%; 164 | --destructive-foreground: 0 0% 98%; 165 | --border: 0 0% 89.8%; 166 | --input: 0 0% 89.8%; 167 | --ring: 0 0% 3.9%; 168 | --chart-1: 12 76% 61%; 169 | --chart-2: 173 58% 39%; 170 | --chart-3: 197 37% 24%; 171 | --chart-4: 43 74% 66%; 172 | --chart-5: 27 87% 67%; 173 | --radius: 0.5rem; 174 | } 175 | .dark { 176 | --background: 0 0% 3.9%; 177 | --foreground: 0 0% 98%; 178 | --card: 0 0% 3.9%; 179 | --card-foreground: 0 0% 98%; 180 | --popover: 0 0% 3.9%; 181 | --popover-foreground: 0 0% 98%; 182 | --primary: 0 0% 98%; 183 | --primary-foreground: 0 0% 9%; 184 | --secondary: 0 0% 14.9%; 185 | --secondary-foreground: 0 0% 98%; 186 | --muted: 0 0% 14.9%; 187 | --muted-foreground: 0 0% 63.9%; 188 | --accent: 0 0% 14.9%; 189 | --accent-foreground: 0 0% 98%; 190 | --destructive: 0 62.8% 30.6%; 191 | --destructive-foreground: 0 0% 98%; 192 | --border: 0 0% 14.9%; 193 | --input: 0 0% 14.9%; 194 | --ring: 0 0% 83.1%; 195 | --chart-1: 220 70% 50%; 196 | --chart-2: 160 60% 45%; 197 | --chart-3: 30 80% 55%; 198 | --chart-4: 280 65% 60%; 199 | --chart-5: 340 75% 55%; 200 | } 201 | } 202 | 203 | @layer base { 204 | * { 205 | @apply border-border; 206 | } 207 | body { 208 | @apply bg-background text-foreground; 209 | } 210 | } 211 | /* Add these classes to adjust the grid colors in the top-left and bottom-right */ 212 | .top-left-grid { 213 | background-color: white; 214 | opacity: 0.8; /* Make it more visible */ 215 | } 216 | 217 | .bottom-right-grid { 218 | background-color: white; 219 | opacity: 0.8; /* Make it more visible */ 220 | } 221 | -------------------------------------------------------------------------------- /src/pages/Experience/Experience.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Code2, Activity, Cpu, Layers, Network, Binary } from "lucide-react"; 3 | // Experiance 4 | const ExperienceCard = ({ 5 | title, 6 | company, 7 | period, 8 | description, 9 | icon: Icon, 10 | }) => ( 11 |
12 | {/* Glass morphism effect */} 13 |
14 | 15 | {/* Animated gradient border */} 16 |
17 | 18 |
19 | {/* Floating icon with pulse effect */} 20 |
21 |
22 | 23 |
24 | 25 | {/* Content with improved typography */} 26 |
27 |

28 | {title} 29 |

30 |
31 | {company} 32 | 33 | {period} 34 | 35 |
36 |

37 | {description} 38 |

39 |
40 | 41 | {/* Decorative elements */} 42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | ); 53 | 54 | const ExperienceSection = () => { 55 | const experiences = [ 56 | { 57 | icon: Network, 58 | title: "Software Engineering", 59 | company: "Fiverr", 60 | period: "2019 - 2020", 61 | description: 62 | "Worked on developing and customizing WordPress websites for clients globally.", 63 | }, 64 | { 65 | icon: Layers, 66 | title: "Software Developer", 67 | company: "Fiverr", 68 | period: "2021 - 2023", 69 | description: 70 | "Assisted in building and optimizing user interfaces with a focus on responsive and interactive designs.", 71 | }, 72 | { 73 | icon: Code2, 74 | title: "JavaScript Developer", 75 | company: "Fiver", 76 | period: "2024 - Present", 77 | description: 78 | "Contributed to developing JavaScript libraries and enhancing framework functionalities.", 79 | }, 80 | ]; 81 | 82 | return ( 83 | <> 84 |
85 | {/* Animated gradient background */} 86 |
87 | 88 | {/* Grid background */} 89 |
90 | 91 | {/* Animated particles */} 92 |
93 | {[...Array(20)].map((_, i) => ( 94 |
103 | ))} 104 |
105 | 106 | {/* Content container */} 107 |
108 | {/* Section header with enhanced effects */} 109 |
110 |
111 |

112 | Professional Journey 113 |

114 |
115 |
116 |

117 | "Transforming ideas into digital reality, one project at a time" 118 |

119 |
120 | 121 | {/* Experience grid with improved layout */} 122 |
123 | {experiences.map((exp, index) => ( 124 | 125 | ))} 126 |
127 |
128 | 129 | {/* Enhanced background effects */} 130 |
131 |
132 |
133 | 134 | ); 135 | }; 136 | 137 | export default ExperienceSection; 138 | -------------------------------------------------------------------------------- /src/components/ui/cool-mode.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react"; 2 | // Cool Mode 3 | const getContainer = () => { 4 | const id = "_coolMode_effect"; 5 | let existingContainer = document.getElementById(id); 6 | 7 | if (existingContainer) { 8 | return existingContainer; 9 | } 10 | 11 | const container = document.createElement("div"); 12 | container.setAttribute("id", id); 13 | container.setAttribute( 14 | "style", 15 | "overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647" 16 | ); 17 | 18 | document.body.appendChild(container); 19 | 20 | return container; 21 | }; 22 | 23 | let instanceCounter = 0; 24 | 25 | const applyParticleEffect = (element, options) => { 26 | instanceCounter++; 27 | 28 | const defaultParticle = "circle"; 29 | const particleType = options?.particle || defaultParticle; 30 | const sizes = [15, 20, 25, 35, 45]; 31 | const limit = 45; 32 | 33 | let particles = []; 34 | let autoAddParticle = false; 35 | let mouseX = 0; 36 | let mouseY = 0; 37 | 38 | const container = getContainer(); 39 | 40 | function generateParticle() { 41 | const size = 42 | options?.size || sizes[Math.floor(Math.random() * sizes.length)]; 43 | const speedHorz = options?.speedHorz || Math.random() * 10; 44 | const speedUp = options?.speedUp || Math.random() * 25; 45 | const spinVal = Math.random() * 360; 46 | const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1); 47 | const top = mouseY - size / 2; 48 | const left = mouseX - size / 2; 49 | const direction = Math.random() <= 0.5 ? -1 : 1; 50 | 51 | const particle = document.createElement("div"); 52 | 53 | if (particleType === "circle") { 54 | const svgNS = "http://www.w3.org/2000/svg"; 55 | const circleSVG = document.createElementNS(svgNS, "svg"); 56 | const circle = document.createElementNS(svgNS, "circle"); 57 | circle.setAttributeNS(null, "cx", (size / 2).toString()); 58 | circle.setAttributeNS(null, "cy", (size / 2).toString()); 59 | circle.setAttributeNS(null, "r", (size / 2).toString()); 60 | circle.setAttributeNS(null, "fill", `hsl(${Math.random() * 360}, 70%, 50%)`); 61 | 62 | circleSVG.appendChild(circle); 63 | circleSVG.setAttribute("width", size.toString()); 64 | circleSVG.setAttribute("height", size.toString()); 65 | 66 | particle.appendChild(circleSVG); 67 | } else { 68 | particle.innerHTML = ``; 69 | } 70 | 71 | particle.style.position = "absolute"; 72 | particle.style.transform = `translate3d(${left}px, ${top}px, 0px) rotate(${spinVal}deg)`; 73 | 74 | container.appendChild(particle); 75 | 76 | particles.push({ 77 | direction, 78 | element: particle, 79 | left, 80 | size, 81 | speedHorz, 82 | speedUp, 83 | spinSpeed, 84 | spinVal, 85 | top, 86 | }); 87 | } 88 | 89 | function refreshParticles() { 90 | particles.forEach((p) => { 91 | p.left = p.left - p.speedHorz * p.direction; 92 | p.top = p.top - p.speedUp; 93 | p.speedUp = Math.min(p.size, p.speedUp - 1); 94 | p.spinVal = p.spinVal + p.spinSpeed; 95 | 96 | if ( 97 | p.top >= 98 | Math.max(window.innerHeight, document.body.clientHeight) + p.size 99 | ) { 100 | particles = particles.filter((o) => o !== p); 101 | p.element.remove(); 102 | } 103 | 104 | p.element.setAttribute("style", [ 105 | "position:absolute", 106 | "will-change:transform", 107 | `top:${p.top}px`, 108 | `left:${p.left}px`, 109 | `transform:rotate(${p.spinVal}deg)`, 110 | ].join(";")); 111 | }); 112 | } 113 | 114 | let animationFrame; 115 | 116 | let lastParticleTimestamp = 0; 117 | const particleGenerationDelay = 30; 118 | 119 | function loop() { 120 | const currentTime = performance.now(); 121 | if ( 122 | autoAddParticle && 123 | particles.length < limit && 124 | currentTime - lastParticleTimestamp > particleGenerationDelay 125 | ) { 126 | generateParticle(); 127 | lastParticleTimestamp = currentTime; 128 | } 129 | 130 | refreshParticles(); 131 | animationFrame = requestAnimationFrame(loop); 132 | } 133 | 134 | loop(); 135 | 136 | const isTouchInteraction = "ontouchstart" in window; 137 | 138 | const tap = isTouchInteraction ? "touchstart" : "mousedown"; 139 | const tapEnd = isTouchInteraction ? "touchend" : "mouseup"; 140 | const move = isTouchInteraction ? "touchmove" : "mousemove"; 141 | 142 | const updateMousePosition = (e) => { 143 | if ("touches" in e) { 144 | mouseX = e.touches?.[0].clientX; 145 | mouseY = e.touches?.[0].clientY; 146 | } else { 147 | mouseX = e.clientX; 148 | mouseY = e.clientY; 149 | } 150 | }; 151 | 152 | const tapHandler = (e) => { 153 | updateMousePosition(e); 154 | autoAddParticle = true; 155 | }; 156 | 157 | const disableAutoAddParticle = () => { 158 | autoAddParticle = false; 159 | }; 160 | 161 | element.addEventListener(move, updateMousePosition, { passive: true }); 162 | element.addEventListener(tap, tapHandler, { passive: true }); 163 | element.addEventListener(tapEnd, disableAutoAddParticle, { passive: true }); 164 | element.addEventListener("mouseleave", disableAutoAddParticle, { 165 | passive: true, 166 | }); 167 | 168 | return () => { 169 | element.removeEventListener(move, updateMousePosition); 170 | element.removeEventListener(tap, tapHandler); 171 | element.removeEventListener(tapEnd, disableAutoAddParticle); 172 | element.removeEventListener("mouseleave", disableAutoAddParticle); 173 | 174 | const interval = setInterval(() => { 175 | if (animationFrame && particles.length === 0) { 176 | cancelAnimationFrame(animationFrame); 177 | clearInterval(interval); 178 | 179 | if (--instanceCounter === 0) { 180 | container.remove(); 181 | } 182 | } 183 | }, 500); 184 | }; 185 | }; 186 | 187 | export const CoolMode = ({ children, options }) => { 188 | const ref = useRef(null); 189 | 190 | useEffect(() => { 191 | if (ref.current) { 192 | return applyParticleEffect(ref.current, options); 193 | } 194 | }, [options]); 195 | 196 | return React.cloneElement(children, { ref }); 197 | }; 198 | -------------------------------------------------------------------------------- /src/pages/Education/Education.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import EducationLoader from "@/components/ui/EducationLoader"; 3 | import { 4 | Star, 5 | Award, 6 | Calendar, 7 | BookOpen, 8 | GraduationCap, 9 | Trophy, 10 | } from "lucide-react"; 11 | import { motion } from "framer-motion"; 12 | // Education 13 | const EducationSection = () => { 14 | const [hoveredIndex, setHoveredIndex] = useState(null); 15 | 16 | const educationData = [ 17 | { 18 | degree: "Secondary School Certificate (SSC)", 19 | school: "Hazi Moazzem Ali Adarsha High School", 20 | mascot: "📘", 21 | year: "2015-2016", 22 | achievements: ["GPA: 5.00", "Group: Science"], 23 | skills: ["Mathematics", "Physics", "Chemistry", "Biology"], 24 | description: 25 | "Focused on core science subjects with emphasis on practical laboratory work and scientific research methodologies.", 26 | }, 27 | { 28 | degree: "Higher Secondary Certificate (HSC)", 29 | school: "Demra Ideal College", 30 | mascot: "📗", 31 | year: "2018-2019", 32 | achievements: ["GPA: 4.75", "Group: Science" ], 33 | skills: ["Higher Mathematics", "Physics", "Chemistry", "Biology"], 34 | description: 35 | "Developed strong analytical and critical thinking skills through comprehensive study of Higher Mathematics and Physics.", 36 | }, 37 | { 38 | degree: "Bachelor of Software Engineering (BSEng)", 39 | school: "University of Scholars (Running)", 40 | mascot: "📙", 41 | year: "2023-2026", 42 | achievements: ["CGPA: 3.36", "Dept of CSE" ], 43 | skills: ["Data Structure", "Programmnig", "Problem Solving",], 44 | description: 45 | "Developed strong analytical and critical thinking skills through comprehensive study of Data Structure and Programming", 46 | }, 47 | 48 | ]; 49 | 50 | const containerVariants = { 51 | hidden: { opacity: 0 }, 52 | visible: { 53 | opacity: 1, 54 | transition: { 55 | staggerChildren: 0.2, 56 | }, 57 | }, 58 | }; 59 | 60 | const cardVariants = { 61 | hidden: { y: 50, opacity: 0 }, 62 | visible: { 63 | y: 0, 64 | opacity: 1, 65 | transition: { 66 | duration: 0.6, 67 | ease: "easeOut", 68 | }, 69 | }, 70 | }; 71 | 72 | return ( 73 |
74 | {/* Grid Background */} 75 |
76 |
77 |
78 |
79 |
80 | 81 |
82 | 88 |

89 | Educational Journey 90 |

91 |

92 | Discover how academic excellence shapes innovative thinking and 93 | professional growth. 94 |

95 | 96 | 97 | 103 | {educationData.map((edu, index) => ( 104 | setHoveredIndex(index)} 113 | onMouseLeave={() => setHoveredIndex(null)} 114 | > 115 |
116 |
117 |
118 | {edu.mascot} 119 |

120 | {edu.degree} 121 |

122 |
123 |

124 | 125 | {edu.school} 126 |

127 |

128 | 129 | {edu.year} 130 |

131 |
132 | 133 |

134 | {edu.description} 135 |

136 | 137 |
138 |

139 | 140 | Key Achievements 141 |

142 |
143 | {edu.achievements.map((achievement, i) => ( 144 |
148 | 149 | {achievement} 150 |
151 | ))} 152 |
153 |
154 | 155 |
156 | {edu.skills.map((skill, i) => ( 157 | 161 | {skill} 162 | 163 | ))} 164 |
165 |
166 | 167 | ))} 168 | 169 |
170 |
171 | ); 172 | }; 173 | 174 | export default EducationSection; 175 | -------------------------------------------------------------------------------- /src/pages/Skills/Skills.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Card, CardContent } from "@/components/ui/card"; 3 | import { Badge } from "@/components/ui/badge"; 4 | import IconCloudDemo from "@/components/globe"; 5 | import { Code2, Paintbrush, Database, Layout, Cpu, Cloud } from "lucide-react"; 6 | import { 7 | FaReact, 8 | FaNodeJs, 9 | FaPython, 10 | FaDocker, 11 | FaGitAlt, 12 | FaLinux, 13 | FaFigma, 14 | FaAws, 15 | } from "react-icons/fa"; 16 | import { 17 | SiNextdotjs, 18 | SiTypescript, 19 | SiTailwindcss, 20 | SiPostgresql, 21 | SiMongodb, 22 | SiGraphql, 23 | SiJest, 24 | SiWebpack, 25 | SiRedux, 26 | SiFirebase, 27 | SiVercel, 28 | SiVite, 29 | } from "react-icons/si"; 30 | import { TbBrandVscode } from "react-icons/tb"; 31 | import { BsFileEarmarkCode, BsGrid1X2 } from "react-icons/bs"; 32 | import { MdAnimation } from "react-icons/md"; 33 | import { FcWorkflow } from "react-icons/fc"; 34 | // Skills jsx 35 | const SkillCard = ({ icon: Icon, title, skills, color }) => ( 36 | 37 |
38 | 39 |
40 |
43 | 44 |
45 |

46 | {title} 47 |

48 |
49 |
50 | {skills.map((skill, index) => ( 51 | 56 | 57 | {skill.icon} 58 | 59 | {skill.name} 60 | 61 | ))} 62 |
63 | 64 | 65 | ); 66 | 67 | const SkillsSection = () => { 68 | const skillCategories = [ 69 | { 70 | icon: Code2, 71 | title: "Frontend Development", 72 | color: "text-blue-400", 73 | skills: [ 74 | { name: "React", icon: }, 75 | { 76 | name: "Next.js", 77 | icon: , 78 | }, 79 | { 80 | name: "TypeScript", 81 | icon: , 82 | }, 83 | { 84 | name: "Tailwind CSS", 85 | icon: , 86 | }, 87 | { 88 | name: "HTML5", 89 | icon: , 90 | }, 91 | { 92 | name: "CSS3", 93 | icon: , 94 | }, 95 | ], 96 | }, 97 | { 98 | icon: Database, 99 | title: "Backend Development", 100 | color: "text-green-400", 101 | skills: [ 102 | { 103 | name: "Node.js", 104 | icon: , 105 | }, 106 | { 107 | name: "Python", 108 | icon: , 109 | }, 110 | { 111 | name: "PostgreSQL", 112 | icon: , 113 | }, 114 | { 115 | name: "MongoDB", 116 | icon: , 117 | }, 118 | { 119 | name: "REST APIs", 120 | icon: , 121 | }, 122 | { 123 | name: "GraphQL", 124 | icon: , 125 | }, 126 | ], 127 | }, 128 | { 129 | icon: Layout, 130 | title: "UI/UX Design", 131 | color: "text-purple-400", 132 | skills: [ 133 | { name: "Figma", icon: }, 134 | { 135 | name: "Responsive Design", 136 | icon: , 137 | }, 138 | { 139 | name: "Wireframing", 140 | icon: , 141 | }, 142 | { 143 | name: "Prototyping", 144 | icon: , 145 | }, 146 | ], 147 | }, 148 | { 149 | icon: Cloud, 150 | title: "Cloud & DevOps", 151 | color: "text-orange-400", 152 | skills: [ 153 | { name: "AWS", icon: }, 154 | { 155 | name: "Docker", 156 | icon: , 157 | }, 158 | { name: "CI/CD", icon: }, 159 | { 160 | name: "Kubernetes", 161 | icon: , 162 | }, 163 | { name: "Git", icon: }, 164 | { name: "Linux", icon: }, 165 | ], 166 | }, 167 | { 168 | icon: Cpu, 169 | title: "Tools & Technologies", 170 | color: "text-pink-400", 171 | skills: [ 172 | { 173 | name: "VS Code", 174 | icon: , 175 | }, 176 | { name: "Jest", icon: }, 177 | { 178 | name: "Webpack", 179 | icon: , 180 | }, 181 | { name: "Redux", icon: }, 182 | { 183 | name: "Firebase", 184 | icon: , 185 | }, 186 | { name: "Vercel", icon: }, 187 | { name: "Vite", icon: }, 188 | ], 189 | }, 190 | { 191 | icon: Paintbrush, 192 | title: "Creative Skills", 193 | color: "text-yellow-400", 194 | skills: [ 195 | { 196 | name: "UI Animation", 197 | icon: , 198 | }, 199 | { 200 | name: "SVG Animation", 201 | icon: , 202 | }, 203 | { 204 | name: "3D Modeling", 205 | icon: , 206 | }, 207 | { 208 | name: "Motion Graphics", 209 | icon: , 210 | }, 211 | ], 212 | }, 213 | ]; 214 | 215 | return ( 216 |
217 | {/* Grid Background */} 218 |
219 | 220 |
221 |
222 | 223 |
224 |
225 | {skillCategories.map((category, index) => ( 226 | 233 | ))} 234 |
235 |
236 | 262 |
263 | ); 264 | }; 265 | 266 | export default SkillsSection; 267 | -------------------------------------------------------------------------------- /src/pages/Contact/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Send, Phone, MapPin, Mail } from "lucide-react"; 3 | // Contact Jsx 4 | export default function Contact() { 5 | const [formData, setFormData] = useState({ 6 | name: "", 7 | email: "", 8 | subject: "", 9 | message: "", 10 | }); 11 | 12 | const [errors, setErrors] = useState({}); 13 | const [status, setStatus] = useState(null); 14 | 15 | const validateForm = () => { 16 | let tempErrors = {}; 17 | let isValid = true; 18 | 19 | if (!formData.name.trim()) { 20 | tempErrors.name = "Name is required"; 21 | isValid = false; 22 | } 23 | 24 | if (!formData.email.trim()) { 25 | tempErrors.email = "Email is required"; 26 | isValid = false; 27 | } else if (!/\S+@\S+\.\S+/.test(formData.email)) { 28 | tempErrors.email = "Email is invalid"; 29 | isValid = false; 30 | } 31 | 32 | if (!formData.subject.trim()) { 33 | tempErrors.subject = "Subject is required"; 34 | isValid = false; 35 | } 36 | 37 | if (!formData.message.trim()) { 38 | tempErrors.message = "Message is required"; 39 | isValid = false; 40 | } 41 | 42 | setErrors(tempErrors); 43 | return isValid; 44 | }; 45 | 46 | const handleSubmit = async (e) => { 47 | e.preventDefault(); 48 | 49 | if (!validateForm()) { 50 | setStatus("Please fill in all required fields correctly."); 51 | return; 52 | } 53 | 54 | // Create a new FormData object to send to Web3Forms API 55 | const form = new FormData(); 56 | form.append("access_key", "90f4b8af-e590-42b0-beaf-10b18f66a703"); // Replace with your Web3Forms access key 57 | form.append("name", formData.name); 58 | form.append("email", formData.email); 59 | form.append("subject", formData.subject || "New Contact Form Submission"); 60 | form.append("message", formData.message); 61 | 62 | try { 63 | // Send form data to Web3Forms API 64 | const response = await fetch("https://api.web3forms.com/submit", { 65 | method: "POST", 66 | body: form, 67 | }); 68 | 69 | const result = await response.json(); 70 | 71 | if (response.ok) { 72 | setStatus("Message sent successfully!"); 73 | setFormData({ 74 | name: "", 75 | email: "", 76 | subject: "", 77 | message: "", 78 | }); 79 | setErrors({}); 80 | } else { 81 | setStatus(result.message || "There was an error sending your message."); 82 | } 83 | } catch (error) { 84 | setStatus("An error occurred. Please try again."); 85 | console.error("Error:", error); 86 | } 87 | }; 88 | 89 | return ( 90 |
94 |
95 |
96 |
97 | {/* Contact Info */} 98 |
99 |
100 |

101 | Get in Touch 102 |

103 |

104 | Have a question or want to work together? Drop us a message! 105 |

106 |
107 | 108 |
109 |
110 |
111 | 112 |
113 |
114 |

Email

115 |

hazrataliportfolio@gmail.com

116 |
117 |
118 | 119 |
120 |
121 | 122 |
123 |
124 |

Location

125 |

Dhaka, Bangladesh

126 |
127 |
128 |
129 |
130 | 131 | {/* Contact Form */} 132 |
133 |
134 |
135 |
136 | 144 | setFormData({ ...formData, name: e.target.value }) 145 | } 146 | /> 147 | {errors.name && ( 148 |

{errors.name}

149 | )} 150 |
151 | 152 |
153 | 161 | setFormData({ ...formData, email: e.target.value }) 162 | } 163 | /> 164 | {errors.email && ( 165 |

166 | {errors.email} 167 |

168 | )} 169 |
170 | 171 |
172 | 180 | setFormData({ ...formData, subject: e.target.value }) 181 | } 182 | /> 183 | {errors.subject && ( 184 |

185 | {errors.subject} 186 |

187 | )} 188 |
189 | 190 |
191 | 202 | {errors.message && ( 203 |

204 | {errors.message} 205 |

206 | )} 207 |
208 |
209 | 210 | 217 |
218 | 219 | {/* Status Message */} 220 | {status && ( 221 |
228 |

{status}

229 |
230 | )} 231 |
232 |
233 |
234 |
235 |
236 | ); 237 | } 238 | -------------------------------------------------------------------------------- /src/pages/Projects/Projects.jsx: -------------------------------------------------------------------------------- 1 | import { ReactLenis } from "lenis/react"; 2 | import { useTransform, motion, useScroll } from "framer-motion"; 3 | import { useRef, useEffect } from "react"; 4 | import PropTypes from "prop-types"; 5 | // Projects 6 | const projects = [ 7 | { 8 | title: "Hazrat Ali Problem Solving", 9 | description: 10 | "This Projcet of problem-solving based on Hazrat Ali, responsive UI components.", 11 | src: "rock.jpg", 12 | link: "https://i.postimg.cc/L5G89Kwn/problem-solving.jpg", 13 | color: "#5196fd", 14 | githubLink: "https://github.com/Hazrat-Ali9/Problem-Solving-Frontend", 15 | liveLink: "https://hazrat-ali-problem-solving.vercel.app", 16 | }, 17 | 18 | { 19 | title: "Hazrat Ali Blogs ", 20 | description: 21 | "A sleek portfolio built with React and Tailwind CSS to showcase your skills, projects, and experience in a modern design.", 22 | src: "tree.jpg", 23 | link: "https://i.postimg.cc/GtCL4K1Q/blog-site.jpg", 24 | color: "#8f89ff", 25 | githubLink: "https://github.com/Hazrat-Ali9/Personal-Blog-Frontend", 26 | liveLink: "https://hazrat-ali-blog.vercel.app/", 27 | }, 28 | 29 | ]; 30 | 31 | export default function Projects() { 32 | const container = useRef(null); 33 | const { scrollYProgress } = useScroll({ 34 | target: container, 35 | offset: ["start start", "end end"], 36 | }); 37 | 38 | useEffect(() => { 39 | // Add specific styles for 1366x768 resolution 40 | const style = document.createElement("style"); 41 | style.textContent = ` 42 | @media screen and (width: 1366px) and (height: 768px), 43 | screen and (width: 1367px) and (height: 768px), 44 | screen and (width: 1368px) and (height: 769px) { 45 | .project-card { 46 | scale: 0.85; 47 | margin-top: -5vh; 48 | } 49 | .project-container { 50 | height: 90vh; 51 | } 52 | } 53 | `; 54 | document.head.appendChild(style); 55 | 56 | // Resolution check function 57 | const checkResolution = () => { 58 | const isTargetResolution = 59 | window.innerWidth >= 1360 && 60 | window.innerWidth <= 1370 && 61 | window.innerHeight >= 760 && 62 | window.innerHeight <= 775; 63 | 64 | if (isTargetResolution) { 65 | document.documentElement.style.setProperty("--project-scale", "0.85"); 66 | document.documentElement.style.setProperty("--project-margin", "-5vh"); 67 | } else { 68 | document.documentElement.style.setProperty("--project-scale", "1"); 69 | document.documentElement.style.setProperty("--project-margin", "0"); 70 | } 71 | }; 72 | 73 | checkResolution(); 74 | window.addEventListener("resize", checkResolution); 75 | 76 | return () => { 77 | document.head.removeChild(style); 78 | window.removeEventListener("resize", checkResolution); 79 | }; 80 | }, []); 81 | 82 | return ( 83 | 84 |
85 |
86 | {projects.map((project, i) => { 87 | const targetScale = 1 - (projects.length - i) * 0.05; 88 | return ( 89 | 102 | ); 103 | })} 104 |
105 |
106 | 107 | ); 108 | } 109 | 110 | function Card({ 111 | i, 112 | title, 113 | description, 114 | url, 115 | color, 116 | progress, 117 | range, 118 | targetScale, 119 | githubLink, 120 | liveLink, 121 | }) { 122 | const container = useRef(null); 123 | const scale = useTransform(progress, range, [1, targetScale]); 124 | 125 | return ( 126 |
130 | 143 | {/* Modern split card design */} 144 |
145 | {/* Image section - full width on mobile, 55% on desktop */} 146 |
147 | 155 | 156 | {/* Colored overlay on hover */} 157 | 164 | 165 | {/* Project number */} 166 |
167 | Project {i + 1} 168 |
169 |
170 | 171 | {/* Content section - full width on mobile, 45% on desktop */} 172 |
173 |
174 |
175 |
179 |
180 |
181 | 182 |

183 | {title} 184 |

185 |

186 | {description} 187 |

188 |
189 | 190 |
191 |
192 | 193 |
194 | {/* GitHub Link */} 195 | 203 | 214 | 215 | 216 | 220 | Code 221 | 222 | 223 | 224 | {/* Live Link */} 225 | 233 | 244 | 245 | 246 | 247 | 248 | 252 | Live 253 | 254 | 255 |
256 |
257 |
258 |
259 | 260 |
261 | ); 262 | } 263 | 264 | // Add PropTypes validation 265 | Card.propTypes = { 266 | i: PropTypes.number.isRequired, 267 | title: PropTypes.string.isRequired, 268 | description: PropTypes.string.isRequired, 269 | url: PropTypes.string.isRequired, 270 | color: PropTypes.string.isRequired, 271 | progress: PropTypes.object.isRequired, 272 | range: PropTypes.array.isRequired, 273 | targetScale: PropTypes.number.isRequired, 274 | githubLink: PropTypes.string.isRequired, 275 | liveLink: PropTypes.string.isRequired, 276 | }; 277 | -------------------------------------------------------------------------------- /src/components/enhanced-portfolio-card.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react" 2 | import { motion, useAnimation } from "framer-motion" 3 | import { Button } from "@/components/ui/button" 4 | import { Card } from "@/components/ui/card" 5 | import { Badge } from "@/components/ui/badge" 6 | import { Download, CheckCircle, Briefcase, Code, Palette } from 'lucide-react' 7 | import { 8 | Tooltip, 9 | TooltipContent, 10 | TooltipProvider, 11 | TooltipTrigger, 12 | } from "@/components/ui/tooltip" 13 | // Enhanced Porfolio card 14 | const Particles = () => { 15 | return ( 16 | (
17 | {[...Array(50)].map((_, i) => ( 18 | 39 | ))} 40 |
) 41 | ); 42 | } 43 | 44 | export default function EnhancedPortfolioCard() { 45 | const [isHovered, setIsHovered] = useState(false) 46 | const controls = useAnimation() 47 | 48 | useEffect(() => { 49 | controls.start({ 50 | background: [ 51 | "linear-gradient(to right bottom, #1a1a2e, #16213e, #1b2a4e, #24335e, #2f3c6e)", 52 | "linear-gradient(to right bottom, #2f3c6e, #24335e, #1b2a4e, #16213e, #1a1a2e)", 53 | ], 54 | transition: { 55 | duration: 10, 56 | repeat: Infinity, 57 | repeatType: "reverse", 58 | }, 59 | }) 60 | }, [controls]) 61 | 62 | return ( 63 | ( 66 | 67 | 72 | {/* Profile Card */} 73 | 75 | 82 | setIsHovered(true)} 86 | onHoverEnd={() => setIsHovered(false)}> 87 | 91 | Profile 95 | 96 | 101 | Hazrat Ali 102 | 103 | 109 | hazrataliein@gmail.com 110 | 111 | 115 | 120 | 121 | 122 | 123 | {/* Info Section */} 124 |
125 | {/* About Me */} 126 | 128 | 133 |
134 |

136 | About Me 137 |

138 | 141 | 142 | Hello, I'm Hazrat Ali 143 | 144 |
145 |

146 | a dedicated Software Developer with a passion for crafting robust and innovative solutions. My journey in the world of technology has been an exciting exploration, and I'm thrilled to share a bit about myself with you 147 |

148 |

149 | Proficient in MERN Stack and Python: I specialize in MERN (MongoDB, Express.js, React, Node.js) stack development, harnessing the power of these technologies to build dynamic and scalable applications. Additionally, my proficiency extends to Python, where I've had the pleasure of working on diverse projects, including those leveraging the Django framework 150 |

151 | 152 | 153 | 154 | {/* Latest Roles */} 155 | 157 |

159 | Latest Roles 160 |

161 | 166 | 167 | 171 | 172 | 173 |
174 |

175 | Software Developer 176 |

177 |

Frontend Developer

178 |
179 | 180 | 181 | 185 | 186 | 187 |
188 |

189 | Programmer 190 |

191 |

192 | Software Engineering 193 |

194 |
195 | 196 | 197 | 198 | 199 | {/* Main Apps */} 200 | 202 |

204 | Main Apps 205 |

206 | 211 | {[ 212 | { name: "Figma", icon: }, 213 | { name: "Sketch", icon: }, 214 | { name: "Photoshop", icon: }, 215 | { name: "Framer", icon: }, 216 | ].map((app, index) => ( 217 | 218 | 219 | 220 | 226 | 230 | {app.icon} 231 | 232 | 233 | {app.name} 234 | 235 | 236 | 237 | 238 |

Proficient in {app.name}

239 | 240 | 241 | 242 | ))} 243 | 244 | 245 |
246 | 247 | ) 248 | ); 249 | } 250 | 251 | -------------------------------------------------------------------------------- /src/pages/Hero/Hero.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import Prism from "prismjs"; 3 | import "prismjs/components/prism-javascript"; 4 | import "@/assets/css/tomorrow.css"; 5 | import Meteors from "@/components/ui/meteors"; 6 | import PortfolioPage from "@/pages/About/About"; 7 | import SparklesText from "@/components/ui/sparkles-text"; 8 | import { FlipWords } from "@/components/ui/flip-words"; 9 | // prisma components 10 | // Grid Background - Replacing the HexagonBackground 11 | const GridBackground = () => { 12 | return ( 13 |
14 |
15 | 21 | 27 | 35 | 36 | 37 | 38 |
39 |
40 | ); 41 | }; 42 | 43 | export default function Hero() { 44 | const words = [ 45 | "Programmer & Software Engineering", 46 | "JavaScript Engineering ", 47 | "Learning MARN Stack || Python ", 48 | , 49 | ]; 50 | 51 | const [code] = useState(` 52 | const profile = { 53 | name: 'Hazrat Ali', 54 | title: 'Programmer || Software Engineering || Problem Solver', 55 | skills: [ 56 | 'HTML', 'CSS', 'Bootstrap', 'JavaScript', 57 | 'React', 'NextJS', 'Redux', 'Express', 58 | 'MySQL', 'MongoDB', 'Docker', 'Java', 'TypeScript', 59 | 'GraphQL', 'Git', 'Python', 'Django' 60 | ], 61 | hardWorker: true, 62 | quickLearner: true, 63 | problemSolver: true, 64 | ProgrammingExperience: 5, 65 | hireable: function() { 66 | return ( 67 | this.hardWorker && 68 | this.problemSolver && 69 | this.skills.length >= 5 && 70 | this.programmingExperience >= 5 71 | ); 72 | } 73 | }; 74 | `); 75 | 76 | useEffect(() => { 77 | Prism.highlightAll(); 78 | 79 | // Add CSS animation for grid and dots 80 | const style = document.createElement("style"); 81 | style.textContent = ` 82 | @keyframes gridPulse { 83 | 0%, 100% { opacity: 0.1; } 84 | 50% { opacity: 0.3; } 85 | } 86 | 87 | @keyframes dotPulse { 88 | 0%, 100% { opacity: 0.2; transform: scale(0.8); } 89 | 50% { opacity: 0.5; transform: scale(1.2); } 90 | } 91 | 92 | /* Media query for 1366x768 resolution */ 93 | @media screen and (width: 1366px) and (height: 768px), 94 | screen and (width: 1367px) and (height: 768px), 95 | screen and (width: 1368px) and (height: 769px) { 96 | .hero { 97 | padding-top: 12rem !important; 98 | } 99 | .hero .container { 100 | padding-top: 10rem !important; 101 | margin-top: 5rem !important; 102 | } 103 | .hero-section-padding { 104 | padding-top: 12rem !important; 105 | } 106 | } 107 | `; 108 | document.head.appendChild(style); 109 | 110 | // Apply extra padding for 1366x768 resolution 111 | const checkResolution = () => { 112 | const isTargetResolution = 113 | window.innerWidth >= 1360 && 114 | window.innerWidth <= 1370 && 115 | window.innerHeight >= 760 && 116 | window.innerHeight <= 775; 117 | 118 | if (isTargetResolution) { 119 | document.documentElement.style.setProperty( 120 | "--hero-padding-top", 121 | "12rem" 122 | ); 123 | } else { 124 | document.documentElement.style.setProperty("--hero-padding-top", "0"); 125 | } 126 | }; 127 | 128 | checkResolution(); 129 | window.addEventListener("resize", checkResolution); 130 | 131 | return () => { 132 | document.head.removeChild(style); 133 | window.removeEventListener("resize", checkResolution); 134 | }; 135 | }, [code]); 136 | 137 | return ( 138 | <> 139 |
140 |
144 |
145 | 146 | {/* Choose one of these background options */} 147 | 148 | 149 | {/* Or keep the original backgrounds if you prefer */} 150 | {/* */} 151 | {/* */} 152 | {/* */} 153 | 154 | {/* Meteors Effect */} 155 |
156 | 157 |
158 | 159 | {/* Main content container */} 160 |
= 1360 && 165 | window.innerWidth <= 1370 && 166 | window.innerHeight >= 760 && 167 | window.innerHeight <= 775 168 | ? "12rem" 169 | : "", 170 | }} 171 | > 172 | {/* Left column - Text content */} 173 |
174 | {/* Decorative blurs */} 175 |
176 |
177 | 178 | {/* Welcome badge */} 179 |
180 |
181 | 182 | Welcome to my World 183 | 184 |
185 | 186 | {/* Name section */} 187 |
188 |

189 | 190 | 191 | I'm 192 | 193 | {" "} 194 | Hazrat Ali 195 | 196 | 197 |

198 |
199 |
200 | 201 | {/* Role badge */} 202 |
203 | 204 | 205 | 209 | 210 |
211 | 212 | {/* Description */} 213 |
214 |

215 | Problem Solver 🚀 | Javascript Engineer 🚁 | Crafting frameworks 216 | and coding the future ✈ 217 |

218 |
219 | 220 | {/* CTA Buttons */} 221 |
222 | {/* View Projects Button */} 223 | 227 | 228 | 229 | Github 230 | 231 | 232 | 233 | 234 | 235 | {/* Contact Button */} 236 | 240 | 241 | 242 | Get Resume 243 | 244 | 245 | 246 | 247 |
248 | 249 | {/* Floating badges */} 250 |
251 |
252 |   Never Give 253 | Up 254 |
255 |
256 |
257 |
258 |   Allah is Watching you 259 |
260 |
261 |
262 |
263 |   Never say never 264 |
265 |
266 |
267 | 268 | {/* Right column - Code window */} 269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 | 277 | 278 | Programmer 279 | 280 |
281 | 
282 |                     {code}
283 |
284 |
285 |
286 |
287 |
288 |
289 | 290 | {/* Scroll indicator */} 291 |
292 | 293 | 294 | About me 295 | 296 | 297 |
298 | 299 |
300 | 301 | ); 302 | } 303 | --------------------------------------------------------------------------------