-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
198 lines (186 loc) · 10 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/b006a4b840.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<i class="fa-solid fa-user logo" style="color: #e6ccbe;"></i>
<ul id="sidemenu">
<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>
<i class=" fas fa-regular fa-circle-xmark" onclick="closemenu()"></i>
</ul>
<i class="fas fa-solid fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text">
<p>Web Developer</p>
<h1>Hi, I'm <span>Srishanth S</span><br>From Kerala</h1>
<span id="element"></span>
</div>
</div>
</div>
<!-- ---------------About---------------- -->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="Photo.jpg">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>I am C++ Web Developer and Web Designer.<br>I'm passionate about coding and crafting beautiful web experiences. Based in Kerala (India), I thrive on learning new things and pushing the boundaries of web development. My ambition is to create innovative, user-friendly websites that blend aesthetics with functionality.<br>When I'm not coding, I'm exploring the latest tech trends and tackling exciting side projects. Let's connect and collaborate! Reach me at <b><a>[email protected]</a></b> or find me on <a href="https://www.linkedin.com/in/srishanth-s/">Linkedin</a>.
</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
</div>
<div class="tab-contents active-tab" id="skills">
<ul>
<li><span>Web developer</span><br>Developing website interfaces</li>
<li><span>UI/UX Designer</span><br>Designing website interfaces</li>
<li><span>Programmer</span><br>C++|HTML|CSS|Javascript|Python</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="fa-solid fa-code fa-beat-fade"></i>
<h2>Web Development</h2>
<p>"As a passionate web developer, I embark on a creative journey to craft the digital experiences of tomorrow. With a deep love for coding and a keen eye for design, I specialize in bringing ideas to life on the web. From conceptualizing user-friendly interfaces to implementing innovative functionalities, my mission is to build websites and web applications that captivate, inform, and inspire."</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-solid fa-crop fa-beat-fade"></i>
<h2>UI/UX</h2>
<p>"As a dedicated web designer, I am driven by a passion for aesthetics and user experience. I specialize in creating visually stunning and intuitive web interfaces that leave a lasting impression. My design philosophy centers around blending form and function, ensuring that each website I craft not only looks captivating but also delivers an exceptional user journey. With an artistic eye and a commitment to responsive and accessible design, I am on a mission to make the web a more beautiful and user-friendly place.</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-solid fa-laptop fa-beat-fade"></i>
<h2>Programming</h2>
<p>"As a skilled programmer, I thrive on the logic and innovation that code brings to life. My expertise lies in turning complex concepts into functional reality through the power of programming languages. Whether it's developing robust back-end systems, building interactive web applications, or automating tasks to improve efficiency, I'm dedicated to the art of problem-solving through code. My goal is to create solutions that not only meet the technical requirements but also provide elegant and effective answers to real-world challenges, pushing the boundaries of what can be achieved in the digital landscape."</p>
<a href="#">Learn more</a>
</div>
</div>
</div>
</div>
<!-- -------------------portfolio---------------------- -->
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Work</h1>
<div class="work-list">
<div class="work">
<img src="work-1.png">
<div class="layer">
<h3>To Do list</h3>
<p>"Crafted a foundational to-do list application as a beginner's project, laying the groundwork for future endeavors in web development." </p>
<a href="https://www.linkedin.com/in/srishanth-s/"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="pro-img.jpg">
<div class="layer">
<h3>Amazon Website Clone</h3>
<p>"Engineered an Amazon-inspired clone website as a challenging and comprehensive project, demonstrating proficiency in front-end and back-end web developmen and user experience design"</p>
<a href="https://srishanth57.github.io/AMAZON-CLONE-PROJECT/"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="work-3.png">
<div class="layer">
<h3>Front end Website</h3>
<p>"Designed and developed a meticulous Netflix website clone, specifically focusing on replicating the main sign-in page with pixel-perfect precision and attention to detail, demonstrating proficiency in web development and user interface design."</p>
<a href="https://srishanth57.github.io/Netflix-clone-page/"><i class="fa-solid fa-arrow-up-right-from-square"></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-paper-plane"></i> [email protected]</p>
<p><i class="fa-solid fa-square-phone"></i> 7306526745</p>
<div class="social-icons">
<a href="https://www.facebook.com/srishanth.s.9"><i class="fa-brands fa-facebook"></i></a>
<a href="https://www.instagram.com/alpha_spec._/"><i class="fa-brands fa-instagram"></i></a>
<a href="https://twitter.com/Srishanth_S_"><i class="fa-brands fa-twitter"></i></a>
<a href="https://www.linkedin.com/in/srishanth-s/"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/Srishanth57"><i class="fa-brands fa-github"></i></a>
</div>
<a href="Resume.pdf" download class="btn btn2">Download CV</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="6" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright <i class="fa-regular fa-copyright"style="color:#ffffff" ></i> Made with passion <i class="fa-solid fa-heart"></i> </p>
</div>
</div>
<a href="google53496ec30f990aa3.html"></a>
<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/AKfycbyNhGtROZOc6MTIG9Dji7AsDFhUOQHVa6fqH8wLVTSg8kFU8QrJEWMszRgSr_H5ielQsQ/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 = ""
},5000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<!-- Load library from the CDN -->
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<!-- Setup and start animation! -->
<script>
var typed = new Typed('#element', {
strings: ['Passionate about UI/UX Design', 'Web development','& Photo Editing'],
typeSpeed: 50,
});
</script>
</body>
</html>