import React, { useState } from 'react'; import type { ReactElement } from 'react'; import Head from 'next/head'; import Link from 'next/link'; import BaseButton from '../components/BaseButton'; import LayoutGuest from '../layouts/Guest'; import BaseIcon from '../components/BaseIcon'; import { mdiChevronRight, mdiMenu, mdiClose, mdiTwitter, mdiLinkedin, mdiGithub, mdiArrowLeft } from '@mdi/js'; import { getPageTitle } from '../config'; export default function ProjectsPage() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const allProjects = [ { title: 'The Future of Web3 Infrastructure', type: 'Strategic Blog Post', desc: 'A deep dive into the evolving landscape of decentralized infrastructure and its impact on SaaS.', url: 'https://docs.google.com/document/d/1example1', image: null }, { title: 'Modern SaaS Architecture Guide', type: 'White Paper', desc: 'Comprehensive guide on building scalable, cloud-native SaaS applications for the modern enterprise.', url: 'https://docs.google.com/document/d/1example2', image: null }, { title: 'Cloud-Native Deployment API Docs', type: 'Documentation', desc: 'Technical reference documentation for a multi-cloud deployment engine using Kubernetes.', url: 'https://docs.google.com/document/d/1example3', image: null }, { title: 'Developer Experience Report 2026', type: 'Case Study', desc: 'An analytical report on the current state of DX and how it influences tool adoption.', url: 'https://docs.google.com/document/d/1example4', image: null }, { title: 'Understanding Serverless Security', type: 'Technical Article', desc: 'Exploring common vulnerabilities in serverless architectures and best practices for mitigation.', url: 'https://docs.google.com/document/d/1example5', image: null }, { title: 'Next-Gen DevOps Handbook', type: 'E-Book', desc: 'A 50-page guide covering CI/CD, observability, and infrastructure as code for high-growth startups.', url: 'https://docs.google.com/document/d/1example6', image: null }, { title: 'Kafka vs. RabbitMQ: Choosing the Right Message Broker', type: 'Technical Comparison', desc: 'Detailed architectural comparison for distributed systems engineering teams.', url: 'https://docs.google.com/document/d/1example7', image: null }, { title: 'Building a Design System from Scratch', type: 'Documentation', desc: 'Internal documentation for a fintech startup scaling their front-end engineering team.', url: 'https://docs.google.com/document/d/1example8', image: null }, { title: 'AI-Driven Content Strategy for SaaS', type: 'Case Study', desc: 'How we implemented a hybrid AI-human content workflow to triple organic traffic.', url: 'https://docs.google.com/document/d/1example9', image: null } ]; const navLinks = [ { label: 'About', href: '/#about' }, { label: 'Services', href: '/#services' }, { label: 'Portfolio', href: '/projects' }, { label: 'Contact', href: '/#contact' } ]; return (
{getPageTitle('Portfolio | Blackness Studio')} {/* Navigation */} {/* Hero Section */}
Back to Home

PORTFOLIO

A comprehensive collection of my technical writing, strategic blog posts, and developer documentation.

{/* Projects Grid */}
{allProjects.map((project, idx) => (
{project.image ? ( {project.title} ) : (
BS
)}
{project.type}

{project.title}

{project.desc}

))}
{/* CTA Section */}

READY TO START YOUR PROJECT?

{/* Footer */}
); } ProjectsPage.getLayout = function getLayout(page: ReactElement) { return {page}; };