🎨 Colorful React TypeScript Tailwind Portfolio Website

#react #typescript #tailwindcss #portfolio

🎨 Colorful React TypeScript Tailwind Portfolio Website 🎨

Step into the vibrant world of web development! 🌟 Explore this responsive portfolio website, designed and built using Vite, React, TypeScript, and Tailwind CSS. This project showcases the perfect blend of creativity and functionality, delivering a visually stunning and interactive experience.

💻 Features Included:
✔ Eye-Catching Home Page
✔ Professional Portfolio Page
✔ Fully Functional Contact Form

📥 Get the Project:
👉 Download here

🎨 Design Inspiration:
This project is inspired by an incredible Figma Design. 👉 Figma Design Link

and project Video --> https://youtu.be/kuzVc76F5lI

✨ Why?
This project is perfect for inspiration and understanding how to transform a Figma design into a fully functional React and Tailwind CSS project. Whether you're a developer looking for ideas or someone interested in web design, this portfolio is a must-see!

Project Components:
✔ Home Page
✔ Portfolio Page
✔ Contact Form

📥 Get the Project:
👉 Download here

Tech Stack:

React
TypeScript
Tailwind CSS
Vite

Sample Code for the Project:

App Component (Routing & Layout):

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import PortfolioPage from "./pages/Portfolio";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import ContactForm from "./components/ContactForm";
import LayoutBackground from "./components/LayoutBackground";

const App: React.FC = () => {
  return (
    <Router>
      <LayoutBackground>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/portfolio" element={<PortfolioPage />} />
        </Routes>
        <ContactForm />
        <Footer />
      </LayoutBackground>
    </Router>
  );
};

export default App;

Home Page Component (Main Content):

import React from "react";
import Hero from "../components/Hero";
import WhatIDoSection from "../components/WhatIDoSection";
import FeaturedProjects from "../components/FeaturedProjects";
import WorkExperience from "../components/WorkExperience";
import { projects, jobs } from '../data';

const Home: React.FC = () => {
  return (
    <div className="min-h-screen text-black">
      {/* Hero Section */}
      <Hero />

      {/* What I Do Section */}
      <WhatIDoSection />

      {/* Featured Projects */}
      <FeaturedProjects data={projects} />

      {/* Work Experience */}
      <WorkExperience jobs={jobs} />
    </div>
  );
};

export default Home;

Portfolio Page Component (Project Gallery):

import { useState } from 'react';
import { projects } from '../data';
import Button from '../components/Button';
import ProjectCard from '../components/ProjectCard';

const PortfolioPage: React.FC = () => {
  const [visibleProjects, setVisibleProjects] = useState(6);

  const showMore = () => {
    setVisibleProjects(prevVisible => Math.min(prevVisible + 3, projects.length));
  };

  return (
    <div className="min-h-screen text-black">
      <main className="container mx-auto px-4 py-24">
        <h1 className="text-4xl font-bold mb-8 relative inline-block bg-sky-200">
          Portfolio
        </h1>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {projects.slice(0, visibleProjects).map((project, index) => (
            <ProjectCard
              key={index}
              title={project.title}
              tag={project.tag}
              image={project.image}
              styleIndex={index % 4} 
            />
          ))}
        </div>
        {visibleProjects < projects.length && (
          <div className="mt-8 text-center">
            <Button text="Show More" ={showMore} />
          </div>
        )}
      </main>
    </div>
  );
};

export default PortfolioPage;

Tailwind CSS Configuration Sample:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        handlee: ['Handlee', 'cursive'],
        inter: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

This project is the perfect example of how Figma design concepts can be brought to life with React and Tailwind CSS, offering a seamless and responsive experience for users across all devices. Take a deep dive into this project, and transform your own design ideas into working prototypes with React and Tailwind!

Enjoy the project and don’t forget to support by buying me a coffee! ☕

👀 Like, Share & Subscribe
If you enjoy the content, don't forget to drop a comment about your favorite feature of the project! 🌟