index.html

<!DOCTYPE html>
<html lang="it-IT">
<head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-M37236S');</script>
    <!-- End Google Tag Manager -->

    <title>SBDeveloper90 | Portfolio Developers</title>
    <!-- Meta -->
    <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="description" content="SBDeveloper90 | Portfolio Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">    
    <link rel="shortcut icon" href="theme-default-assets/img/octocat.png" type="image/x-icon">
    
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> 
    
    <!-- FontAwesome JS -->
    <script defer src="theme-developer-assets/fontawesome/js/all.js"></script>
    
    <!-- Global CSS -->
    <link rel="stylesheet" href="theme-developer-assets/plugins/bootstrap/css/bootstrap.min.css">  
    
    <!-- github calendar css -->
    <link rel="stylesheet" href="theme-developer-assets/plugins/github-calendar/dist/github-calendar-responsive.css">

    <!-- Theme CSS -->  
    <link id="theme-style" rel="stylesheet" href="theme-developer-assets/css/styles.css">

    <link rel="stylesheet" href="theme-default-assets/css/style.css">
    
    <!-- iubenda Banner -->
    <script type="text/javascript">
	var _iub = _iub || [];
	_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":3032352,"whitelabel":false,"cookiePolicyId":37726910,"lang":"it","cookiePolicyUrl":"https://www.iubenda.com/privacy-policy/37726910", "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center" }};
    </script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
</head> 

