Skip to content

Commit

Permalink
Personal Website (#682)
Browse files Browse the repository at this point in the history 
This personal website is designed to showcase an individual's
professional identity in a visually appealing and interactive way. The
website features a vibrant taskbar at the top with the user's name
displayed prominently. A clean and modern layout highlights various
sections, including a search bar for easy navigation and social media
icons that link to platforms like LinkedIn, GitHub, Facebook, Instagram,
and more.

The main content includes a brief introductory section with a welcoming
message about the individual ("Hey, this is John Doe"). A key feature of
the site is its seamless design with flowing animations, where icons and
text slide into view, adding a touch of dynamism.

Social media links are presented with relevant icons, accompanied by
text labels, making it intuitive for visitors to connect with the user.
The responsive design ensures that all elements are well-aligned across
devices, and the interactive transitions make browsing enjoyable.

This website is perfect for personal branding, showcasing your social
presence, and creating a professional yet engaging online identity.
  • Loading branch information
@dhairyagothi
dhairyagothi authored Jan 31, 2025
2 parents ea4d686 + d38ce1f commit 762ef01
Show file tree
Hide file tree
Showing 3 changed files with 261 additions and 0 deletions.
146 changes: 146 additions & 0 deletions public/Personal_website/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

</head>
<body>
<div class="taskbar">
<h1 style="color:white;">John Doe</h1>
<p style="color: white;">Hi, I’m John, an aspiring AI enthusiast and web developer!</p>
<div class="links">
<a href="#" style="text-decoration:none;color:white;padding:10px">Home</a>
<div class="search" style="padding: 20px;">
<i class="fas fa-search"></i>
<input type="Text" placeholder="Search...">
</div>
</div>

</div>

<div class="mainbox">
<div class="identity" style="height: 100vh;">
<p style="color: white;text-align:center">About John</p>
<p >John Doe, a 29-year-old freelance photographer and travel blogger, lives life on the go, capturing the beauty of the world through his lens.
With a passion for hiking, playing the guitar, and sampling exotic cuisines, John is always on the lookout for his next adventure. His favorite destination is Iceland, where he loves photographing the mesmerizing Northern Lights. A quirky collector of vintage typewriters, John admits he doesn’t actually know how to type on them but finds their charm irresistible. He shares his travels with his Maine Coon cat, Pixel, who often features in his blog posts. John dreams of visiting all UNESCO World Heritage sites and once spent a week camping to photograph the perfect sunrise, only to discover his camera lens had been fogged the entire time. Despite such hiccups, his adventurous spirit keeps him moving forward. </p>
<p>John Doe is a man of curiosity and adventure, with a deep passion for capturing the world through his lens and telling stories through his travels. Growing up with a love for the outdoors and an eye for detail, he developed an interest in photography at a young age, often borrowing his father’s old camera to document family trips. As he traveled more, he realized that his true calling lay in blending photography with storytelling, leading him to pursue freelance work.

His travel blog, WanderLens, has become a popular platform where he shares not just his stunning visuals but also the narratives behind the places he visits. He has traveled to over 20 countries and has an extensive collection of photos ranging from bustling cities to serene nature spots. His work is not just about capturing a moment; it’s about understanding the culture, history, and people who inhabit those spaces.</p>
</div>
<div class="data" style="width:25%;height:100vh">
<div class="image">
<img src="team-1-640x640.jpg" style="height: 230px;">
</div>
<div class="cred"><div class="icon-list">
<div class="icon-item">
<i class="fas fa-user"></i>
<p>User</p>
</div>
<div class="icon-item">
<i class="fab fa-linkedin"></i>
<p>LinkedIn</p>
</div>
<div class="icon-item">
<i class="fab fa-github"></i>
<p>GitHub</p>
</div>
<div class="icon-item">
<i class="fab fa-facebook"></i>
<p>Facebook</p>
</div>
<div class="icon-item">
<i class="fab fa-instagram"></i>
<p>Instagram</p>
</div>
<div class="icon-item">
<i class="fab fa-youtube"></i>
<p>YouTube</p>
</div>
<div class="icon-item">
<i class="fab fa-pinterest"></i>
<p>Pinterest</p>
</div>
<div class="icon-item">
<i class="fab fa-tiktok"></i>
<p>TikTok</p>
</div>
<div class="icon-item">
<i class="fab fa-stack-overflow"></i>
<p>Stack Overflow</p>
</div>
<div class="icon-item">
<i class="fab fa-codepen"></i>
<p>CodePen</p>
</div>
<div class="icon-item">
<i class="fab fa-slack"></i>
<p>Slack</p>
</div>
<div class="icon-item">
<i class="fab fa-docker"></i>
<p>Docker</p>
</div>
<div class="icon-item">
<i class="fab fa-react"></i>
<p>React</p>
</div>
<div class="icon-item">
<i class="fab fa-python"></i>
<p>Python</p>
</div>
</div>

</div>
</div>

<div class="projects" style="height: 100vh;">
<h3 style="color: white;text-align:center">Projects</h3>
<ul>
<li>
Northern Lights Chronicles: A photo series capturing the stunning auroras in Iceland, featured in a travel magazine.
</li>
<li>
WanderLens Blog: A personal travel blog documenting his adventures, complete with breathtaking photographs and travel tips.
</li>
<li>
Typewriter Tales: A creative writing project where John uses his vintage typewriters to create short stories inspired by his travels.
</li>
<li>
Pixel's Travel Diaries: A fun photo collection featuring his cat, Pixel, exploring scenic spots with him.
</li>
<li>
World Heritage Walks: A project focused on visiting and documenting UNESCO World Heritage sites, aiming to raise awareness about their cultural significance.
</li>
<li>
Faces of the Journey: A portrait photography series showcasing people John met during his travels, sharing their stories.
</li>
<li>
Faces of the Journey: A portrait photography series showcasing people John met during his travels, sharing their stories.
</li>
<li>
Faces of the Journey: A portrait photography series showcasing people John met during his travels, sharing their stories.
</li>
<li>
Faces of the Journey: A portrait photography series showcasing people John met during his travels, sharing their stories.
</li>
<li>
Faces of the Journey: A portrait photography series showcasing people John met during his travels, sharing their stories.
</li>
<li>
Faces of the Journey: A portrait photography series showcasing people John met during his travels, sharing their stories.
</li>
<li>
Faces of the Journey: A portrait photography series showcasing people John met during his travels, sharing their stories.
</li>
</ul>
</div>
</div>


</body>
</html>
115 changes: 115 additions & 0 deletions public/Personal_website/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
body{
display: flex;
flex-direction: column;
/* justify-content: flex-start; */
background-color: black;
margin: 0;
padding: 0;
height: 100vh;
}
.taskbar{
display: flex;
align-items: center;
justify-content: space-between;
background-color: purple;
height: 15vh;
width: 100%;
margin: 0;
border-radius: 0 0 10px 10px;

}
.taskbar h1{
padding:15px ;
}
.links{
text-decoration: none;
color: white;
/* text-align: end; */
align-items: center;
display: flex;
flex-direction: row;
/* margin: 10px; */
justify-content: flex-end;
}

.mainbox{
display: flex;
flex-direction: row;
justify-content: flex-start;
padding: 10px;
margin: 10px;
/* animation: fadeIn 0.8s ease forwards; */

}
.identity{
background-color: purple;
padding: 10px;
margin: 10px;
border-radius: 20px;

width: 35%;
animation: fadeIn 4s ease forwards;

}
.projects{
background-color: purple;
padding: 10px;
margin: 10px;
border-radius: 20px;
height: 150vh;
width: 47%;
animation: fadeIn 9s ease forwards;
}
.image{
background-color: purple;
padding: 10px;
margin: 10px;
border-radius: 20px;
height: 230px;
display: flex;
justify-content: center;
animation: fadeIn 7s ease forwards;
}
@keyframes fadeIn{
0%{
opacity: 0;
transform: translateY(20px);
}
100%{
opacity: 1;
transform: translateY(0);
}
}
.cred{
background-color: purple;
padding: 10px;
margin: 10px;
border-radius: 20px;
color: white;
gap: 5px;
}
.icon-list {
display: flex; /* Use Flexbox for the container */
flex-wrap: wrap; /* Allow items to wrap to the next line */
gap: 20px; /* Add space between items */
padding: 10px;
justify-content: flex-start; /* Align items to the left */
}

.icon-item {
display: flex; /* Make each icon and text in a row */
align-items: center; /* Vertically align icon and text */
gap: 10px; /* Space between icon and text */
}

.icon-item i {
font-size: 24px; /* Icon size */
color: #000;
/* padding: 5px 20pxIcon color (adjust as needed) */
}

.icon-item p {
margin: 0; /* Remove default margin from paragraph */
font-size: 16px; /* Text size */
color: #000; /* Text color */
}
Binary file added public/Personal_website/team-1-640x640.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 762ef01

Please sign in to comment.