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
Top comments (2)
Minimal and Impressive 😍
thank you Govind <3
Some comments may only be visible to logged-in visitors. Sign in to view all comments.