CodeFlowOrg · DhruvSingla007 · Apr 17, 2021
diff --git a/0.jfif b/0.jfif
diff --git a/42ce9cfd247b1d8ec0b6fba01e4673fc.jpg b/42ce9cfd247b1d8ec0b6fba01e4673fc.jpg
diff --git a/app.js b/app.js
@@ -0,0 +1,74 @@
+
+//code for smooth scroll
+var navTags = document.querySelectorAll('.horizontal-list li a');
+
+for(var i=0;i<navTags.length;++i)
+{
+    navTags[i].addEventListener('click', function(event){
+        event.preventDefault();
+        var targetId= this.textContent.trim().toLowerCase();
+        var targetSection= document.getElementById(targetId);
+        if(targetSection!=null)
+        {
+            var interval = setInterval(function(){
+                var coordinates=targetSection.getBoundingClientRect();
+                if(coordinates.top <= 0)
+                {
+                    clearInterval(interval);
+                    return;
+                }
+                if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight-100)
+                {
+                    clearInterval(interval);
+                    return;
+                }
+                window.scrollBy(0,5);
+            }, 2);
+        }
+    });
+}
+
+
+//code for skill bars filling
+var bars = document.querySelectorAll('.skill div');
+var skillSection = document.getElementById('skill-container');
+window.addEventListener('scroll', checkScroll);
+var check=false;
+
+function initialFill(){
+    for(let bar of bars)
+    {
+        bar.style.width=0+'%';
+    }
+}
+
+initialFill();
+
+function fillBars(){
+    for(let bar of bars)
+    {
+        let target= bar.getAttribute('bar-width');
+        let currWidth=0;
+        let interval=setInterval(function(){
+            if(currWidth>=target)
+            {
+                clearInterval(interval);
+                return;
+            }
+            ++currWidth;
+            bar.style.width=currWidth+'%';
+        }, 25);
+    }
+}
+
+function checkScroll(){
+    if(skillSection.getBoundingClientRect().top < window.innerHeight && !check)
+    {
+        fillBars();
+        check=true;
+    }
+    if(skillSection.getBoundingClientRect().top > window.innerHeight)
+    {
+        check=false;
+    }
+}
diff --git a/as.cpp/as.py b/as.cpp/as.py
@@ -0,0 +1,11 @@
+var st="ABCD"
+for(var i=0;i<4;++i)
+    for(var j=3-i;j>=0;--j)
+        print(" ")
+
+    var k=i+1
+    var c=0
+    while(k)
+    print(st[c])
+    c++
+    k--
diff --git a/as.cpp/aw.cpp b/as.cpp/aw.cpp
@@ -0,0 +1,20 @@
+int func(int* arr, int n)
+{
+    vector<int> v(n);
+    v[n-1]=arr[n-1];
+    for(int i=n-2;i>=0;--i)
+    {
+        v[i]=max(v[i+1],arr[i]);
+    }
+    int ans=1;
+    for(int i=0;i<n-1;++i)
+    {
+        if(v[i]<arr[i])
+        {
+            ++ans;
+        }
+    }
+
+    return ans;
+
+}
diff --git a/bg.png b/bg.png
diff --git a/facebook.png b/facebook.png
diff --git a/index.html b/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Dhruv Singla</title>
+        <link rel="stylesheet" type="text/css" href="style.css">
+        <script src='https://kit.fontawesome.com/a076d05399.js'></script>
+    </head>
+    <body>
+        <header id="bodyHeader">
+            <nav id="navbar">
+                <ul class="horizontal-list">
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#skills">Skills</a></li>
+                    <li><a href="#projects">Projects</a></li>
+                </ul>
+                <div id="name">
+                    <h1>Dhruv Singla</h1>
+                </div>
+
+                <ul class="social-icons horizontal-list">
+                    <li><a href="#"><img src="linkedin.png"></a></li>
+                    <li><a href="#"><img src="facebook.png"></a></li>
+                    <li><a href="#"><img src="quora.png"></a></li>
+                    <li><a href="#"><img src="instagram.png"></a></li>
+                    <li><a href="#"><img id="twitter" src="twitter.png"></a></li>
+                </ul>
+            </nav>
+        </header>
+        <main>
+            <section id="about">
+                <div id="my-image">
+                    <img src="pic.PNG">
+                </div>
+                <div id="bio-box">
+                <div id="bio">
+                    <p>
+                        I am a <span class="highlight">Junior Engineering student</span> at Punjab Engineering College <span class="highlight">(PEC)</span>, Chandigarh pursuing B.Tech in Electronics and Communication Engineering <span class="highlight">(ECE)</span>.
+                        I am <span class="highlight">coding</span> enthusiast and my objective is to utilise and enhance my skillset by constantly working on it. I believe in learning
+                        by doing and constantly push myself to do better everyday. I love working in a team environment, on ideas & projects that have a real-life, large-scale impact. 
+                    </p>
+                </div>
+                </div>
+            </section>
+            <section id="skills">
+                <h1 class="section-heading mb75px highlight">
+                    <span>SKILLS</span>
+                </h1>
+                <div class="box">
+                <div id="skill-container" class="section-content">
+                    <div class="skill"><div bar-width="50" style="width: 50%; height: 100%; background-color: #49a9e1; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>HTML</span></div></div>
+                    <div class="skill"><div bar-width="55" style="width: 55%; height: 100%; background-color: #FF7043; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>JavaScript</span></div></div>
+                    <div class="skill"><div bar-width="78" style="width: 78%; height: 100%; background-color: #00897B; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span style="color: white;">C++</span></div></div>
+                    <div class="skill"><div bar-width="71" style="width: 71%; height: 100%; background-color: #BA68C8; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>Data Structures</span></div></div>
+                    <div class="skill"><div bar-width="68" style="width: 68%; height: 100%; background-color: #EC407A; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span style="color: white;">CSS</span></div></div>
+                    <div class="skill"><div bar-width="61" style="width: 61%; height: 100%; background-color: #7986CB; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>SQL</span></div></div>
+                    <div class="skill"><div bar-width="50" style="width: 50%; height: 100%; background-color: #00BCD4; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>Android Development</span></div></div>
+                    <div class="skill"><div bar-width="60" style="width: 60%; height: 100%; background-color: #66BB6A; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>Flutter</span></div></div>
+                    <div class="skill"><div bar-width="57" style="width: 57%; height: 100%; background-color: #29B6F6; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>Dart</span></div></div>
+                    <div class="skill"><div bar-width="45" style="width: 45%; height: 100%; background-color: #E57373; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>Web development</span></div></div>
+                    <div class="skill"><div bar-width="80" style="width: 80%; height: 100%; background-color: #9C27B0; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span style="color: white;">Cloud Foundary</span></div></div>
+                    <div class="skill"><div bar-width="70" style="width: 70%; height: 100%; background-color: #4DB6AC; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>Springboot</span></div></div>
+                    <div class="skill"><div bar-width="55" style="width: 55%; height: 100%; background-color: #FF7043; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>Git</span></div></div>
+                    <div class="skill"><div bar-width="55" style="width: 55%; height: 100%; background-color: #00BCD4; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>Firebase</span></div></div>
+                    <div class="skill"><div bar-width="55" style="width: 55%; height: 100%; background-color: #00897B; border-top-left-radius: inherit; border-bottom-left-radius: inherit;"><span>Python</span></div></div>
+                </div>
+                </div>
+            </section>
+            <section id="projects">
+                <h1 class="section-heading mb75px highlight">
+                    <span>PROJECTS</span>
+                </h1>
+                <div class="box">
+                    <div class="section-content">
+
+                        <div class="project button" style="background-color: rgba(121, 22, 124, 0.568)">
+                            <span class="project-title">Campus Buddy &nbsp; <i style="font-size: 1.5rem;" class='fas fa-angle-double-down'></i></span>
+                            <span class="project-description">An app for the college students where the students can checkout the past, ongoing as well as upcoming events/workshops/sessions.</span>
+                            <span class="project-tech">TECH USED: Flutter, Dart, Android Studio, Firebase</span>
+                        </div>
+
+                        <div class="project button"  style="background-color: rgba(180, 180, 180, 0.979)">
+                            <span class="project-title">Dice Game &nbsp; <i style="font-size: 1.5rem;" class='fas fa-angle-double-down'></i></span>
+                            <span class="project-description">It is a fun 2-player game where the players have to reach the target score. First one to achieve the target score will be declared winner.</span>
+                            <span class="project-tech">TECH USED: HTML, CSS, JavaScript</span>
+                        </div>
+
+                        <div class="project button"  style="background-color: #E57373">
+                            <span class="project-title">Personal Website &nbsp; <i style="font-size: 1.5rem;" class='fas fa-angle-double-down'></i></span>
+                            <span class="project-description">This responsive and interactive webpage which tells about my skillset and portfolio.</span>
+                            <span class="project-tech">TECH USED: HTML, CSS, JavaScript</span>
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <section id="education"></section>
+            <section id="contact"></section>
+        </main>
+        <script src="app.js"></script>
+    </body>
+</html>
diff --git a/instagram.png b/instagram.png
diff --git a/linkedin.png b/linkedin.png
diff --git a/pic.PNG b/pic.PNG
diff --git a/quora.png b/quora.png
diff --git a/snapchat.png b/snapchat.png