Create a dashboard for your writing portfolio

Here’s a simple, responsive writing portfolio dashboard built using React and Tailwind CSS. It displays key portfolio metrics, recent articles, and a writing progress chart.

javascript
CopyEdit
// File: PortfolioDashboard.jsx
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
import { Plus, FileText } from "lucide-react";

const articles = [
  { title: "Mastering SEO in 2025", date: "May 15, 2025", views: 1200 },
  { title: "AI and Content Strategy", date: "May 10, 2025", views: 980 },
  { title: "Copywriting Myths Busted", date: "May 5, 2025", views: 870 },
];

const progressData = [
  { month: "Jan", words: 18000 },
  { month: "Feb", words: 21000 },
  { month: "Mar", words: 25000 },
  { month: "Apr", words: 23000 },
  { month: "May", words: 27000 },
];

export default function PortfolioDashboard() {
  return (
    <div className="p-6 space-y-6 max-w-6xl mx-auto">
      <h1 className="text-3xl font-bold">Writing Portfolio Dashboard</h1>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold">Total Articles</h2>
            <p className="text-2xl font-bold">152</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold">Monthly Word Count</h2>
            <p className="text-2xl font-bold">27,000</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold">Total Views</h2>
            <p className="text-2xl font-bold">1.2M</p>
          </CardContent>
        </Card>
      </div>

      <div className="bg-white rounded-2xl shadow p-6">
        <h2 className="text-2xl font-semibold mb-4">Writing Progress</h2>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={progressData}>
            <XAxis dataKey="month" />
            <YAxis />
            <Tooltip />
            <Bar dataKey="words" fill="#3b82f6" radius={[6, 6, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
      </div>

      <div className="bg-white rounded-2xl shadow p-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-2xl font-semibold">Recent Articles</h2>
          <Button>
            <Plus className="mr-2 w-4 h-4" />
            New Article
          </Button>
        </div>
        <div className="space-y-4">
          {articles.map((article, index) => (
            <div
              key={index}
              className="flex items-center justify-between p-4 border rounded-xl hover:bg-gray-50 transition"
            >
              <div className="flex items-center gap-4">
                <FileText className="text-blue-500 w-5 h-5" />
                <div>
                  <h3 className="text-lg font-medium">{article.title}</h3>
                  <p className="text-sm text-gray-500">{article.date}</p>
                </div>
              </div>
              <span className="text-sm font-semibold">{article.views} views</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Notes:

• Cards show high-level stats.

• Bar chart visualizes monthly word counts.

• Article list displays recent work.

• You can expand this with filters, tags, detailed stats, or article editing tools. Let me know if you’d like features like article uploads, draft progress tracking, or integration with a CMS.