|
|
<!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> |
|
|
|
