{value.description}
40 | 41 |
42 | {value.tags.map((tag: string, index: number) => {
43 | const tagStyles = {
44 | 'Nextjs': 'bg-teal-100 text-teal-800',
45 | 'Freelancing': 'bg-yellow-100 text-yellow-800',
46 | 'Shadcn Ui': 'bg-blue-100 text-blue-800',
47 | 'Typescript': 'bg-red-100 text-red-800',
48 | 'MySQL': 'bg-orange-100 text-orange-800',
49 | 'Zustand': 'bg-purple-100 text-purple-800',
50 | 'Supabase': 'bg-emerald-100 text-emerald-800',
51 | 'Npx': 'bg-indigo-100 text-indigo-800',
52 | 'Library': 'bg-pink-100 text-pink-800',
53 | 'Zod': 'bg-cyan-100 text-cyan-800',
54 | 'React Hook Form': 'bg-violet-100 text-violet-800'
55 | }[tag] || 'bg-gray-100 text-gray-800';
56 |
57 | return (
58 |
62 | {tag}
63 |
64 | );
65 | })}
66 |
67 |
19 | 
24 |
25 | {item.name}
26 |
27 |
28 | );
29 | })}
30 |
31 | );
32 | };
33 |
34 | export default SkillsFooter;
35 |
--------------------------------------------------------------------------------
/src/components/SocialLinks.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import {
3 | Facebook,
4 | Linkedin,
5 | Twitter,
6 | ExternalLink,
7 | Github,
8 | } from "lucide-react";
9 | import { buttonVariants } from "./ui/button";
10 | import Link from "next/link";
11 | import FramerWrapper from "./animation/FramerWrapper";
12 | import { portfolioConfig } from "@/config/portfolio.config";
13 |
14 | const SocialLinks = () => {
15 | const links = [
16 | {
17 | name: "Facebook",
18 | link: portfolioConfig.socialLinks.facebook,
19 | icon:
7 |
20 | );
21 | }
22 |
23 | export default TextRotator;
24 |
--------------------------------------------------------------------------------
/src/components/animation/DockAnimation.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import {
4 | motion,
5 | MotionValue,
6 | useMotionValue,
7 | useSpring,
8 | useTransform,
9 | type SpringOptions,
10 | AnimatePresence,
11 | } from 'framer-motion';
12 | import {
13 | Children,
14 | cloneElement,
15 | createContext,
16 | useContext,
17 | useEffect,
18 | useMemo,
19 | useRef,
20 | useState,
21 | } from 'react';
22 | import { cn } from '@/lib/utils';
23 |
24 | const DOCK_HEIGHT = 128;
25 | const DEFAULT_MAGNIFICATION = 80;
26 | const DEFAULT_DISTANCE = 150;
27 | const DEFAULT_PANEL_HEIGHT = 64;
28 |
29 | type DockProps = {
30 | children: React.ReactNode;
31 | className?: string;
32 | distance?: number;
33 | panelHeight?: number;
34 | magnification?: number;
35 | spring?: SpringOptions;
36 | };
37 | type DockItemProps = {
38 | className?: string;
39 | children: React.ReactNode;
40 | };
41 | type DockLabelProps = {
42 | className?: string;
43 | children: React.ReactNode;
44 | };
45 | type DockIconProps = {
46 | className?: string;
47 | children: React.ReactNode;
48 | };
49 |
50 | type DocContextType = {
51 | mouseX: MotionValue;
52 | spring: SpringOptions;
53 | magnification: number;
54 | distance: number;
55 | };
56 | type DockProviderProps = {
57 | children: React.ReactNode;
58 | value: DocContextType;
59 | };
60 |
61 | const DockContext = createContext
8 | I am a {portfolioConfig.title} &
9 |
10 |
19 | -
11 | {portfolioConfig.skills.roles.map((role, index) => (
12 |
- 13 | {role} 14 | 15 | ))} 16 |