gabinroy
/
Portfolio-v1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Portfolio-v1/index.html

500 lines
17 KiB
HTML
Raw Permalink Normal View History

Initial Commit
2024-03-20 17:14:10 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="G Abin Roy, portfolio, Abin, full stack dev, personal portfolio lifecodes, portfolio design, portfolio website, personal portfolio" />
<meta name="description" content="Welcome to Abin's Portfolio. Full-Stack Web Developer and Android App Developer" />
<!-- Custom CSS -->
<link rel="stylesheet" href="./assets/css/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Favicon -->
<link id='favicon' rel="shortcut icon" href="./assets/images/favicon1.png" type="image/x-png">
<title>Portfolio | G Abin Roy</title>
</head>
<body oncontextmenu="return false">
<!-- pre loader -->
<div id="preloader"></div>
<!-- navbar starts -->
<header>
<a href="/" class="logo"><i class="fab fa-angular"></i> Abin</a>
<div id="menu" class="fas fa-bars"></div> <!-- Used To Add A Logo Near the Name In Header -->
<nav class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#experience">Experience</a></li>
<!--<li><a href="#contact">Contact</a></li>-->
</ul>
</nav>
</header>
<!-- navbar ends -->
<!-- hero section starts -->
<section class="home" id="home">
<div id="particles-js"></div>
<div class="content">
<h2>Hi There,<br/> I'm G Abin <span>Roy</span></h2>
<p>i am into <span class="typing-text"></span></p>
<a href="#about" class="btn"><span>About Me</span>
<i class="fas fa-arrow-circle-down"></i>
</a>
<div class="socials">
<ul class="social-icons">
<li><a class="linkedin" aria-label="LinkedIn" href="https://linkedin.com/in/g-abin-roy-6b1202226/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li><a class="github" aria-label="GitHub" href="https://github.com/Godwin-Abin" target="_blank"><i class="fab fa-github"></i></a></li>
<li><a class="twitter" aria-label="Twitter" href="https://twitter.com/Godwin_Abin" target="_blank"><i class="fab fa-twitter"></i></a></li>
<!-- <li><a class="github" aria-label="GitHub" href="https://git.disroot.org/gabinroy" target="_blank"><img class="forgejo" src="./assets/images/forgejo.svg" alt="Forgejo Git Logo"></a></li> -->
</ul>
</div>
</div>
<div class="image">
<img draggable="false" class="tilt" src="./assets/images/hero.jpeg" alt="">
</div>
</section>
<!-- hero section ends -->
<!-- about section starts -->
<section class="about" id="about">
<h2 class="heading"><i class="fas fa-user-alt"></i> About <span>Me</span></h2>
<div class="row">
<div class="image">
<img draggable="false" class="tilt" src="./assets/images/profile1.jpg" alt="">
</div>
<div class="content">
<h3>I'm Abin</h3>
<span class="tag">Web Developer</span>
<p>I am a Web developer based in Thiruvananthapuram, India.
I am an Computer Science undergraduate from STIST.
I am very passionate about improving my coding skills & developing applications & websites.
I build WebApps and Websites.
Working for myself to improve my skills.
Love to build Full-Stack clones. </p>
<div class="box-container">
<!-- <div class="box">
<p><span> age: </span> 21</p>
<p><span> phone : </span> +91 XXX-XXX-XXXX</p>
</div> -->
<div class="box">
<p><span> email : </span> abinroy1928@gmail.com</p>
<p><span> place : </span> Thiruvananthapuram, India - 695541</p>
</div>
</div>
<div class="resumebtn">
<a href="https://drive.google.com/file/d/1H05VpsqV27kpTwo1hEG95xAxN65DV35G/view?usp=drivesdk" target="_blank" class="btn"><span>Resume</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</section>
<!-- about section ends -->
<!-- skills section starts -->
<section class="skills" id="skills">
<h2 class="heading"><i class="fas fa-laptop-code"></i> Skills & <span>Abilities</span></h2>
<div class="container">
<div class="row" id="skillsContainer">
<div class="bar">
<div class="info">
<img src="https://img.icons8.com/color/48/000000/adobe-audition.png"/>
<span align = center>Adobe Audition</span>
</div>
</div>
<div class="bar">
<div class="info">
<img src="https://img.icons8.com/color/48/000000/adobe-photoshop.png"/>
<span align = center>Adobe Photoshop</span>
</div>
</div>
<div class="bar">
<div class="info">
<img draggable="false" src="./assets/images/premiere.png" alt="" width = 45 height = 45>
<span align = center>Adobe Premiere Pro</span>
</div>
</div>
<div class="bar">
<div class="info">
<img src="https://img.icons8.com/color/48/000000/html-5--v1.png"/>
<span>HTML5</span>
</div>
</div>
<div class="bar">
<div class="info">
<img src="https://img.icons8.com/color/48/000000/python--v1.png"/>
<span>Python</span>
</div>
</div>
<div class="bar">
<div class="info">
<img src="https://img.icons8.com/color/48/000000/c-plus-plus-logo.png"/>
<span>C++</span>
</div>
</div>
<div class="bar">
<div class="info">
<img src="https://img.icons8.com/?size=50&id=40670&format=png"/>
<span>C</span>
</div>
</div>
<div class="bar">
<div class="info">
<img src="https://img.icons8.com/glyph-neue/48/ffffff/github.png"/>
<span>GitHub</span>
</div>
</div>
</div>
</div>
</section>
<!-- skills section ends -->
<!-- education section starts -->
<section class="education" id="education">
<h1 class="heading"><i class="fas fa-graduation-cap"></i> My <span>Education</span></h1>
<p class="qoute">Education is not the learning of facts, but the training of the mind to think.</p>
<div class="box-container">
<div class="box">
<div class="image">
<img draggable="false" src="./assets/images/educat/college.jpg" alt="">
</div>
<div class="content">
<h3>Bachelor of Technology in Computer Science</h3>
<p>ST. Thomas Institute For Science & Technology | KTU</p>
<h4>2022-2026 | Pursuing</h4>
</div>
</div>
<div class="box">
<div class="image">
<img draggable="false" src="./assets/images/educat/school.jpg" alt="">
</div>
<div class="content">
<h3>HSE Science | Computer Science</h3>
<p>ST. Johns Model HSS Nalanchira | Kerala HSE</p>
<h4>2020-2022 | Completed</h4>
</div>
</div>
<div class="box">
<div class="image">
<img draggable="false" src="./assets/images/educat/school1.jpg" alt="">
</div>
<div class="content">
<h3>AISSE | 10<sup>th</sup></h3>
<p>Vimala English Vidyalaya | CBSE </p>
<h4>2010-2020 | Completed</h4>
</div>
</div>
</div>
</section>
<!-- education section ends -->
<!-- work project section starts -->
<section class="work" id="work">
<h2 class="heading"><i class="fas fa-laptop-code"></i> Projects <span>Made</span></h2>
<div class="box-container">
<div class="box tilt">
<img draggable="false" src="./assets/images/projects/portfolio.png" alt="" />
<div class="content">
<div class="tag">
<h3>Portfolio Website</h3>
</div>
<div class="desc">
<p>Personal portfolio website. Don't need much info about it, just scroll down. You're here only!</p>
<div class="btns">
<a href="#" class="btn" target="_blank"><i class="fas fa-eye"></i> View</a>
<a href="https://git.disroot.org/gabinroy/Portfolio-v1" class="btn" target="_blank">Code (Disroot Git) <i class="fas fa-code"></i></a>
<a href="https://github.com/Godwin-Abin/Portfolio-v1" class="btn" target="_blank">Code (Github) <i class="fas fa-code"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="viewall">
<a href="/projects" class="btn"><span>View All</span>
<i class="fas fa-arrow-right"></i>
</a>
</div> -->
</section>
<!-- work project section ends -->
<!-- experience section starts -->
<section class="experience" id="experience">
<h2 class="heading"><i class="fas fa-briefcase"></i> Experience </h2>
<div class="timeline">
<div class="container right">
<div class="content">
<div class="tag">
<h2>M-Squared</h2>
</div>
<div class="desc">
<h3>Python | Internship</h3>
<p>May 2023 - June 2023</p>
</div>
</div>
</div>
<!-- <div class="container right">
<div class="content">
<div class="tag">
<h2>Self Employed</h2>
</div>
<div class="desc">
<h3>Full Stack Developer</h3>
<p>Oct 2021 - present</p>
</div>
</div>
</div>
<div class="container left">
<div class="content">
<div class="tag">
<h2>Mapstreak Flyseas</h2>
</div>
<div class="desc">
<h3>Web Developer | Internship</h3>
<p>June 2021 - Dec 2021</p>
</div>
</div>
</div>
<div class="container right">
<div class="content">
<div class="tag">
<h2>The Spark Foundation</h2>
</div>
<div class="desc">
<h3>Website Developer | Internship</h3>
<p>May 2021 - June 2021</p>
</div>
</div>
</div>
<div class="container left">
<div class="content">
<div class="tag">
<h2>The Spark Foundation</h2>
</div>
<div class="desc">
<h3>Mobile Application Developer | Internship</h3>
<p>April 2021 - May 2021</p>
</div>
</div>
</div>
<div class="container right">
<div class="content">
<div class="tag">
<h2>Frshr Technologies</h2>
</div>
<div class="desc">
<h3>Wordpress Developer | Internship</h3>
<p>April 2021 - April 2021</p>
</div>
</div>
</div>
<div class="container left">
<div class="content">
<div class="tag">
<h2>WonderingBlog</h2>
</div>
<div class="desc">
<h3>Web Development & SEO | Internship</h3>
<p>March 2021 - April 2021</p>
</div>
</div>
</div>
</div>
<div class="morebtn">
<a href="/experience" class="btn"><span>View All</span>
<i class="fas fa-arrow-right"></i>
</a>
</div> -->
</div>
</section>
<!-- experience section ends -->
<!-- contact section starts
<section class="contact" id="contact">
<h2 class="heading"><i class="fas fa-headset"></i> Get in <span>Touch</span></h2>
<div class="container">
<div class="content">
<div class="image-box">
<img draggable="false" src="./assets/images/contact1.png" alt="">
</div>
<form id="contact-form">
<div class="form-group">
<div class="field">
<input type="text" name="name" placeholder="Name" required>
<i class='fas fa-user'></i>
</div>
<div class="field">
<input type="text" name="email" placeholder="Email" required>
<i class='fas fa-envelope'></i>
</div>
<div class="field">
<input type="text" name="phone" placeholder="Phone">
<i class='fas fa-phone-alt'></i>
</div>
<div class="message">
<textarea placeholder="Message" name="message" required></textarea>
<i class="fas fa-comment-dots"></i>
</div>
</div>
<div class="button-area">
<button type="submit">
Submit <i class="fa fa-paper-plane"></i></button>
</div>
</form>
</div>
</div>
</section>
contact section ends -->
<!-- footer section starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>Abin's Portfolio</h3>
<p>Thank you for visiting my personal portfolio website. Connect with me over socials. <br/> <br/> Keep Rising 🚀. Connect with me over E-mail !</p>
</div>
<div class="box">
<h3>quick links</h3>
<a href="#home"><i class="fas fa-chevron-circle-right"></i> home</a>
<a href="#about"><i class="fas fa-chevron-circle-right"></i> about</a>
<a href="#skills"><i class="fas fa-chevron-circle-right"></i> skills</a>
<a href="#education"><i class="fas fa-chevron-circle-right"></i> education</a>
<a href="#work"><i class="fas fa-chevron-circle-right"></i> work</a>
<a href="#experience"><i class="fas fa-chevron-circle-right"></i> experience</a>
</div>
<div class="box">
<h3>contact info</h3>
<p> <i class="fas fa-phone"></i>+91 97781 61098</p>
<p> <i class="fas fa-envelope"></i>abinroy1928@gmail.com</p>
<p> <i class="fas fa-map-marked-alt"></i>Thiruvananthapuram, India-695541</p>
<div class="share">
<a href="https://linkedin.com/in/g-abin-roy-6b1202226" class="fab fa-linkedin" aria-label="LinkedIn" target="_blank"></a>
<a href="https://github.com/Godwin-Abin" class="fab fa-github" aria-label="GitHub" target="_blank"></a>
<a href="mailto:abinroy1928@gmail.com" class="fas fa-envelope" aria-label="Mail" target="_blank"></a>
<a href="https://twitter.com/Godwin_Abin" class="fab fa-twitter" aria-label="Twitter" target="_blank"></a>
</div>
</div>
</div>
<h1 class="credit">
Designed with <i class="fa fa-heart pulse"></i> by <a href="https://gabinroy.curionative.org" target="_blank"> G Abin Roy</a> <br>
<span class="copy"> &copy; 2023 - <span id = "date"></span> G Abin Roy. All Rights Reserved.</span>
</h1>
<!-- <div class="copyright">
&copy; 2023 - <span id = "date"></span> G Abin Roy. All Rights Reserved.
</div> -->
</section>
<!-- footer section ends -->
<!-- Counter Script Starts
<script>
function callbackName(response) {
document.getElementById('visits').innerText = response.value;
}
</script>
Counter Script Ends -->
<!-- scroll top btn -->
<a href="#home" aria-label="ScrollTop" class="fas fa-angle-up" id="scroll-top"></a>
<!-- scroll back to top -->
<!-- ==== ALL MAJOR JAVASCRIPT CDNS STARTS ==== -->
<!-- jquery cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- typed.js cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.5/typed.min.js" integrity="sha512-1KbKusm/hAtkX5FScVR5G36wodIMnVd/aP04af06iyQTkD17szAMGNmxfNH+tEuFp3Og/P5G32L1qEC47CZbUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- particle.js links -->
<script src="./assets/js/particles.min.js"></script>
<script src="./assets/js/app.js"></script>
<!-- vanilla tilt.js links -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js" integrity="sha512-SttpKhJqONuBVxbRcuH0wezjuX+BoFoli0yPsnrAADcHsQMW8rkR84ItFHGIkPvhnlRnE2FaifDOUw+EltbuHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- scroll reveal anim -->
<script src="https://unpkg.com/scrollreveal"></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"
></script>
<!-- ==== ALL MAJOR JAVASCRIPT CDNS ENDS ==== -->
<script src="./assets/js/script.js"></script>
<script src="/assets/js/autoyr.js"></script>
<script>
var loader = document.getElementById("preloader");
window.addEventListener("load", function(){
loader.style.display="none";
})
</script>
</body>
</html>