Portfolio/index.html at main · solvre/Portfolio · 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
<!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">
<meta name="description" content="Solveig Portfolio">
<link rel="stylesheet" href="style.css">
<title> Hei! I'm Solveig </title>
</head>
<body>
    <header>
        <label class="hamburger-menu">
            <input type="checkbox">
        </label>
        <aside class="sidebar">
            <nav>
                <ul>
                    <li>
                        <button id="light-mode-btn">Light Mode 🌞</button>
                        <button id="dark-mode-btn">Dark Mode 🌙</button>
                    </li>
                    <li><a href="aboutMe.html"  class="nav_li">About_Me</a></li>
                    <li><a href="index.html" class="nav_li">Previous_work</a></li>
                    <li><a href="#housemate" class="nav_li">Housemate_HQ</a></li>
                    <li><a href="#selfhelp"  class="nav_li">Self_Help</a></li>
                    <li><a href="#sustainability"  class="nav_li">Sustainability_Diary</a></li>
                </ul>
            </nav>
        </aside>
    </header>
    <main>
        <div class="presentation">
             <div>
                <h1>Solveig Ranøien Engen</h1>
                <p><i>Web Developer Student at NTNU</i></p>
            </div>
            <div>
                <img class="main_profile_image bw" src="img/Me_black_n_white.png" alt="Picture of Solveig in colors">
            </div>
        </div>
        <blockquote>"Go ahead and live with your head held high. No matter how devastated you may be by your own weakness or uselessness…set your heart ablaze." - <i>Kyojuro Rengoku</i></blockquote>
        <div>
            <h2>My previous work:</h2>
            <div class="picture_frame">
                <a href="#housemate"><img src="img/Bachelor_Project_Overview.png" alt="Picture of Housemate HQ's activity related pages"></a>
                <a href="#selfhelp"><img src="img/Self_Help_Light_Main.png" alt="Picture of Self help's main components in dark mode"></a>
                <a href="#sustainability"><img src="img/Sustainability_Diary_Main.png" alt="Picture of sustainability diary's Welcome Page"> </a>
            </div>
        </div>
        <h2 id="housemate">Housemate_HQ</h2>
        <div class="project_slideshow">
            <div class="slide">
                 <img src="img/Bachelor_Project_Overview.png" alt="Overview of Housemate HQ's pages">
                 <div>
                    <h3>What?</h3>
                    <p>Housemate HQ is a tool for student housings to get to know each other in a low stress environment. Essentially it’s a <b>Speed friending</b> application to reach out and match based off of interests and create activities with your new friends.</p>
                 </div>
            </div>
            <div class="slide">
                 <img src="img/Bachelor_Project_Login.png" alt="Picture of Housemate HQ's login related pages">
                 <div>
                    <h3>Why?</h3>
                    <p>As we’ve seen and researched a <b>decrease in attendance</b> for social events and an increase in <b>self-isolation</b>, we wanted to <b>lower the threshhold</b> for reaching out and creating connections. Student housings (Kollektiver) are often in a messy state and we were hoping that by creating a place to increase communication it would be easier to reach out and talk about improvement. </p>
                 </div>
            </div>
            <div class="slide">
                 <img src="img/Bachelor_Project_Friends.png" id="profile_image_too_big" alt="Picture of Housemate HQ's friends related pages">
                 <div>
                     <h3>How?</h3>
                    <p>A Tinder like matching feature where in theory is based off of your location as in student building. You can add friends and invite publicly and privately to social events.</p>
                 </div>
            </div>
             <div class="slide">
                 <img src="img/Bachelor_Project_Profile.png" alt="Picture of Housemate HQ's profile related pages">
                 <div>
                    <h3>How?</h3>
                    <p>A Tinder like matching feature where in theory is based off of your location as in student building. You can add friends and invite publicly and privately to social events.</p>
                 </div>
            </div>
            <div class="slide">
                 <img src="img/Bachelor_Project_Activities.png" alt="Picture of Housemate HQ's activity related pages">
                 <div>
                    <h3>How?</h3>
                    <p>Paired with activity status, the app subtly promote «I’m free and available for a hangout» and makes the process of making plans easier</p>
                 </div>
            </div>
        </div>
        <h2 id="selfhelp">Self_Help</h2>
        <div class="project_slideshow">
            <div class="slide">
                <div>
                    <img src="img/Self_Help_Dark_Main.png" alt="Picture of Self help's main components in dark mode">
                 <img src="img/Self_Help_Light_Main.png" alt="Picture of Self help's main components in light mode">
                </div>
                 <div>
                    <h3>What?</h3>
                    <p>Self_Help is a digitalized activity journal to be used as a tool organizing everyday life. Interactive and user-oriented features support a <b>costumizable template</b> for the user to use for any areas they’d like <b>self improvement</b> on. The site is oriented to focus on root problems, but support custom goals.</p>
                 </div>
            </div>
            <div class="slide">
                <div>
                    <img src="img/Self_Help_Light_Content.png" alt="Picture of Self help's main content text in light mode">
                    <img src="img/Self_Help_Dark_Content.png" alt="Picture of Self help's main content text in dark mode">
                </div>
                <div>
                    <h3>Why?</h3>
                    <p>At the time I was very into reading self-help books. Wanting a companion platform to support my own <b>character developmen</b>t I created Self_Help. As a student myself, students’ wellbeing and mental health is important so I wanted a subtle approach to increase the mental state. Subtle reminder to eat around dinner time paired reminders to go outside and motivational words all have good intentions.  </p>
                 </div>
            </div>
            <div class="slide">
                <div>
                     <img src="img/Self_Help_Light_To_Do_Time.png" alt="Picture of Self help's to do list with clock in light mode">
                     <img src="img/Self_Help_Dark_To_Do_Time.png" alt="Picture of Self help's to do list with clock in dark mode">
                </div>
                <div>
                    <h3>How?</h3>
                    <p>This light and dark mode supported platform is <b>enhanced</b> from the original projectgoals with new technology I learned as the year went by. Now using Web Component to recommend weekly activities from a JSON file it now supports a bigger project.</p>
                </div>
            </div>
            <div class="slide">
                <div>
                     <img src="img/Self_Help_Light_Footer.png" alt="Picture of Self help's footer in light mode">
                    <img src="img/Self_Help_Dark_Footer.png" alt="Picture of Self help's footer in dark mode">
                </div>
                <div>
                    <h3>How?</h3>
                    <p>The pictures featured on the page are not mine! they are taken from Pinterest and is of Ice Bear from the show We Bare Bears</p>
                </div>
            </div>
        </div>
        <h2 id="sustainability">Sustainability_Diary</h2>
        <div class="project_slideshow">
            <div class="slide">
                 <img src="img/Sustainability_Diary_Main.png" alt="Picture of sustainability diary's Welcome Page">
                 <div>
                    <h3>What?</h3>
                    <p>The Digital Sustainability Diary is a tool designed to help students <b>engage </b>with and <b>reflect</b> on the UN's sustainability goals. It allows students to journal about their daily actions and thoughts related to sustainability, helping them explore how their activities align with the sustainability development goals and consider ways to contribute to a more sustainable world.
                    This project was done in collaboration with <a class="groupMembers" href="https://www.cngo.no/">Christopher</a>, <a class="groupMembers" href="https://ninejar.github.io/portfolio/">Ola</a> and <a class="groupMembers" href="https://jorgennonstad.no/">Jørgen</a>
                 </p>

                 </div>
            </div>
            <div class="slide">
                 <img src="img/Sustainability_Diary_HomeScreen.png" alt="Picture of sustainability diary's Home screen">
                 <div>
                    <h3>Why?</h3>
                    <p>The diary was primary built as a <b>learning tool</b> for sustainability. To raise awareness and help reflective learning. As sustainability is a highly relevant goal we aim to contribute to, the page is also built sustainable with conscious choices in terms of image usage. </p>
                 </div>
            </div>
            <div class="slide">
                <div>
                    <img src="img/Sustainability_Diary_Tasks.png" alt="Picture of sustainability diary's Task posted by teacher">
                    <img src="img/Sustainability_Diary_Tasks_Responses.png" alt="Picture of sustainability diary's Task response view">
                </div>
                <div>
                     <h3>How?</h3>
                    <p>The diary fosters a supportive learning environment through teacher-student interaction. Students can choose to share their reflections with teachers, who provide feedback and guidance, enhancing learning without the pressure of grading</p>
                </div>
            </div>
             <div class="slide">
                 <img src="img/Sustainability_Diary_Add.png" alt="Picture of sustainability diary's add reflection note page">
                 <div>
                    <h3>How?</h3>
                    <p>Additionally, the diary empowers students by giving them control over their entries, allowing them to keep reflections private or share them, fostering a sense of autonomy and ownership.</p>
                 </div>
            </div>
        </div>
    </main>
         <footer id="footer">
            <h2 class="aboutMe">나에 대해서 ~</h2>
            <div class="ending">
                <img src="img/Me_Pose_2.png" alt="Mirror selfie of Solveig, full body">
                <p>Thank you for you attention!
                    <br>
                    Mail: solraneng@gmail.com

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