<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Resume | e/curransam07</title>
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}
body {
background-color: #f4f4f4;
color: #1e1e1e;
display: flex;
height: 100vh;
overflow: hidden;
}
.sidebar {
width: 35%;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
}
.logo {
width: 180px;
height: auto;
border-radius: 50%;
margin-top: 2rem;
object-fit: cover;
}
#u25logo {
height: 40px;
margin-right: 25pc;
border-radius: 15px;
}
.username {
text-align: center;
margin-top: 40px;
}
.username h1 {
font-size: 1.8rem;
font-weight: 700;
}
.username p {
margin-top: 0.5rem;
letter-spacing: 2px;
color: #555;
}
.socials {
margin-top: auto;
padding-bottom: 3rem;
display: flex;
gap: 20px;
}
.socials svg {
width: 24px;
height: 24px;
fill: #333;
cursor: pointer;
transition: fill 0.3s;
}
.socials svg:hover {
fill: #0077b5;
/* Change on hover (LinkedIn blue by default) */
}
.content {
flex: 1;
padding: 4rem;
overflow: hidden;
}
.content h1 {
font-size: 3rem;
font-weight: 700;
}
.content .subtitle {
font-size: 1.25rem;
margin-top: 1rem;
color: #666;
}
.resume {
margin-top: 2rem;
background: #fff;
padding: 1.5rem;
border-radius: 8px;
height: calc(100vh - 12rem);
/* Fits on one page */
overflow: hidden;
}
.resume h2 {
margin-top: 1rem;
color: #222;
}
.resume p {
margin: 0.5rem 0;
color: #444;
}
</style>
</head>
<body>
<div class="sidebar">
<p1><img src="C:\Users\rawat\Desktop\WhatsApp Image 2025-05-09 at
16.56.38_8ab5e1e7.jpg" id="u25logo"></p1>
<p2 style=" margin: -34px 13pc 14px 0px;
font-weight: bold;">e/curransam07</p2>
<img src="C:\Users\rawat\Desktop\WhatsApp Image 2025-05-09 at
17.03.12_f05a9dc0.jpg" alt="Profile" class="logo">
<div class="username">
<h1>Arjun Singh</h1>
<p>Web Developer</p>
</div>
<div class="socials">
<!-- Facebook -->
<svg xmlns="[Link] viewBox="0 0 24 24">
<path
d="M22.675 0H1.325C.593 0 0 .593 0 1.326v21.348C0 23.407.593 24
1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.658-4.788 1.325
0 2.463.099 2.794.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795
1.763v2.312h3.587l-.467 3.622h-3.12V24h6.116C23.407 24 24 23.407 24 22.674V1.326C24
.593 23.407 0 22.675 0z" />
</svg>
<!-- Instagram -->
<svg xmlns="[Link] viewBox="0 0 24 24">
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.354
3.608 [Link] 1.268 2.243 1.33 3.608.058 1.267.069 1.647.069 4.851s-.011
3.584-.069 4.851c-.062 1.366-.355 2.633-1.33 3.608-.976.975-2.243 1.268-3.608 1.33-
1.267.058-1.647.069-4.851.069s-3.584-.011-4.851-.069c-1.366-.062-2.633-.355-3.608-
1.33-.975-.976-1.268-2.243-1.33-3.608C2.175 15.647 2.163 15.267 2.163 12s.012-
3.584.07-4.851c.062-1.366.355-2.633 1.33-3.608.976-.975 2.243-1.268 3.608-
1.33C8.416 2.175 8.796 2.163 12 2.163zM12 5.838a6.162 6.162 0 1 0 0 12.324A6.162
6.162 0 0 0 12 5.838zm6.406-1.757a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-
2.88z" />
</svg>
<!-- LinkedIn -->
<svg xmlns="[Link] viewBox="0 0 24 24">
<path
d="M22.23 0H1.77C.79 0 0 .774 0 1.728v20.543C0 23.227.79 24
1.77 24h20.46c.98 0 1.77-.773 1.77-1.729V1.728C24 .774 23.21 0 22.23 0zM7.12
20.452H3.56V9.038h3.56v11.414zM5.34 7.577a2.063 2.063 0 1 1 0-4.125 2.063 2.063 0 0
1 0 4.125zM20.452 20.452h-3.558v-5.586c0-1.333-.026-3.047-1.86-3.047-1.863 0-2.148
1.454-2.148 2.953v5.68H9.328V9.038h3.414v1.561h.05c.475-.899 1.637-1.85 3.368-1.85
3.6 0 4.266 2.37 4.266 5.452v6.251z" />
</svg>
<!-- X (Twitter) -->
<svg xmlns="[Link] viewBox="0 0 24 24">
<path
d="M22.615 0h-3.934L13.3 7.975 7.38 0H0l8.944 11.52L0
24h3.934l6.095-7.78L16.857 24H24l-9.474-12.212L22.615 0zM4.636 1.664h1.873l13.152
17.305h-1.873L4.636 1.664z" />
</svg>
</div>
</div>
<div class="content">
<h1>Hello</h1>
<p class="subtitle">Here's who I am & what I do</p>
<div class="resume">
<h2>About Me</h2>
<p>I'm a passionate web developer with a focus on frontend technologies
like HTML, CSS, and JavaScript.</p>
<h2>Education</h2>
<p>12th Board: 90.8%</p>
<p>Currently pursuing graduation.</p>
<h2>Experience</h2>
<p>Participated in multiple creative school and village outreach
projects including street plays and
awareness campaigns.</p>
<h2>Skills</h2>
<p>HTML, CSS, JavaScript, Responsive Design</p>
<h2>Projects</h2>
<p>Personal Resume Website (this project)</p>
<h2>Contact</h2>
<p>Email: arjunrawat66667@[Link]</p>
</div>
</div>
</body>
</html>