| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Gursimar Singh | Portfolio Dashboard</title> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> |
| <style> |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: #f5f7fa; |
| color: #333; |
| line-height: 1.6; |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: flex-start; |
| padding: 30px; |
| } |
| .container { |
| background: white; |
| max-width: 900px; |
| width: 100%; |
| border-radius: 12px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| padding: 40px 50px; |
| } |
| .profile-header { |
| text-align: center; |
| margin-bottom: 40px; |
| } |
| h1 { |
| font-weight: 700; |
| font-size: 2.4rem; |
| margin-bottom: 6px; |
| color: #222; |
| } |
| h2 { |
| font-weight: 600; |
| font-size: 1.4rem; |
| margin-bottom: 20px; |
| color: #666; |
| font-style: italic; |
| } |
| section { |
| margin-bottom: 35px; |
| } |
| section h3 { |
| font-weight: 600; |
| font-size: 1.3rem; |
| margin-bottom: 15px; |
| border-bottom: 2px solid #a6c1ff; |
| padding-bottom: 6px; |
| color: #444; |
| } |
| p { |
| font-size: 1rem; |
| color: #555; |
| } |
| |
| .skills-list { |
| list-style: none; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| } |
| .skills-list li { |
| background: #a6c1ff; |
| color: white; |
| padding: 8px 18px; |
| border-radius: 50px; |
| font-weight: 600; |
| font-size: 0.9rem; |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
| transition: background-color 0.3s ease; |
| cursor: default; |
| } |
| .skills-list li:hover { |
| background: #7a94ff; |
| } |
| |
| .projects { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 24px; |
| } |
| .project-card { |
| background: #f0f4ff; |
| padding: 20px 25px; |
| border-radius: 12px; |
| box-shadow: 0 6px 12px rgba(118,132,255,0.15); |
| transition: box-shadow 0.3s ease; |
| } |
| .project-card:hover { |
| box-shadow: 0 10px 25px rgba(118,132,255,0.3); |
| } |
| .project-card h4 { |
| margin-bottom: 10px; |
| color: #3546c4; |
| font-weight: 700; |
| font-size: 1.1rem; |
| } |
| .project-card p { |
| font-size: 0.95rem; |
| color: #444; |
| margin-bottom: 12px; |
| min-height: 52px; |
| } |
| .project-card a { |
| font-size: 0.9rem; |
| color: #5a67ff; |
| font-weight: 600; |
| text-decoration: none; |
| border-bottom: 1.5px solid transparent; |
| transition: border-color 0.3s ease; |
| } |
| .project-card a:hover { |
| border-color: #5a67ff; |
| } |
| |
| .contact { |
| text-align: center; |
| } |
| .contact a { |
| display: inline-block; |
| margin: 0 15px; |
| text-decoration: none; |
| color: #5a67ff; |
| font-weight: 700; |
| font-size: 1rem; |
| border: 2px solid #5a67ff; |
| padding: 10px 22px; |
| border-radius: 30px; |
| box-shadow: 0 6px 12px rgba(90,103,255,0.3); |
| transition: all 0.3s ease; |
| } |
| .contact a:hover { |
| background: #5a67ff; |
| color: white; |
| box-shadow: 0 8px 20px rgba(90,103,255,0.6); |
| } |
| |
| .logout-btn { |
| margin: 40px auto 0; |
| display: block; |
| background: #ff5c5c; |
| color: white; |
| font-weight: 700; |
| border: none; |
| padding: 14px 28px; |
| border-radius: 30px; |
| cursor: pointer; |
| box-shadow: 0 6px 12px rgba(255,92,92,0.4); |
| transition: background-color 0.3s ease; |
| } |
| .logout-btn:hover { |
| background: #e04545; |
| } |
| |
| @media (max-width: 600px) { |
| .container { |
| padding: 30px 20px; |
| } |
| .projects { |
| grid-template-columns: 1fr; |
| } |
| .contact a { |
| margin: 10px 0; |
| display: block; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container" role="main"> |
| <header class="profile-header"> |
| <h1 id="fullName">Gursimar Singh</h1> |
| <h2 id="title">Student</h2> |
| </header> |
|
|
| <section aria-labelledby="about-me-title"> |
| <h3 id="about-me-title">About Me</h3> |
| <p id="aboutMe"> |
| I am a motivated student actively learning Python, artificial intelligence, machine learning, and web development. Driven by curiosity and innovation, I strive to create impactful solutions and grow my expertise in these cutting-edge technologies. |
| </p> |
| </section> |
|
|
| <section aria-labelledby="skills-title"> |
| <h3 id="skills-title">Skills</h3> |
| <ul class="skills-list" id="skillsList"> |
| <li>Python</li> |
| <li>Artificial Intelligence (AI)</li> |
| <li>Machine Learning (ML)</li> |
| <li>Web Development (HTML, CSS, JavaScript)</li> |
| <li>Data Analysis</li> |
| <li>Flask / Django</li> |
| <li>RESTful APIs</li> |
| <li>Git & Version Control</li> |
| </ul> |
| </section> |
|
|
| <section aria-labelledby="projects-title"> |
| <h3 id="projects-title">Projects</h3> |
| <div class="projects"> |
| <article class="project-card"> |
| <h4>NumPy Project</h4> |
| <p>A hands-on project utilizing NumPy for efficient numerical computations and data manipulation. Explored array operations, broadcasting, and performance optimization.</p> |
| <a href="#" target="_blank" rel="noopener noreferrer" aria-label="NumPy project link">Project Link</a> |
| </article> |
|
|
| <article class="project-card"> |
| <h4>Data Visualization Project</h4> |
| <p>Created dynamic visual representations of data using libraries like Matplotlib and Seaborn to uncover insights and trends effectively.</p> |
| <a href="#" target="_blank" rel="noopener noreferrer" aria-label="Data visualization project link">Project Link</a> |
| </article> |
| </div> |
| </section> |
|
|
| <section class="contact" aria-label="Contact Information"> |
| <a href="https://linkedin.com/in/gursimar007" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn profile">LinkedIn</a> |
| <a href="https://github.com/gursimar007" target="_blank" rel="noopener noreferrer" aria-label="GitHub profile">GitHub</a> |
| </section> |
|
|
| <button class="logout-btn" id="logoutBtn" aria-label="Logout">Logout</button> |
| </div> |
|
|
| <script> |
| |
| const loggedInUser = localStorage.getItem("loggedInUser"); |
| if (!loggedInUser) { |
| window.location.href = "index.html"; |
| } else { |
| document.getElementById("fullName").textContent = "Gursimar Singh"; |
| } |
| |
| |
| const logoutBtn = document.getElementById("logoutBtn"); |
| logoutBtn.addEventListener("click", () => { |
| localStorage.removeItem("loggedInUser"); |
| window.location.href = "index.html"; |
| }); |
| </script> |
| </body> |
| </html> |
|
|
