Dark Portfolio: A Fully Responsive Next.js 15 + TypeScript + Tailwind CSS Project

Dark Portfolio: A Fully Responsive Next.js 15 + TypeScript + Tailwind CSS Project

Welcome to the Dark Portfolio project showcase! In this post, I'm excited to walk you through the development of a modern and fully responsive portfolio website built using Next.js 15, TypeScript, and Tailwind CSS. Whether you're a web developer, designer, or just someone curious about building a sleek portfolio, this project highlights the best practices for crafting a visually appealing, functional, and dynamic website.

Project Overview

The Dark Portfolio project is a versatile web designer and developer portfolio website that features multiple pages, each serving a unique purpose. Here's a brief look at the main pages and functionalities:

🌟 Key Features and Pages

• Home Page: A stunning landing page that captivates visitors with its modern design.
• Contact Page: A seamless way to communicate with potential clients or collaborators.
• About Page: A section to showcase your story, skills, and professional background.
• Blog Page: Share your insights, articles, and updates in a blog format.
• Blog Detail Page: Individual blog posts with dynamic routing for easy navigation.
• Pricing Page: Display your services and pricing information clearly.
• Services Page: Highlight your professional expertise and offerings.
• Work Page: A gallery of your previous projects, with the option to explore them in detail.
• Work Detail Page: Get into the specifics of each project with detailed descriptions and visuals.

💡 Why Build Dark Portfolio?

The Dark Portfolio project was created to showcase the power of modern web development tools. Here's why I chose Next.js 15, TypeScript, and Tailwind CSS:

• Next.js 15: With its powerful features like fast rendering, server-side rendering (SSR), and static site generation (SSG), Next.js allows us to build high-performance applications effortlessly. It’s the perfect framework for modern web development.
• TypeScript: By incorporating TypeScript into the project, we ensure type-safe code, which helps to avoid common runtime errors and makes the codebase more scalable and maintainable.
• Tailwind CSS: This utility-first CSS framework allows for rapid styling, enabling us to create responsive and beautiful designs without writing custom CSS from scratch.

🔗 Resources and Downloads

If you're interested in diving deeper into the project or exploring the code, here are some valuable resources:

• Download Full Code: Get access to the complete project files and start experimenting with the code yourself.
• View Figma File: Take a look at the design blueprint to see how the project is structured.

📑 Project Code Overview

Here's a breakdown of the essential code samples used in the Dark Portfolio project.

Tailwind CSS Configuration

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        pageBody:'#0E0E0E',
        background: "#22201D",
        primary:'#DAC5A7',
        bg:'#181716',
        borderPrimary:'#6a645c',
        borderSecondary:'#302d2a',
      },
      fontFamily: {
        chillax: ["var(--font-chillax)", "Helvetica", "sans-serif"], 
      },
      fontSize:{
        xxs:'11px'
      },
      borderWidth: {
        customBorder: '0.001rem', 
      },      
    },
  },
  plugins: [],
};

export default config;

Home Page (Main Entry)

import BrandSection from '@/components/BrandSection';
import LineComponent from '@/components/common/LineComponent';
import ActionSection from '@/components/common/CallToAction';
import ServiceList from '@/components/ServiceList';
import SelectedWork from '@/components/SelectedWork';
import TestimonialSection from '@/components/TestimonialSection';
import ProfileSection from '@/components/ProfileSection';
import HeroSection from '@/components/HeroSection';
import WorkStep from '@/components/WorkStep';

const Home: React.FC = () => {
  return (
    <main>
      <HeroSection />
      <BrandSection />
      <ServiceList />
      <SelectedWork />
      <WorkStep />
      <TestimonialSection />
      <ProfileSection />
      <LineComponent />
      <ActionSection />
    </main>
  );
};

export default Home;

Blog Page

import LineComponent from '@/components/common/LineComponent';
import BlogCard from '@/components/BlogCard';
import blogPosts from '@/data/blogPost';
import CallToAction from '@/components/common/CallToAction';
import { BlogPost } from '@/types/interfaces';

const BlogPage: React.FC = () => {
  return (
    <div className="min-h-screen bg-pageBody">
      <main className="py-12 px-4 md:px-6 lg:px-8">
        <div className="py-32 text-center bottom-5 text-primary ">
          <h1 className="text-5xl lg:text-9xl font-thin mb-5">Blog</h1>
          <p className="text-xl font-thin max-w-2xl mx-auto">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor lorem.
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:px-24 mb-5">
          {blogPosts.map((post: BlogPost) => (
            <BlogCard key={post.id} post={post} />
          ))}
        </div>
      </main>
      <LineComponent />
      <CallToAction />
    </div>
  );
};

export default BlogPage;

Blog Detail Page

import Image from 'next/image';
import blogPosts from '@/data/blogPost';
import BlogCard from '@/components/BlogCard';
import SocialLinksGrid from '@/components/SocialLinksGrid';
import LineComponent from '@/components/common/LineComponent';
import CallToAction from '@/components/common/CallToAction';
import { GoArrowUpRight, GoArrowDown } from "react-icons/go";
import { BlogDetailProps, ArticleProps, HeaderProps, PostDetailsProps, ContentProps, RelatedPostsProps } from '@/types/interfaces'; 

const Article: React.FC<ArticleProps> = ({ post }) => {
  return (
    <article className="px-8 lg:px-56 mt-16 mx-auto">
      <Header post={post} />
      <Content post={post} />
    </article>
  );
}

❤️ Show Some Love!
If you enjoyed this project and found it inspiring, feel free to show your support: buymecoffee

Like, Share, and Subscribe: Don’t forget to hit the like button, share this project with others, and subscribe to my channel for more web development content!
Support Me: Your support means a lot! You can contribute to my work on Buy Me a Coffee.

🔔 Stay Updated
For more exciting web development content and project showcases, make sure to:

Like this post if you found it helpful.
Share it with others who might be interested in building responsive portfolios.
Subscribe to stay updated with my latest projects!

📌 Tags

 #Nextjs15 #TailwindCSS #TypeScript #ResponsiveDesign #WebDevelopment #PortfolioWebsite #ModernUI #WebDevProjects