🎨 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! 🌟

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

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →