dylanbun.github.io/index.html at main · dylanbun/dylanbun.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
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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

    <!--
      TODO

      Upload your Unemployable (or whatever photo you like) to the assets/images folder
      and change the name of the image below to match the uploaded one

      Change the title in the <title> tag to whatever you would like the title of your portfolio to be

      This should be the same across all pages.
     -->
    <link rel="icon" href="./assets/images/3939.png" />
		<title>dbunarto's website</title>
    <meta name="description" content="A compilation/blog of my work.">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

		<link rel="stylesheet" href="./css/layout.css">
    <link rel="stylesheet" href="./css/typography.css">
    <link rel="stylesheet" href="./css/utilities.css">

		<script defer src="./js/script.js"></script>
	</head>
	<body>
    <!-- NAVBAR -->
    <div class="navbar">
      <a class="nav-title-link" href="./">
        <span class="nav-title">dbunarto - au23 edition</span>
        <a class="button" href="mailto:dbunarto@cs.washington.edu">
          <span class="button-text">Contact Me</span>
        </a>
      </a>
    </div>

    <!-- MAIN PAGE CONTENT -->
    <div id="main-content">

      <!-- PORTFOLIO HEADER -->
      <div id="portfolio-header">
        <div id="portfolio-header-image-container">
          <!--
            TODO

            - Change the img "src" attribute to point to the Unemployable image you uploaded (or whatever image).
            - Change the number to point to your Unemployable & replace the OpenSea link with your own
            - If you aren't using an Unemployable as your image, remove the entire "a" element
          -->
          <img src="./assets/images/3939.png" class="portfolio-header-image">
          <a class="no-underline" target="_blank" href="https://opensea.io/assets/ethereum/0xe0be388ab81c47b0f098d2030a1c9ef190691a8a/3939">
            <span class="image-caption">I do not own this NFT, I just think it's a cool art piece.</span>
          </a>
        </div>

          <!--
            TODO

            - Change the main-title to whatver you want
            - Change the body-text after that to a quick introduction to what you do
            - Edit the button text if you feel like it. It will link to the projects section below.
          -->
        <div id="portfolio-header-text-container">
            <div class="header-text">
              <span class="main-title">Hey, I'm Dylan!</span>
            </div>
            <a class="button" id="my-work-link">
              <span class="button-text">Check out what I have been up to</span>
              <image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
            </a>
        </div>
      </div>

      <!-- ABOUT SECTION -->
      <!--
        TODO

        - Change the subheader-text to whatever header you want
        - Add paragraphs using the <div class="body-text"></div> elements in the "about-section-content"
      -->
      <div id="about-section">
        <span class="subheader-text">My Background / About Me</span>
        <div class="about-section-content">
          <div class="body-text">I am a senior majoring in computer science and minoring in nutrition and math! I work as an undergraduate research assistant for Project Sidewalk in the Makeability Lab, where the majority of my work revolves around improving the architecture of the databases for optimization and data collection.
            Additionally, I am working with <a href="https://jaewook-lee.com/">Jae Lee</a> and other students on an AR project to provide visual saliency for low vision users in sports.
          </div>


          <div class="body-text">At the moment I am applying for graduate school with an interest in HCI, ML and CV!
            Below you can learn more about my work and coursework if interested!</div>
        </div>
      </div>

      <!-- PROJECTS / MY WORK SECTION -->
      <div id="my-work-section">
        <!-- TODO - Change the subheader-text to whatever you want the Projects section header to say -->
        <span class="subheader-text">My Research and Projects</span>

        <div class="projects-container">
          <!--
            TODO

            This is where the project cards live. Here's a base level project card for you to copy:
            <div class="project-card">
              <img src="./assets/images/IMAGE_NAME" class="project-image">
              <div class="project-card-text-container">
                <div class="subheader-text project-title">PROJECT_NAME</div>
                <div class="body-text project-card-text">SMALL_PROJECT_DESCRIPTION</div>
              </div>
              <a class="button" href="./project-pages/PROJECT_PAGE_NAME.html">
                <span class="button-text">Read More</span>
                <image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
              </a>
            </div>

            - To add a project to the this area, copy the above, paste it below this comment, and change the following:
                - IMAGE_NAME: the name of the image file in assets/images
                - PROJECT_NAME: the name of the project (keep it short, it only shows 1 line)
                - SMALL_PROJECT_DESCRIPTION: a quick project description (max 4 lines)
                - PROJECT_PAGE_NAME.html: the html filename for the project (must be in project-pages folder)
          -->
          <div class="project-card">
            <img src="./assets/images/code.jpeg" class="project-image">
            <div class="project-card-text-container">
              <div class="subheader-text project-title">Courses Taken</div>
              <div class="body-text project-card-text">Due to popular request as a mentor, below is all of the courses I have taken (so far) and my thoughts on them!</div>
            </div>
            <a class="button" href="./courses_taken.html">
              <span class="button-text">Read More</span>
              <image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
            </a>
          </div>
          <div class="project-card">
            <img src="./assets/images/desktop.jpeg" class="project-image">
            <div class="project-card-text-container">
              <div class="subheader-text project-title">Project Sidewalk</div>
              <div class="body-text project-card-text">Currently I am working as an developer for Project Sidewalk, working on the databases component on this project.</div>
            </div>
            <a class="button" target = "_blank" href="https://sidewalk-sea.cs.washington.edu/">
              <span class="button-text">Learn more here</span>
              <image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
            </a>
          </div>
          <div class="project-card">
            <img src="./assets/images/sketchbook.jpeg" class="project-image">
            <div class="project-card-text-container">
              <div class="subheader-text project-title">AP Research Paper</div>
              <div class="body-text project-card-text">A meta-analysis paper analyzing the literature and implications regarding demographic trends in computer science education due to the tech-boom in the 2010s. Focused just on Washington state high school versus college education. Received a 4 on this paper. </div>
            </div>
            <a class="button" target = "_blank" href="https://drive.google.com/file/d/12e4XIKpHblHNmYUb-u3h7ET0f_rHJuGl/view?usp=sharing">
              <span class="button-text">Read the paper here</span>
              <image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- FOOTER -->
    <div id="footer">
      <a class="icon-link" target="_blank" href="https://www.linkedin.com/in/dylan-bunarto-b4b9851ab">
        <image src="./assets/icons/linkedin.svg" class="footer-icon"/>
      </a>
      <a class="icon-link" target="_blank" href="https://twitter.com/dylanbunarto">
        <image src="./assets/icons/twitter.svg" class="footer-icon"/>
      </a>
      <a class="icon-link" href="mailto:dbunarto@cs.washington.edu">
        <image src="./assets/icons/mail.svg" class="footer-icon"/>
      </a>
    </div>

	</body>
</html>