6 | //
22 | // )
23 | // }
--------------------------------------------------------------------------------
/Portfolio/portfolio/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { cva, type VariantProps } from "class-variance-authority"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const badgeVariants = cva(
7 | "inline-flex items-center rounded-md 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 shadow 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 shadow hover:bg-destructive/80",
17 | outline: "text-foreground",
18 | },
19 | },
20 | defaultVariants: {
21 | variant: "default",
22 | },
23 | }
24 | )
25 |
26 | export interface BadgeProps
27 | extends React.HTMLAttributes7 | // Thank you for visiting my portfolio! 8 | //
9 | //10 | // If you’re looking for someone to help bring your ideas to life, I’d be excited to collaborate with you. Whether you need a creative solution, technical expertise, or someone to work closely with your team, I’m here to contribute in any way I can. 11 | //
12 | //13 | // Feel free to reach out if you’re interested in hiring me or partnering on a project. 14 | //
15 | //16 | // You can contact me at rbh97995@gmail.com . 17 | //
18 | //19 | // I look forward to seeing how we can create something great together! 20 | //
21 | //
16 |
22 | );
23 | };
24 |
25 | export default function MyWorkExperience() {
26 | return (
27 |
17 |
21 | {companyName}
18 |{position}
19 |{timePeriod}
20 |
28 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/Portfolio/portfolio/components/connect.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { FaEnvelope, FaTwitter, FaGithub, FaHome } from "react-icons/fa";
4 | import { Dock, DockIcon } from "./magicui/dock";
5 |
6 | export default function SocialDock() {
7 | return (
8 |
29 |
33 | Work Experience
30 | 31 |Places I have worked at
32 |
34 |
58 |
9 |
15 |
16 |
17 |
20 |
21 | |
22 |
23 |
24 |
29 |
32 |
33 |
34 |
39 |
42 |
43 | {/*
44 |
49 | */}
52 |
53 |
54 |
59 |
62 |
63 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/Portfolio/portfolio/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 240 10% 3.9%;
9 | --card: 0 0% 100%;
10 | --card-foreground: 240 10% 3.9%;
11 | --popover: 0 0% 100%;
12 | --popover-foreground: 240 10% 3.9%;
13 | --primary: 240 5.9% 10%;
14 | --primary-foreground: 0 0% 98%;
15 | --secondary: 240 4.8% 95.9%;
16 | --secondary-foreground: 240 5.9% 10%;
17 | --muted: 240 4.8% 95.9%;
18 | --muted-foreground: 240 3.8% 46.1%;
19 | --accent: 240 4.8% 95.9%;
20 | --accent-foreground: 240 5.9% 10%;
21 | --destructive: 0 84.2% 60.2%;
22 | --destructive-foreground: 0 0% 98%;
23 | --border: 240 5.9% 90%;
24 | --input: 240 5.9% 90%;
25 | --ring: 240 10% 3.9%;
26 | --radius: 0.5rem;
27 | --chart-1: 12 76% 61%;
28 | --chart-2: 173 58% 39%;
29 | --chart-3: 197 37% 24%;
30 | --chart-4: 43 74% 66%;
31 | --chart-5: 27 87% 67%;
32 | }
33 |
34 | .dark {
35 | --background: 240 10% 3.9%;
36 | --foreground: 0 0% 98%;
37 | --card: 240 10% 3.9%;
38 | --card-foreground: 0 0% 98%;
39 | --popover: 240 10% 3.9%;
40 | --popover-foreground: 0 0% 98%;
41 | --primary: 0 0% 98%;
42 | --primary-foreground: 240 5.9% 10%;
43 | --secondary: 240 3.7% 15.9%;
44 | --secondary-foreground: 0 0% 98%;
45 | --muted: 240 3.7% 15.9%;
46 | --muted-foreground: 240 5% 64.9%;
47 | --accent: 240 3.7% 15.9%;
48 | --accent-foreground: 0 0% 98%;
49 | --destructive: 0 62.8% 30.6%;
50 | --destructive-foreground: 0 0% 98%;
51 | --border: 240 3.7% 15.9%;
52 | --input: 240 3.7% 15.9%;
53 | --ring: 240 4.9% 83.9%;
54 | --chart-1: 220 70% 50%;
55 | --chart-2: 160 60% 45%;
56 | --chart-3: 30 80% 55%;
57 | --chart-4: 280 65% 60%;
58 | --chart-5: 340 75% 55%;
59 | }
60 | }
61 |
62 | @layer base {
63 | * {
64 | @apply border-border;
65 | }
66 | body {
67 | @apply bg-background text-foreground;
68 | }
69 | }
--------------------------------------------------------------------------------
/Portfolio/portfolio/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 | destructive:
15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 | outline:
17 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 | secondary:
19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 | ghost: "hover:bg-accent hover:text-accent-foreground",
21 | link: "text-primary underline-offset-4 hover:underline",
22 | },
23 | size: {
24 | default: "h-9 px-4 py-2",
25 | sm: "h-8 rounded-md px-3 text-xs",
26 | lg: "h-10 rounded-md px-8",
27 | icon: "h-9 w-9",
28 | },
29 | },
30 | defaultVariants: {
31 | variant: "default",
32 | size: "default",
33 | },
34 | }
35 | )
36 |
37 | export interface ButtonProps
38 | extends React.ButtonHTMLAttributes59 | My Tech Stacks 60 |
61 | 62 |
63 |
64 |
66 |
74 | Skills
65 |
67 | {skills.map((skill, id) => (
68 |
69 | {skill}
70 |
71 | ))}
72 |
73 |
75 |
77 |
27 |
68 | );
69 | };
70 |
71 | export default FeaturedProjectComponent;
72 |
--------------------------------------------------------------------------------
/Portfolio/portfolio/components/magicui/icon-cloud.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useMemo, useState } from "react";
4 | import { useTheme } from "next-themes";
5 | import {
6 | Cloud,
7 | fetchSimpleIcons,
8 | ICloud,
9 | renderSimpleIcon,
10 | SimpleIcon,
11 | } from "react-icon-cloud";
12 |
13 | export const cloudProps: Omit
28 |
67 | 29 | {projectName} 30 |
31 |36 | {description} 37 |
38 | 39 |
40 | {technologies.map((tech, index) => (
41 | {tech}
42 | ))}
43 |
44 |
45 |
52 |
66 |
46 |
59 | {isHovering && (
60 |
71 | {children}
72 |
73 | );
74 | };
75 |
--------------------------------------------------------------------------------
/Portfolio/portfolio/components/blogs.tsx:
--------------------------------------------------------------------------------
1 | export default function Blogs_section() {
2 | const blogs = [
3 | {
4 | date: "Mar 08, 2025",
5 | title: "How vector search works",
6 | link: "https://medium.com/@rbh97995/how-vector-search-works-1f965e167a63",
7 | },
8 | {
9 | date: "May 08, 2025",
10 | title: "Understanding Phantom Reads: Ghosts in Your Database",
11 | link: "https://medium.com/@rbh97995/understanding-phantom-reads-ghosts-in-your-database-2e2964caf96b",
12 | },
13 | {
14 | date: "May 25, 2025",
15 | title:
16 | "Eventual Consistency in Distributed Systems: A Real-World Perspective",
17 | link: "https://medium.com/@rbh97995/eventual-consistency-in-distributed-systems-a-real-world-perspective-1175fd0f742b",
18 | },
19 | {
20 | date: "June 2, 2025",
21 | title:
22 | "From Monolith to Microservice: Designing a Centralized Payment System for a Growing EdTech Platform",
23 | link: "https://medium.com/@rbh97995/from-monolith-to-microservice-designing-a-centralized-payment-system-for-a-growing-edtech-platform-23539a4d89ff",
24 | },
25 | {
26 | date: "June 30, 2025",
27 | title:
28 | "Understanding Processes in Operating Systems: The Beating Heart of Your Computer",
29 | link: "https://medium.com/@rbh97995/understanding-processes-in-operating-systems-the-beating-heart-of-your-computer-ae1734a57392",
30 | },
31 | {
32 | date: "July 07, 2025",
33 | title: "How Computers Talk: A Deep Dive into Host-to-Host Communication",
34 | link: "https://medium.com/@rahulbhardwaj09/how-computers-talk-a-deep-dive-into-host-to-host-communication-2210494ea0fa",
35 | },
36 | ];
37 |
38 | return (
39 |
40 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/Portfolio/portfolio/components/magicui/bento-grid.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import { ArrowRightIcon } from "@radix-ui/react-icons";
3 |
4 | import { cn } from "@/lib/utils";
5 | import { Button } from "@/components/ui/button";
6 |
7 | const BentoGrid = ({
8 | children,
9 | className,
10 | }: {
11 | children: ReactNode;
12 | className?: string;
13 | }) => {
14 | return (
15 |
41 |
64 |
42 |
44 | Recent blog posts
43 |Things I have written recently.
45 |-
46 | {blogs.map((blog, index) => (
47 |
- 48 | • 49 | 50 | {blog.date} : 51 | 52 | 58 | {blog.title} 59 | 60 | 61 | ))} 62 |
21 | {children}
22 |
23 | );
24 | };
25 |
26 | const BentoCard = ({
27 | name,
28 | className,
29 | background,
30 | Icon,
31 | description,
32 | img,
33 | imgClassName,
34 | href,
35 | cta,
36 | }: {
37 | name: string;
38 | className: string;
39 | background: ReactNode;
40 | Icon: any;
41 | description: string;
42 | img?: string;
43 | imgClassName?: string;
44 | href: string;
45 | cta: string;
46 | }) => (
47 |
58 |
67 |
89 | );
90 |
91 | export { BentoCard, BentoGrid };
92 |
--------------------------------------------------------------------------------
/Portfolio/portfolio/components/Aboutme.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { BentoGrid, BentoCard } from "./magicui/bento-grid";
4 | import { FaEnvelope, FaLink, FaUserTie, FaLaptopCode } from "react-icons/fa";
5 |
6 | const About = () => {
7 | return (
8 |
59 | {img && (
60 | 
65 | )}
66 |
68 |
74 |
75 | 70 | {name} 71 |
72 |{description}
73 |
80 |
86 |
87 |
88 | 10 | About Me 11 |
12 | 13 |90 | Projects 91 |
92 |
93 | {projectData.map((project, index) => (
94 |
104 |
55 | 0
63 | ? "none"
64 | : "rgba(0, 0, 0, 0.24) 0px 3px 8px",
65 | }}
66 | className="ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center"
67 | >
68 | 0 ? "white" : "var(--emerald-500)",
76 | borderColor:
77 | scrollYProgress.get() > 0 ? "white" : "var(--emerald-600)",
78 | }}
79 | className="h-2 w-2 rounded-full border border-neutral-300 bg-white"
80 | />
81 |
82 |
124 |
125 | {children}
126 |
19 |
26 |
46 |
51 |
52 | Resume
53 |
54 |
55 |
56 |
57 |
58 |
65 |
67 |
68 |
75 |
77 |
78 |
85 |
87 | {/*
88 |
94 |
96 |
97 |
104 | */}
106 |
112 |
117 |
118 | );
119 | }
120 |
--------------------------------------------------------------------------------
/Portfolio/portfolio/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss"
2 | const defaultTheme = require("tailwindcss/defaultTheme");
3 | const colors = require("tailwindcss/colors");
4 | const {
5 | default: flattenColorPalette,
6 | } = require("tailwindcss/lib/util/flattenColorPalette");
7 |
8 | const config = {
9 | darkMode: ["class"],
10 | content: [
11 | './pages/**/*.{ts,tsx}',
12 | './components/**/*.{ts,tsx}',
13 | './app/**/*.{ts,tsx}',
14 | './src/**/*.{ts,tsx}',
15 | ],
16 | prefix: "",
17 | theme: {
18 | container: {
19 | center: true,
20 | padding: "2rem",
21 | screens: {
22 | "2xl": "1400px",
23 | },
24 | },
25 | extend: {
26 | fontFamily: {
27 | montserrat: ['Montserrat', 'sans-serif'],
28 | },
29 | colors: {
30 | border: "hsl(var(--border))",
31 | input: "hsl(var(--input))",
32 | ring: "hsl(var(--ring))",
33 | background: "hsl(var(--background))",
34 | foreground: "hsl(var(--foreground))",
35 | primary: {
36 | DEFAULT: "hsl(var(--primary))",
37 | foreground: "hsl(var(--primary-foreground))",
38 | },
39 | secondary: {
40 | DEFAULT: "hsl(var(--secondary))",
41 | foreground: "hsl(var(--secondary-foreground))",
42 | },
43 | destructive: {
44 | DEFAULT: "hsl(var(--destructive))",
45 | foreground: "hsl(var(--destructive-foreground))",
46 | },
47 | muted: {
48 | DEFAULT: "hsl(var(--muted))",
49 | foreground: "hsl(var(--muted-foreground))",
50 | },
51 | accent: {
52 | DEFAULT: "hsl(var(--accent))",
53 | foreground: "hsl(var(--accent-foreground))",
54 | },
55 | popover: {
56 | DEFAULT: "hsl(var(--popover))",
57 | foreground: "hsl(var(--popover-foreground))",
58 | },
59 | card: {
60 | DEFAULT: "hsl(var(--card))",
61 | foreground: "hsl(var(--card-foreground))",
62 | },
63 | },
64 | borderRadius: {
65 | lg: "var(--radius)",
66 | md: "calc(var(--radius) - 2px)",
67 | sm: "calc(var(--radius) - 4px)",
68 | },
69 | keyframes: {
70 | "accordion-down": {
71 | from: { height: "0" },
72 | to: { height: "var(--radix-accordion-content-height)" },
73 | },
74 | "accordion-up": {
75 | from: { height: "var(--radix-accordion-content-height)" },
76 | to: { height: "0" },
77 | },
78 | "shine-pulse": {
79 | "0%": {
80 | "background-position": "0% 0%",
81 | },
82 | "50%": {
83 | "background-position": "100% 100%",
84 | },
85 | to: {
86 | "background-position": "0% 0%",
87 | },
88 | },
89 | "spin-around": {
90 | "0%": {
91 | transform: "translateZ(0) rotate(0)",
92 | },
93 | "15%, 35%": {
94 | transform: "translateZ(0) rotate(90deg)",
95 | },
96 | "65%, 85%": {
97 | transform: "translateZ(0) rotate(270deg)",
98 | },
99 | "100%": {
100 | transform: "translateZ(0) rotate(360deg)",
101 | },
102 | },
103 | slide: {
104 | to: {
105 | transform: "translate(calc(100cqw - 100%), 0)",
106 | },
107 | },
108 | },
109 | animation: {
110 | "accordion-down": "accordion-down 0.2s ease-out",
111 | "accordion-up": "accordion-up 0.2s ease-out",
112 | "spin-around": "spin-around calc(var(--speed) * 2) infinite linear",
113 | slide: "slide var(--speed) ease-in-out infinite alternate",
114 | },
115 | },
116 | },
117 | plugins: [
118 | require("tailwindcss-animate"),
119 | addVariablesForColors,
120 | ],
121 | } satisfies Config
122 |
123 | // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
124 | function addVariablesForColors({ addBase, theme }: any) {
125 | let allColors = flattenColorPalette(theme("colors"));
126 | let newVars = Object.fromEntries(
127 | Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
128 | );
129 | addBase({
130 | ":root": newVars,
131 | });
132 | }
133 |
134 | export default config
--------------------------------------------------------------------------------
/Portfolio/portfolio/components/magicui/particles.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useEffect, useRef, useState } from "react";
4 |
5 | interface MousePosition {
6 | x: number;
7 | y: number;
8 | }
9 |
10 | function MousePosition(): MousePosition {
11 | const [mousePosition, setMousePosition] = useStateHi, my name is
27 |28 | Rahul Bhardwaj. 29 |
30 |31 | I build things for the web. 32 |
33 |34 | I’m a full-stack developer from India. I specialize in turning ideas 35 | into fully functional web applications. Whether you’re building a 36 | product from the ground up or improving an existing one, I can help 37 | bring your vision to life with clean, efficient code. 38 |
39 |
113 | © 2024 Rahul Bhardwaj. All rights reserved.
114 | Made with ❤️ by Rahul Bhardwaj
115 |
116 |
28 |
48 | );
49 | };
50 |
51 | interface DotMatrixProps {
52 | colors?: number[][];
53 | opacities?: number[];
54 | totalSize?: number;
55 | dotSize?: number;
56 | shader?: string;
57 | center?: ("x" | "y")[];
58 | }
59 |
60 | const DotMatrix: React.FC
29 |
44 | {showGradient && (
45 |
46 | )}
47 |