<!-- 


          _____                    _____                    _____                            _____                    _____          
         /\    \                  /\    \                  /\    \                          /\    \                  /\    \         
        /::\    \                /::\    \                /::\____\                        /::\____\                /::\____\        
       /::::\    \              /::::\    \              /:::/    /                       /::::|   |               /:::/    /        
      /::::::\    \            /::::::\    \            /:::/    /                       /:::::|   |              /:::/    /         
     /:::/\:::\    \          /:::/\:::\    \          /:::/    /                       /::::::|   |             /:::/    /          
    /:::/  \:::\    \        /:::/__\:::\    \        /:::/____/                       /:::/|::|   |            /:::/____/           
   /:::/    \:::\    \      /::::\   \:::\    \       |::|    |                       /:::/ |::|   |           /::::\    \           
  /:::/    / \:::\    \    /::::::\   \:::\    \      |::|    |     _____            /:::/  |::|___|______    /::::::\____\________  
 /:::/    /   \:::\ ___\  /:::/\:::\   \:::\    \     |::|    |    /\    \          /:::/   |::::::::\    \  /:::/\:::::::::::\    \ 
/:::/____/     \:::|    |/:::/__\:::\   \:::\____\    |::|    |   /::\____\        /:::/    |:::::::::\____\/:::/  |:::::::::::\____\
\:::\    \     /:::|____|\:::\   \:::\   \::/    /    |::|    |  /:::/    /        \::/    / ~~~~~/:::/    /\::/   |::|~~~|~~~~~     
 \:::\    \   /:::/    /  \:::\   \:::\   \/____/     |::|    | /:::/    /          \/____/      /:::/    /  \/____|::|   |          
  \:::\    \ /:::/    /    \:::\   \:::\    \         |::|____|/:::/    /                       /:::/    /         |::|   |          
   \:::\    /:::/    /      \:::\   \:::\____\        |:::::::::::/    /                       /:::/    /          |::|   |          
    \:::\  /:::/    /        \:::\   \::/    /        \::::::::::/____/                       /:::/    /           |::|   |          
     \:::\/:::/    /          \:::\   \/____/          ~~~~~~~~~~                            /:::/    /            |::|   |          
      \::::::/    /            \:::\    \                                                   /:::/    /             |::|   |          
       \::::/    /              \:::\____\                                                 /:::/    /      . .     \::|   |          
        \::/____/                \::/    /                                                 \::/    /      . . .     \:|   |          
         ~~                       \/____/                                                   \/____/        . .       \|___|          
                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                              
 _______       _____ ______       ________      ___      ___                                                                                                                                                                                                                                                                                               
|\  ___ \     |\   _ \  _   \    |\   __  \    |\  \    |\  \                                                                                                                                                                                                                                                                                              
\ \   __/|    \ \  \\\__\ \  \   \ \  \|\  \   \ \  \   \ \  \                                                                                                                                                                                                                                                                                             
 \ \  \_|/__   \ \  \\|__| \  \   \ \   __  \   \ \  \   \ \  \                                                                                                                                                                                                                                                                                            
  \ \  \_|\ \   \ \  \    \ \  \   \ \  \ \  \   \ \  \   \ \  \____                                                                                                                                                                                                                                                                                       
   \ \_______\   \ \__\    \ \__\   \ \__\ \__\   \ \__\   \ \_______\                                                                                                                                                                                                                                                                                     
    \|_______|    \|__|     \|__|    \|__|\|__|    \|__|    \|_______|                                                                                                                                                                                                                                                                                     
                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                           
 _____ ______       ________      ________      _________    ___      ________       ___  __        ___      ________      ___      ___           ________      ___      ___  ________       _____      ________       _____           ________      _____ ______       ________      ___      ___                ________      ________      _____ ______      
