SiddonsD.github.io/index.html at main · SiddonsD/SiddonsD.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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Denise Siddons</title>
    <link rel="stylesheet" href="assets/style/styles.css">
    <script src="menu.js"></script>
</head>
<body>
    <header>
        <div class="sticky" id="navbar">
        <img id="logo" src="assets/images/ds_logo.svg" alt="Logo">
            <nav>
                <div class="right-sidebar-floated-blocks">
                    <div class="topnav">
                        <a href="https://siddonsd.github.io/">Home</a>
                        <a href="https://siddonsd.github.io/portfolio">Portfolio</a>
                        <a href="#">Digital Garden</a>
                        <a href="#">Blog</a>
                        <a href="#">Contact</a>
                    </div>
                <div class="mobilenav">
                    <label>
                        <input type="checkbox">
                        <span class="menu"><span class="hamburger"></span></span>
                        <ul>
                            <li> <a href="https://siddonsd.github.io/">Home</a> </li>
                            <li> <a href="https://siddonsd.github.io/portfolio">Portfolio</a> </li>
                            <li> <a href="#">Digital Garden</a> </li>
                            <li> <a href="#">Blog</a> </li>
                            <li> <a href="#">Contact</a> </li>
                            <a href="https://linkedin.com/in/denisesiddons"><img src="assets/images/linkedin_b.png" alt="LinkedIn_icon"></a>
                            <a href="https://github.com/SiddonsD"><img src="assets/images/github_b.png" alt="Github_icon"></a>
                        </ul>
                    </label>
                 </div>
            </div>
        </div>
        </nav>
    </header>
    <section id="hero">
        <div class="content">
        <div class="gradient-background-teal">
            <div class="main-wrap">
                <div class="main-content">
                    <img id="hero-image" src="assets/images/hero.png" alt="Hero Image composition featuring mixed media">
                </div>
            </div>
            <div class="right-wrap">
                <div class="right-sidebar">
                    <div class="hero-text">
                    <span class="title-dark">
                        aspiring developer, analytical problem solver, data enthusiaist, lover of all things creative design, believer in the power of continuous learning.<br><br>
                        </span>
                        <span class="sub-title">
                        I am all about embracing life, getting things done and having fun along the way.<br><br>
                        One line of code at a time... <br><br>
                        Let's connect and make things happen!</span>
                    <a href="" class="button">Let's Work Together</a>
                </div>
            </div>
        </div>
    </div>
    </section>
        <section id="bio">
            <div class="bio">
                <div class="bio-main-wrap">
                    <div class="bio-main-content">
                        <p>
                            <span class="title-dark">Hi, I'm Denise.</span><br><br>
                            <span class="sub-title">
                            An aspiring full stack web developer in Perth, Western Australia.<br><br>
                            My journey into the coding world has been a tad unconventional, given a background in marketing communications
                            and change management is not your typical developer pathway. <br><br>Whilst it might seem an odd pairing on the surface,
                            the combination of being able to understand the target audience, engage stakeholders and a healthy appreciation for
                            practical creative design brings a unique perspective to the table.<br><br>
                            For me, this is where the magic happens. Building digital experiences people love to interact with. I am incredibly fortunate
                            to be part of the 2023 She Codes Australia Plus Cohort where I am working to elevate my creative skills with
                            technical panache.<br><br>
                            Online, I can be found on the usual platforms as well as a very occasionally tended digital garden -
                            it's a small space on the web I explore where my curiosity takes me. And much like me, a work in progress.<br><br>
                            When not basking in the glow of my laptop screen, I can be found playing hometown tourist, exploring all the delightful
                            new additions to our local small bar and café scene, dreaming up an overseas trip (because the post-Covid travel fomo is real),
                            or doing culinary experiments in the kitchen with moderate success.<br><br>
                        </span><br>
                        <a href="" class="button">Download Resume</a>
                    </p>
                </div>
            </div>
            <div class="bio-right-wrap">
                <div class="bio-right-sidebar">
                <img id="profileimg" src="assets/images/profile.png" alt="Author's profile image">
            </div>
        </div>
