blakerach1.github.io/portfolio-project-one.html at main · blakerach1/blakerach1.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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HMTL & CSS Project</title>
    <link rel="stylesheet" href="general-styles.css">
    <link rel="stylesheet" href="project-one-styles.css">

</head>

<header>
    <nav class="navbar">
        <a href="#" class="nav-branding"><img id="ant-eater" src="icons/ant-eater.svg"></a>
        <ul class="nav-menu">
            <li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
        </ul>
    </nav>

    <h1>Portfolio Website</h1>
    <p>Using HTML & CSS</p>
</header>

<body>

    <div class="picture-boxes">

        <div class="project-overview">
            <h2>Project Overview</h2>
            <p>The objective of this project was to use HTML and CSS to build a website containing a portfolio of my own
                projects.
                A key consideration for this project was website responsiveness and accessibility.
                As the first of many SheCodes projects, this is the first iteration of the project. Over the duration of
                the SheCodes program, new learnings will support continual improvements to the portfolio site.
            </p>
            <p>
                The project incorporates modern design features such as flexbox, interactive hamburger menu, external
                link popups and form submission functionality. The portfolio website is designed for ease of navigation
                and enhanced user experience.
            </p>
            <a href="https://github.com/blakerach1/blakerach1.github.io" target="_blank" id="externalLink">View
                Project
                Code</a>
        </div>

        <div class="picture-box">
            <img id="header-screenshot" src="images/portfolio-project-header.PNG"
                alt="website header section screenshot">
        </div>
        <div class="picture-box">
            <img id="about-screenshot" src="images/about-section-pic.PNG" alt="website about section screenshot">
        </div>
        <div class="picture-box">
            <img id="bio-screenshot" src="images/bio-section-pic.PNG" alt="biography section screenshot">
        </div>
        <div class="picture-box">
            <img id="projects-mob-screenshot" src="images/projects-section-mob.PNG"
                alt="projects section mobile view screenshot">
        </div>
        <div class="picture-box">
            <img id="projects-web-screenshot" src="images/projects-section-web.PNG"
                alt="projects section web view screenshot">
        </div>
        <div class="picture-box">
            <img id="contact-screenshot" src="images/contact-form-web.PNG" alt="contact form section screenshot">
        </div>

    </div>

    <footer>
        <div class="footnote">
            <p>RACHEL BLAKE <span class="highlight">&copy; 2023</span></p>
        </div>
    </footer>


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

</body>

</html>