<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A professional portfolio showcasing the projects and skills of Nasri Nasir, a web developer specializing in front-end development.">

    <!-- Open Graph meta tags for Facebook, LinkedIn, etc. -->
    <meta property="og:title" content="Nasri Nasir Portfolio">
    <meta property="og:description" content="A professional portfolio showcasing the projects and skills of Nasri Nasir, a web developer specializing in front-end development.">
    <meta property="og:image" content="https://www.nasrinasir.com/assets/images/nasrinasir-logo.png">
    <meta property="og:url" content="https://www.nasrinasir.com">
    <meta property="og:type" content="website">


    <title>Nasri Nasir</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="./css/styles.css" rel ="stylesheet"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

</head>

<body>

  <!--Header-->

  <nav class="navbar navbar-expand-sm bg-white rounded border-bottom sticky-top ">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar" aria-controls="mynavbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse d-lg-flex" id="mynavbar">
        <a class="navbar-brand col-lg-3 me-0 px-3" href="#">
          <img src="./assets/images/nasrinasir-logo.png" width=auto height="80" alt="nasrinasir-logo">
        </a>

        <ul class="navbar-nav col-lg-6 justify-content-lg-end fs-5">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#Skills">Skills</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#Projects">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#About">About</a>
          </li>
          
        </ul>
        
      </div>
    </div>
  </nav>


    <!-- Hero Section-->

        <section id ="Title">
            <div class="container col-xl-10 col-xxl-8 px-5 py-5 align-items-center">
                <div class="row align-items-center justify-content-center text-center g-lg-5">
                  <div class= "col-md-10 col-lg-5 py-5">
                      <img src="./assets/images/nasri-resized.png" class=" img-fluid rounded-circle" alt="Nasri-image" width="350px" height="350px" loading="lazy" >
                  </div>

                    <div class="col-lg-7 text-center text-lg-start">
                        <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3 ">Hi! I'm <span class="text-info">Nasri</span>. Nice to meet you!</h1>
                        <p class="lead">I enjoy building stuff for the web. </p>

                        <a class="px-3" href="https://www.linkedin.com/in/mrnasrinasir" target="_blank" rel="noopener noreferrer">
                          <img src="assets/icons/linkedin.svg" alt="Linkedin" width="32" height="32"></a>
              
                        
                          <a class="px-3" href="https://www.threads.net/@mrnasrinasir" target="_blank" rel="noopener noreferrer">
                            <img src="assets/icons/threads.svg" alt="Threads" width="32" height="32"></a>
              
                        
                            <a class="px-3" href="https://github.com/mrnasrinasir" target="_blank" rel="noopener noreferrer">
                              <img src="assets/icons/github.svg" alt="Github" width="32" height="32"></a>
                    </div>
                </div>
              </div>
        </section>



    <!--Resume and Skills Section-->


        <section id="Skills">
           <div class = "container border bg-body-tertiary py-5 mb-5">
                  <div class="row justify-content-around">

                    <div class ="col-10 col-md-10 col-lg-3 p-3 align-items-center text-center card mb-3 shadow-sm">
                      
                      <svg class = "p-2" xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
                        <path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2 2 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a10 10 0 0 0-.443.05 9.4 9.4 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a9 9 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.2 2.2 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.9.9 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"/>
                      </svg>

                        <h3>  I like </h3>                        
                        <p>Creating responsive and intuitive web applications. Through self-learning and hands-on projects, I've honed my skills in both front-end and back-end applications. </p>

                    </div>

                    <div class ="col-10 col-md-10 col-lg-3 p-3 align-items-center card mb-3 shadow-sm text-center">
                      <svg class= "p-2" xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-file-earmark-code-fill" viewBox="0 0 16 16">
                        <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.646 7.646a.5.5 0 1 1 .708.708L5.707 10l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708zm2.708 0 2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 10 8.646 8.354a.5.5 0 1 1 .708-.708"/>
                      </svg>

                      <h3>I speak</h3>
                      <p>HTML, CSS, Javascript, Typescript</p>
                      <h3>Frameworks </h3>
                      <p>ReactJS, ExpressJS</p>
                      
                    
                
                    </div>

                    <div class ="col-10 col-md-10 col-lg-3 p-3 align-items-center text-center card mb-3 shadow-sm">
                      <svg class = "p-1" xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-person-arms-up" viewBox="0 0 16 16">
                        <path d="M8 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
                        <path d="m5.93 6.704-.846 8.451a.768.768 0 0 0 1.523.203l.81-4.865a.59.59 0 0 1 1.165 0l.81 4.865a.768.768 0 0 0 1.523-.203l-.845-8.451A1.5 1.5 0 0 1 10.5 5.5L13 2.284a.796.796 0 0 0-1.239-.998L9.634 3.84a.7.7 0 0 1-.33.235c-.23.074-.665.176-1.304.176-.64 0-1.074-.102-1.305-.176a.7.7 0 0 1-.329-.235L4.239 1.286a.796.796 0 0 0-1.24.998l2.5 3.216c.317.316.475.758.43 1.204Z"/>
                      </svg>
                      <h3>I help</h3>
                      <p>  Turn your project from ideas to reality.  I am equipped with tackling issues across the full development stack. </p>
                    </div>
                      
                  </div>
            </div>
        </section>


        
    <!--Projects Section-->

        <section id="Projects">
            <div class="container-fluid py-5 bg-dark ">
              <h2 class="text-center text-light mb-5">Projects I've made</h2>
              <div class="row justify-content-around p-3 ">
                  
                <div class="col-10 mb-3 col-lg-4"> 
                    <div class="card shadow-sm h-100 d-flex flex-column p-3 ">
                      <img class="card-img-top" src="./assets/images/todolist-thumbnail.png"  alt="todolist-thumbnail">
                      <div class="card-body">
                        <h5 class="card-title">To-do list</h5>
                        <p class="card-text">A to do list that is able to add posts and delete posts. It also has the ability to add new users</p>         
                        <div class ="d-flex flex-wrap justify-content-between align-items-center">
                          <div class="btn-group">
                            <a class="btn btn-sm btn-outline-dark" href="https://github.com/mrnasrinasir/todolist">View on Github</a>
                            
                          </div>
                        

                          <small class="text-muted">NodeJS,PostGres</small>
                        </div>
                        </div>
                      </div>
                </div>


                <div class="col-10 mb-3 col-lg-4"> 
                      <div class="card shadow-sm h-100 d-flex flex-column p-3">
                        <img class="card-img-top" src="./assets/images/blog-web-thumbnail.png"  alt="web-app-thumbnail">
                        <div class="card-body">
                          <h5 class ="card-title">Blog Web Application</h5>
                          <p class="card-text">A simple blog application with ability to create and delete posts</p>
                          <div class ="d-flex flex-wrap justify-content-between align-items-center">
                            <div class="btn-group">
                              <a class="btn btn-sm btn-outline-dark" href="https://github.com/mrnasrinasir/Blog-Web-Application">View on Github</a>
                              
                            </div>

                            <small class="text-muted ">ExpressJS,EJS</small>
                          </div> 
                        </div>
                      </div>
                </div>

                <div class="col-10 mb-3 col-lg-4"> 
                  <div class="card shadow-sm h-100 d-flex flex-column p-3">
                    <img class="card-img-top" src="./assets/images/SG-weather-app.png"  alt="todolist-thumbnail">
                    <div class="card-body">
                      <h5 class="card-title">SG Weather App</h5>
                      <p class="card-text">Using a public API to generate the weather of Singapore complete with a map</p>         
                      <div class ="d-flex flex-wrap justify-content-between align-items-center">
                        <div class="btn-group">
                          <a class="btn btn-sm btn-outline-dark" href="https://github.com/mrnasrinasir/Weather-SG-v2">View on Github</a>
                          <a class="btn btn-sm btn-outline-dark" href="https://weather-sg-v2.onrender.com/">View Demo</a>
                          
                          
                        </div>
                      

                        <small class="text-muted">ExpressJS</small>
                      </div>
                      </div>
                    </div>
              </div>

              </div>
            </div>    
                            
    </section>

    <!--About Me Section-->
    <section id="About">

      <div class="container py-5">
        <div class="row justify-content-center d-flex">
          <div class="col-12 mb-4 col-md-6 ">
              <img src="./assets/images/nasri-coding.png" class="img-fluid flex-row-reverse" alt="nasri-coding">
            </div>
            <div class="col-12 col-md-6">
                  <p>An aspiring full-stack web developer with a love for building stuff and coding. I currently work with HTML, CSS, JavaScript, and React and counting. </p>
                  <p>I taught myself how to build websites from scratch by breaking down hard concepts through research and reading docs, lots of them.</p>
                  <p>I value honesty and simplicity in my work. Although, I'm still far away from  building anything big worth mentioning, my goal is to eventually create apps that help people be more productive. Outside of coding, I enjoy nature and camping. </p>
                  <p>Let's have a chat!</p>
            </div>

        </div>
      </div>
    </section>
     <!--Footer-->   
        <section id="Footer">
            <div class="container">
                <footer class="py-3 my-4">
                    <h2 class="text-center"></h2>
                    
                  <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                    <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
                  </ul>
                  <p class="text-center text-body-secondary">© 2024 Nasri Nasir. Built with Bootstrap by yours truly.</p>
                </footer>
              </div>
        </section>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
        <script src="messenger.js"></script>
</body>

</html>