<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M37236S"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    <!--  HEADER  --> 
    <header class="header">
        <div class="container">     
	        <div class="row align-items-center">
			    <div class="col">         
		            <img class="profile-image img-fluid float-start rounded-circle" src="theme-default-assets/img/Sebastiano-uai.jpg" alt="profile image" width="180" height="180"/>
		            <div class="profile-content">
		                <h1 class="name">Sebastiano Bruni</h1>
		                <h2 class="desc">Web Developer & Computer Programmer</h2>   
		                <ul class="social list-inline">
		                    <li class="list-inline-item"><a href="https://www.facebook.com/sebastiano.bruni/" target="_blank"><i class="fab fa-facebook"></i></a></li>
		                    <li class="list-inline-item"><a href="https://www.instagram.com/seby90oreo/" target="_blank"><i class="fab fa-instagram"></i></a></li>
                            <li class="list-inline-item"><a href="https://www.linkedin.com/in/sebastiano-bruni-b1a90b175/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
		                    <li class="list-inline-item"><a href="https://github.com/sbdeveloper90/" target="_blank"><i class="fab fa-github"></i></a></li>
		                </ul> 
		            </div><!--profile-->
			    </div><!--col-->
	            <div class="col-12 col-md-auto">
		            <div class="dark-mode-switch d-flex">
						<div class="form-check form-switch mx-auto mx-md-0">
							<input type="checkbox" class="form-check-input me-2" id="darkSwitch" />
							<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
						</div>
			        </div><!--dark-mode-switch-->
	                <a class="btn btn-cta-primary" href="mailto:info@sbdeveloper.cloud"><i class="fas fa-paper-plane"></i> Contact Me</a>        
	            </div><!--col-->
	        </div><!--row-->         
        </div><!--container-->
    </header><!--header-->
    
    <div class="container sections-wrapper py-5">
        <div class="row">
            <div class="primary col-lg-8 col-12">
                <section class="about section">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading">About Me</h2>
                        <div class="content">
                            <p>I am Sebastiano, born in Urbino in 1990. I graduated from the G. Marconi Scientific High School in Pesaro, P.N.I. (National Informatics Plan) course; and later I graduated in Computer Science and Technology at the Faculty of Physical and Natural Mathematical Sciences of the University of Bologna, Cesena campus.<br>I am passionate about music and as an instrument I play the guitar.</p>
                        </div><!--content-->
                    </div><!--section-inner-->                 
                </section><!--section-->
    
               <section class="latest section my-projects">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading">My Projects</h2>
                        <div class="content">                      
                            <div class="item featured text-center">
                                <div class="featured-image has-ribbon">
                                    <a href="https://www.sbdeveloper.cloud/" target="_blank">
                                    <img class="img-fluid project-image rounded shadow-sm" src="theme-default-assets\img\cover-sbdeveloper.png" alt="project name" />
                                    </a>
                                    <div class="ribbon">
                                        <div class="text">my site</div>
                                    </div>
                                </div>
                                
                                <h3 class="title mb-3"><a href="https://www.sbdeveloper.cloud/" target="_blank">SB-DEVELOPER | WEB & MUSIC</a></h3>
                                    
                                <div class="desc text-start">                                    
                                    <p>This is my website, completely in HTML, Css Javascript; used as main project and as testing environment for other projects. The site is a continuous work in progress and constantly updated.</p>
                                </div><!--desc-->         
                                <a class="btn btn-cta-secondary" href="https://www.sbdeveloper.cloud/" target="_blank"><i class="fas fa-thumbs-up"></i> Visit Website</a>                 
                            </div><!--item-->

                            <hr class="divider" />

                            <div class="item row">
                                <a class="col-md-4 col-12" href="https://www.sbdeveloper.cloud/LiveEditor/" target="_blank">
                                <img class="img-fluid project-image rounded shadow-sm" src="theme-default-assets\img\cover-live-editor.png" alt="project name" />
                                </a>
                                <div class="desc col-md-8 col-12">
                                    <h3 class="title"><a href="https://www.sbdeveloper.cloud/LiveEditor/" target="_blank">LiveEditor (sbdeveloper.cloud) - Live editor for HTML, CSS and Javascript</a></h3>
                                    <p class="mb-2"><b>LiveEditor</b> is a simple tool, like a rudimental CodePen, for live code editing for HTML, CSS and Javascript. It also has the functionality to save all written code in a single html file.</p>
                                    <p><a class="more-link" href="https://www.sbdeveloper.cloud/LiveEditor/" target="_blank"><i class="fas fa-external-link-alt"></i>Find out more</a></p>
                                </div><!--desc-->                          
                            </div><!--item-->
                            
                            <div class="item row">
                                <a class="col-md-4 col-12" href="https://www.sbdeveloper.cloud/GuitarTools/" target="_blank">
                                <img class="img-fluid project-image rounded shadow-sm" src="theme-default-assets\img\cover-guitar-tools.png" alt="project name" />
                                </a>
                                <div class="desc col-md-8 col-12">
                                    <h3 class="title"><a href="https://www.sbdeveloper.cloud/GuitarTools/" target="_blank">GuitarTools (sbdeveloper.cloud) - Tools for music theory and guitar playing</a></h3>
                                    <p class="mb-2"><b>GuitarTools</b> is a useful tool for guitarists and musicians in general, that helps create chords and scales; and contains generic musical notions.</p>
                                    <p><a class="more-link" href="https://www.sbdeveloper.cloud/GuitarTools/" target="_blank"><i class="fas fa-external-link-alt"></i>Find out more</a></p>
                                </div><!--desc-->                          
                            </div><!--item-->                    
                        </div><!--content-->
                    </div><!--section-inner-->
                </section><!--section-->
                
                <section class="projects section my-docs">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading">Helping Docs <span class="badge badge-theme">GitBook</span></h2>
                        <div class="content">
                            <p>Simple documentation and tips for daily programming.</p>
                            <a class="btn btn-cta-secondary" href="https://sbdevs-organization.gitbook.io/sbdev-docs/" target="_blank">More on SBDev Docs <i class="fas fa-chevron-right pt-1"></i></a>
                        </div><!--content-->
                    </div><!--section-inner-->
                </section><!--section-->
                
                <section class="experience section">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading">Work Experience</h2>
                        <div class="content">
                            <div class="item">
                                <h3 class="title">Web Developer - <span class="place"><a href="#">Parabolika Srl</a></span> <span class="year">(2019 - Present)</span></h3>
                                <p>Web development and telematics archive management at design studio.</p>
                            </div><!--item-->
                            <div class="item">
                                <h3 class="title">Computer Technician - <span class="place"><a href="#">Vobis, Mono Informatica</a></span> <span class="year">(2017 - 2018)</span></h3>
                                <p>Computer technician and repairs in electronics store.</p>
                            </div><!--item-->
                            
                            <div class="item">
                                <h3 class="title">Computer Lab Technician - <span class="place"><a href="#">Liceo Scientifico G. Marconi</a></span> <span class="year">(2015)</span></h3>
                                <p>Technician and computer laboratory assistant at the G. Marconi High School, in Pesaro.</p>
                            </div><!--item-->
                            
                        </div><!--content-->  
                    </div><!--section-inner-->                 
                </section><!--section-->
                <section class="github section">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading">My GitHub</h2>
                        <i><p>Thanks to IonicaBizau's GitHub Calendar <a href="https://github.com/IonicaBizau/github-calendar" target="_blank">GitHub Calendar</a> widget that helps embed my GitHub contribution graph calendar.</p></i>
                        
                        <div id="github-graph" class="github-graph">

                        </div><!--github-graph-->
                        
                    </div><!--secton-inner-->
                </section><!--section-->
            </div><!--primary-->
            <div class="secondary col-lg-4 col-12">
                 <aside class="info aside section">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading sr-only">Basic Information</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li><i class="fas fa-map-marker-alt"></i><span class="sr-only">Location:</span>Pesaro, IT</li>
                                <li><i class="fas fa-envelope"></i><span class="sr-only">Email:</span><a href="mailto:info@sbdeveloper.cloud">info@sbdeveloper.cloud</a></li>
                                <li><i class="fas fa-link"></i><span class="sr-only">Website:</span><a href="https://www.sbdeveloper.cloud" target="_blank">sbdeveloper.cloud</a></li>
                            </ul>
                        </div><!--content-->  
                    </div><!--section-inner-->                 
                </aside><!--aside-->
                
                <aside class="skills aside section">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading">Skills</h2>
                        <div class="content">
                            <div class="skillset">

                                <div class="item">
                                    <h3 class="level-title">HTML5 &amp; CSS3<span class="level-label" data-bs-toggle="tooltip" data-bs-placement="top" title="80 on a scale from 0 to 100"><i class="fas fa-info-circle"></i>Advanced</span></h3>
                                    <div class="level-bar progress">
									    <div class="progress-bar level-bar-inner" role="progressbar" style="width: 80%" aria-valuenow="80"  aria-valuemin="0" aria-valuemax="100"></div>
									</div><!--level-bar-->                                  
                                </div><!--item-->
                                
                                <div class="item">
                                    <h3 class="level-title">Javascript &amp; jQuery<span class="level-label" data-bs-toggle="tooltip" data-bs-placement="top" title="80 on a scale from 0 to 100"><i class="fas fa-info-circle"></i>Advanced</span></h3>
                                    <div class="level-bar progress">
									    <div class="progress-bar level-bar-inner" role="progressbar" style="width: 80%" aria-valuenow="80"  aria-valuemin="0" aria-valuemax="100"></div>
									</div><!--level-bar-->                                   
                                </div><!--item-->
                                
                                <div class="item">
                                    <h3 class="level-title">PHP<span class="level-label" data-bs-toggle="tooltip" data-placement="top" title="80 on a scale from 0 to 100"><i class="fas fa-info-circle"></i>Advanced</span></h3>
                                    <div class="level-bar progress">
									    <div class="progress-bar level-bar-inner" role="progressbar" style="width: 80%" aria-valuenow="80"  aria-valuemin="0" aria-valuemax="100"></div>
									</div><!--level-bar-->                                  
                                </div><!--item-->

                                <div class="item">
                                    <h3 class="level-title">C &amp; C#<span class="level-label" data-bs-toggle="tooltip" data-placement="top" title="80 on a scale from 0 to 100"><i class="fas fa-info-circle"></i>Advanced</span></h3>
                                    <div class="level-bar progress">
									    <div class="progress-bar level-bar-inner" role="progressbar" style="width: 80%" aria-valuenow="80"  aria-valuemin="0" aria-valuemax="100"></div>
									</div><!--level-bar-->                                  
                                </div><!--item-->

                                <div class="item">
                                    <h3 class="level-title">Python<span class="level-label" data-bs-toggle="tooltip" data-placement="top" title="60 on a scale from 0 to 100"><i class="fas fa-info-circle"></i>Intermediate</span></h3>
                                    <div class="level-bar progress">
									    <div class="progress-bar level-bar-inner" role="progressbar" style="width: 60%" aria-valuenow="60"  aria-valuemin="0" aria-valuemax="100"></div>
									</div><!--level-bar-->                                  
                                </div><!--item-->

                                <div class="item">
                                    <h3 class="level-title">Bash<span class="level-label" data-bs-toggle="tooltip" data-placement="top" title="60 on a scale from 0 to 100"><i class="fas fa-info-circle"></i>Intermediate</span></h3>
                                    <div class="level-bar progress">
									    <div class="progress-bar level-bar-inner" role="progressbar" style="width: 60%" aria-valuenow="60"  aria-valuemin="0" aria-valuemax="100"></div>
									</div><!--level-bar-->                                  
                                </div><!--item-->
                            </div>              
                        </div><!--content-->  
                    </div><!--section-inner-->                 
                </aside><!--section-->
                
                <aside class="education aside section">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading">Education</h2>
                        <div class="content">
                            <div class="item">                      
                                <h3 class="title"><i class="fas fa-graduation-cap"></i> Computer Science Degree</h3>
                                <h4 class="university">Alma Mater Studiorum - Università di Bologna, Campus di Cesena <span class="year">(2009-2016)</span></h4>
                            </div><!--item-->
                            <div class="item">
                                <h3 class="title"><i class="fas fa-graduation-cap"></i> High School Graduation</h3>
                                <h4 class="university">Liceo Scientifico G. Marconi, Pesaro <span class="year">(2004-2009)</span></h4>
                            </div><!--item-->
                        </div><!--content-->
                    </div><!--section-inner-->
                </aside><!--section-->
                            
                <aside class="languages aside section">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading">Languages</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"><strong>Italian:</strong></span>
                                    <span class="level">Native Speaker <br class="visible-xs"/><i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </span>
                                </li><!--item-->
                                <li class="item">
                                    <span class="title"><strong>English:</strong></span>
                                    <span class="level">Professional Proficiency <br class="visible-sm visible-xs"/><i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></span>
                                </li><!--item-->
                                <li class="item">
                                    <span class="title"><strong>French:</strong></span>
                                    <span class="level">Elementary Proficiency <br class="visible-sm visible-xs"/><i class="fas fa-star"></i></span>
                                </li><!--item-->
                            </ul>
                        </div><!--content-->
                    </div><!--section-inner-->
                </aside><!--section-->
                
                <aside class="blog aside section">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading">Latest <span style="color:#2888be;">PuntoInformatico</span> Posts</h2>
                        <i><p>Thanks to Sascha Depold's <a href="https://github.com/sdepold/jquery-rss" target="_blank">Vanilla RSS plugin</a> that helps render blog post feeds.</p></i>
                        <div id="rss-feeds" class="content"></div><!--content-->
                    </div><!--section-inner-->
                </aside><!--section-->
                
                <aside class="credits aside section">
                    <div class="section-inner shadow-sm rounded">
                        <h2 class="heading">Credits</h2>
                        <div class="content">
                            <ul class="list-unstyled pb-2">
                                <li><a href="https://getbootstrap.com/" target="_blank"><i class="fas fa-external-link-alt"></i>Bootstrap</a></li>
                                <li><a href="https://fortawesome.github.io/Font-Awesome/" target="_blank"><i class="fas fa-external-link-alt"></i>FontAwesome</a></li>
                                <li><a href="https://github.com/IonicaBizau/github-calendar" target="_blank"><i class="fas fa-external-link-alt"></i>GitHub Calendar Plugin</a></li>
                                <li><a href="https://github.com/sdepold/vanilla-rss" target="_blank"><i class="fas fa-external-link-alt"></i>Vanilla RSS</a></li>
                                <li><a href="https://github.com/coliff/dark-mode-switch" target="_blank"><i class="fas fa-external-link-alt"></i>Dark Mode Switch</a></li>
                                <li><a href="https://codepen.io/" target="_blank"><i class="fas fa-external-link-alt"></i>CodePen</a></li>
                                <li><a href="https://punto-informatico.it/" target="_blank"><i class="fas fa-external-link-alt"></i>Punto Informatico</a></li>
                            </ul>
                            
                            <hr/>
                            
                            <p class="pt-2">This Boootstrap portfolio template is handcrafted by UX designer <a href="https://twitter.com/3rdwave_themes" target="_blank">Xiaoying Riley</a> at <a href="https://themes.3rdwavemedia.com/" target="_blank">3rd Wave Media</a> for developers and is <strong>FREE</strong> as long as you keep the footer attribution link.</p>
                            <p>If you’d like to <strong>use this template without the attribution link</strong>, you can <a href="https://themes.3rdwavemedia.com/bootstrap-templates/resume/free-bootstrap-portfolio-theme-for-web-developers/" target="_blank">buy the commercial license</a>.</p>
                             
                            <a class="btn btn-cta-primary btn-download" href="https://themes.3rdwavemedia.com/bootstrap-templates/resume/free-bootstrap-portfolio-theme-for-web-developers/" target="_blank"><i class="fas fa-download"></i> I want to download</a>
                            
                        </div><!--content-->
                    </div><!--section-inner-->
                </aside><!--section-->
              
            </div><!--secondary-->    
        </div><!--row-->
    </div><!--masonry-->
    
    <!--  FOOTER  --> 
    <footer class="footer">
        <div class="container text-center">
            <div class="copyright">&copy; Copyright <span id="year"></span><script>document.getElementById("year").innerHTML = new Date().getFullYear();</script>&nbsp;<a href="https://www.sbdeveloper.cloud" target="_blank">SB-Developer</a> | All Rights Reserved |&nbsp;</div>
            <small class="copyright">Designed with <i class="fas fa-heart"></i> by <a href="https://themes.3rdwavemedia.com" target="_blank">Xiaoying Riley</a> for developers</small>

            <a href="https://www.iubenda.com/privacy-policy/37726910" class="iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe " title="Privacy Policy" style="margin-left:11px !important;">Privacy Policy</a><script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script>
        </div><!--container-->
    </footer><!--footer-->
 
    <!-- Javascript -->          
    <script type="text/javascript" src="theme-developer-assets/plugins/popper.min.js"></script> 
    <script type="text/javascript" src="theme-developer-assets/plugins/bootstrap/js/bootstrap.min.js"></script>    
    <script type="text/javascript" src="theme-developer-assets/plugins/vanilla-rss/dist/rss.global.min.js"></script> 
    <script type="text/javascript" src="theme-developer-assets/plugins/dark-mode-switch/dark-mode-switch.min.js"></script> 
    <!-- github calendar plugin -->
    <script type="text/javascript" src="theme-developer-assets/plugins/github-calendar/dist/github-calendar.min.js"></script>
    <!-- custom js -->
    <script type="text/javascript" src="theme-developer-assets/js/main.js"></script>            
</body>
</html> 