import React, { useState, useEffect } from "react";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  useLocation,
} from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./App.css";
import "./css/home.css";
import Header from "./components/Header";
import About from "./components/About";
import SimpleSlider from "./components/publicationSlider";
import Experience from "./components/Experience";
import Contact from "./components/contact";
import DevToolsComponent from "./components/devtools";
import SocialMedia from "./components/SocialMedia";

function Portfolio() {
  return (
    <div className="App">
      <meta name="Aman Tahiliani's Portfolio"></meta>
      <nav>
      <Header />
      </nav>
      <hr></hr>
      <main>
      <section>
      <About className="About" id="About" />
      </section>
      <section className="publications" id="Publications">
        <h2 style={{ color: "salmon", fontSize: "50px" }}>
          <b>Publications</b>
        </h2>
        <SimpleSlider />
      </section>

      <section className="Experience" id="Experience">
        <h2 style={{ color: "salmon", fontSize: "50px", marginTop: "110px" }}>
          <b>Experience</b>
        </h2>
        <Experience />
      </section>
      <section className="DevTools" id="DevTools" style={{ marginBottom: "100px" }}>
        <h2 style={{ color: "salmon", fontSize: "50px" }}>
          <b>Dev Tools</b>
        </h2>
        <DevToolsComponent />
      </div>
      {/* <div className="Contact" id="Contact">
      <h2 style={{color:"salmon", fontSize:"50px", marginTop:"60px"}}><b>Contact Me!</b></h2>
        <Contact/>
      </div> */}
      </main>
    </div>
  );
}

export default App;