amantahiliani/Portfolio
1
0
Fork 0
mirror of https://github.com/AmanTahiliani/Portfolio.git synced 2026-08-07 11:52:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Aman Tahiliani
2025-05-11 21:26:03 -04:00
parent d6e5d1f184
commit 0ffd128e69
3 changed files with 60 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/App.js
View File

@@ -20,104 +20,40 @@ 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" />
<div className="publications" id="Publications">
</section>
<section className="publications" id="Publications">
<h2 style={{ color: "salmon", fontSize: "50px" }}>
<b>Publications</b>
</h2>
<SimpleSlider />
</div>
</section>
<div className="Experience" id="Experience">
<section className="Experience" id="Experience">
<h2 style={{ color: "salmon", fontSize: "50px", marginTop: "110px" }}>
<b>Experience</b>
</h2>
<Experience />
</div>
<div className="DevTools" id="DevTools" style={{ marginBottom: "100px" }}>
</section>
<section className="DevTools" id="DevTools" style={{ marginBottom: "100px" }}>
<h2 style={{ color: "salmon", fontSize: "50px" }}>
<b>Dev Tools</b>
</h2>
<DevToolsComponent />
</div>
<hr />
<div className="Contact" id="Contact" style={{ marginTop: "100px" }}>
<h2 style={{ color: "cyan", fontSize: "50px" }}>
<b>Contact Me!</b>
</h2>
<SocialMedia
style={{ color: "white" }}
useColorIcons={false}
whiteIcons={true}
/>
</div>
{/* <div className="Contact" id="Contact">
<h2 style={{color:"salmon", fontSize:"50px", marginTop:"60px"}}><b>Contact Me!</b></h2>
<Contact/>
</div> */}
</main>
</div>
);
}
function Books() {
return (
<div>
<h2>Books Page</h2>
{/* Add your books content here */}
</div>
);
}
function Home() {
return (
<div className="home">
<div className="content">
<div className="intro">
<h1>Welcome to Aman Tahiliani's Space</h1>
<p>Software Developer | Tech Enthusiast</p>
<nav>
<ul>
<li>
<a href="/portfolio">Developer Portfolio</a>
</li>
<li>
<a href="/reviews">Book, TV and Movie Reviews</a>
</li>
</ul>
</nav>
</div>
</div>
<div className="footer">
<SocialMedia />
</div>
</div>
);
}
function AnimatedRoutes() {
const location = useLocation();
return (
<TransitionGroup>
<CSSTransition key={location.key} classNames="fade" timeout={300}>
<Routes location={location}>
<Route path="/portfolio" element={<Portfolio />} />
<Route path="/" element={<Portfolio />} />
<Route path="/books" element={<Books />} />
{/* <Route path="/" element={<Home />} /> */}
</Routes>
</CSSTransition>
</TransitionGroup>
);
}
function App() {
return (
<Router>
<AnimatedRoutes />
</Router>
);
}
export default App;

11
src/components/Header.js
View File

@@ -19,7 +19,7 @@ class Header extends Component {
<a href="#About">About</a>
</Col>
<Col>
<a href="#Publications">Publications</a>
<a href="#Experience">Experience</a>
</Col>
</Row>
</Col>
@@ -28,17 +28,18 @@ class Header extends Component {
</Col>
<Col xs={12} md={5}>
<Row className="navRow nonNameCol">
<Col>
<a href="#Experience">Experience</a>
</Col>
<Col>
<a href="#DevTools">Devtools</a>
</Col>
<Col>
<a href="#Publications">Publications</a>
</Col>
<Col>
<a
href="#Contact"
>
Contact Me!
Social Links
</a>
</Col>
</Row>

104
src/components/contact.js
View File

@@ -1,70 +1,52 @@
import React, { Component, useState } from "react";
import React from "react";
import "bootstrap/dist/css/bootstrap.css";
// import { Row, Col, TabContainer } from "react-bootstrap";
import { FaGithub, FaLinkedin, FaInstagram, FaEnvelope } from "react-icons/fa";
import "../css/contact.css";
function Contact() {
const [name, setName] = useState("");
const [organization, setOrganization] = useState("");
const [message, setMessage] = useState("");
const [popup, setPopup] = useState("");
let handleSubmit = async (e) => {
e.preventDefault();
try {
let res = await fetch("http://localhost:8000/sendMail", {
method: "POST",
body: JSON.stringify({
name: name,
organization: organization,
message: message,
}),
});
// let resJson = await res.json();
console.log(res.status);
if (res.status === 200) {
setName("");
setOrganization("");
setMessage("");
setPopup("Message sent successfully");
} else {
setPopup("Some error occured");
}
} catch (err) {
console.log(err);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
placeholder="Name"
onChange={(e) => setName(e.target.value)}
required="true"
/>
<br />
<input
type="text"
value={organization}
placeholder="Organization"
onChange={(e) => setOrganization(e.target.value)}
/>
<br />
<textarea
className="MessageBox"
type="textarea"
value={message}
placeholder="Message"
onChange={(e) => setMessage(e.target.value)}
required="true"
/>
<br />
<button type="submit">Send!</button>
<div className="social-links">
<a
href="https://github.com/yourusername"
target="_blank"
rel="noopener noreferrer"
className="social-link"
aria-label="GitHub Profile"
>
<FaGithub className="social-icon" />
<span className="social-text">GitHub</span>
</a>
<a
href="https://linkedin.com/in/yourusername"
target="_blank"
rel="noopener noreferrer"
className="social-link"
aria-label="LinkedIn Profile"
>
<FaLinkedin className="social-icon" />
<span className="social-text">LinkedIn</span>
</a>
<div className="popup">{popup ? <p>{popup}</p> : null}</div>
</form>
<a
href="https://instagram.com/yourusername"
target="_blank"
rel="noopener noreferrer"
className="social-link"
aria-label="Instagram Profile"
>
<FaInstagram className="social-icon" />
<span className="social-text">Instagram</span>
</a>
<a
href="mailto:your.email@example.com"
className="social-link"
aria-label="Email Contact"
>
<FaEnvelope className="social-icon" />
<span className="social-text">Email</span>
</a>
</div>
);
}