</div>
</div>
</section>
    <section class="Experience">
        <article class="Experience">
            <div class="gradient-background-teal">
            <h1 class="experience-title title-dark">Experience</h1>
              <div class="flex-container">
                <div class="flex-items" id="flex-item_1">
                    <div class="flex-item-content">
                    <img class="cardimg" src="assets/images/webdev.gif" alt="animated icon of a website wireframe"/>
                    <h3><b>Web <br> Development</b></h3>
                </div>
            </div>
                <div class="flex-items" id="flex-item_2">
                    <div class="flex-item-content">
                    <img class="cardimg" src="assets/images/digital.gif" alt="animated icon of a computer monitor and mobile device"/>
                    <h3><b>Digital</b></h3>
                </div>
            </div>
                <div class="flex-items" id="flex-item_3">
                    <div class="flex-item-content">
                    <img class="cardimg" src="assets/images/design.gif" alt="animated lightbulb flashing on"/>
                    <h3><b>Design</b></h3>
                </div>
            </div>
                <div class="flex-items" id="flex-item_4">
                    <div class="flex-item-content">
                    <img class="cardimg" src="assets/images/marketing.gif" alt="animated target with arrow hitting bullseye"/>
                    <h3><b>Marketing</b></h3>
                </div>
            </div>
            </div>
            </div>
        </article>
    </section>
    <section class="projects">
        <div class="gradient-background-blue">
        <h1 class="title-light">Projects</h1>
        <div class="scrolling_container">
          <article class="project_card" id="scroll_project_1">
            <img class="projectimg" src="assets/images/project.jpg" alt="Project 1">
            <h3>Project Name</h3><br/>
            <h5>Work Category</h5>
            <p>Going forward, we should leverage the asset. Harness
               the plan and markets. Actualize skillsets to achieve optimal goals.
            </p>
            <button><a href="">View Project</a></button>
          </article>
          <article class="project_card" id="scroll_project_2">
            <img class="projectimg" src="assets/images/project.jpg" alt="Project 2">
            <h3>Project Name</h3><br/>
            <h5>Work Category</h5>
            <p>Going forward, we should leverage the asset. Harness
               the plan and markets. Actualize skillsets to achieve optimal goals.
            </p>
            <button><a href="">View Project</a></button>
          </article>
          <article class="project_card" id="scroll_project_3">
            <img class="projectimg" src="assets/images/project.jpg" alt="Project 3">
            <h3>Project Name</h3><br/>
            <h5>Work Category</h5>
            <p>Going forward, we should leverage the asset. Harness
               the plan and markets. Actualize skillsets to achieve optimal goals.
            </p>
            <button><a href="">View Project</a></button>
          </article>
        </div>
      </div>
      </section>
    <section class="contact">
        <form action="https://formspree.io/f/maygajgq" method="POST">
            <h1>Get in Touch</h1>
            <div class="field-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" placeholder="Your Name">
            </div>
            <div class="field-group">
                <label for="email">Email</label>
                <input type="text" id="email" name="email" placeholder="Your Email">
            </div>
            <div class="field-group">
                <label for="mobile">Mobile</label>
                <input type="text" id="mobile" name="mobile" placeholder="Your Mobile">
            </div>
            <div class="field-group">
                <label for="message">Message</label>
                <textarea id="message" name="message" placeholder="Your Message"></textarea>
            </div>
            <input type="submit" value="Submit" class="button">
            </div>
        </form>
    </section>
    <section id="footer">
            <nav class="navfoot">
                <article class="column" id="column-1">
                    <a href="">Home</a>
                    <a href="">Portfolio</a>
                    <a href="">Digital Garden</a>
                    <a href="">Blog</a>
                    <a href="">Contact</a>
                    </article>
                <article class="column" id="column-2">
                    <a href=""><img src="images/icon_nav.png" alt="Back to top"></a>
                    <h3>0414 463 644</h3>
                    <a href=""><img src="assets/images/linkedin.png" alt="LinkedIn" class="socialicon"></a>
                    <a href=""><img src="assets/images/github.png" alt="GitHub" class="socialicon"></a>
                    <a href=""><img src="assets/images/behance.png" alt="Behance" class="socialicon"></a>
                </article>
                    <h6>copyright 2023</h6>
                </div>
            </nav>
        </section>
</body>
</html>