Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lab1 submission #3

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+98 −105
Open

Lab1 submission #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 19 additions & 29 deletions static/css/introHCI.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,24 @@
/* applies to anything of class "example-class-selector" */
.example-class-selector {
margin-top: 2em;
body{
background:#FFF;
color:#555;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}

/* applies to any <p> descendants of an element of class "example-class-selector" */
.example-class-selector p {
/* Colors are in hexadecimal: http://www.colorpicker.com/ */
color: #CC00AA;
}

/* this style exists to make it obvious that you've successfully linked
the CSS to the page. feel free to remove it once the link is working. */
body {
border: 1px dotted gray;
padding: 20px;
}
#main-header{
text-align:center;
background-color:black;
color:white;
padding:8px;
}

.jumbotron {
position: relative;
background: none;
#main-footer{
text-align:center;
font-size: 18px;
}

.jumbotron:after {
content:"";
background: url("http://lorempixel.com/1140/283");
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
#my-image{
align-self:right;
}
Binary file added static/images/my_pic.JPG
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
155 changes: 79 additions & 76 deletions static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,84 @@
<!doctype html>

<!DOCTYPE html>
<html>
<head>
<title>HCI Project Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- this is a comment in HTML -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<title>HTML Website</title>
<meta name="description" content = "Personal Website">
<link href = "css/introHCI.css", rel = "stylesheet">

</head>
<body>
<div>
<!-- h1 through h6 are headers. The higher the number, the smaller the header -->
<!-- p means paragraph -->
<div>
<h1>Scott Klemmer</h1>
<p>human-computer interaction &middot; social computing &middot; crowdsourcing</p>
</div>


<h4>Projects</h4>
<!-- divs are invisible structuring elements that stack vertically by default. Use them to organize your code -->
<!-- img tags are images. Lorem Pixel will deliver random images; handy! -->
<!-- a are anchors, also known as hyperlinks. Use the href attribute to tell the browser where to go when the user clicks -->
<div id="project1">
<a href="project.html">
<img src="images/lorempixel.people.1.jpeg" alt="Lorem Pixel image">
<p>Waiting in Line</p>
</a>
</div>
<div id="project2">
<a href="project.html">
<img src="images/lorempixel.city.1.jpeg" alt="Lorem Pixel image">
<p>Needfinding</p>
</a>
</div>
<div id="project3">
<a href="project.html">
<img src="images/lorempixel.technics.1.jpeg" alt="Lorem Pixel image">
<p>Prototyping</p>
</a>
</div>
<div id="project4">
<a href="project.html">
<img src="images/lorempixel.abstract.1.jpeg" alt="Lorem Pixel image">
<p>Heuristic Evaluation</p>
</a>
</div>
<div id="project5">
<a href="project.html">
<img src="images/lorempixel.abstract.8.jpeg" alt="Lorem Pixel image">
<p>Visualization</p>
</a>
</div>
<div id="project6">
<a href="project.html">
<img src="images/lorempixel.people.2.jpeg" alt="Lorem Pixel image">
<p>Social design</p>
</a>
</div>
<div id="project7">
<a href="project.html">
<img src="images/lorempixel.technics.2.jpeg" alt="Lorem Pixel image">
<p>Gestural interaction</p>
</a>
</div>
<div id="project8">
<a href="project.html">
<img src="images/lorempixel.city.2.jpeg" alt="Lorem Pixel image">
<p>Design tools</p>
</a>
</div>
</div>
<header id = "main-header">
<h1>Jialun Sun's Website</h1>
</header>

<a href="https://www.linkedin.com/in/jialun-sun-092b791b8">
Go to LinkedIn</a>

<a href= "SJL.jpg">
<img id = "my-image" src = "images/my_pic.jpg" width="150" style = "float:right">
</a>

<section>
<article class = "post">
<h4>Experience</h4>
<h5>Instructional Apprenticeship at the Department of Cognitive Science UCSD</h5>
<small>Oct 2020 ~ Dec 2020</small>
<p>Teaching leading discussions, grading, formulating exam questions, attending meetings and lectures, and holding office hours.</p>

<article class = "post">
<h5>Assistant Director at Shanghai Media Group 7/1/2019 ~ 7/26/2019</h5>
<small>7/1/2019 ~ 7/26/2019</small>
<p>
During the term of the internship, collecting content from previous recordings and incorporating them into new documentaries. In addition to that, I worked as a translator to add English subtitles to a documentary from BBC.

</p>

</article>

<article class = "post">
<h4>Education</h4>
<p>
University of California, San Diego (UCSD) B.S. Cognitive Science with spec in Design & Interaction</p>
<small>[GPA: 3.65/4.0 | Expected Graduation: June 2022]</small>

</article>

<article class = "post">
<h4>Skills</h4>
<p> Programming language(Proficient):Pythpn</p>
<p>Programming language(Familiar):MATLAB,Java, HTML/CSS, SQL</p>
<p>Graphic User Interface: Tkinter</p>
<p>Prototype: Paper prototype, Low-fidelity mock-ups </p>
<p>Graphic User Interface: Tkinter</p>
<p>Web Development: Ajax, JSON</p>
<p> UX Research: A/B testing</p>

</article>

<article class = "post">
<h4>Award</h4>
<small>-June 2020</small>
<p> Provost Honor for student with Excellent Standingat University of California, San Diego </p>



</article>


</section>

<aside>
<h3>Projects</h3>
<nav>
<ul>
<li><a href="https://github.com/j7sun/Portfolio/tree/master/Project_SanDiego_Analysis">Data Analysis project using Pandas and Python</a></li>
<li><a href="https://github.com/j7sun/Portfolio/tree/master/Project_Security_Box">Security box simulator using Tkinter and Python</a></li>
</ul>
</nav>
</aside>

<footer id = "main-footer">
<p>Copyright &copy; 2020,My Website</p>
</footer>
</body>
</html>
</html>