Portfolio - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8" /> <meta name="viewport" content="width=device width, initial scale=1.0" /> <title>My PortFolio</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <h1>Abhishek Pandey Portfolio</h1> ><img src="./assets/images/image.png" alt="Profile" height="200" /> <hr /> <h2>Summary</h2> <h2>I am Software Developer</h2> <a href="./public/about.html"><h3>Know More About Me</h3></a> <hr /> <h2>My Projects</h2> <ul> <li> <h3>Click Image To Know About My Project</h3> <a href="./public/MovieHunt.html" ><img src="./assets/images/Movie.png" alt="Website Image" height="100" class="project image" /></a> </li> <li> <h3>Click Image To Know About My Project</h3> <a href="./public/MindMatters.html" ><img src="./assets/images/MindMatters.png" alt="MindMatters" height="100" class="project image" /></a> </li> </ul> <hr> <h2>My Resume</h2> <a href="assets/Resume/Resume.pdf" download="Resume.pdf"><h3>Download My Resume</a> <hr /> <h2>Others</h2> <ul> <li> <a href="./public/contact.html"><h3>Contact Me</h3></a> </li> </ul> <hr /> <h2>Copyright</h2> <footer> <p>@Abhishek Pandey. All Rights Reserved</p> </footer> </body> </html> :root { bg color: #333333; /* Dark gray background */ text color: #f0f4f8; heading color: #fbd38d; primary color: #f6ad55; secondary color: #4fd1c5; link color: #4fd1c5; link hover color: #f6ad55; hr color: rgba(255, 255, 255, 0.2); } body { font family: "Segoe UI", Tahoma, Geneva, Verdana, sans serif; line height: 1.6; color: var( text color); background color: var( bg color); max width: 800px; margin: 0 auto; padding: 20px; } h1, h2, h3, h4 { margin bottom: 15px; color: var( heading color); text shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } h1 { font size: 2.5em; text align: center; color: var( primary color); } h2 { font size: 1.8em; border bottom: 2px solid var( primary color); padding bottom: 5px; } h3 { font size: 1.3em; } p { margin bottom: 15px; } img { max width: 100%; height: auto; display: block; margin: 20px auto; border radius: 10px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } hr { border: none; border top: 1px solid var( hr color); margin: 20px 0; } ul { list style type: none; padding left: 20px; } li { margin bottom: 10px; } a { color: var( link color); text decoration: none; transition: all 0.3s ease; position: relative; padding bottom: 2px; } a::after { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background color: var( link hover color); visibility: hidden; transform: scaleX(0); transition: all 0.3s ease in out; } a:hover { color: var( link hover color); } a:hover::after { visibility: visible; transform: scaleX(1); } .project image { float: right; transition: transform 0.3s ease, box shadow 0.3s ease; } .project image:hover { transform: scale(1.05); box shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } footer { text align: center; margin top: 30px; font size: 0.9em; color: var( text color); } @media (max width: 600px) { body { padding: 10px; } h1 { font size: 2em; } h2 { font size: 1.5em; } } add unique colors and hover effects do not add javascript just use css and make it unique
