When I was 15 there was nothing more exciting to me than playing around with the old broken computers. After college I worked at software company. I've been doing it ever since. I became a teenage web developer. But it's not the whole story.
Software developers are the creative minds behind software programs. They create software that allows users to perform specific tasks on various devices, such as computers or mobile devices.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="Description" content="When I was 15 there was nothing more exciting to me than playing around with the old broken computers.I became a teenage web developer. But it's not the whole story."/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="Umut İngin | Software Developer"/>
<meta property="og:description" content="When I was 15 there was nothing more exciting to me than playing around with the old broken computers.I became a teenage web developer. But it's not the whole story."/>
<meta property="og:url" content="https://umutingin.com.tr/"/>
<meta property="og:site_name" content="Umut İngin"/>
<meta property="og:image" content="https://umutingin.com.tr/images/umutingin.jpg">
<meta name="twitter:card" value="summary">
<meta name="twitter:site" content="@umutingin">
<meta name="twitter:creator" content="@umutingin">
<meta name="twitter:title" content="Umut İngin | Software Developer">
<meta name="twitter:description" content="When I was 15 there was nothing more exciting to me than playing around with the old broken computers.I became a teenage web developer. But it's not the whole story.">
<meta name="twitter:image" content="https://umutingin.com.tr/images/umutingin.jpg">
<link rel="canonical" href="https://umutingin.com.tr/index.html"/>
<!-- Page title -->
<title>Umut İngin | Software Developer</title>
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Font awesome -->
<link rel="stylesheet" type="text/css" href="css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/custom.min.css">
<!-- PWA -->
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="images/icon-96x96.png">
<meta name="apple-mobile-web-app-status-bar" content="#ffffff">
<meta name="theme-color" content="#181407">
</head>
<body>
<!-- Main container -->
<div class="container py-4 my-4">
<!-- First grid row -->
<div class="row">
<!-- First grid column -->
<div class="col-12">
<!-- Title -->
<div class="mb-4 mt-4">
<h1 class="text-center">Umut İngin</h1>
<h3 class="text-center text-muted">< Software Developer /></h3>
</div>
<!--/. Title -->
</div>
<!--/. First grid column -->
</div>
<!--/. First grid row -->
<!-- Second grid row -->
<div class="row">
<!-- Second grid column -->
<div class="col-12">
<!-- First paragraph -->
<div class="mb-4 mt-4">
<h2>Who Am I ?</h2>
<p class="ml-4 mt-4">When I was 15 there was nothing more exciting to me than playing around with the old broken computers. After college I worked at software company. I've been doing it ever since. I became a teenage web developer. But it's not the whole story.</p>
</div>
<!--/. First paragraph -->
</div>
<!--/. Second grid column -->
</div>
<!--/. Second grid row -->
<!-- Third grid row -->
<div class="row">
<!-- Third grid column -->
<div class="col-12">
<!-- Second paragraph -->
<div class="mb-4 mt-4">
<h2>What I Do ?</h2>
<p class="ml-4 mt-4">Software developers are the creative minds behind software programs. They create software that allows users to perform specific tasks on various devices, such as computers or mobile devices.</p>
</div>
<!--/. Second paragraph -->
</div>
<!--/. Third grid column -->
</div>
<!--/. Third grid row -->
<!-- Fourth grid row -->
<div class="row">
<!-- Fourth grid column -->
<div class="col-12">
<!-- Mail -->
<div class="mb-4 mt-4">
<h2 class="mb-3">Let's Talk.</h2>
<a href="mailto:mail@umutingin.com.tr" class="ml-4 mt-4">mail@umutingin.com.tr</a>
</div>
<!--/. Mail -->
<!-- Social media -->
<div class="mb-4 mt-4">
<!-- GitHub -->
<a href="https://github.com/umutingin" target="_blank" data-toggle="tooltip" data-placement="bottom" title="github.com/umutingin" class="ml-4"><i class="fab fa-github-square fa-lg"></i></a>
<!-- Linkedin -->
<a href="https://www.linkedin.com/in/umutingin/" target="_blank" data-toggle="tooltip" data-placement="bottom" title="linkedin.com/in/umutingin" class="ml-4"><i class="fab fa-linkedin fa-lg"></i></a>
<!-- Twitter -->
<a href="https://twitter.com/umutingin" target="_blank" data-toggle="tooltip" data-placement="bottom" title="twitter.com/umutingin" class="ml-4"><i class="fab fa-twitter-square fa-lg"></i></a>
<!-- Instagram -->
<a href="https://www.instagram.com/umutingin/" target="_blank" data-toggle="tooltip" data-placement="bottom" title="instagram.com/umutingin" class="ml-4"><i class="fab fa-instagram fa-lg"></i></a>
<!-- Steam -->
<a href="https://steamcommunity.com/profiles/76561198181107306/" target="_blank" data-toggle="tooltip" data-placement="bottom" title="steamcommunity.com/profiles/76561198181107306/" class="ml-4"><i class="fab fa-steam-square fa-lg"></i></a>
</div>
<!--/. Social media -->
</div>
<!--/. Fourth grid column -->
</div>
<!--/. Fourth grid row -->
<!-- Contact Form Button -->
<div>
<button type="button" class="modal-form-button custom-button" data-toggle="modal" href="#" data-target=".modal-md"><i class="far fa-envelope my-float"></i></button>
</div>
<!--/. Contact Form Button -->
<!-- Contact Form Modal -->
<div class="modal fade modal-md" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<p>Send your message in the form below and I will get back to you as early as possible.</p>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="contact-form" id='contact-form' action="smtp-config.php" method="post" autocomplete="off">
<div class="wrap-custom-input validate-input" data-validate="Name is required">
<input type="text" class="custom-input" id="form_name" name="form_name" required>
<span class="focus-custom-input" data-placeholder="NAME" for="form_name"></span>
</div>
<div class="wrap-custom-input validate-input" data-validate = "Valid email is required: ex@abc.com">
<input type="email" class="custom-input" id="form_email" name="form_email" required>
<span class="focus-custom-input" data-placeholder="EMAIL"></span>
</div>
<div class="wrap-custom-input validate-input" data-validate="Subject is required">
<input type="text" class="custom-input" id="form_subject" name="form_subject" required>
<span class="focus-custom-input" data-placeholder="SUBJECT" for="form_subject"></span>
</div>
<div class="wrap-custom-input validate-input" data-validate = "Message is required">
<textarea class="custom-input" id="form_message" name="form_message" maxlength="200" required></textarea>
<span class="focus-custom-input" id="characterLeft" data-placeholder="MESSAGE" for="form_message">You have reached the limit</span>
</div>
<div class="center-recaptcha" style="text-align: center;">
<div class="g-recaptcha" data-theme="dark" data-sitekey="sitekey"></div>
</div>
<div class="container-contact-form-btn">
<div class="wrap-contact-form-btn">
<div class="contact-form-bgbtn"></div>
<button class="contact-form-btn">SEND</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/. Contact Form Modal -->
<!-- Back To Top Button -->
<button type="button" class="backtotop-button custom-button" id="back-to-top" href="#">
<i class="fas fa-angle-up"></i>
</button>
<!--/. Back To Top Button -->
</div>
<!--/. Main container -->
<!-- Scripts -->
<script src="https://www.google.com/recaptcha/api.js?hl=en"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/all.min.js"></script>
<script src="js/custom.min.js"></script>
<script src="js/app.js"></script>
<!--/. Scripts -->
</body>
</html>
/* Font Face */
@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.ttf');
}
/* Body Styles */
body {
background-color: #181407;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
}
/* Link Styles */
a, a:visited {
color: #ffffff;
}
a:hover, a:active {
color: #6c757d;
text-decoration: none;
}
a {
color: #ffffff;
}
/* Code Styles */
pre {
overflow-x: hidden;
}
code {
color: #000000 !important;
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background: rgba(108, 117, 125, 0.5);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(108, 117, 125, 0.5);
}
/* Custom Button */
.custom-button {
border: none;
border-radius: 5px;
moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.custom-button:hover {
background-position: 100% 0;
moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.custom-button:focus {
outline: none;
}
/* Source Code Buttons */
.src-button-color {
background-image: linear-gradient(to right, #181407, #6c757d, #181407, #6c757d);
padding: 5px 15px;
font-size: 14px;
font-weight: 600;
color: #fff;
cursor: pointer;
text-align:center;
background-size: 500% 100%;
}
/* Scrollbar Contact Form Button */
.modal-form-button {
position: fixed;
padding: 0px 10px;
color: #fff;
background-size: 300% 100%;
width: 40px;
height: 40px;
bottom: 52%;
right: 10px;
text-align: center;
font-size: 20px;
z-index: 100;
background-image: linear-gradient(to left, #181407, #6c757d, #181407, #6c757d);
}
/* Scrollbar Back To Top Button */
.backtotop-button {
background-image: linear-gradient(to left, #181407, #6c757d, #181407, #6c757d);
position: fixed;
width: 40px;
height: 40px;
bottom: 43%;
right: 10px;
color: #fff;
border-radius: 5px;
text-align: center;
font-size: 27px;
z-index: 100;
padding: 0px 10px;
opacity: 0;
visibility: hidden;
display: inline-block;
background-size: 300% 100%;
}
#back-to-top.show {
opacity: 1;
visibility: visible;
}
/* Contact Form */
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
resize: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }
input::-webkit-input-placeholder { color: #000; }
input:-moz-placeholder { color: #000; }
input::-moz-placeholder { color: #000; }
input:-ms-input-placeholder { color: #000; }
textarea::-webkit-input-placeholder { color: #999999; }
textarea:-moz-placeholder { color: #999999; }
textarea::-moz-placeholder { color: #999999; }
textarea:-ms-input-placeholder { color: #999999; }
textarea::-webkit-scrollbar {
width: 7px;
}
textarea::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: darkgrey;
outline: 1px solid slategrey;
}
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
input.custom-input {
height: 45px;
}
input.custom-input + .focus-custom-input::after {
top: 16px;
left: 0;
}
textarea.custom-input {
min-height: 115px;
padding-top: 13px;
padding-bottom: 13px;
}
textarea.custom-input + .focus-custom-input::after {
top: 16px;
left: 0;
}
.custom-input:focus + .focus-custom-input::after {
top: -13px;
}
.custom-input:focus + .focus-custom-input::before {
width: 100%;
}
.has-val.custom-input + .focus-custom-input::after {
top: -13px;
}
.has-val.custom-input + .focus-custom-input::before {
width: 100%;
}
@media (max-width: 992px) {
.alert-validate::before {
visibility: visible;
opacity: 1;
margin-bottom: 20px !important;
}
input.custom-input {
height: 60px;
}
}
.wrap-custom-input {
width: 100%;
position: relative;
border-bottom: 3px solid #adadad;
margin-bottom: 37px;
}
.custom-input {
display: block;
width: 100%;
font-size: 14px;
border: none;
}
.focus-custom-input {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.focus-custom-input::before {
content: "";
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 2px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
background: rgba(24, 20, 7, 1);
background: -webkit-linear-gradient(45deg, #181407, #6c757d);
background: -o-linear-gradient(45deg, #181407, #6c757d);
background: -moz-linear-gradient(45deg, #181407, #6c757d);
background: linear-gradient(45deg, #181407, #6c757d);
}
.focus-custom-input::after {
content: attr(data-placeholder);
display: block;
width: 100%;
position: absolute;
top: 0px;
left: 0;
font-size: 13px;
color: #999999;
line-height: 1.2;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.container-contact-form-btn {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 13px;
}
.wrap-contact-form-btn {
display: block;
position: relative;
z-index: 1;
border-radius: 2px;
width: auto;
overflow: hidden;
margin: 0 auto;
}
.contact-form-bgbtn {
position: absolute;
z-index: -1;
width: 300%;
height: 100%;
background: -webkit-linear-gradient(-135deg, #181407, #6c757d, #181407, #6c757d);
background: -o-linear-gradient(-135deg, #181407, #6c757d, #181407, #6c757d);
background: -moz-linear-gradient(-135deg, #181407, #6c757d, #181407, #6c757d);
background: linear-gradient(-135deg, #181407, #6c757d, #181407, #6c757d);
top: 0;
left: -100%;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 244px;
height: 50px;
font-size: 16px;
color: #fff;
line-height: 1.2;
}
.wrap-contact-form-btn:hover .contact-form-bgbtn {
left: 0;
}
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: white;
border: 1px solid #c80000;
border-radius: 2px;
padding: 4px 25px 4px 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 0px;
pointer-events: none;
color: #6c757d;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "\f12a";
font-family: FontAwesome;
display: block;
position: absolute;
color: #6c757d;
font-size: 16px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 8px;
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
#g-recaptcha-response {
display: block !important;
position: absolute;
margin: -78px 0 0 0 !important;
width: 302px !important;
height: 76px !important;
z-index: -999999;
opacity: 0;
}
#characterLeft {
color: #999999;
font-size: 12px !important;
line-height: 15px;
}
.contact-form {
padding: 10px 20px;
}
[role=dialog] {
padding-left: 0px !important;
}
.g-recaptcha {
display: inline-block;
}
.center-recaptcha{
text-align: center;
}
/* Modal Header */
.modal-header p {
color: #6c757d;
text-align: center;
padding: 0px 25px;
margin-bottom: 0px;
}
/* Tooltip Function */
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
/* Back To Top Button */
var btn = $('#back-to-top');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});
/* Source Code Buttons Collapse */
jQuery('button').click( function(e) {
jQuery('.collapse').collapse('hide');
});
/* Form */
(function ($) {
"use strict";
$('.custom-input').each(function(){
$(this).on('blur', function(){
if($(this).val().trim() != "") {
$(this).addClass('has-val');
}
else {
$(this).removeClass('has-val');
}
})
})
var name = $('.validate-input input[name="form_name"]');
var email = $('.validate-input input[name="form_email"]');
var subject = $('.validate-input input[name="form_subject"]');
var message = $('.validate-input textarea[name="form_message"]');
$('.validate-form').on('submit',function(){
var check = true;
if($(form_name).val().trim() == ''){
showValidate(form_name);
check=false;
}
if($(form_email).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
showValidate(form_email);
check=false;
}
if($(form_subject).val().trim() == ''){
showValidate(form_subject);
check=false;
}
if($(form_message).val().trim() == ''){
showValidate(form_message);
check=false;
}
return check;
});
$('.validate-form .custom-input').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
})(jQuery);
$(document).ready(function(){
$('#characterLeft').text('200 characters left');
$('#form_message').keydown(function () {
var max = 200;
var len = $(this).val().length;
if (len >= max) {
$('#characterLeft').text('You have reached the limit');
$('#characterLeft').addClass('red');
$('#btnSubmit').addClass('disabled');
}
else {
var ch = max - len;
$('#characterLeft').text(ch + ' characters left');
$('#btnSubmit').removeClass('disabled');
$('#characterLeft').removeClass('red');
}
});
});
/* reCAPTCHA Required */
window.onload = function() {
var $recaptcha = document.querySelector('#g-recaptcha-response');
if($recaptcha) {
$recaptcha.setAttribute("required", "required");
}
};
/* Disable Right Click Form Elements */
$(document).ready(function() {
$(".custom-input").on("contextmenu",function(e){
return false;
});
});
/* Disable Copy&Paste Form Elements */
$(document).ready(function(){
$(".custom-input").on("cut copy paste",function(e) {
e.preventDefault();
});
});