|\   _ \  _   \    |\   __  \    |\   __  \    |\___   ___\ |\  \    |\   ___  \    |\  \|\  \     |\  \    |\   __  \    |\  \    |\  \         |\   __  \    |\  \    /  /||\   __  \     / __  \    |\   __  \     / __  \         |\   ____\    |\   _ \  _   \    |\   __  \    |\  \    |\  \              |\   ____\    |\   __  \    |\   _ \  _   \    
\ \  \\\__\ \  \   \ \  \|\  \   \ \  \|\  \   \|___ \  \_| \ \  \   \ \  \\ \  \   \ \  \/  /|_   \ \  \   \ \  \|\  \   \ \  \   \ \  \        \ \  \|\  \   \ \  \  /  / /\ \  \|\  \   |\/_|\  \   \ \  \|\  \   |\/_|\  \        \ \  \___|    \ \  \\\__\ \  \   \ \  \|\  \   \ \  \   \ \  \             \ \  \___|    \ \  \|\  \   \ \  \\\__\ \  \   
 \ \  \\|__| \  \   \ \   __  \   \ \   _  _\       \ \  \   \ \  \   \ \  \\ \  \   \ \   ___  \   \ \  \   \ \   _  _\   \ \  \   \ \  \        \ \  \\\  \   \ \  \/  / /  \ \  \\\  \  \|/ \ \  \   \ \  \\\  \  \|/ \ \  \        \ \  \  ___   \ \  \\|__| \  \   \ \   __  \   \ \  \   \ \  \             \ \  \        \ \  \\\  \   \ \  \\|__| \  \  
  \ \  \    \ \  \   \ \  \ \  \   \ \  \\  \|       \ \  \   \ \  \   \ \  \\ \  \   \ \  \\ \  \   \ \  \   \ \  \\  \|   \ \  \   \ \  \____    \ \  \\\  \   \ \    / /    \ \  \\\  \      \ \  \   \ \  \\\  \      \ \  \    @   \ \  \|\  \   \ \  \    \ \  \   \ \  \ \  \   \ \  \   \ \  \____   ___   \ \  \____    \ \  \\\  \   \ \  \    \ \  \ 
   \ \__\    \ \__\   \ \__\ \__\   \ \__\\ _\        \ \__\   \ \__\   \ \__\\ \__\   \ \__\\ \__\   \ \__\   \ \__\\ _\    \ \__\   \ \_______\   \ \_______\   \ \__/ /      \ \_______\      \ \__\   \ \_______\      \ \__\        \ \_______\   \ \__\    \ \__\   \ \__\ \__\   \ \__\   \ \_______\|\__\   \ \_______\   \ \_______\   \ \__\    \ \__\
    \|__|     \|__|    \|__|\|__|    \|__|\|__|        \|__|    \|__|    \|__| \|__|    \|__| \|__|    \|__|    \|__|\|__|    \|__|    \|_______|    \|_______|    \|__|/        \|_______|       \|__|    \|_______|       \|__|         \|_______|    \|__|     \|__|    \|__|\|__|    \|__|    \|_______|\|__|    \|_______|    \|_______|    \|__|     \|__|
                                                                                                                                                                                                                                                                                                                                                           
 
    Crafted with passion, powered by:
    OS: Debian 11 ❤️
    Server: Nginx ❤️
    Lang: Python 3.11 ❤️
    Web framework: Flask ❤️
    Database: SurrealDB ❤️

    I may not be actively seeking employment, but a compelling idea or intriguing technology could change my perspective.


 -->

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Martin Kirilov - Software | Blog</title>
<meta name="description" content="Martin Kirilov&#39;s blog about his adventures in software development">
<meta charSet="utf-8"/>
<meta name="ROBOTS" content="INDEX, FOLLOW"/>
    <meta content="en_US" property="og:locale" />
    <meta content="" property="og:type" />
    <meta content="Software Development, Blog, Back-End" name="Keywords" />
    <meta content="Martin Kirilov - Software | Blog" property="og:title" />
    <meta content="Martin Kirilov&#39;s blog about his adventures in software development" property="og:description" />
    <meta content="https://martinkirilov.com" property="og:url" />
    <meta content="https://martinkirilov.com/LOGO.PNG" property="og:image" />
    <meta content="https://martinkirilov.com/LOGO.PNG" property="og:image:secure_url" />
    <meta content="image/png" property="og:image:type" />
    <meta content="53" property="og:image:width" />
    <meta content="38" property="og:image:height" />
    <meta content="martinkirilov.com" property="og:image:alt" />
    <meta content="martinkirilov" property="og:site_name" />
    <meta content="summary_large_image" name="twitter:card" />

    <link rel="canonical" href="https://martinkirilov.com" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=10.0"/>
    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.png">

    <!-- STYLESHEETS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all">
    <link rel="stylesheet" href="/css/all.min.css" type="text/css" media="all">
    <link rel="stylesheet" href="/css/simple-line-icons.css" type="text/css" media="all">
    <link rel="stylesheet" href="/css/animate.css" type="text/css" media="all">
    <link rel="stylesheet" href="/css/magnific-popup.css" type="text/css" media="all">
    <link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
