dev-folio/index.html at main · mauricegift/dev-folio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en" class="scroll-smooth dark" prefix="og: http://ogp.me/ns#">
  <head>
    <!-- Basic Meta Tags -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Primary Meta Tags -->
    <title>Maurice Gift | DevFolio - Self Learned Developer & AI Architect</title>
    <meta name="description" content="Maurice Gift - Self Learned Developer, Software Engineer & AI Architect. Specialized in bridging complex backends with fluid interfaces. Portfolio showcasing innovative solutions." />
    <meta name="keywords" content="Maurice Gift, Software Engineer, AI Architect, Full Stack Developer, Web Development, Backend Development, Frontend Development, React, Python, JavaScript" />
    <meta name="author" content="Maurice Gift" />
    <meta name="robots" content="index, follow" />

    <!-- Favicon -->
    <link rel="icon" href="https://files.giftedtech.co.ke/image/ERNdgifted-md-nobg1.png" type="image/png" />
    <link rel="shortcut icon" href="https://files.giftedtech.co.ke/image/ERNdgifted-md-nobg1.png" type="image/png" />
    <link rel="apple-touch-icon" href="https://files.giftedtech.co.ke/image/ERNdgifted-md-nobg1.png" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://me.giftedtech.co.ke/" />
    <meta property="og:title" content="Maurice Gift | DevFolio - Self Learned Developer & AI Architect" />
    <meta property="og:description" content="Specialized in bridging complex backends with fluid interfaces. Explore innovative software solutions and AI architecture projects." />
    <meta property="og:image" content="https://files.giftedtech.co.ke/image/IBmmygifted2.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Maurice Gift - Developer Portfolio" />
    <meta property="og:site_name" content="Maurice Gift DevFolio" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://me.giftedtech.co.ke/" />
    <meta name="twitter:title" content="Maurice Gift | DevFolio - Self Learned Developer & AI Architect" />
    <meta name="twitter:description" content="Specialized in bridging complex backends with fluid interfaces. Explore innovative software solutions and AI architecture projects." />
    <meta name="twitter:image" content="https://files.giftedtech.co.ke/image/IBmmygifted2.png" />
    <meta name="twitter:image:alt" content="Maurice Gift - Developer Portfolio" />
    <meta name="twitter:creator" content="@GiftedMauriceKe" />

    <!-- Additional Meta Tags -->
    <meta name="theme-color" content="#3b66f5" />
    <meta name="msapplication-TileColor" content="#3b66f5" />
    <meta name="msapplication-TileImage" content="https://files.giftedtech.co.ke/image/ERNdgifted-md-nobg1.png" />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://me.giftedtech.co.ke/" />

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Person",
      "name": "Maurice Gift",
      "jobTitle": "Self Learned Developer & AI Architect",
      "description": "Specialized in bridging complex backends with fluid interfaces",
      "url": "https://me.giftedtech.co.ke",
      "sameAs": [
        "https://github.com/mauricegift",
        "https://portfolio.giftedtech.co.ke",
        "https://linkedin.com/in/giftedmaurice",
        "https://x.com/GiftedmauriceKe"
      ],
      "image": "https://files.giftedtech.co.ke/image/IBmmygifted2.png"
    }
    </script>

    <script>
      // Prevent white flash by checking theme immediately
      (function() {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'light') {
          document.documentElement.classList.remove('dark');
        } else {
          document.documentElement.classList.add('dark');
        }
      })();
    </script>

    <!-- External Scripts -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles@2.12.0/tsparticles.bundle.min.js"></script>

    <script>
      tailwind.config = {
        darkMode: 'class',
        theme: {
          extend: {
            colors: {
              indigo: {
                50: '#f5f7ff',
                100: '#ebf0fe',
                200: '#ced9fd',
                300: '#b1c2fb',
                400: '#7694f8',
                500: '#3b66f5',
                600: '#355cdd',
                700: '#2c4da9',
                800: '#233d87',
                900: '#1d326e',
              },
            },
          },
        },
      }
    </script>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <style>
      body { font-family: 'Inter', sans-serif; }
      .font-mono { font-family: 'Fira Code', monospace; }
      ::-webkit-scrollbar { width: 8px; }
      ::-webkit-scrollbar-track { background: transparent; }
      .dark ::-webkit-scrollbar-track { background: #111827; }
      ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
      .dark ::-webkit-scrollbar-thumb { background: #374151; }
      #tsparticles { position: fixed; width: 100%; height: 100%; z-index: 0; top: 0; left: 0; pointer-events: none; }
      #root { position: relative; z-index: 1; }
      .scrollbar-hide::-webkit-scrollbar { display: none; }
      .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
    </style>

    <!-- Import Map -->
    <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react@^19.2.3",
        "react/": "https://esm.sh/react@^19.2.3/",
        "react-dom": "https://esm.sh/react-dom@^19.2.3",
        "react-dom/client": "https://esm.sh/react-dom@^19.2.3/client",
        "recharts": "https://esm.sh/recharts@^3.6.0",
        "react-dom/": "https://esm.sh/react-dom@^19.2.3/"
      }
    }
    </script>
  </head>
  <body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 antialiased selection:bg-indigo-500 selection:text-white">
    <div id="tsparticles"></div>
    <div id="root"></div>
    <script type="module" src="./src/index.tsx"></script>
  </body>
</html>