🚀 OkDo's Portfolio

A modern, responsive personal portfolio built with Next.js 15 and Sanity CMS

---

📸 Screenshot

---

✨ Features

• 🎨 Modern Design: Clean, minimalist UI with dark mode support using next-themes
• 📱 Fully Responsive: Optimized for all devices from mobile to desktop
• ⚡ Server-Side Rendering: Built with Next.js 15 App Router for optimal performance
• 🗄️ Headless CMS: Powered by Sanity for easy content management
• 🎯 Project Showcase: Dynamic project portfolio with categorization
• 👤 Profile Management: Editable bio, social links, and professional information
• 📊 Analytics: Integrated with Vercel Analytics for visitor insights
• 🎭 Rich Content: Support for Portable Text with custom components
• 🔍 SEO Optimized: Meta tags and structured data for better search visibility
• ⚙️ Type Safety: Fully typed with TypeScript for robust development
• 🎨 Tailwind CSS: Utility-first styling with custom plugins for typography and forms

---

🛠️ Tech Stack

Frontend

• Framework: Next.js 15.5.7 with App Router
• Language: TypeScript 5.3.2
• Styling: Tailwind CSS 3.3.5
• UI Components: @headlessui/react 2.2.7
• Theme: next-themes 0.4.6
• Content Rendering: @portabletext/react 4.0.3
• Date Formatting: date-fns 4.1.0

Backend & CMS

• CMS: Sanity 4.6.1
• Sanity Client: next-sanity 10.0.16
• Content Management: Sanity Studio (embedded at /studio)

Analytics & Deployment

• Analytics: @vercel/analytics 1.5.0
• Deployment: Optimized for Vercel
• Package Manager: pnpm 10.15.0

---

📁 Project Structure

my-portfolio/
├── app/
│   ├── (site)/              # Main site routes
│   │   ├── components/      # Reusable UI components
│   │   ├── projects/        # Project showcase pages
│   │   ├── admin/           # Admin dashboard
│   │   ├── layout.tsx       # Site layout wrapper
│   │   └── page.tsx         # Homepage
│   ├── (studio)/            # Sanity Studio routes
│   │   └── studio/
│   │       └── [[...index]]/
│   ├── schemas/             # Sanity schemas
│   │   ├── profile.ts       # Profile content type
│   │   ├── project.ts       # Project content type
│   │   ├── category.ts      # Category content type
│   │   └── index.ts         # Schema exports
│   ├── types/               # TypeScript type definitions
│   ├── utils/               # Utility functions
│   │   ├── sanity.client.ts # Sanity client configuration
│   │   └── flatListHierarchical.ts
│   ├── layout.tsx           # Root layout
│   ├── globals.css          # Global styles
│   └── not-found.tsx        # 404 page
├── public/
│   └── images/
│       └── socials/         # Social media icons
├── sanity-project/          # Standalone Sanity studio
├── .github/
│   └── ISSUE_TEMPLATE/      # GitHub issue templates
├── sanity.config.ts         # Sanity configuration
├── next.config.js           # Next.js configuration
├── tailwind.config.ts       # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Project dependencies

---

🚀 Getting Started

Prerequisites

• Node.js 20.x or higher
• pnpm 10.15.0 (or npm/yarn)
• Sanity Account (free at sanity.io)

Installation

1. Clone the repository

   git clone https://github.com/OthyTenk/my-portfolio.git
   cd my-portfolio

2. Install dependencies

   pnpm install
   # or
   npm install

3. Set up Sanity CMS

   Navigate to the sanity-project directory:

   cd sanity-project

   Login to Sanity and create a new project:

   npx sanity@latest login
   npx sanity@latest init

   Follow the prompts to:

   • Create a new project or select an existing one
   • Choose the "Clean" template
   • Set dataset to "production"

4. Configure Sanity credentials

   Update sanity.config.ts with your project credentials:

   export default defineConfig({
     name: "sanity-project",
     title: "Your Portfolio",
     projectId: "YOUR_PROJECT_ID", // Get from sanity.io
     dataset: "production",
     // ... rest of config
   });

5. Run the development server

   In the main project directory:

   pnpm dev
   # or
   npm run dev

   In a separate terminal, run Sanity Studio:

   cd sanity-project
   pnpm dev
   # or
   npm run dev

6. Access the application

   • Portfolio Site: http://localhost:3000
   • Sanity Studio (embedded): http://localhost:3000/studio
   • Sanity Studio (standalone): http://localhost:3333

---

📝 Content Management

Creating Content in Sanity Studio

1. Profile Information

   • Navigate to Studio → Profile
   • Add your personal information, bio, profile picture
   • Configure social media links (GitHub, LinkedIn, Twitter)
   • Upload your resume (optional)

2. Projects

   • Navigate to Studio → Projects
   • Click "Create" to add a new project
   • Fill in project details:
     • Title & Slug
     • Overview/Description
     • Project Image
     • Live Link
     • Categories
     • Date

3. Categories

   • Navigate to Studio → Categories
   • Create parent categories (e.g., "Frontend", "Backend")
   • Create child categories for specific technologies
   • Add category images/icons

---

🎨 Customization

Styling

Customize the theme in tailwind.config.ts:

const config: Config = {
  theme: {
    extend: {
      colors: {
        // Add your custom colors
      },
      // Add custom fonts, spacing, etc.
    },
  },
};

Dark Mode

The portfolio includes a built-in dark mode toggle. Customize dark mode colors in:

• app/layout.tsx - Root theme setup
• app/globals.css - Global dark mode styles
• Component-level Tailwind classes using dark: prefix

---

🚢 Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub

   git add .
   git commit -m "Initial commit"
   git push origin main

2. Import to Vercel

   • Visit vercel.com
   • Import your GitHub repository
   • Vercel will auto-detect Next.js settings
   • Add environment variables if needed
   • Deploy!

3. Deploy Sanity Studio

   cd sanity-project
   pnpm run deploy
   # or
   npm run deploy

Environment Variables

If using external APIs or services, create a .env.local file:

NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_TOKEN=your_api_token (for mutations)

---

📊 Analytics

This portfolio includes Vercel Analytics for tracking visitor metrics. To enable:

1. Enable in Vercel Dashboard

   • Navigate to your project in Vercel
   • Go to Analytics tab
   • Enable Analytics

2. Already integrated via @vercel/analytics/react in app/layout.tsx

---

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please read CONTRIBUTING.md for details on our code of conduct and development process.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👨‍💻 Author

OkDo

• GitHub: @OthyTenk
• Portfolio: Live Demo

---

🙏 Acknowledgments

• Next.js for the amazing React framework
• Sanity.io for the flexible headless CMS
• Tailwind CSS for the utility-first CSS framework
• Vercel for seamless deployment and hosting

---

📞 Support

If you have any questions or run into issues, please:

• Open an Issue
• Check existing Discussions
• Review the Security Policy

---

Made with ❤️ by OkDo

⭐ Star this repo if you found it helpful!