๐๏ธ Neubrutalism React TypeScript Tailwind Portfolio Website ๐๏ธ
Explore the bold and vibrant world of neubrutalism design with this responsive portfolio website! Built with cutting-edge tools like Vite, React, TypeScript, and Tailwind CSS, this project is a perfect showcase of modern web design principles and creativity.
๐ป Whatโs Inside?
- Bold and Modern Home Page
- Showcase Portfolio Page
- Informative About Page
- Functional Contact Form
โจ Why? If youโre into neubrutalism aesthetics or looking for inspiration for your next portfolio, this project is the perfect example of how to transform a Figma prototype into a fully functional website. Whether you're a developer or designer, this video has something for you!
๐ Like, Share & Subscribe for more inspiring projects like this. Drop a comment and let us know what you think about the neubrutalism design trend! ๐
Features of the Portfolio
1. Home Page
The Home page of the website showcases a modern and minimalistic approach, using bold colors and typography, staying true to the neubrutalism style. It includes an engaging Hero section, a showcase of tools used in the development, services, and a testimonials section to build trust and credibility.
Home.tsx
import React from 'react';
import { Hero, Tools, ServicesSection, PortfolioGrid, Testimonials, ContactSection } from '../components';
import { HomeProps } from '../interfaces/interfaces';
const Home: React.FC<HomeProps> = ({ tools, testimonials, portfolioItems, onContactClick }) => {
return (
<div>
<Hero />
<Tools tools={tools} />
<ServicesSection />
<PortfolioGrid items={portfolioItems} />
<Testimonials testimonials={testimonials} />
<ContactSection ={onContactClick} />
</div>
);
};
export default Home;
2. Portfolio Page
The Portfolio Page is built to display your projects in a grid format, following a modular layout that can easily expand to show more content. The loadMoreItems functionality is implemented to dynamically load more portfolio items.
Portfolio.tsx
import React, { useState } from 'react';
import { Button, CardComponent } from '../components';
import { PortfolioProps } from '../interfaces/interfaces';
const Portfolio: React.FC<PortfolioProps> = ({ portfolioItems }) => {
const [visibleItems, setVisibleItems] = useState<number>(6);
const loadMoreItems = () => {
setVisibleItems(prevVisibleItems => prevVisibleItems + 3);
};
return (
<div className="min-h-screen text-black font-sans">
<main className="container mx-auto px-4 py-16">
<h1 className="text-5xl font-bold mb-12 text-center">My Projects</h1>
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 lg:px-16">
{portfolioItems.slice(0, visibleItems).map((item, index) => (
<CardComponent key={item.id} item={item} index={index} />
))}
</div>
{visibleItems < portfolioItems.length && (
<div className="mt-16 text-center">
<Button ={loadMoreItems} bgColor="bg-purple-400">See More</Button>
</div>
)}
</main>
</div>
);
};
export default Portfolio;
3. About Page
The About Page is where you can introduce yourself, your skills, and some fun facts. It uses a profile card that can be expanded with relevant information. The design is simple, focusing on typography and color contrasts to maintain the neubrutalism aesthetic.
About.tsx
import { useNavigate } from 'react-router-dom';
import { skills, funFacts, iconColors } from '../data/dataItems';
import { SectionWithBorderProps } from '../interfaces/interfaces';
import { Button, ProfileImage } from '../components';
import { Zap } from '../icons';
const About: React.FC = () => {
return (
<div className="min-h-screen text-black font-sans">
<main className="container mx-auto px-4 py-16">
<SectionWithBorder title="About Me">
<div className="flex flex-col md:flex-row gap-8">
<ProfileCard />
<ProfileDescription />
</div>
</SectionWithBorder>
<SectionWithBorder title="Fun Facts About Me">
<ul className="list-disc list-inside space-y-2">
{funFacts.map((fact, index) => (
<li key={index}>{fact}</li>
))}
</ul>
</SectionWithBorder>
</main>
</div>
);
};
const SectionWithBorder: React.FC<SectionWithBorderProps> = ({ title, children }) => {
return (
<div className="relative p-1 mb-12 border-4 border-black">
<div className="relative z-10 bg-white p-8">
<h1 className="text-4xl font-bold mb-6">{title}</h1>
{children}
</div>
</div>
);
};
const ProfileCard: React.FC = () => {
return (
<div className="md:w-1/3">
<div className="relative w-full aspect-square mb-4">
<ProfileImage />
</div>
<h2 className="text-2xl font-bold mb-2">Zainab</h2>
<p className="text-lg mb-4">UI/UX Designer & Developer</p>
<div className="flex space-x-4">
{iconColors.map((icon, index) => (
<div key={index} className={`${icon.bgColor} rounded-full border-2 border-black p-2 transition-colors`}>
<Zap className="w-6 h-6" />
</div>
))}
</div>
</div>
);
};
const ProfileDescription: React.FC = () => {
const navigate = useNavigate();
const handleButtonClick = () => {
navigate('/portfolio');
};
return (
<div className="md:w-2/3">
<p className="text-lg mb-6">
Hey there! I'm Zainab, a passionate UI/UX designer and developer with a knack for creating engaging digital experiences...
</p>
<h3 className="text-2xl font-bold mb-4">My Skills</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
{skills.map(({ icon: Icon, text, bgColor }, index) => (
<div key={index} className={`flex items-center space-x-2 ${bgColor} p-3 border-4 border-black`}>
<Icon className="w-6 h-6" />
<span>{text}</span>
</div>
))}
</div>
<div className="flex justify-center sm:justify-center md:justify-start">
<Button ={handleButtonClick} bgColor="bg-blue-400" textColor="text-white">
Check Out My Work
</Button>
</div>
</div>
);
};
export default About;
4. Contact Form Modal
The Contact Form is accessible through a button on the Home page. It opens in a modal overlay with a clean and simple layout.
App.tsx (Contact Modal)
import { useState, useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import { Navbar, Footer, ContactForm } from './components';
import { tools, testimonials, portfolioItems } from './data/dataItems';
import { X } from './icons';
export default function App() {
const location = useLocation();
const [contactFormOpen, setContactFormOpen] = useState(false);
const [portfolioItemsState] = useState(portfolioItems);
const handleButtonClick = () => {
setContactFormOpen(true);
};
useEffect(() => {
window.scrollTo(0, 0);
}, [location.pathname]);
return (
<div className="app-container overflow-hidden">
<Navbar setContactFormOpen={handleButtonClick} />
<Routes>
<Route path="/" element={<Home tools={tools} testimonials={testimonials} portfolioItems={portfolioItemsState} onContactClick={handleButtonClick} />} />
<Route path="/portfolio" element={<Portfolio portfolioItems={portfolioItemsState} />} />
<Route path="/about" element={<About />} />
</Routes>
<Footer />
{contactFormOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white p-8 border-4 border-black shadow-[16px_16px_0px_0px_#303030] max-w-md w-full">
<button ={() => setContactFormOpen(false)} className="float-right">
<X className="w-6 h-6" />
</button>
<h2 className="text-3xl font-bold mb-4">Send us a message</h2>
<ContactForm ={() => setContactFormOpen(false)} />
</div>
</div>
)}
</div>
);
}
With the Neubrutalism aesthetic, this project emphasizes strong contrast, bold typography, and clear separation between sections. Itโs a modern design philosophy thatโs perfect for portfolio websites, especially if you want to stand out with creative, minimalist elements.
If you'd like to check out the full project, download here
๐จ Design Inspiration: Figma Prototype
Video --> https://youtu.be/kNqqrcUOdrU
Top comments (0)