isond.github.io/class-personal-portfolio.html at main · isond/isond.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
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Dianne Ison">
    <meta name="description" content="My portfolio displaying personal and class projects.">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- create new icon -->
    <!-- <link rel="shortcut icon" href="images/glasses-favicon.png" /> -->

    <!-- styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="styles/style.css" type="text/css">

    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Old+Standard+TT&display=swap" rel="stylesheet">
    <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> -->

    <!-- icons -->
    <script src="https://kit.fontawesome.com/c4f8fb0e09.js" crossorigin="anonymous"></script>

    <title>Dianne's Portfolio - User Interaction Software: Personal Portfolio</title>

</head>

<body>

    <p class="h1 text-center" id="name_title"><a class="custom-link" href="index.html">DIANNE ISON</a></p>
    <hr class="mx-auto">

    <!-- navigation bar -->
    <nav class="navbar navbar-expand-md mx-auto">
        <div class="container">
            <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center text-center" id="navbarNav">
                <div class="navbar-nav" id="navbar-content">
                    <a class="navi" href="index.html">PORTFOLIO</a>
                    <a class="navi" href="about.html">ABOUT</a>
                </div>
            </div>
        </div>
    </nav>

    <hr class="mx-auto">

    <!-- breadcrumbs -->
	<div class="container custom-container">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb " style="background-color: #ffffff;">
			  <li class="breadcrumb-item"><a href="index.html">PORTFOLIO</a></li>
			  <li class="breadcrumb-item active" aria-current="page">User Interaction Software: Personal Portfolio</li>
			</ol>
		</nav>
	</div>

	<!-- actual contents -->
	<div class="container custom-container">
		<img src="images/inf133.png" class="img-fluid mx-auto d-block" alt="...">

        <div class="project text-center mt-5">
            <a class="info" target="_blank" href="https://isond.github.io/class-personal-portfolio/">VISIT PROJECT</a>
        </div>

        <hr class="mx-auto mt-5 custom-hr">

		<p class="h2 pt-4">Personal Portfolio</p>
		<p class="text-justify">
            For my User Interaction Software class, we were required to create a personal portfolio.
            The assignment was open-ended meaning we could include whatever works we wanted and we had freedom
            on how to design the website. However, we were required to make it responsive so that it would adapt
            to various screen dimensions.
        </p>

        <p class="text-justify">
            My portfolio was built using HTML and CSS as well as Bootstrap to deal with the responsiveness.
            The portfolio section of my website showcased my projects from hackathons and classes and it also
            showcased personal works I made using Photoshop.
        </p>

        <p class="text-justify">
            Each project was shown as a Bootstrap card that had a preview image of the project, a short description,
            and a button that would allow the use to view the project in full. Depending on the project, the button
            would either lead to the appropriate website where it was located or have a modal pop up to show the
            full image of the work.
        </p>
        <p class="text-justify">
            I also wanted to include a fixed side bar on the left side of the website. There would be an icon image
            at the top with my name and below that was the navigation. At the very bottom of the sidebar were links
            to other websites where people could find me.
            When viewing this on mobile the sidebar would become a navigation menu at the top of the page. However,
            the links to find me on other websites would become a footer when on mobile.
        </p>

		<p class="h2 pt-3">Technologies Used</p>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>Bootstrap</li>
        </ul>
	</div>

    <!-- footer -->
    <footer class="footer mt-5 py-3 text-center">
        <div class="container">
            <span class="text-muted">isond ✤ 2020</span>
        </div>
    </footer>


    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


</body>

</html>