circuitmastersai/services.html at main · barnemanalpha/circuitmastersai · 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Services - CircuitMastersAI</title>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: #0a0a0f; color: #fff; line-height: 1.6; }
        .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
        nav { border-bottom: 1px solid #2a2a3a; padding: 20px 0; position: sticky; top: 0; background: #0a0a0f; z-index: 100; }
        .nav-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.3rem; font-weight: 700; color: #fff; text-decoration: none; }
        .logo span { color: #00ff88; }
        .nav-links { display: flex; gap: 32px; list-style: none; }
        .nav-links a { color: #8888aa; text-decoration: none; font-size: 0.95rem; transition: color 0.3s; }
        .nav-links a:hover { color: #00ff88; }
        main { padding: 60px 0; }

        .hero { text-align: center; padding: 40px 0 60px; }
        .hero h1 { font-size: 2.2rem; margin-bottom: 16px; }
        .hero p { color: #8888aa; max-width: 700px; margin: 0 auto 32px; }
        .highlight { color: #00ff88; }

        .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin: 40px 0; }
        .stat-box { background: #12121a; border: 1px solid #2a2a3a; border-radius: 8px; padding: 24px; text-align: center; }
        .stat-number { font-size: 1.8rem; font-weight: 700; color: #00ff88; margin-bottom: 8px; }
        .stat-label { font-size: 0.85rem; color: #8888aa; text-transform: uppercase; }

        .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; margin: 60px 0; }
        .service-card { background: #12121a; border: 2px solid #2a2a3a; border-radius: 12px; padding: 36px 28px; transition: all 0.3s; }
        .service-card:hover { border-color: #00ff88; transform: translateY(-4px); }
        .service-icon { font-size: 2.5rem; margin-bottom: 20px; }
        .service-card h3 { font-size: 1.3rem; color: #00ff88; margin-bottom: 12px; }
        .service-card p { color: #8888aa; margin-bottom: 20px; font-size: 0.9rem; }
        .service-card ul { list-style: none; margin-bottom: 24px; }
        .service-card li { color: #8888aa; padding: 8px 0; font-size: 0.85rem; display: flex; align-items: center; gap: 10px; }
        .service-card li::before { content: '✓'; color: #00ff88; font-weight: bold; }

        .btn-primary { display: inline-block; padding: 12px 28px; background: #00ff88; color: #0a0a0f; text-decoration: none; border-radius: 6px; font-size: 0.95rem; font-weight: 600; transition: all 0.3s; }
        .btn-primary:hover { background: #00dd77; transform: translateY(-2px); }

        .cta { background: #12121a; border: 2px solid #00ff88; border-radius: 12px; padding: 48px 40px; text-align: center; margin: 60px 0; }
        .cta h2 { font-size: 1.8rem; margin-bottom: 16px; }
        .cta p { color: #8888aa; margin-bottom: 28px; }

        footer { border-top: 1px solid #2a2a3a; padding: 32px 0; text-align: center; color: #8888aa; font-size: 0.9rem; }
        footer a { color: #00ff88; text-decoration: none; }
    </style>
</head>
<body>
    <nav>
        <div class="container">
            <div class="nav-content">
                <a href="index.html" class="logo">Circuit<span>Masters</span>AI</a>
                <ul class="nav-links">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="resume.html">Resume</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="https://github.com/barnemanalpha" target="_blank">GitHub</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <main>
        <div class="container">
            <section class="hero">
                <h1>Professional <span class="highlight">Cloud Engineering Services</span></h1>
                <p>30+ years delivering production-ready cloud infrastructure, DevOps automation, and security implementations. From startups to enterprise.</p>
            </section>

            <div class="stats">
                <div class="stat-box">
                    <div class="stat-number">30+</div>
                    <div class="stat-label">Years Experience</div>
                </div>
                <div class="stat-box">
                    <div class="stat-number">100K+</div>
                    <div class="stat-label">Users Deployed For</div>
                </div>
                <div class="stat-box">
                    <div class="stat-number">99.9%</div>
                    <div class="stat-label">Uptime Guaranteed</div>
                </div>
                <div class="stat-box">
                    <div class="stat-number">40%</div>
                    <div class="stat-label">Avg Cost Reduction</div>
                </div>
            </div>

            <div class="services">
                <div class="service-card">
                    <div class="service-icon">⚡</div>
                    <h3>Cloud Infrastructure</h3>
                    <p>Production-ready cloud architecture on AWS, Azure, or GCP. Multi-region deployments with 99.9% uptime SLAs.</p>
                    <ul>
                        <li>Infrastructure as Code (Terraform, CloudFormation)</li>
                        <li>Multi-cloud strategy and migration</li>
                        <li>Cost optimization (30-50% savings)</li>
                        <li>24/7 monitoring and alerting</li>
                    </ul>
                    <a href="#contact" class="btn-primary">Get Started →</a>
                </div>

                <div class="service-card">
                    <div class="service-icon">🔄</div>
                    <h3>DevOps & CI/CD</h3>
                    <p>Automated deployment pipelines reducing deployment time by 80%+. Full CI/CD implementation.</p>
                    <ul>
                        <li>CI/CD pipeline setup (Jenkins, GitHub Actions)</li>
                        <li>Container orchestration (Kubernetes, Docker)</li>
                        <li>Automated testing and deployment</li>
                        <li>System monitoring (Prometheus, Grafana)</li>
                    </ul>
                    <a href="#contact" class="btn-primary">Get Started →</a>
                </div>

                <div class="service-card">
                    <div class="service-icon">🔐</div>
                    <h3>Security & Compliance</h3>
                    <p>Patent-pending encryption expertise. Zero-trust architecture and compliance implementation.</p>
                    <ul>
                        <li>Security architecture review</li>
                        <li>Encryption implementation (AES-256)</li>
                        <li>OAuth 2.0, JWT, mTLS authentication</li>
                        <li>Compliance consulting (HIPAA, GDPR)</li>
                    </ul>
                    <a href="#contact" class="btn-primary">Get Started →</a>
                </div>

                <div class="service-card">
                    <div class="service-icon">💻</div>
                    <h3>Full-Stack Development</h3>
                    <p>Production-grade web applications with React, Node.js, and Firebase.</p>
                    <ul>
                        <li>Progressive Web Apps (PWA)</li>
                        <li>React, Node.js, Firebase stack</li>
                        <li>Real-time features and WebSockets</li>
                        <li>Payment integration (Stripe, PayPal)</li>
                    </ul>
                    <a href="#contact" class="btn-primary">Get Started →</a>
                </div>

                <div class="service-card">
                    <div class="service-icon">📊</div>
                    <h3>Cloud Migration</h3>
                    <p>Move from on-premise to cloud with zero downtime. Legacy system modernization.</p>
                    <ul>
                        <li>Migration strategy and planning</li>
                        <li>Zero-downtime migrations</li>
                        <li>Legacy system modernization</li>
                        <li>Post-migration optimization</li>
                    </ul>
                    <a href="#contact" class="btn-primary">Get Started →</a>
                </div>

                <div class="service-card">
                    <div class="service-icon">🎓</div>
                    <h3>Technical Consulting</h3>
                    <p>Strategic cloud consulting, architecture reviews, and team training.</p>
                    <ul>
                        <li>Cloud strategy consulting</li>
                        <li>Architecture review</li>
                        <li>Team training (AWS, Kubernetes, DevOps)</li>
                        <li>Technical documentation</li>
                    </ul>
                    <a href="#contact" class="btn-primary">Get Started →</a>
                </div>
            </div>

            <section class="cta" id="contact">
                <h2>Ready to Build Something Amazing?</h2>
                <p>Whether you need cloud infrastructure, DevOps automation, or security consulting, I deliver production-ready solutions. Let's discuss your project.</p>
                <div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
                    <a href="mailto:contact@circuitmastersai.dev" class="btn-primary">📧 Get Free Consultation</a>
                    <a href="tel:7692359394" class="btn-primary">📞 Call Now</a>
                </div>
            </section>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 CircuitMastersAI | Frederick Wayne Barnes</p>
            <p style="margin-top: 12px;">
                <a href="https://github.com/barnemanalpha">GitHub</a> •
                <a href="https://tiktok.com/@thetiktoktech">TikTok</a> •
                <a href="https://youtube.com/@circuitmasters">YouTube</a>
            </p>
        </div>
    </footer>
</body>
</html>