vkathryn.github.io/index.html at main · VKathryn/vkathryn.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Portfolio - Home</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <style>
        body {
            background-color: white;
        }
        footer {

            background-color: white;
        }
        #myLinks {
            max-width:450px;
        }
        .navbar {
            background-color: #4681f8;
        }
        .background {
            width: 100%;
            background-color: white;
        }

        .list-group-item, .list-group-item.disabled {
            background-color: #8fcd13;
        }
        .list-group-item.active {
            background-color: white;
        }
        a.list-group-item.list-group-item-action:hover {
            color: #6ea268;
        }
    </style>
</head>
<body>
    <!-- This is your navigation bar. See: https://getbootstrap.com/docs/4.0/components/navbar/-->
    <nav class="navbar navbar-expand-sm navbar-light">
        <div class="container">
            <!-- Here is where you will add your name -->
            <a class="navbar-brand" href="#">Vanessa Bastien</a>
            <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
                <ul class="navbar-nav ml-auto mt-lg-0">
                    <!-- In each list item (li) is where your links go -->
                    <li class="nav-item active">
                        <!-- This is a link -->
                        <a class="nav-link" href="index.html" disabled>Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <!-- This is a link -->
                        <a class="nav-link" href="work.html">Work</a>
                    </li>
                    <li class="nav-item">
                        <!-- This is a link -->
                        <a class="nav-link" href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="background">
        <!-- The container contains the grid, which is where you will want to place all of your body content. The grid has 12 columns per row. One full row of content is 12 columns. 2 content columns are 6 each. 4 content columns are 3 per. And 6 content columns are 2 each. See: https://getbootstrap.com/docs/4.0/layout/overview/
        <Main> tags are like <div> tags but tell google what kind of content is inside. Only 1 main tag per page. -->
        <main class="container">
            <div class="row">
                <!-- This column takes up 50% of the page:
                Note: Columns in a row need to add up to 12! -->
                <div class="col-md-6 col-sm-12 mt-3">
                    <!-- <Header> tags are like <div> tags, but tell google what kind of content is inside. This is called Semantic HTML. Only 1 header tag per page. -->
                    <!-- <header><h1>Welcome to My Portfolio!</h1></header> -->
                    <div id="aboutMe">
                        <!-- Heading tags, or <H#> tags, are not the same as <Header>. They go from H1-H6 in order of what is important on your page. Typically, you will have 1 <h1> tag on a page, and multiple h2-h6 tags depending on your content. -->
                        <h3>About Me</h3>
                        <!-- The <p> tag is used to designate paragraphs of text -->
                        <p class="myText">
                            I am a full stack web developer currently studying at LEARN Academy. I am a life-long maker, traditionally using physical materials to craft clothing, scarves and jewelry, transitioning to using my hands to write functional, clean code! The written word has always been a great passion of mine, and coding allows me to explore it in a brand new way. When I'm not writing, I can be found trying new restaurants, spending time with my family, or sewing up a new pattern. Previously I have worked in digital marketing, and before that higher education with a focus on financial aid. Helping people is so fulfilling, and I would love to help you with all of your web development needs!
                        </p>
                        <!-- <h3>My Projects</h3>
                        <p class="myText">
                            Nothing to see here...yet!
                        </p> -->
                    </div>
                </div>
                <!-- This column takes up 50% of the page-->
                <div class="col-md-6 col-sm-12 mt-3 mb-3">
                    <div id="myImage">
                        <!-- This is an image tag. Add a description of your image to the alt tag so that Google know what the image is. -->
                        <img src="assets/images/VanessaBastien.jpg" alt="Vanessa Bastien Profile Image" height="auto" width="100%">
                    </div>
                    <div id="myLinks">
                        <!-- This is a list group. Even though we are not using <ol>, <ul>, or <li> we can still create a list group using classes. See: https://getbootstrap.com/docs/4.0/components/list-group/-->
                        <div class="list-group list-group-flush mt-2">
                            <!-- These are list items. -->
                            <a href="https://github.com/VKathryn" class="list-group-item list-group-item-action">
                                github.com/VKathryn
                            </a>
                            <a href="https://linkedin.com/in/vanessabastien" target="_blank" class="list-group-item list-group-item-action">linkedin.com/in/VanessaBastien</a>
                            <a href="mailto:vkbastien@gmail.com?subject=Coming From Your Website" target="_blank" class="list-group-item list-group-item-action">vkbastien@gmail.com</a>
                            <!-- <a href="tel:5555551212" class="list-group-item list-group-item-action">(555) 555-1212</a> -->
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <!-- This is a <footer> tag which is another semantic HTML tag that tells google that the content inside is the last part of the website layout. We add a class of mt-3 which stands for margin-top, and how far from the top we put the margin. This number can go from 1-5. --->
    <footer>
        <div id="footerContent">
            <!-- This is a horizontal rule. It creates a line that spans across the whole page -->
            <p class="text-center mt-3">Vanessa Bastien &copy; 2022</p>
        </div>
    </footer>

</body>
</html>