Portfolio/index.html at main · HuzaifaChaudary/Portfolio · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Huzaifa Iftikhar Portfolio</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

</head>
<body>
    <div class="container">
        <div class="frontPage">
    <div className='navbar '>
        <header>
            <img className='logo' style="width: 200px" src="/assets/logo.png" alt="logo" />
            <Self>
                <ul className='selfNames'>
                    <li><a href='#intro'>Home</a></li>
                    <li><a href='#work'>Projects</a></li>
                    <li><a href='#resume'>Resume</a></li>
                </ul>
            </Self>
            <nav>
                <ul className='nav_links'>
                    <li><a href="https://github.com/HuzaifaChaudary"><img src="/assets/github.png" alt="" style="height:20px;width: 20px;" /> </a>  </li>
                    <li><a href="www.linkedin.com/in/HuzaifaIftikharFRS" ><img src="/assets/linkedin.png" alt="" style="height:20px;width: 20px"/></a></li>
                </ul>
            </nav>
        </header>
    </div>

    <div class="Introduction" id="intro">
        <div class="about-me">
        <img src="me.jpg" class="profile" alt="profile pic" />
        <div class="Intro-details">
        <h1> Hi, I'm Huzaifa Iftikhar and I am a <span style="background-color:black;color: white;" class="type">Full Stack Developer</span> </h1>
        <h5>I am a Junior Developer based in Lahore, Pakistan. I have 6 months of experience and I specialize in creating web applications. I am open for new opportunities and interesting projects.</h5>
    </div>
            </div>
             <buttons>
                <ul>

                    <li> <button class="myWork"><a href='#work' >Check My Work</a></button> </li>
                    <li> <button class="contactMe"><a href='#footer'>Contact Me</a></button> </li>
                </ul>
            </buttons>

        <arrow><i class='material-symbols-outlined'>keyboard_arrow_down</i></arrow>
    </div>
</div>

    <div class="Work" id="work">
        <div class="work-details">
            <h1>Projects</h1>
            <p >Check my commercial and non-commercial projects.</p>
            <p> If you have any questions feel free to ask me for more information.</p>
        </div>
        <div class="projects">
            <div class="projects-container">
                <img src="assets/tesla.png" alt="tesla" style="height:200px;;"/><h4>Tesla Web Clone</h4><p><b>Tech Stack:</b> React Js, JavaScript, Html, CSS.</p>
            <p class="projects-details">Tesla Web Clone made with <b>React Js </b>using npm version 8.13.2</p>
        </div>
        <div class="projects-container" >
            <img src="/assets/ecommerce.png" alt="tesla" style="height:200px;"/><h4>Full Stack Ecommerce Website</h4><p><b>Tech Stack:</b> Next.Js, Sanity.io, JavaScript, Html, CSS.</p>
        <p class="projects-details">Tesla Web Clone made with <b>React Js </b>using npm version 8.13.2</p>
    </div>
    <div class="projects-container" >
        <img src="assets/weatherProject.png" alt="tesla" style="height:200px;"/><h4>Weather Detector API</h4><p>Tech Stack: React Js, JavaScript, Bootstrap.</p>
    <p class="projects-details"> <b>React Js </b>with npm version 8.13.2</p>
</div>
        </div>
    </div>

    <hr style="width: 800px; margin-left:250px; height: 2px;background-color: rgb(216, 193, 193);border: 1.2px solid whitesmoke;"/>

    <div class="Resume" id="resume">
        <div class="Resume-marg">
            <h1><span style="background-color:black;color:white;">Resume</span></h1>
            <p class="Resume-Center">Resume is the strong evidence of Hard Working and Dedication</p>
            <p> of Exceptional Abilities I put alongside by University BS.</p>
        </div>

        <div class="Resume-marg">
            <h2><span style="background-color:black;color:white;">Education</span></h2>
            <h5 class="Resume-Center">
                <div>
                <ul>
                    <h3 class="resume-bottom">Institutes Studied at :</h3>
                    <li>Dar-e-Arqam Schools [2008-2018]</li>
                    <li>Government College University Lahore [2018-2020]</li>
                    <li>University of the Punjab [2018-2024 Pursuing]</li>
                </ul>
            </div>

            </h5>
            <p class="Resume-width" style="width:800px;margin-left: 270px;padding-top:10px;">My Education Background is Full of Hard Working. As a Regular and active student in class, I got A+ Grade in Matric and A Grade in Intermediate and was Awarded with <b>"Award of Excellency"</b> by Lahore Board Institute for Secondary Education</p>
        </div>

        <div class="Resume-marg">
            <h3><span style="background-color:black;color:white;">Work Experience</span></h3>
            <h4 class="Resume-Center">Intern - Full Stack Developer. Now a Job as MERN Stack Dev</h3>
            <h4>at</h4>
            <h3>Hosanna Solutions</h3>
        </div>

        <div class="Resume-marg">
            <h3 class="resume-bottom"><span style="background-color:black;color:white;">Languages and Frameworks</span></h3>
            <p  class="Resume-width"><b>Tech Stacks</b>: C++, Python, React-Js, HTML/CSS, JavaScript, Java, PHP, Node.JS, MySQL.</p>
            </div>

            <div class="Resume-marg">
                <h3><span style="background-color:black;color:white;">Founder</span></h3>
                <h4 class="Resume-Center">Founder and CEO</h3>
                <h6>at </h6>
                <h3>PLANCK</h3>
                <p>Grocery Delivery App Store in Lahore.</p>
            </div>

            <div class="Resume-marg">
                <h3><span style="background-color:black;color:white;">Interest</span></h3>
                <h4 class="Resume-Center">Deep Interest in US based Future Companies:</h4>
                <ul>
                    <li>"Ernest" Electric Vehicle Manufacturing Plant in EI Paso or Austin, Texas.</li>
                    <li>"SwanX" Rocket Manufacturing and Launching Incorporation, near Los Angeles North-West Bay.</li>
                    <li>"BrainLinked" World First Chip based Hearing Aid implantation device in Silicon Valley, California.</li>
                </ul>
            </div>

        <!-- <div class="Resume-marg">
            <p>Download my Resume</p>
            <button type="button" class="Resume-btn"> Download  1Mb</button>

        </div> -->
    </div>

    <hr style="width: 800px; margin-left:250px; height: 2px;background-color: rgb(216, 193, 193);border: 1.2px solid whitesmoke;"/>

        <footer>
            <div id="footer" class="Footer">
                <h1>Lets Talk</h1>
                <h3>React me through my email: </h3>
                <h5>chhuzaifaiftikhar@gmail.com</h5>
                </div>
            </div>
        </footer>


</div>
</body>
</html>

<script>
    var typed = new Typed('.type', {
      strings: ['This is a JavaScript library', 'This is an ES6 module'],
      typeSpeed:60,
      backSpeed:60,
      smartBackspace: true, // Default value
    });
    </script>
<script>
    src="typed.js"
</script>