index.html

<!DOCTYPE html lang="en">
<html>
  <head>
    <title>Buczynski Maciej - PORTFOLIO</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>

    <div class="main-header">
      <div class="main-header--wrapper">
        <h2 class="main-segment header header--name">
          Maciej Buczyński
        </h2>

        <div class="main-segment circle-image">
          <img src="assets/images/maciej.jpg" class="ui image">
        </div>

        <div class="main-segment">
          Hi, my name is Maciej and I'm a senior software engineer. Welcome to my personal website!
        </div>


        <div class="ui main-segment horizontal list list-icon">
          <div class="item">
            <a href="https://www.facebook.com/profile.php?id=100000245871866"><i class="circular large facebook f icon"></i></a>
          </div>
          <div class="item">
            <a href="https://www.linkedin.com/in/maciej-buczy%C5%84ski-616238153/"><i class="circular large linkedin icon"></i></a>
          </div>
          <div class="item">
            <a href="https://github.com/macmac4"><i class="circular large github icon"></i></a>
          </div>
        </div>

        <div class="ui divider"></div>

        <div class="ui vertical text menu menu--link">
          
          <a class="item active" data-link="#aboutme">
            <i class="large user circle outline icon"></i> About Me
          </a>
          <a class="item" data-link="#whatido">
            <i class="large desktop icon"></i> What I do
          </a>
          <a class="item" data-link="#featuredprojects">
            <i class="large location arrow icon"></i> Featured Projects
          </a>
          <a class="item" data-link="#afterworkinghours">
            <i class="large coffee icon"></i> After working hours
          </a>
        </div>

        <div class="ui divider"></div>

        <div class="ui vertical text menu menu--link contact--section">
          <div class="header item">Contact Me</div>
          <a class="item active" href="mailto:maciasbuczynski@gmail.com">
            <i class="large envelope outline icon"></i> maciasbuczynski@gmail.com
          </a>
          <a class="item active" href="tel:+48692374354">
            <i class="large mobile alternate icon"></i> +48 692 374 354
          </a>
        </div>
      </div>
    </div>

    <div class="main-wrapper">

      <div class="ui fixed inverted main menu top-menu">
        <div class="ui container no-padding no-margin wid100">
          <a class="launch icon item top-menu--button">
            <i class="content icon"></i>
          </a>
          <div class="item">Menu</div>
        </div>
      </div>

      <div class="pusher">
        <div class="ui vertically divided grid" id="aboutme">
          <div class="ui stackable two column row">
            <div class="column">
              <div class="person-section">
                <h2 class="person-section--title">Maciej Buczyński</h2>
                <div class="person-section--subtitle">Senior Software Engineer</div>
                <div class="person-section--description">
                  I'm a software engineer specialized in front-end and back-end development for complex scalable web application.
                  I work hard to ensure that my code is clear and semantically correct. <br />
                  My education is in mathematics and IT. I hold a Master's Degree in IT engineering and Bachelor's Degree in mathematics.  <br />
                  Currently I'm working as the Manager of the Webmaster Department at Galactica company based in Bydgoszcz, Poland.
                </div>
                <div class="person-section--links">
                  <a href="https://github.com/macmac4" class="ui linkedin button">
                    <i class="github icon"></i>
                    GitHub
                  </a>
                </div>
              </div>
            </div>
            <div class="column profile-image">
              <img class="profile-image--item" src="assets/images/maciej.jpg" alt="">
            </div>
          </div>
        </div>

        <div class="ui fluid container section-segment" id="whatido">
          <h2 class="ui header--section-title">What I do</h2>

          <div class="main-segment">
            <p class="main-segment--shortdescription">
              I have more than 14 years of experience building software for clients all over Poland. <br />
              Below is a quick overview of my main technical skill set and technologies I use.  <br />
              Right now my main professional goal is to teach ReactJs which gave me opportunity to deepen and improve my programming skills. <br />
              Want to find out more about my experience? Please feel free to <a href="mailto:maciasbuczynski@gmail.com">contact me</a>. 
            </p>
          </div>

          <div class="ui grid grid--code">
            <div class="ui stackable four column row">
              <div class="column">
                <div class="column-icon">
                  <i class="big js square icon"></i>
                </div>
                <div class="column-title">
                  JavaScript (ES6 +)
                </div>
                <div class="column-desc">
                  JavaScript is a client-side programming language which helps me to do Web Application Development 
                  and make dynamic and interactive web pages by implementing custom client-side scripts. 
                </div>
              </div>

              <div class="column">
                <div class="column-icon">
                  <i class="big vuejs icon"></i>
                  <i class="big react icon"></i>
                </div>
                <div class="column-title">
                  Vue & React
                </div>
                <div class="column-desc">
                  As a web developer, I try to assess my toolbox regularly and determine if I can do without this or that tool. 
                  Recently, I have been investigating just how easy it is to develop a complex front end application with VueJs.
                  Currently I'm exploring the deep knowledge of ReactJs.
                </div>
              </div>

              <div class="column">
                <div class="column-icon">
                  <!-- <i class="big mobile alternate icon"></i> -->
                  <img src="assets/images/ionic.png" alt="ionic" class="ionic icon" />
                </div>
                <div class="column-title">
                  Ionic
                </div>
                <div class="column-desc">
                  Using Ionic framework I can focus on building apps rather than breaking my head over the common UI elements. 
                  The code is reusable so I can build an app for all major operating systems with ease. 
                  The default UI is clean and I can add a personal touch to my app by including CSS classes.
                </div>
              </div>
              
              <div class="column">
                <div class="column-icon">
                  <i class="big php icon"></i>
                </div>
                <div class="column-title">
                  PHP
                </div>
                <div class="column-desc">
                  I have a full-stack developer experience with framework such as Symphony, Laravel, CodeIgniter.
                  I'm also familiar with open source cms such as WordPress or Prestashop.
                </div>
              </div>

              <div class="column">
                <div class="column-icon">
                  <i class="big npm icon"></i>
                  <i class="big gulp icon"></i>
                  <i class="big grunt icon"></i>
                </div>
                <div class="column-title">
                  npm, Gulp & Grunt
                </div>
                <div class="column-desc">
                  Whenever I have the opportunity, I automate my work, which is why I use the Grount & Gulp.
                  These components allow me to easily manage software packages to build web application.
                </div>
              </div>

              <div class="column">
                <div class="column-icon">
                  <i class="big html5 icon"></i>
                  <i class="big css3 alternate icon"></i>
                </div>
                <div class="column-title">
                  HTML & CSS
                </div>
                <div class="column-desc">
                  These tools allow me to easily build small and medium web apps, custom plugins, features, animations, and coding interactive layouts.
                  I will familiar with library such as bootstrap and tailwind to create faster layout.
                </div>
              </div>

              <div class="column">
                <div class="column-icon">
                  <i class="big sass icon"></i>
                  <i class="big less icon"></i>
                </div>
                <div class="column-title">
                  Sass & Less
                </div>
                <div class="column-desc">
                  A CSS preprocessor is a scripting language that extends CSS by allowing to write code in one language and then compile it into CSS. 
                  Sass is my favourite preprocessor right now, but I also like to use Less preprocessor.
                </div>
              </div>
              
              <div class="column">
                <div class="column-icon">
                  <i class="big python icon"></i>
                </div>
                <div class="column-title">
                  Python & Django
                </div>
                <div class="column-desc">
                  This is my current goal for 2021. To explore and learn about this programming language.
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="ui fluid container section-segment" id="featuredprojects">
          <h2 class="ui header--section-title">Featured Projects</h2>

          <div class="main-segment">
            <div class="ui stackable two column grid">
              <div class="column">
                <div class="column--item-featured">
                  <img class="ui small left floated image" src="assets/images/youartiste.jpg">
                  <div class="ui card">
                    <div class="content">
                      <div class="header">YouArtiste.com</div>
                      <div class="description">
                        <p>youArtiste is an international and innovative network dedicated to Professional Film and Theatre Artists.</p>
                        <p><b>Link:</b> <a href="https://youartiste.com/" target="blank">youartiste.com</a></p>
                        <p><b>Stack:</b> Phalcon, Bootstrap, jQuery </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="column">
                <div class="column--item-featured">

                  <img class="ui small left floated image" src="assets/images/yonekawa.jpg">
                  <div class="ui card">
                    <div class="content">
                      <div class="header">Yonekawa</div>
                      <div class="description">
                        <p>It is a real estate website with which you can find an apartment or office for rent.</p>
                        <p><b>Link:</b> <a href="https://yonekawa.g3.formy.net/" target="blank">yonekawa.g3.formy.net</a></p>
                        <p><b>Stack:</b> Laravel, Tailwind, Bootstrap, Soap - api</p>
                      </div>
                    </div>
                  </div>
                </div>
              
              </div>
              <div class="column">
                <div class="column--item-featured">

                  <img class="ui small left floated image" src="assets/images/sportfactory.jpg">
                  <div class="ui card">
                    <div class="content">
                      <div class="header">SportFactory</div>
                      <div class="description">
                        <p>The application contains basic information about the Sport Factory club in Bydgoszcz	and its offer, as well as information about news, instructors and class descriptions.</p>
                        <p><b>Link:</b> <a href="https://play.google.com/store/apps/details?id=sportfactory.bydgoszcz.sf" target="blank">play.google.com/store/apps/details?id=sportfactory.bydgoszcz.sf</a></p>
                        <p><b>Stack:</b> Ionic, Cordova, api - CodeIgniter</p>
                      </div>
                    </div>
                  </div>
                </div>  
              
              </div>
              <div class="column">
                <div class="column--item-featured">

                  <img class="ui small left floated image" src="assets/images/deweloper.jpg">
                  <div class="ui card">
                    <div class="content">
                      <div class="header">Query template developer</div>
                      <div class="description">
                        <p>Web aplication for ordering Galactica Developer templates. Application allows to customize page template.</p>
                        <p><b>Link:</b> <a href="http://ankietadeweloper.galactica.pl/" target="blank">ankietadeweloper.galactica.pl</a></p>
                        <p><b>Stack:</b> VueJs, Laravel, Bootstrap, Bootstrap-Icon</p>
                      </div>
                    </div>
                  </div>
                </div>
              
              </div>
            </div>

          </div>
        </div>

        <div class="ui fluid container section-segment" id="afterworkinghours">
          <h2 class="ui header--section-title">After working hours</h2>

          <div class="main-segment">
            <div class="ui stackable three column grid">
              <div class="column">
                <div class="column--item-featured image-top">
                  <img class="ui small left floated image" src="assets/images/chess.jpg">
                  <div class="ui card">
                    <div class="content">
                      <div class="header">Chess</div>
                      <div class="description">
                        <p>I have a passion for chess. I've played it since my childhood. I spend every free moment solving chess puzzles.</p>
                        <p>My favorite debuts are the Italian Game, the Sicilian Defense and the French Defense</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="column">
                <div class="column--item-featured image-top">
                  <img class="ui small left floated image" src="assets/images/ubuntu1.png">
                  <div class="ui card">
                    <div class="content">
                      <div class="header">Ubuntu</div>
                      <div class="description">
                        <p>Ubuntu linux is my number one open source operating system. There are many reasons that I use Ubuntu distros. </p>
                        <p>Apart from being free and open source, it’s highly customizable, stable and supports emerging technologies.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="column">
                <div class="column--item-featured image-top">
                  <img class="ui small left floated image" src="assets/images/cycl1.jpg">
                  <div class="ui card">
                    <div class="content">
                      <div class="header">Cycling</div>
                      <div class="description">
                        <p>My second passion after chess is cycling. I spend a lot of my time on the roads on bike in the summer season.
                          In winter I practice on the bike-trainer in a sport club.</p>
                        <p>It is a great pleasure for me to participate in competitions and compete with other cyclists.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <footer class="footer">
          <small class="copyright">Copyright 2021 © <a href="mailto:maciasbuczynski@gmail.com" target="_blank">by Maciej</a></small>
        </footer>
      </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <script src="assets/js/scripts.js"></script>
  </body>
</html>