Untitled

import React, { useState } from "react";
import ParticlesBg from "particles-bg";
import './App.css';
import { BsInstagram, BsGithub, BsLinkedin, BsFolder } from "react-icons/bs";
import { FaTelegram } from "react-icons/fa"
import TextLoop from "react-text-loop";
import Typist from 'react-typist';
import Foto from './assets/iman.jpg';

function App() {
  const config_cursor = {
    show: true,
    blink: true,
    element: '🔨',
    hideWhenDone: true,
  }

  const [darkmode, setdarkmode] = useState(false);

  return (
    <div>
      <div className={`card ${darkmode ? 'dark' : ''}`}>
        <div className="toggle-btn" onClick={() => setdarkmode(!darkmode)}></div>
        <div className="dark-mode"></div>
        <div className="card_body">
          <div className="profile text-center">
            <img src={Foto} className="avatar" alt="avatar" />
            <div className="bg_content rd_12 p_8">
              <h1>Nur Iman</h1>
              <p className="mt-16">Seputar Programing</p>
              <Typist cursor={config_cursor}>
                Open Web Mobile Apps Dev Services.
              </Typist>
            </div>
            <div className="bg_content rd_12 p_8 mt-16">
              Familiar with{' '}
              <TextLoop interval={800}>
                <span className="higthlight">React Js</span>
                <span className="higthlight">Tailwind</span>
                <span className="higthlight">HTML</span>
                <span className="higthlight">CSS</span>
              </TextLoop>
            </div>
          </div>
          <div className="mt-16">
            <a className="btn_action bg_content" href="https://www.instagram.com/imanmen_875/">
              <BsInstagram />
              <span>
                Instagram
              </span>
            </a>
          </div>
          <div className="mt-16">
            <a className="btn_action bg_content" href="https://github.com/Nuriman90">
              <BsGithub />
              <span>
                Github
              </span>
            </a>
          </div>
          <div className="mt-16">
            <a className="btn_action bg_content" href="https://t.me/Nuriman2">
              <FaTelegram />
              <span>
                Telegram
              </span>
            </a>
          </div>
          <div className="mt-16">
            <a className="btn_action bg_content" href="https://www.linkedin.com/in/nur-iman-944697170/">
              <BsLinkedin />
              <span>
                Linkedin
              </span>
            </a>
          </div>
          <div className="mt-16">
            <a className="btn_action bg_content" href="https://job-developer.netlify.app/">
              <BsFolder />
              <span>
                Portofolio 1
              </span>
            </a>
          </div>
          <div className="mt-16">
            <a className="btn_action bg_content" href="https://furniture-luxspace.netlify.app/">
              <BsFolder />
              <span>
                Portofolio 2
              </span>
            </a>
          </div>
          <div className="mt-16">
            <a className="btn_action bg_content" href="https://mockup-fe-binar.netlify.app/">
              <BsFolder />
              <span>
                Portofolio 3
              </span>
            </a>
          </div>
        </div>
      </div>
      <ParticlesBg type="lines" bg={true} />
    </div >
  );
}

export default App;