founders_coders_web_developer/index.html at main · annavanwingerden/founders_coders_web_developer · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Anna x FAC </title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Yrsa:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>

    <div id="loading-screen">
        <div id="loading-text"></div>
        <img src="images/anna/dungarees.png" alt="Loading Image" id="loading-image">
        <div id="loading-bar-container">
            <div id="loading-bar"></div>
        </div>
    </div>

    <div class = "container" id="home">
        <h1 class="logo">
            <img src="images/anna/dungarees.png" alt="Logo">
        </h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#software">Software</a></li>
        <li><a href="#learning">Learning</a></li>
        <li><a href="#fac">Founders and Coders</a></li>

      </ul>
    </nav>
</div>

<main class ="content">
<div class = "header-banner">
    <div class = "header-banner-content">
      <div class = "banner-line"></div>
      <h1 class = "banner-title">
        <span>Anna van Wingerden</span>
        <span>Product Analyst & Future Software Developer</span>
      </h1>
    </div>
    <img src = "images/longboarder.gif" alt = "about image">
  </div>

  <div class = "about-wrapper" id = "about">
    <div class = "about-wrapper-left">
        <img src = "images/anna/programmer.png" alt = "about image">
    </div>

    <div class = "about-wrapper-right">
      <h2>About Me</h2>
      <p class = "text-light">I work in early-stage startups, and have been very lucky to work closely with developers. </p>
      <p class= "text-light">In my last role, I was responsible for QA'ing all product releases.
        I learnt how to speak the language of devs - and how clear feedback could prevent bugs that would affect the user experience.</p>

        <p> In my current role, I've built a couple of streamlit web apps in python.

        My first app was a quick protoype which was used in a demo, whilst my second was an internal
        tool which saves my team time on a weekly basis.</p>
    </div>
</div>

    <div class = "about-sec-underline"></div>

    <div class = "about-wrapper-2" id = "software">
        <div class = "about-wrapper-2-left">
            <h2>Why Software Development? </h2>
            <p class = "text-light">I’m constantly impressed by how the the people I work with create products from lines of code. </p>

            <p class = "text-light"> I’d love to be able to do that and recently I’ve learnt how to. </p>

            <p class = "text-light"> I’ve tried to code in the past - but let fear get the better of me. In the last six months, I've learnt to throw all caution to the wind and just build stuff. </p>
          </div>

        <div class = "about-wrapper-2-right">
            <img src = "images/anna/computer.png" alt = "about image">
        </div>
    </div>

        <div class = "about-sec-underline"></div>

        <div class = "title" id = "learning">
            <h2 class = "title-text">How I've Learnt HTML, CSS & Javascript</h2>
        </div>

        <div class = "about-wrapper-3">

            <!-- single item -->
            <div class = "about-item">
                <h2 class = "about-title">Portfolio</h2>
                <p class = "text-light">I followed a tutorial on how to use next.js - and then built a portfolio website.</p>
                <a href = "https://anna-portfolio-theta.vercel.app/" class = "about-btn" target ="_blank">see it</a>
            </div>
            <!-- end of single item -->
                <!-- single item -->
            <div class = "about-item">
                <h2 class = "about-title">Weather App</h2>
                <p class = "text-light">I followed a tutorial on how to build a weather app. I plan to adapt this for my skating crew so we know the weather of our fav spot in Hyde Park.</p>
                <a href = "https://js-weather-app-theta.vercel.app/" class = "about-btn" target ="_blank">see it</a>
            </div>
            <!-- end of single item -->
            <!-- single item -->
            <div class = "about-item">
                <h2 class = "about-title">Quiz</h2>
                <p class = "text-light">I built a simple quiz game as part of CFG’s Intro to Javascript, with a partner.</p>
                <a href = "https://cfg-js.vercel.app/" class = "about-btn" target ="_blank">see it</a>
            </div>
            <!-- end of single item -->
        </div>

        <div class = "fac" id = "fac">
            <div class = "fac-left">
                <img src = "images/facweb.png" alt = "about image">
            </div>

            <div class = "fac-right">
            <h2>Why Founders and Coders</h2>
            <p class = "text-light">I believe that joining your program will accelerate my learning process for the following reasons:</p>
                <li>I know from experience that I learn best with others I can brainstorm with. I've loved being part of the Founders and Coders discord, and seeing what other people are learning.  My co-learners have helped me to explore new tools - for example, encouraging my exploration with APIs.</li>
                <li>Slightly harder deadlines will benefit me. I’ve started many projects, but the number I’ve finished is significantly lower. </li>
                <li>From reviews and researching the career paths of Founders and Coders alumni - I know that it's a good programme and that it will help me to move into a more technical role. </li>
            </div>
        </div>
</main>


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