<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.5.2/css/all.min.css">
</head>
<body>
<div id="header">
<div class="container">
<nav>
<img src="image/Poppins.png" alt="my website logo" class="logo">
<ul>
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
<div class="header-text">
<p>Froentend Developer</p>
<h1> Hi, I'm <span>Sounak Behera</span> <br>
from India</h1>
</div>
</div>
</div>
<i class="fas fa-times" onclick="closeMenu()"></i>
<i class="fas fa-bars" onclick="openMenu()"></i>
<!------------------About section ------------------>
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<!-- 40% this part is used for image-->
<img src="image/mypic.png" alt="my image">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p style="text-align: justify; padding-top: 20px;">
Welcome to my portfolio! I'm Sounak Behera, a passionate
frontend developer based in India. With a Bachelor's degree in Computer
Applications and a keen interest in web development, I specialize in creating
visually appealing and user-friendly websites. Proficient in HTML, CSS, and
JavaScript, I have experience working on various projects, from crafting responsive
layouts to implementing interactive features. My journey in web development has
been fueled by a relentless pursuit of excellence and a commitment to staying
updated with the latest technologies and trends. I thrive in collaborative
environments and am dedicated to delivering high-quality solutions that exceed
client expectations. Beyond coding, I enjoy exploring new design trends and
continuously honing my skills to create impactful digital experiences. Let's
connect and bring your ideas to life!
</p>
<!-- 60% -->
<div class="tab-titles">
<p class="tab-links active-link"
onclick="opentab('Skills')">Skills</p>
<p class="tab-links"
onclick="opentab('experience')">Experience</p>
<p class="tab-links"
onclick="opentab('education')">Education</p>
</div>
<div class="tab-contents active-tab" id="Skills">
<ul>
<li><span>Frontend Development</span><br> HTML, CSS,
JavaScript, Bootstrap</li>
<li><span>Backend Development</span><br> Flask,
ASP.NET, Spring Boot</li>
<li><span>Programming Tools</span><br> Coding skills,
JavaScript, Python, C++, Github</li>
</ul>
</div>
<div class="tab-contents" id="experience">
<ul>
<li><span>YHills Company</span><br> HTML, CSS,
JavaScript, Work on project with YHills
Company</li>
<li><span>Backend Development</span><br> Node.js,
Express.js, Django</li>
<li><span>Programming Tools</span><br> Work in a
Company a make a project in JavaScript,
Python, C++, Mysql, Github</li>
</ul>
</div>
<div class="tab-contents" id="education">
<ul>
<li><span>BCA</span><br> Kalahandi Bhawanipatna Vikash
College 2020-2023</li>
<li><span>+2 (commerce)</span><br> Kalahandi
Bhawanipatna Vikash College 2018-2020</li>
<li><span>10th</span><br> Bargarh Vikash School 2017-
2018</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- services -->
<div id="services">
<div class="container">
<h1 class="sub-title"> My Services</h1>
<div class="services-list">
<div>
<i class="fas fa-code"></i>
<h2>Web Development</h2>
<p style="text-align: justify;">
"I specialize in web development, which involves creating
and maintaining websites or web applications. It encompasses various tasks,
including front-end development for user interface design and web design for
aesthetics. I use languages like HTML, CSS, and JavaScript to build the structure,
style, and interactivity of websites. Collaboration, testing, and continuous
learning are key aspects of the web development process to ensure efficient and
user-friendly websites."</p>
<a target="_blank" style="font-size: 15px; color: yellow;"
href="https://www.google.com/search?
q=web+development&rlz=1C1UEAD_enIN1068IN1068&oq=web+deve&gs_lcrp=EgZjaHJvbWUqDQgAEA
AYgwEYsQMYgAQyDQgAEAAYgwEYsQMYgAQyBggBEEUYOTINCAIQABiDARixAxiABDINCAMQABiDARixAxiAB
DINCAQQABiDARixAxiABDINCAUQABiDARixAxiABDINCAYQABiDARixAxiABDIKCAcQABixAxiABDIHCAgQ
ABiABDIHCAkQABiABNIBCDUyMDVqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8">Learn
More</a>
</div>
<div>
<i class="fas fa-crop-alt"></i>
<h2>UI/UX design</h2>
<p style="text-align: justify;">
I am specialize in providing top-notch UI/UX design
services, creating visually appealing and
user-friendly interfaces for digital products. With a keen
understanding of user behavior and
industry trends, I craft designs that not only look great
but also enhance the overall user
experience. From wireframes to prototypes, I bring concepts
to life, ensuring seamless
navigation and engaging interactions. Let's collaborate to
elevate your digital presence with
intuitive and aesthetically pleasing design solutions.</p>
<a target="_blank" style="font-size: 15px; color: yellow;"
href="https://www.google.com/search?q=UI
%2FUX+Design&sca_esv=595645066&rlz=1C1UEAD_enIN1068IN1068&biw=1536&bih=738&ei=cZeWZ
ZjlBpKMseMPlKyg-A4&ved=0ahUKEwjY4cbC0cODAxUSRmwGHRQWCO8Q4dUDCBA&uact=5&oq=UI
%2FUX+Design&gs_lp=Egxnd3Mtd2l6LXNlcnAiDFVJL1VYIERlc2lnbjILEAAYgAQYigUYkQIyERAAGIAE
GIoFGJECGLEDGIMBMhEQABiABBiKBRiRAhixAxiDATILEAAYgAQYsQMYgwEyBRAAGIAEMgUQABiABDIFEAA
YgAQyBRAAGIAEMgUQABiABDIFEAAYgARI6QVQAFgAcAB4AZABAJgBqQGgAakBqgEDMC4xuAEDyAEA-AEC-
AEB4gMEGAAgQYgGAQ&sclient=gws-wiz-serp">Learn
More</a>
</div>
<div>
<i class="fas fa-mobile-screen"></i>
<h2>App Development</h2>
<p style="text-align: justify;">
I am specialize in providing comprehensive app development
services, crafting innovative and
user-centric mobile applications tailored to meet your
unique business needs. From concept to
deployment, I ensure a seamless development process,
leveraging cutting-edge technologies to
create robust and scalable solutions. Whether you're
targeting iOS, Android, or cross-platform
development, my expertise encompasses the full spectrum,
delivering high-quality and engaging
applications that resonate with your audience.</p>
<a target="_blank" style="font-size: 15px; color: yellow;"
href="https://www.google.com/search?
sca_esv=595645066&rlz=1C1UEAD_enIN1068IN1068&q=app+development&spell=1&sa=X&ved=2ah
UKEwiqhvjA0cODAxWfSmwGHZZgCzwQBSgAegQICRAC&biw=1536&bih=738&dpr=1.25">Learn
More</a>
</div>
</div>
</div>
</div>
<!-------- portfolio ------>
<div id="portfolio">
<div class="container">
<h1 class="web development">My Work</h1>
<div class="work-list">
<div class="work">
<img src="image/my image.png" class="work-image" alt="Image 1">
<img src="image/my image4.jpg" class="work-image" alt="Image
2">
<img src="image/my image3.jpg" class="work-image" alt="Image
3">
<div class="layer">
<h3> Web Development</h3>
<p>Web development involves creating and managing websites
or web apps, including front-end and back-end development, and web design. Front-
end focuses on user interface with HTML, CSS, and JavaScript. Back-end handles
server-side programming and databases. Web design enhances aesthetics for better
user experience. Successful development requires understanding user needs and
staying updated with technology trends.
<ul>
<li style="padding-bottom: 5px;">Built a Complete
website with frontend in HTML, CSS,
JavaScript </li>
<li style="padding-bottom: 5px;">Integrated with the
YHills Company i had made project on web Development.</li>
<li style="padding-bottom: 5px;">There are many types
of project that i have made using html css and js..</li>
</ul>
</p>
<a style="text-align: center;" target="_blank"
href="https://www.w3schools.com/whatis/"><i
class="fas fa-external-link-alt"></i></a>
</div>
</div>
<div class="work">
<img src="image/my image6.jpg" class="work-image" alt="Image
1">
<img src="image/my image7.jpg " class="work-image" alt="Image
2">
<img src="image/my image5.jpg " class="work-image" alt="Image
3">
<div class="layer">
<h3> UI Ux Design</h3>
<p>UI/UX design focuses on creating intuitive interfaces
for optimal user experience. UI design deals with visual elements like layout and
typography, while UX design focuses on user interaction and usability. It involves
research, prototyping, and testing to ensure user satisfaction. Effective UI/UX
design enhances engagement and retention, driving the success of websites and
applications.
<ul>
<li style="padding-bottom: 5px;">UI/UX design aims to
enhance the usability, accessibility, and overall experience of websites and
applications for users</li>
<li style="padding-bottom: 5px;">UI design focuses on
the visual aspects, including layout, typography, and color scheme, to create an
aesthetically pleasing interface.</li>
<li style="padding-bottom: 5px;">UX design focuses on
the user journey, ensuring intuitive navigation, easy interaction, and overall
satisfaction.</li>
</ul>
</p>
<a target="_blank" style="text-align: center;"
href="https://hominar.com/web-design-and-development/?
msclkid=9a9c993bd83114e00443ff79f25f9ab2"><i
class="fas fa-external-link-alt"></i></a>
</div>
</div>
<div class="work">
<img src="image/my image10.png" class="work-image" alt="Image
1">
<img src="image/my image9.png" class="work-image" alt="Image
2">
<img src="image/my image11.jpg" class="work-image" alt="Image
3">
<div class="layer">
<h3> App Development</h3>
<p>App development involves creating software for mobile
devices like smartphones and tablets. It includes planning, design, development,
testing, and deployment stages. Developers choose platforms like iOS or Android and
use languages like Swift or Java. The process starts with defining the app's
purpose and features, followed by designing its layout. Coding implements
functionality, while testing ensures quality.
<ul>
<li style="padding-bottom: 5px;">App developers design,
build, and maintain software applications for mobile devices such as smartphones
and tablets.</li>
<li style="padding-bottom: 5px;">I collaborate with
designers to create user-friendly interfaces and implement features using
programming languages like Swift for iOS or Java for Android.</li>
<li style="padding-bottom: 5px;">Developers conduct
testing to ensure functionality and resolve any issues. I also stay updated on
industry trends and technologies to continually improve app performance and user
experience.</li>
</ul>
</p>
<a target="_blank" style="text-align: center;"
href="https://developer.android.com/get-started/overview"><i
class="fas fa-external-link-alt"></i></a>
</div>
</div>
</div>
<a href="#" class="btn">See More</a>
</div>
</div>
<!-- Contact -->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-envelope"></i> <a
href="mailto:
[email protected]" class="email-
link">
[email protected]</a></p>
<p><i class="fa-solid fa-phone"></i> <a href="tel:+917681885880"
class="phone-link">+91 7681885880</a></p>
<div class="social-icons">
<a target="_blank"
href="http://www.youtube.com/@sounakbehera4496"><i class="fab fa-youtube"></i></a>
<a target="_blank" href="#"><i class="fab
fa-instagram"></i></a>
<a target="_blank" href="https://www.linkedin.com/in/sounak-
behera-5819442a9/"><i class="fab fa-linkedin"></i></a>
<a target="_blank" href="https://github.com/sounakbehera"><i
class="fab fa-github"></i></a>
<a target="_blank" href="#"><i class="fab fa-facebook"></i></a>
<a target="_blank" href="https://twitter.com/Sounakbehera2"><i
class="fab fa-twitter"></i></a>
</div>
<a href="javascript:void(0)" download class="btn btn2">Download
Resume</a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required
/>
<input type="email" name="Email" placeholder="Your Email"
required />
<textarea name="Message" rows="5" placeholder="Your Message"
required></textarea>
<button type="Submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright 2024 © Sounak Behera. All rights reserved. Made with <i
class="fas fa-heart"></i> by Web Developer</p>
</div>
</div>
<!-- script -->
<script>
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementsByClassName("tab-contents");
function opentab(tabname) {
for (tablink of tablinks) {
tablink.classList.remove("active-link");
}
for (tabcontent of tabcontents) {
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
<script>
var sidemenu = document.getElementById("sidemenu");
function openmenu() {
sidemenu.style.right = "0";
}
function closemenu() {
sidemenu.style.right = "-200px";
}
</script>
<script>
const scriptURL =
'https://script.google.com/macros/s/AKfycbwSawvairRZtoaXaQwgEI8kkQAevLa3nIGHgCPuZ0r
6bJTCThE0KGHtCokGZ1Lva7e-Bw/exec'
const form = document.forms['submit-to-google-sheet']
const msg = document.getElementById('msg')
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
msg.innerHTML = "Message Sent Successfully"
setTimeout(function () {
msg.innerHTML = ""
}, 4000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>
</body>
</html>
CSS FILE CODE NEXT LINE DOWN
*{
margin: 0;
padding: 0;
font-family: "poppins", sans-serif;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
body{
background: #080808;
color: #fff;
}
/* header section */
#header{
width: 100%;
height: 100vh;
background-image: url(image/background.png);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.container{
padding: 10px 10%;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo{
width: 140px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
color: #fff;
text-decoration: none;
font-size: 18px;
position: relative;
}
nav ul li a::after {
content: "";
width: 0;
height: 3px;
background: rgb(255, 0, 0);
position: absolute;
left:0;
bottom: -11px;
transition: 0.35s;
}
nav ul li a:hover::after {
width: 100%;
}
.header-text{
margin-top: 20%;
font-size: 30px;
}
.header-text h1{
font-size: 60px;
margin-top: 20px;
}
.header-text span{
color: #5271FF;
}
/* about section */
#about{
padding: 80px 0;
color: #ababab;
}
.row{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.about-col-1{
flex-basis: 35%;
}
.about-col-1 img{
width: 100%;
border-radius: 15px;
}
.about-col-2{
flex-basis: 60%;
}
.sub-title {
font-size: 60px;
font-weight: 600;
color: #fff;
}
.tab-titles{
display: flex;
margin: 20px 0 40px;
}
.tab-links{
margin-right: 50px;
font-size: 24px;
font-weight: 500;
cursor: pointer;
position: relative;
}
.tab-links::after{
content: "";
width: 0;
height: 3px;
background-color: #5271FF;
position: absolute;
left: 0;
bottom: -8px;
transition: 0.6s;
}
.tab-links.active-link::after{
width: 100%;
}
.tab-links.active-link {
color: #fff;
transition: 0.7s;
}
.tab-contents ul li{
list-style: none;
margin: 20px 0;
}
.tab-contents ul li span{
color: #5271FF;
font-size: 17px;
}
.tab-contents{
display: none;
}
.active-tab{
display: block;
}
/* services */
/* Global Styles */
#services {
padding: 30px 0;
}
/* Services Section */
.services-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 40px;
margin-top: 50px;
}
.services-list div {
background: #262626;
padding: 40px;
font-size: 13px;
font-weight: 300;
border-radius: 10px;
transition: background 0.5s, transform 0.5s;
}
.services-list div i {
font-size: 50px;
margin-bottom: 30px;
}
.services-list div h2 {
font-size: 30px;
font-weight: 600;
margin-bottom: 15px;
}
.services-list div a {
text-decoration: none;
color: #fff;
font-size: 12px;
margin-top: 20px;
display: inline-block;
}
.services-list div:hover {
background: #1db954;
transform: translate(-10px);
}
/* Portfolio Section */
#portfolio {
padding: 50px 0;
}
.work-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 40px;
margin-top: 50px;
}
.work {
border-radius: 15px;
position: relative;
overflow: hidden;
}
.work img {
width: 100%;
transition: transform 0.5s;
}
.layer {
width: 100%;
height: 0;
background: linear-gradient(rgba(0, 0, 0, 0.6), #1db954);
border-radius: 10px;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
font-size: 14px;
transition: height 0.5s;
}
.layer h3 {
font-weight: 500;
margin-bottom: 20px;
}
.layer a {
margin-top: 20px;
color: #1db954;
text-decoration: none;
font-size: 18px;
line-height: 60px;
background: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
}
.work:hover img {
transform: scale(1.1);
}
.work:hover .layer {
height: 100%;
}
.btn {
display: block;
margin: 50px auto;
width: fit-content;
border: 1px solid #1db954;
padding: 14px 50px;
border-radius: 6px;
text-decoration: none;
color: #fff;
transition: background 0.5s;
}
.btn:hover {
background: #1db954;
}
/* Contact Section */
.contact-left,
.contact-right {
flex-basis: 35%;
}
.contact-left p {
margin-top: 30px;
}
.contact-left p i {
color: #1db954;
margin-right: 15px;
font-size: 25px;
}
.social-icons {
margin-top: 30px;
}
.social-icons a {
text-decoration: none;
font-size: 30px;
margin-right: 15px;
color: #ababab;
display: inline-block;
transition: transform 0.5s;
}
.social-icons a:hover {
color: #1db954;
transform: translateY(-5px);
}
.btn.btn2 {
display: inline-block;
background: #1db954;
}
.contact-right form {
width: 100%;
}
form input,
form textarea {
width: 100%;
border: 0;
outline: none;
background: #262626;
padding: 15px;
margin: 15px 0;
color: #fff;
font-size: 18px;
border-radius: 6px;
}
form .btn2 {
padding: 14px 60px;
font-size: 18px;
cursor: pointer;
margin-top: 20px;
}
/* Footer */
.copyright {
width: 100%;
text-align: center;
padding: 25px 0;
background: #262626;
font-weight: 300;
margin-top: 20px;
}
.copyright i {
color: #1db954;
}
.email-link,
.phone-link {
color: red;
}
/* Responsive Styles */
@media only screen and (max-width: 700px) {
/* Adjust styles for small screens here */
#header {
background-image: url(images/phone-background.png);
}
.header-text {
margin-top: 100%;
font-size: 20px;
}
.header-text h1 {
font-size: 36px;
}
nav .fas {
display: block;
font-size: 25px;
}
nav ul {
background: #1db954;
position: fixed;
top: 0;
right: -200px;
width: 200px;
height: 100vh;
padding-top: 50px;
z-index: 2;
transition: right 0.5s;
}
nav ul li {
display: block;
margin: 25px;
}
nav ul .fas {
position: absolute;
cursor: pointer;
top: 25px;
left: 25px;
}
.sub-title {
font-size: 40px;
}
.about-col-1,
.about-col-2 {
flex-basis: 100%;
}
.about-col-1 {
margin-bottom: 30px;
}
.about-col-2 {
font-size: 14px;
}
.tab-links {
font-size: 20px;
margin-right: 20px;
}
.contact-left,
.contact-right {
flex-basis: 100%;
}
.copyright {
font-size: 12px;
padding: 10px;
}
}
