ebrg.github.io/index.html at main · EbrG786/ebrg.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Matomo -->
    <script>
      var _paq = window._paq = window._paq || [];
      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
        var u="https://ebrr.matomo.cloud/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '2']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src='//cdn.matomo.cloud/ebrr.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
      })();
    </script>
    <!-- End Matomo Code -->


    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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=Press+Start+2P&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Ebrahim's Portfolio</title>
</head>

<body background=images/leaf.svg>
    <div class="nav-container">
        <button class="responsive-nav">
            <i class="fas fa-bars"></i>
        </button>
        <nav class="link-container">
            <ul class="links">
                <li><a href="#home" class="scroll-links glow">Home</a></li>
                <li><a href="#about" class="scroll-links glow">About</a></li>
                <li><a href="#projects" class="scroll-links glow">Project</a></li>
                <li><a href="#contact" class="scroll-links glow">Contact</a></li>
                <li><a href="#tours" class="scroll-links glow" style="text-decoration: line-through;">Resume</a></li>
            </ul>
        </nav>
    </div>
    <div class="mainbody">
        <section id="home">
            <div>
                <h1 class="font">EBRAHIM</h1>
                <p class="fontfade">I BUILD THINGS<br> FOR THE WEB.</p>
                <p>I’m a IT engineering student with experience in Frontend development, UI/UX designing, IOT, Competetive
                    coding. Currently, I’m focused on creating better and more interactive UI's.</p>
            </div>
        </section>
        <section id="about">
            <div class="about-container">
                <p class="glow">ABOUT ME</p>
                <p>Hello! My name is Ebrahim Ghantiwala and I enjoy creating things that live on the internet.My interest in
                    web development started in the first year of my college when I decide to pick up a skill rather than
                    coding. Started by learning HTML, CSS ,JS for starting and rest is history. Fast forward today I have
                    had a privilege of working for few companies as an intern for web development.</p>
                <p>Here are a few tools and technologies I have used recently:</p>
                <ul>
                    <li class="tools">PYTHON</li>
                    <li class="tools">REACT</li>
                    <li class="tools">DOCKER</li>
                    <li class="tools">JAVASCRIPT</li>
                    <li class="tools">FIGMA</li>
                </ul>
            </div>

            <div class="img">
                <img src="./images/self 2.png" alt="Self">
            </div>
        </section>
        <section id="projects">
            <p  class="glow" >PROJECTS</p>
            <div class="project-container">
                <div class="cards">
                    <div class="text" >E-Commerce Website</div>
                </div>
                <div class="cards">
                    <div class="text">Property Price Predictor</div>
                </div>
                <div class="cards">
                    <div class="text">IOT Website</div>
                </div>
                <div class="cards">
                    <div class="text">Online Counsellor</div>
                </div>
                <div class="cards">
                    <div class="text">Smart Elevator System</div>
                </div>
                <div class="cards">
                    <a target="_blank" class="text link" href="https://www.linkedin.com/in/ebrahim-ghantiwala-1b9b201aa/">And Many More</a>
                </div>
            </div>
        </section>
        <section class="contact" id="contact">
            <p  class="glow" >CONTACT ME</a></p>
            <p>While we’re good with smoke signals,there are simpler ways for us to get in touch and answer any
                questions.</p>
            <button> <a href="mailto:ebrahimghantiwala@gmail.com" style="text-decoration: none;">Say Hello</a></button>
        </section>
        <div class="contact-details">
            <a class="email glow">ebrahimghantiwala@gmail.com</a></br>
            <a target="_blank" href="https://github.com/EbrG786"><img src="images/git.svg" class="icon" alt="logo"></a></br>
            <a target="_blank" href="https://www.linkedin.com/in/ebrahim-ghantiwala-1b9b201aa/"><img src="images/Linkd.svg" class="icon" alt="logo"></a>
        </div>
        <footer>Designed and buit by Ebrahim M Ghantiwala</footer>
        </ul>
    </div>

</body>

<script>
    // ********** close links ************
    toggleBtn = document.querySelector(".responsive-nav");
    linkContainer = document.querySelector(".link-container");
    const links = document.querySelector(".links");

    toggleBtn.addEventListener("click", function () {
        // linkContainer.classList.toggle("show-links");

        const linksHeight = links.getBoundingClientRect().height;
        console.log(linksHeight);
        const linkContainerHeight = linkContainer.getBoundingClientRect().height;
        console.log(linkContainerHeight);

        if (linkContainerHeight === 0) {
            linkContainer.style.height = `${linksHeight+20}px`;
        }
        else {
            linkContainer.style.height = 0;
        }
    });
</script>

</html>