The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

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
// 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.

Share this Page your favorite way: Click any app below to share.

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Categories We Write About