DEV Community

Cover image for 🎨 Colorful React TypeScript Tailwind Portfolio Website
Codex
Codex

Posted on β€’ Edited on

11 2 3 3 2

🎨 Colorful React TypeScript Tailwind Portfolio Website

🎨 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.

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

πŸ’» 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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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: [],
};
Enter fullscreen mode Exit fullscreen mode

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

Top comments (6)

Collapse
 
nozibul_islam_113b1d5334f profile image
Nozibul Islam β€’

wow great.

Collapse
 
imb_funds_0cb4eef139e26ba profile image
Imb funds β€’
Collapse
 
lurodriguez profile image
L RodrΓ­guez β€’

Beautiful way to showcase a portfolio!

Collapse
 
jaziri profile image
Mohsen β€’

Great theme

Collapse
 
nextbot83_1b565f34d8c8f0f profile image
Nextbot83 β€’

That so much code

Collapse
 
seyma profile image
Codex β€’

πŸ€·πŸ»β€β™€οΈ

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay