Neubrutalism React TypeScript Tailwind 作品集网站

# Web 开发# React# Typescript# Tailwind CSS

🏗️ Neubrutalism React TypeScript Tailwind 作品集网站 🏗️

通过这个响应式作品集网站探索大胆而充满活力的粗野主义设计世界！该项目使用 Vite、React、TypeScript 和 Tailwind CSS 等尖端工具构建，完美展示了现代网页设计原则和创造力。

A screenshot of a developer's code editor displaying a React component with routing and layout structure

💻 **里面有什么？**

  • 大胆而现代的主页
  • 展示作品集页面
  • 信息丰富的“关于”页面
  • 功能联系表

    • ✨ **为什么？** 如果您喜欢新野兽派美学或正在寻找下一个作品集的灵感，那么这个项目就是如何将 Figma 原型转变为功能齐全的网站的完美示例。无论您是开发人员还是设计师，这段视频都能满足您的需求！

    👀 点赞、分享和订阅更多类似鼓舞人心的项目。发表评论，让我们知道您对新野兽派设计趋势的看法！🌟

    投资组合的特点

    **1. 主页**

    网站的主页采用了现代简约风格，使用大胆的色彩和字体，忠于新野兽派风格。它包括一个引人入胜的英雄部分、一个展示开发中使用的工具、服务以及一个用于建立信任和可信度的推荐部分。

    **主页.tsx**

    import React from 'react';
import { Hero, Tools, ServicesSection, PortfolioGrid, Testimonials, ContactSection } from '../components';
import { HomeProps } from '../interfaces/interfaces';

const Home: React.FC = ({ tools, testimonials, portfolioItems, onContactClick }) => {
  return (
    
    
      
      
      
      
      
      
    
    
  );
};

export default Home;

    **2. 作品集页面**

    Portfolio 页面采用网格格式显示您的项目，遵循模块化布局，可以轻松扩展以显示更多内容。loadMoreItems 功能用于动态加载更多 Portfolio 项目。

    **投资组合.tsx**

    import React, { useState } from 'react';
import { Button, CardComponent } from '../components';
import { PortfolioProps } from '../interfaces/interfaces';

const Portfolio: React.FC = ({ portfolioItems }) => {
  const [visibleItems, setVisibleItems] = useState(6); 

  const loadMoreItems = () => {
    setVisibleItems(prevVisibleItems => prevVisibleItems + 3);
  };

  return (
    
    
      
    
        
    My Projects
    
        
    
          {portfolioItems.slice(0, visibleItems).map((item, index) => (
            
          ))}
        
    

        {visibleItems < portfolioItems.length && (
          
    
            
          
    
        )}
      
    
    
    
  );
};

export default Portfolio;

    **3. 关于页面**

    关于页面是介绍自己、技能和一些趣闻的地方。它使用可以扩展相关信息的个人资料卡。设计简单，注重排版和色彩对比，以保持新野兽派的美感。

    **关于.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 (
    
    
      
    
        
          
    
            
            
          
    
            

        
          
      
            {funFacts.map((fact, index) => (
              
    • {fact}
      • 
            ))}
          
    
            
      
    
    
    
  );
};

const SectionWithBorder: React.FC = ({ title, children }) => {
  return (
    
    
      
    
        
    {title}
    
        {children}
      
    
    
    
  );
};

const ProfileCard: React.FC = () => {
  return (
    
    
      
    
        
      
    
      
    Zainab
    
      
    UI/UX Designer & Developer
    
      
    
        {iconColors.map((icon, index) => (
          
    
            
          
    
        ))}
      
    
    
    
  );
};

const ProfileDescription: React.FC = () => {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate('/portfolio');
  };

  return (
    
    
      
    
        Hey there! I'm Zainab, a passionate UI/UX designer and developer with a knack for creating engaging digital experiences...
      
    
      
    My Skills
    
      
    
        {skills.map(({ icon: Icon, text, bgColor }, index) => (
          
    
            
            {text}
          
    
        ))}
      
    
      
    
        
      
    
    
    
  );
};

export default About;

    **4. 联系表单模式**

    联系表单可通过主页上的按钮访问。它以模态覆盖的形式打开，布局简洁明了。

    App.tsx（联系模式）

    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 (
    
    
      
      
        } />
        } />
        } />
      
      
    

      {contactFormOpen && (
        
    
          
    
            
            
    Send us a message
    
             setContactFormOpen(false)} />
          
    
        
    
      )}
    
    
  );
}

    该项目采用新粗野主义美学，强调强烈的对比、大胆的字体和各部分之间的明确划分。这是一种现代设计理念，非常适合作品集网站，尤其是当您想通过富有创意的简约元素脱颖而出时。

    如果你想查看完整项目，请**在此下载**

    🎨 **设计灵感：** Figma 原型

    **视频** --> https://youtu.be/kNqqrcUOdrU

    #React #PortfolioWebsite #TypeScript #TailwindCSS #WebDesign #ResponsivePortfolio #FrontendDevelopment #ReactProject