</head>

<body class="dark">

    <!-- Preloader -->
    <div id="preloader">
        <div class="outer">
            <!-- Google Chrome -->
            <div class="infinityChrome">
                <div></div>
                <div></div>
                <div></div>
            </div>

            <!-- Safari and others -->
            <div class="infinity">
                <div>
                    <span></span>
                </div>
                <div>
                    <span></span>
                </div>
                <div>
                    <span></span>
                </div>
            </div>
            <!-- Stuff -->
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="goo-outer">
                <defs>
                    <filter id="goo">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
                        <feColorMatrix in="blur" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
                        <feBlend in="SourceGraphic" in2="goo" />
                    </filter>
                </defs>
            </svg>
        </div>
    </div>

    <!-- mobile header -->
    <header class="mobile-header-2">
        <div class="container">
            <!-- menu icon -->
            <div class="menu-icon d-inline-flex me-4">
                <button>
                    <span></span>
                </button>
            </div>
            <!-- logo image -->
            <!-- <div class="site-logo">
                <a href="index-2-dark.html">
                    <img src="images/logo.svg" alt="Bolby" />
                </a>
            </div> -->
        </div>
    </header>

    <!-- desktop header -->
    <header class="desktop-header-2 d-flex align-items-start flex-column">

        <!-- logo image -->
        <div class="site-logo">

            <a href="/">
                <!-- <img src="images/logo-b-light.svg" alt="Bolby" /> -->
                <span>M</span>
                <span>K</span>
            </a>
        </div>

        <!-- main menu -->
        <nav>
            <ul class="vertical-menu scrollspy">
                <li class="active"><a href="/#home"><i class="icon-home"></i></a></li>
                <li><a href="/#about"><i class="icon-user-following"></i></a></li>
                <!-- <li><a href="/#services"><i class="icon-briefcase"></i></a></li> -->
                <!-- <li><a href="#experience"><i class="icon-graduation"></i></a></li> -->
                <!-- <li><a href="/#works"><i class="icon-layers"></i></a></li> -->
                <li><a href="/#blog"><i class="icon-note"></i></a></li>
                <li><a href="/#contact"><i class="icon-bubbles"></i></a></li>
            </ul>
        </nav>

        <!-- site footer -->
        <div class="footer">
            <!-- copyright text -->
            <span class="copyright">© 2022 Martin Kirilov.</span>
        </div>

    </header>


    <!-- main layout -->
    <main class="content-2">
        <div id="particle_animation"></div>

        <!-- section home -->
        <section id="home" class="home d-flex align-items-center">
            <div class="container">

                <!-- intro -->
                <div class="intro">
                    <!-- avatar image -->
                    <img src="/images/avatar-1.svg" alt="Martin" class="mb-4" />

                    <!-- info -->
                    <h1 class="mb-2 mt-0">Martin Kirilov</h1>
                    <span>I'm <span class="text-rotating">Software developer, Back-End developer, Gamer</span></span>

                    <!-- social icons -->
                    <!-- <ul class="social-icons light list-inline mb-0 mt-4">
                        <li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-behance"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-dribbble"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
                    </ul> -->

                    <!-- buttons -->
                    <div class="mt-4">
                        <a href="#contact" class="btn btn-default">Currently not for hiring</a>
                    </div>
                </div>

                <!-- scroll down mouse wheel -->
                <div class="scroll-down">
                    <a href="#about" class="mouse-wrapper">
                        <!-- <span>Scroll Down</span> -->
                        <span class="mouse">
                            <span class="wheel"></span>
                        </span>
                    </a>
                </div>

                <!-- parallax layers -->
                <div class="parallax" data-relative-input="true">

                    <svg width="27" height="29" data-depth="0.3" class="layer p1" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M21.15625.60099c4.37954 3.67487 6.46544 9.40612 5.47254 15.03526-.9929 5.62915-4.91339 10.30141-10.2846 12.25672-5.37122 1.9553-11.3776.89631-15.75715-2.77856l2.05692-2.45134c3.50315 2.93948 8.3087 3.78663 12.60572 2.22284 4.297-1.5638 7.43381-5.30209 8.22768-9.80537.79387-4.50328-.8749-9.08872-4.37803-12.02821L21.15625.60099z"
                            fill="#FFD15C" fill-rule="evenodd" />
                    </svg>

                    <svg width="26" height="26" data-depth="0.2" class="layer p2" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13 3.3541L2.42705 24.5h21.1459L13 3.3541z" stroke="#FF4C60" stroke-width="3"
                            fill="none" fill-rule="evenodd" />
                    </svg>

                    <svg width="30" height="25" data-depth="0.3" class="layer p3" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M.1436 8.9282C3.00213 3.97706 8.2841.92763 14.00013.92796c5.71605.00032 10.9981 3.04992 13.85641 8 2.8583 4.95007 2.8584 11.0491-.00014 16.00024l-2.77128-1.6c2.28651-3.96036 2.28631-8.84002.00011-12.8002-2.2862-3.96017-6.5124-6.40017-11.08513-6.4-4.57271.00018-8.79872 2.43984-11.08524 6.4002l-2.77128-1.6z"
                            fill="#44D7B6" fill-rule="evenodd" />
                    </svg>

                    <svg width="15" height="23" data-depth="0.6" class="layer p4" xmlns="http://www.w3.org/2000/svg">
                        <rect transform="rotate(30 9.86603 10.13397)" x="7" width="3" height="25" rx="1.5"
                            fill="#FFD15C" fill-rule="evenodd" />
                    </svg>

                    <svg width="15" height="23" data-depth="0.2" class="layer p5" xmlns="http://www.w3.org/2000/svg">
                        <rect transform="rotate(30 9.86603 10.13397)" x="7" width="3" height="25" rx="1.5"
                            fill="#6C6CE5" fill-rule="evenodd" />
                    </svg>

                    <svg width="49" height="17" data-depth="0.5" class="layer p6" xmlns="http://www.w3.org/2000/svg">
                        <g fill="#FF4C60" fill-rule="evenodd">
                            <path
                                d="M.5 16.5c0-5.71709 2.3825-10.99895 6.25-13.8567 3.8675-2.85774 8.6325-2.85774 12.5 0C23.1175 5.50106 25.5 10.78292 25.5 16.5H23c0-4.57303-1.90625-8.79884-5-11.08535-3.09375-2.28652-6.90625-2.28652-10 0C4.90625 7.70116 3 11.92697 3 16.5H.5z" />
                            <path
                                d="M23.5 16.5c0-5.71709 2.3825-10.99895 6.25-13.8567 3.8675-2.85774 8.6325-2.85774 12.5 0C46.1175 5.50106 48.5 10.78292 48.5 16.5H46c0-4.57303-1.90625-8.79884-5-11.08535-3.09375-2.28652-6.90625-2.28652-10 0-3.09375 2.28651-5 6.51232-5 11.08535h-2.5z" />
                        </g>
                    </svg>

                    <svg width="26" height="26" data-depth="0.4" class="layer p7" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13 22.6459L2.42705 1.5h21.1459L13 22.6459z" stroke="#FFD15C" stroke-width="3"
                            fill="none" fill-rule="evenodd" />
                    </svg>

                    <svg width="19" height="21" data-depth="0.3" class="layer p8" xmlns="http://www.w3.org/2000/svg">
                        <rect transform="rotate(-40 6.25252 10.12626)" x="7" width="3" height="25" rx="1.5"
                            fill="#6C6CE5" fill-rule="evenodd" />
                    </svg>

                    <svg width="30" height="25" data-depth="0.3" data-depth-y="-1.30" class="layer p9"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M29.8564 16.0718c-2.85854 4.95114-8.1405 8.00057-13.85654 8.00024-5.71605-.00032-10.9981-3.04992-13.85641-8-2.8583-4.95007-2.8584-11.0491.00014-16.00024l2.77128 1.6c-2.28651 3.96036-2.28631 8.84002-.00011 12.8002 2.2862 3.96017 6.5124 6.40017 11.08513 6.4 4.57271-.00018 8.79872-2.43984 11.08524-6.4002l2.77128 1.6z"
                            fill="#6C6CE5" fill-rule="evenodd" />
                    </svg>

                    <svg width="47" height="29" data-depth="0.2" class="layer p10" xmlns="http://www.w3.org/2000/svg">
                        <g fill="#44D7B6" fill-rule="evenodd">
                            <path
                                d="M46.78878 17.19094c-1.95535 5.3723-6.00068 9.52077-10.61234 10.8834-4.61167 1.36265-9.0893-.26708-11.74616-4.27524-2.65686-4.00817-3.08917-9.78636-1.13381-15.15866l2.34923.85505c-1.56407 4.29724-1.2181 8.92018.90705 12.12693 2.12514 3.20674 5.70772 4.5107 9.39692 3.4202 3.68921-1.0905 6.92581-4.40949 8.48988-8.70673l2.34923.85505z" />
                            <path
                                d="M25.17585 9.32448c-1.95535 5.3723-6.00068 9.52077-10.61234 10.8834-4.61167 1.36264-9.0893-.26708-11.74616-4.27525C.16049 11.92447-.27182 6.14628 1.68354.77398l2.34923.85505c-1.56407 4.29724-1.2181 8.92018.90705 12.12692 2.12514 3.20675 5.70772 4.5107 9.39692 3.4202 3.68921-1.0905 6.92581-4.40948 8.48988-8.70672l2.34923.85505z" />
                        </g>
                    </svg>

                    <svg width="33" height="20" data-depth="0.5" class="layer p11" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M32.36774.34317c.99276 5.63023-1.09332 11.3614-5.47227 15.03536-4.37895 3.67396-10.3855 4.73307-15.75693 2.77837C5.76711 16.2022 1.84665 11.53014.8539 5.8999l3.15139-.55567c.7941 4.50356 3.93083 8.24147 8.22772 9.8056 4.29688 1.56413 9.10275.71673 12.60554-2.2227C28.34133 9.98771 30.01045 5.4024 29.21635.89884l3.15139-.55567z"
                            fill="#FFD15C" fill-rule="evenodd" />
                    </svg>

                </div>
            </div>

        </section>

        <!-- section about -->
        <section id="about">
            <div class="container">
                <!-- section title -->
                <h2 class="section-title wow fadeInUp">About Me</h2>

                <div class="spacer" data-height="60"></div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center text-md-left">
                            <!-- avatar image -->
                            <img src="/images/avatar-2.svg" alt="Martin" />
                        </div>
                        <div class="spacer d-md-none d-lg-none" data-height="30"></div>
                    </div>

                    <div class="col-md-9 triangle-left-md triangle-top-sm">
                        <div class="rounded bg-dark shadow-dark padding-30">
                            <div class="row">
                                <div class="col-md-12">
                                    <!-- about text -->
                                    <p>
                                        Hello, world! My name is Martin. After spending nearly a decade in the software industry, I’ve finally created my own website purely for enjoyment. Here, I’ll be sharing my insights on coding and other related topics. My approach is straightforward because, while writing blog posts may not be my favorite activity, I never get tired of exploring new concepts and sharing them with you. If you have any questions or spot any errors, please don’t hesitate to contact me! 
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- row end -->

                <div class="spacer" data-height="70"></div>

                <div class="row">

                    <div class="col-md-3 col-sm-6">
                        <!-- fact item -->
                        <div class="fact-item">
                            <span class="icon icon-fire"></span>
                            <div class="details">
                                <h3 class="mb-0 mt-0 number"><em class="count">300</em>+</h3>
                                <p class="mb-0">Projects completed</p>
                            </div>
                        </div>
                        <div class="spacer d-md-none d-lg-none" data-height="30"></div>
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <!-- fact item -->
                        <div class="fact-item">
                            <span class="icon icon-cup"></span>
                            <div class="details">
                                <h3 class="mb-0 mt-0 number"><em class="count">27,375</em></h3>
                                <p class="mb-0">Cup of water</p>
                            </div>
                        </div>
                        <div class="spacer d-md-none d-lg-none" data-height="30"></div>
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <!-- fact item -->
                        <div class="fact-item">
                            <span class="icon icon-people"></span>
                            <div class="details">
                                <h3 class="mb-0 mt-0 number"><em class="count">230</em></h3>
                                <p class="mb-0">Satisfied clients</p>
                            </div>
                        </div>
                        <div class="spacer d-md-none d-lg-none" data-height="30"></div>
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <!-- fact item -->
                        <div class="fact-item">
                            <span class="icon icon-badge"></span>
                            <div class="details">
                                <h3 class="mb-0 mt-0 number"><em class="count">54,750</em></h3>
                                <p class="mb-0">Hours spend infort of a computer</p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </section>


        <!-- section works -->
        <section id="blog">

            <div class="container">

                <!-- section title -->
                <h2 class="section-title wow fadeInUp">Recent Discoveries</h2>

                <div class="spacer" data-height="60"></div>

                <!-- portfolio filter (desktop) -->
                <ul class="portfolio-filter list-inline wow fadeInUp">

                    
                    <li class="list-inline-item" data-filter=".blog_categoriescpg72rgwyyb5haytozuv">
                        Linux
                    </li>
                    
                    <li class="list-inline-item" data-filter=".blog_categoriesn6wh315hgyw0wwlzuvl0">
                        Coding
                    </li>
                    
                    <li class="list-inline-item" data-filter=".blog_categoriest9b279uebc0q1k0hdpi3">
                        Databases
                    </li>
                    
                 
                </ul>

                <!-- portfolio filter (mobile) -->
                <div class="pf-filter-wrapper">
                    <select class="portfolio-filter-mobile">
                        
                        <option value=".blog_categoriescpg72rgwyyb5haytozuv">
                            Linux
                        </option>
                        
                        <option value=".blog_categoriesn6wh315hgyw0wwlzuvl0">
                            Coding
                        </option>
                        
                        <option value=".blog_categoriest9b279uebc0q1k0hdpi3">
                            Databases
                        </option>
                        
                    </select>
                </div>

                <!-- portolio wrapper -->
                <div class="row portfolio-wrapper">
                    
                    <div class="col-md-4 col-sm-6 grid-item blog_categoriesn6wh315hgyw0wwlzuvl0">
                        <!-- <a href="#blog_postsp11ap0gdbs21bvjvtixg" class="work-content"> -->
                        <a href="/blog/coding/how-to-create-a-simple-web-server-with-python-using-pre-existing-libraries">
                            <div class="portfolio-item rounded shadow-dark">
                                <div class="details">
                                    <span class="term">Coding</span>
                                    <h4 class="title">How to Create a Simple Web Server with Python using pre existing libraries</h4>
                                    <span class="more-button"><i class="icon-options"></i></span>
                                </div>
                                <div class="thumb">
                                    <img src="/data/images/blog/2024-03-25_13_47_20_242766_web-server-with-python.jpg" alt="How to Create a Simple Web Server with Python using pre existing libraries" />
                                    <div class="mask"></div>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                    <div class="col-md-4 col-sm-6 grid-item blog_categoriescpg72rgwyyb5haytozuv">
                        <!-- <a href="#blog_postsblg50nasj41f5caoir26" class="work-content"> -->
                        <a href="/blog/linux/high-speed-file-system-in-the-browser-filebrowser-and-nignx-and-raspberry-pi-5">
                            <div class="portfolio-item rounded shadow-dark">
                                <div class="details">
                                    <span class="term">Linux</span>
                                    <h4 class="title">High speed file system in the browser FileBrowser + Nignx + raspberry pi 5</h4>
                                    <span class="more-button"><i class="icon-options"></i></span>
                                </div>
                                <div class="thumb">
                                    <img src="/data/images/blog/2024-03-19_21_01_41_918308_2024-03-17_16_15_30_063434_2024-02-21_14_02_57_050747_filebrowser.jpg" alt="High speed file system in the browser FileBrowser + Nignx + raspberry pi 5" />
                                    <div class="mask"></div>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                    <div class="col-md-4 col-sm-6 grid-item blog_categoriest9b279uebc0q1k0hdpi3">
                        <!-- <a href="#blog_posts3ngkgr8079iyza1ebyww" class="work-content"> -->
                        <a href="/blog/databases/my-experience-with-surrealdb">
                            <div class="portfolio-item rounded shadow-dark">
                                <div class="details">
                                    <span class="term">Databases</span>
                                    <h4 class="title">My experience with SurrealDB</h4>
                                    <span class="more-button"><i class="icon-options"></i></span>
                                </div>
                                <div class="thumb">
                                    <img src="/data/images/blog/2024-03-19_21_00_13_109945_surrealdb.jpg" alt="My experience with SurrealDB" />
                                    <div class="mask"></div>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                </div>

                <!-- more button -->
                <div class="text-center mt-4">
                    <a href="/blog" class="btn btn-default"><i class="fas fa-spinner"></i> View more</a>
                </div>

            </div>

        </section>


        <!-- section contact -->
        <section id="contact">
            <div class="success">
                <p>Message has been sent successfully</p>
            </div>
            <div class="container">

                <!-- section title -->
                <h2 class="section-title wow fadeInUp">Get In Touch</h2>

                <div class="spacer" data-height="60"></div>

                <div class="row">

                    <div class="col-md-4">
                        <!-- contact info -->
                        <div class="contact-info">
                            <!-- <h3 class="wow fadeInUp">Feel free to send me your offer!</h3> -->
                        </div>
                    </div>

                    <div class="col-md-8">
                        <!-- Contact Form -->
                        <div id="contact-form" class="contact-form mt-6">

                            <div class="messages"></div>

                            <div class="row">
                                <div class="column col-md-6">
                                    <!-- Name input -->
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="InputName" id="InputName"
                                            placeholder="Your name" required="required" data-error="Name is required.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="column col-md-6">
                                    <!-- Email input -->
                                    <div class="form-group">
                                        <input type="email" class="form-control" id="InputEmail" name="InputEmail"
                                            placeholder="Email address" required="required"
                                            data-error="Email is required.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="column col-md-12">
                                    <!-- Email input -->
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="InputSubject" name="InputSubject"
                                            placeholder="Subject" required="required" data-error="Subject is required.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="column col-md-12">
                                    <!-- Message textarea -->
                                    <div class="form-group">
                                        <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5"
                                            placeholder="Message" required="required"
                                            data-error="Message is required."></textarea>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>


                            <button id="submit" class="btn btn-default" class="g-recaptcha"
                                data-sitekey="6LfgwWYiAAAAAMi1LKtnoNN5OylRgnFK54-fAckU" data-callback='onSubmit'
                                data-action='submit'>Send
                                Message</button><!-- Send Button -->

                            </form>
                            <!-- Contact Form end -->
                        </div>

                    </div>

                </div>

        </section>

        <div class="spacer" data-height="96"></div>

    </main>

    
    <!-- Go to top button -->
    <a href="javascript:" id="return-to-top"><i class="fas fa-arrow-up"></i></a>

    <!-- SCRIPTS -->
    <script src="/js/jquery-1.12.3.min.js"></script>
    <script src="/js/jquery.easing.min.js"></script>
    <script src="/js/jquery.waypoints.min.js"></script>
    <script src="/js/jquery.counterup.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/isotope.pkgd.min.js"></script>
    <script src="/js/infinite-scroll.min.js"></script>
    <script src="/js/imagesloaded.pkgd.min.js"></script>
    <script src="/js/wow.min.js"></script>
    <script src="/js/morphext.min.js"></script>
    <script src="/js/parallax.min.js"></script>
    <script src="/js/jquery.magnific-popup.min.js"></script>
    <script src="/js/custom.js"></script>

    <script>
        var option_hero_background_spiral_line_color = "#ff4c60",
            option_hero_background_spiral_fill_color = "#212121",
            option_hero_background_spiral_bg_color = "#212121",
            option_hero_background_spiral_scene_opacity = 0.2,
            option_hero_background_spiral_speed = 100,
            option_hero_background_spiral_x_offset = "0%";
        function spiralBackground() {
            var e = document.getElementById("particle_animation").appendChild(document.createElement("canvas")),
                o = e.getContext("2d"),
                t = window.innerWidth,
                i = window.innerHeight,
                n = 1 * Math.min(window.innerWidth, window.innerHeight),
                radius = n > 300 ? 250 : 1,
                a = [],
                s = 0.3 * n,
                c_SKATA = Math.round(0.1 * radius);
            function d() {
                (t = window.innerWidth), (i = window.innerHeight), (e.width = t), (e.height = i), (n = 1 * Math.min(window.innerWidth, window.innerHeight)), (s = 0.3 * n), (c_SKATA = Math.round(0.1 * radius)), (a = []);
                for (var o = 0; o < radius; o++) a.push({ x: window.innerWidth / 2 + Math.sin((o / radius) * 2 * Math.PI) * (n - s), y: window.innerHeight / 0.9 + Math.cos((o / radius) * 2 * Math.PI) * (n - s), r: (o / radius) * Math.PI });
            }
            function l() {
                requestAnimationFrame(l),
                    (function () {
                        for (var e = 0, o = a.length; e < o; e++) a[e].r += option_hero_background_spiral_speed;
                    })(),
                    o.clearRect(0, 0, e.width, e.height),
                    (function () {
                        for (var e = a.length, t = e - c_SKATA, i = e; t < i; t++) o.save(), (o.globalCompositeOperation = "destination-over"), p(a[t]), o.restore();
                        o.save(), (o.globalCompositeOperation = "destination-in"), p(a[0], !0), o.restore();
                        for (var t = 0, i = e; t < i; t++) o.save(), (o.globalCompositeOperation = "destination-over"), p(a[t]), o.restore();
                    })();
            }
            function p(e, t) {
                (size = s + (t ? 10 : 0)),
                    (size2 = size / 2),
                    o.translate(e.x, e.y),
                    o.rotate(e.r),
                    t || ((o.strokeStyle = option_hero_background_spiral_line_color), (o.lineWidth = 1), o.strokeRect(-size2, -size2, size, size)),
                    (o.fillStyle = option_hero_background_spiral_fill_color),
                    o.fillRect(-size2, -size2, size, size);
            }
            e.setAttribute("id", "canvas-spiral"),
                $("#canvas-spiral").css("opacity", option_hero_background_spiral_scene_opacity),
                $("#canvas-spiral").css("transform", "rotate(180deg)"),
                $("body").append('<div class="bg-color" style="background-color:' + option_hero_background_spiral_bg_color + '"></div>'),
                window.addEventListener("resize", d),
                (function () {
                    for (var e = 0, o = ["ms", "moz", "webkit", "o"], t = 0; t < o.length && !window.requestAnimationFrame; ++t)
                        (window.requestAnimationFrame = window[o[t] + "RequestAnimationFrame"]), (window.cancelAnimationFrame = window[o[t] + "CancelAnimationFrame"] || window[o[t] + "CancelRequestAnimationFrame"]);
                    window.requestAnimationFrame ||
                        (window.requestAnimationFrame = function (o, t) {
                            var i = new Date().getTime(),
                                n = Math.max(0, 16 - (i - e)),
                                r = window.setTimeout(function () {
                                    o(i + n);
                                }, n);
                            return (e = i + n), r;
                        }),
                        window.cancelAnimationFrame ||
                        (window.cancelAnimationFrame = function (e) {
                            clearTimeout(e);
                        });
                })(),
                d(),
                l();
        }
        // spiralBackground();
    </script>

</body>

</html>