Portfolio_V3/index.html at main · Jack-WebDev/Portfolio_V3 · 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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!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" />
    <meta property="og:title" content="JW | Software Developer | Freelancer">
    <meta property="og:description" content="Hire A Professional Freelancer & Software Developer. Building interactive experiences with a focus on responsiveness and accesibility">
    <meta name="theme-color" content="#12395d">
    <meta property="type" content="website">
    <meta property="og:site_name" content="Jack WebDev">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@JackWebDev31">
    <link rel="icon" type="image/png" sizes="32x32" href="Assets/Favicon.png"/>

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,400;1,300;1,600&display=swap">
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Vujahday+Script&display=swap">
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital@1&display=swap">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,400;1,300;1,600&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Vujahday+Script&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital@1&display=swap">

    <link rel="stylesheet" href="CSS/styles.css">
    <noscript><link rel="stylesheet" href="CSS/style.css"></noscript>
    <script defer src="JS/index.js"></script>
    <title>Jack WebDev | Design, Online Marketing & Website Development</title>
</head>
<body>
    <header aria-label="header" class="header" id="header">

        <a href="#services" class="skip__nav">Skip to Main Content</a>

        <a aria-label="Logo" aria-hidden="true" href="#home" class="logo">
          <span class="j">J</span>ack
          <span class="w">W</span>ebDev
        </a>

        <div aria-label="navigation-toggle" class="hamburger" id="hamburger" role="button" tabindex="0" aria-controls="navMenu" aria-pressed="false" aria-expanded="false">
          <div class="bar"></div>
          <div class="bar"></div>
          <div class="bar"></div>
        </div>

        <nav class="navbar" id="navbar" aria-label="navigation">
            <ul class="nav__menu" id="navMenu">
                <li class="nav__item about_item">
                <span aria-hidden="true">1.</span><a href="#services" class="nav__link">Services</a>
                </li>
                <li class="nav__item work_item">
                <span aria-hidden="true">2.</span><a href="#work" class="nav__link">My Work</a>
                </li>
                <li class="nav__item design_item">
                <span aria-hidden="true">3.</span><a href="design.html" class="nav__link" target="_blank">Design</a>
                </li>
                <li class="nav__item website_item">
                <span aria-hidden="true">4.</span><a href="webDev.html" class="nav__link" target="_blank">Web Design</a>
                </li>
                <li class="nav__item marketing_item">
                <span aria-hidden="true">5.</span><a href="marketing.html" class="nav__link" target="_blank">Online Marketing</a>
                </li>
            </ul>
        </nav>
    </header>

    <main id="main">
        <section aria-label="home" id="home" class="home">
            <h1>Hi, I'm Jack</h1>
            <p class="job-description">I specialize in Design, Online Marketing and Website Development with a focus on responsiveness and accesibility</p>
            <p class="job-title">Software Developer | Freelancer</p>

            <a href="#contact" class="contact__btn">Contact Me!</a>

        </section>

        <section aria-label="services" class="services" id="services">
            <div class="my__services">
                <h2><span aria-hidden="true">1.</span>Services</h2>

                <div class="design">
                  <img loading="lazy" src="Assets/Design-Icon.png" alt="" class="service__icon design_icon">

                  <h3>Design</h3>

                  <p>I pride myself in being able to create eye catching designs for clients, rich in quality and leave a lasting impression on their brands/websites.</p>

                  <a class="btn__service design__btn" href="design.html" target="_blank">View Service</a>
                </div>

                <div class="web__design">
                  <img loading="lazy" src="Assets/WebDev-Icon.png" alt="" class="service__icon webDesign_icon">

                  <h3>Website Development</h3>

                  <p>I am conviced all websites must be easy to find and effortless to use, hence one of my specialities is accessibility. I offer clients fully customised websites that are easy to use and fully responsive.</p>

                  <a class="btn__service web-design__btn" href="webDev.html" target="_blank">View Service</a>
                </div>

                <div class="online__marketing">
                  <img loading="lazy" src="Assets/Marketing-Icon.png" alt="" class="service__icon marketing_icon">

                  <h3>Online Marketing</h3>

                  <p>With the help of Google SEO and social media marketing, I am able to help brands grow and build relationships with their clientele through online marketing platforms.</p>

                  <a class="btn__service marketing__btn" href="marketing.html" target="_blank">View Service</a>
                </div>
            </div>
        </section>

        <section aria-label="work" id="work" class="work">
            <h2><span aria-hidden="true">2.</span> Work</h2>

            <h3>These are some of the things I've built :</h3>

            <div class="projects">

                <div class="project_1">
                    <div class="img_container">
                        <img src="Assets/WebDev-imgs/About-us.jpg" alt="">

                        <a href="https://jack-webdev.github.io/coffeeroasters/" target="_blank" class="viewLive">View Me!</a>
                    </div>

                    <p>Coffeeroasters</p>

                    <a href="https://github.com/Jack-WebDev/coffeeroasters.git" target="_blank" class="viewGit__btn">View Github Repo</a>

                </div>

                <div class="project_2">
                    <div class="img_container">
                        <img src="Assets/WebDev-imgs/SunnySide.jpg" alt="Sunnyside-landing-page">

                        <a href="https://jack-webdev.github.io/Sunnyside_Landing_Page/" target="_blank" class="viewLive">View Me!</a>
                    </div>

                    <p>Sunnyside Landing Page</p>

                    <a href="https://github.com/Jack-WebDev/Sunnyside_Landing_Page.git" target="_blank" class="viewGit__btn">View Github Repo</a>
                </div>

                <div class="project_3">
                    <div class="img_container">
                        <img src="Assets/WebDev-imgs/LoopStudios.jpg" alt="LoopStudios-landing-page">

                        <a href="https://jack-webdev.github.io/LoopStudios_Landing_Page/" target="_blank" class="viewLive">View Me!</a>
                    </div>

                    <p>LoopStudios Landing Page</p>

                    <a href="https://github.com/Jack-WebDev/LoopStudios_Landing_Page.git" target="_blank" class="viewGit__btn">View Github Repo</a>
                </div>

                <div class="project_4">
                    <div class="img_container">
                        <img src="Assets/WebDev-imgs/Fylo.jpg" alt="Fylo-landing-page">

                        <a href="https://jack-webdev.github.io/Fylo_Dark_Landing/" target="_blank" class="viewLive">View Me!</a>
                    </div>

                    <p>Fylo Landing Page</p>

                    <a href="https://github.com/Jack-WebDev/Fylo_Dark_Landing.git" target="_blank" class="viewGit__btn">View Github Repo</a>
                </div>
            </div>

            <a href="webDev.html" target="_blank" class="showMore__btn">See More</a>
        </section>
    </main>

    <footer id="contact">
        <h2><span aria-hidden="true">4.</span>Contact Me</h2>

        <p>I also offer website audits to improve your website's User Interface and User Experience.</p>

        <div class="attribution">
            <div class="icons">
                <a href="https://www.linkedin.com/in/katlego-mabaso-827a88222/" target="_blank"><img src="Assets/LinkedIn-Icon.svg" width="30" height="30" alt="linkedin-icon"></a>
                <img class="whatsapp" src="Assets/WhatsApp-Icon.svg" width="30" height="30" alt="WhatsApp-icon"> <span class="number"> (+27) 67-016-6982</span>
            </div>
            <p>Built &amp; designed by <a href="https://github.com/Jack-WebDev" target="_blank" class="signed">Jack WebDev</a></p>
        </div>
    </footer>

    <section aria-label="Navigation-Menu" class="modal" id="modal">
        <nav class="navbar" id="Mobile__navbar" aria-label="navigation">
            <div aria-label="close-navigation-toggle" role="button" class="close__icon" id="closeIcon" tabindex="0" aria-controls="Mobile__navMenu" aria-pressed="true" aria-expanded="true">
                <div class="bar"></div>
                <div class="bar"></div>
            </div>

            <ul class="nav__menu" id="Mobile__navMenu">
                <li class="nav__item about_item">
                <span aria-hidden="true">1.</span><a href="#services" class="nav__link">Services</a>
                </li>
                <li class="nav__item work_item">
                <span aria-hidden="true">2.</span><a href="#work" class="nav__link">My Work</a>
                </li>
                <li class="nav__item design_item">
                <span aria-hidden="true">3.</span><a href="design.html" class="nav__link" target="_blank">Design</a>
                </li>
                <li class="nav__item website_item">
                <span aria-hidden="true">4.</span><a href="webDev.html" class="nav__link" target="_blank">Web Design</a>
                </li>
                <li class="nav__item marketing_item">
                <span aria-hidden="true">5.</span><a href="marketing.html" class="nav__link" target="_blank">Online Marketing</a>
                </li>
            </ul>
        </nav>
    </section>

    <div class="loader" id="loader">
        <p class="intro"><span>JW</span></p>

        <div class="circle__container">
            <span class="circle"></span>
            <span class="circle"></span>
            <span class="circle"></span>
        </div>
    </div>
</body>
</html>