frontend_development_css_course/portfolio.html at master · dDevAhmed/frontend_development_css_course · 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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ahmed Mahmud</title>
    <link rel="shortcut icon" href="img/portfolio/favicon/favicon-32x32.png" type="image/x-icon" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <!-- <link rel="stylesheet" href="style.css" /> -->
    <link rel="stylesheet" href="css/portfolio.css">

</head>

<body class="">
    <header>
        <nav>
            <ul>
                <li><a href="#hero" class="active"><i class='bx bxs-home'></i> <span
                            class="nav-link-text">Home</span></a></li>
                <li><a href="#about" class=""><i class='bx bxs-user'></i> <span class="nav-link-text">About</span></a>
                </li>
                <li><a href="#skills" class=""><i class='bx bxs-badge-check'></i> <span class="nav-link-text">Skills</span></a>
                </li>
                <li><a href="#contact" class=""><i class='bx bxs-envelope'></i> <span
                            class="nav-link-text">Contact</span></a></li>

            </ul>
        </nav>
        <!-- <li>
                <a href="https://github.com/dDevAhmed/frontend_development_css_course" target="_blank"
                    title="Portfolio Repo">
                    <img src="img/icons8-github-100.png" alt="Portfolio Github Repo" class="nav-course-repo">
                </a>
            </li> -->
    </header>

    <main class="">
        <section class="hero" id="hero">
            <div class="hero-wrapper">
                <p class="greetings">Hi there!</p>
                <h1><span class="i-am">I'm </span>Ahmed Mahmud</h1>
                <p class="title">A <span>Frontend Developer</span></p>
                <a href="#about" class="learn-more">Discover My Journey</a>
            </div>
        </section>

        <section class="" id="about">
            <div class="about-wrapper">
                <div class="about-container">
                    <span class="image-background"> <img src="img/portfolio/me/1.png"
                            alt="Ahmed Mahmud Folding Arm Image"></span>
                    <span>
                        <h3 class="section-title">About</h3>
                        <p class="section-subtitle">Discover My Journey</p>
                        <p class="about-me">Hi, I'm Ahmed Mahmud, your <span class="highlight">go-to person</span> for
                            turning
                            <span class="highlight">pixels into
                                perfection</span> and making the web a better place, one line of code at a time. By day, I
                            transform
                            complex code into seamless user experiences, making sure every click, swipe, and scroll feels
                            just right.
                            Armed with my <span class="highlight">trusty keyboard</span>, I create <span
                                class="highlight">responsive
                                designs</span> and <span class="highlight">interactive elements</span> that keep users
                            engaged and
                            delighted.
                        </p>
                        <p>When I'm not busy crafting digital wonders, you'll probably find me <span
                                class="highlight">debugging with
                                the patience of a saint</span> —or bribing my browser with <span class="highlight">cookies
                                for good
                                behavior</span>. With a solid command of <span class="highlight">HTML, CSS, and
                                JavaScript</span>, I
                            bring the front end to life with a good dose of humor and a lot of passion.</p>
                    </span>
                </div>
            </div>
        </section>

        <section class="" id="skills">
            <div class="skills-wrapper">
                <h3 class="section-title">Skills</h3>
                <p class="section-subtitle">Tools and Technologies I Use</p>
                <div class="skills-container">
                    <span class="tools">
                        <span class="animation-wheel">
                            <img src="img/portfolio/icons8-html-100-white.png" alt="html Logo" title="Html">
                            <img src="img/portfolio/icons8-css-100.png" alt="css Logo" title="Css">
                            <img src="img/portfolio/icons8-javascript-100-white.png" alt="javascript Logo"
                                title="Javascript">
                            <img src="img/portfolio/icons8-react-native-100.png" alt="react Logo" title="React">
                            <img src="img/portfolio/icons8-git-100-white.png" alt="git Logo" title="Git">
                            <img src="img/portfolio/vscode-white-logo.png" alt="vscode Logo" title="Vscode">
                        </span>
                    </span>

                    <span class="repos">
                        <img src="img/portfolio/laptops/4.png" alt="Laptop Image">
                        <span class="screen-note">
                            <p>Checkout my <span class="repos">Repos</span> on</p>
                            <span>
                                <a href="https://github.com/dDevAhmed/" target="_blank" title="My Projects' Repos">
                                    <img src="img/portfolio/github-white-logo.png" alt="Github Logo" class="github-icon">
                                </a>
                                <a href="https://codepen.io/dDevAhmed" target="_blank" title="My Projects' Repos">
                                    <img src="img/portfolio/codepen-logo.png" alt="Codepen Logo">
                                </a>
                            </span>
                        </span>
                    </span>
                </div>
            </div>
        </section>

        <section class="" id="contact">
            <div class="contact-wrapper">
                <h3 class="section-title">Contact</h3>
                <p class="section-subtitle">Let's Connect and Collaborate</p>
                <div class="contact-container">
                    <form action="#">
                        <span class="form-row">
                            <label for="name">Name</label>
                            <input type="text" id="name">
                        </span>

                        <span class="form-row">
                            <label for="subject">Subject</label>
                            <input type="text" id="subject">
                        </span>

                        <span class="form-row">
                            <label for="email">Email</label>
                            <input type="email" id="email">
                        </span>

                        <span class="form-row">
                            <label for="message">Message</label>
                            <textarea name="message" id="message" rows="5"></textarea>
                        </span>

                        <button type="submit">Send Message <i class="fa fa-send"></i></button>
                    </form>
                    <div class="social-container">
                        <span class="call-mail">
                            <a href="tel:+2347063728085" title="Call Me">
                                <img src="img/portfolio/icons8-call-100-white.png" alt="Call Icon" class="half-width">
                                <span>+234(70)-6372-8085</span>
                            </a>
                            <a href="mailto:mailahmedmahmud@gmail.com" title="Mail Me">
                                <img src="img/portfolio/icons8-mail-100-white.png" alt="Mail Icon" class="half-width">
                                <span>mailahmedmahmud@gmail.com</span>
                            </a>
                        </span>
                        <span class="social-links">
                            <a href="https://www.linkedin.com/in/ahmedmahmud/" target="_blank" title="Linkedin">
                                <img src="img/portfolio/icons8-linkedin-100.png" alt="Linkedin Icon">
                            </a>
                            <a href="https://x.com/ddevahmed" target="_blank" title="Twitter">
                                <img src="img/portfolio/icons8-x-100.png" alt="Twitter Icon">
                            </a>
                            <a href="javasrcipt:void(0)" target="_blank" title="Facebook">
                                <img src="img/portfolio/icons8-facebook-100.png" alt="Facebook Icon">
                            </a>
                            <a href="javasrcipt:void(0)" target="_blank" title="Instagram">
                                <img src="img/portfolio/icons8-instagram-100.png" alt="Instagram Icon">
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </section>

    </main>
    <a href="#" class="back-to-top" title="Back to top"><i class="fa fa-arrow-up"></i></a>

    <script src="script.js"></script>
</body>

</html>