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

Cheetahs-Wanjun Lan #97

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Cheetahs-Wanjun Lan #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
78b128a
homepage outline with css and flexbox
wjlan Nov 18, 2022
237f23d
body font-size adjustment
wjlan Nov 18, 2022
f80bb07
Draft page About with Grid
wjlan Nov 20, 2022
e3c024b
minor change about Home page
wjlan Nov 20, 2022
58e9b61
About page completed
wjlan Nov 21, 2022
a7b576f
Portolio drafted
wjlan Nov 22, 2022
2181353
Basically completed
wjlan Nov 22, 2022
32dd774
checked by HTML validator
wjlan Nov 22, 2022
6fc2a3d
adjust the relative view
wjlan Nov 23, 2022
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}
Binary file added assets/ABOUT+ME+LOGO.png
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.
Binary file added assets/Christmas.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.
Binary file added assets/Disney.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.
Binary file added assets/Divider-1.png
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.
Binary file added assets/Facebook.png
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.
Binary file added assets/Fuji.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.
Binary file added assets/Instagram.png
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.
Binary file added assets/Italy.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.
Binary file added assets/Karuizawa.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.
Binary file added assets/Kawagoe.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.
Binary file added assets/LinkedIn.png
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.
Binary file added assets/Paris.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.
Binary file added assets/Project-icon.png
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.
Binary file added assets/Sakura.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.
Binary file added assets/Twitter.png
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.
Binary file added assets/WanjunLan_profile_photo.png
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.
95 changes: 93 additions & 2 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,100 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>About Me</title>
<link href="styles/style.css" rel=Stylesheet>
</head>
<body>
<body>
<header class="about-header">
<nav class="ss-bg">
<ul id="menu" class="about-menu">
<li><a href="http://127.0.0.1:5502/pages/index.html"><h3>Home</h3></a></li>
<li><a href="http://127.0.0.1:5502/pages/about.html"><h3>About</h3></a></li>
Comment on lines +14 to +15
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These links do not work. We should use relative paths to reference other pages, similar to what you have on line 16 to get to the assets. Here is a great resource on absolute vs relative paths: https://www.geeksforgeeks.org/absolute-relative-pathnames-unix/

<li><img id="About-me-logo" alt="logo" src="../assets/ABOUT+ME+LOGO.png"></li>
<li><a href="http://127.0.0.1:5502/pages/portfolio.html"><h3>Portfolio</h3></a></li>
<li><a href="https://www.linkedin.com/in/wanjun-lan/"><h3>Contact</h3></a></li>
</ul>
</nav>
</header>
<div id="div-grid">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems there are a lot of divs being used on your pages. Instead, please consider using semantic tags like <section> or <article>. Screen readers tell blind users when a new section or a new article starts. It does not do that with <div>. Users will not know that they are on a new section of your page.

<article id="article-grid">
<div class="article-grid-items">
<h2>Hi. I'm Cool. See Below.</h2>
</div>
<div class="article-grid-items">
<p><em>Software Developer Student, Biotech Researcher, Audiophile, Photographer, Dreamer</em></p>
</div>
</article>
<main id="main-grid">
<div class="main-wrapper">
<p>
Wanjun Lan is lover of many things including, but not limited to: spicy Thai, dry red wines,
Imperial stouts, IPAs, whiskey tastings, outdoor adventures, backpacking the wilderness,
international travel, Films: All Wes Anderson Films, Eternal Sunshine, Stranger Than Fiction,
Wristcutters: A Love Story, Books: American Gods, The Wind Up Bird Chronicles, The Diving Bell
and the Butterfly, The Fault In Our Stars, The Motorcycle Diaries, iced Americanos, good music,
better conversations.
</p>
</div>
<div class="about-main-container">
<div>
<img class="me-photo" alt="fuji" src="../assets/Fuji.JPG">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be good for alt text to be more descriptive. Alt text is used by screen readers for people who are blind to explain to them what the picture is. Just saying "Fuji" is not enough to help someone who is blind understand what is in the picture.

</div>
<div>
<img class="me-photo" alt="disney" src="../assets/Disney.JPG">
</div>
<div>
<img class="me-photo" alt="karuizawa" src="../assets/Karuizawa.JPG">
</div>
<div>
<img class="me-photo" alt="kawagoe" src="../assets/Kawagoe.JPG">
</div>
<div>
<img class="me-photo" alt="sakura" src="../assets/Sakura.JPG">
</div>
<div>
<img class="me-photo" alt="italy" src="../assets/Italy.JPG">
</div>
<div>
<img class="me-photo" alt="christmas" src="../assets/Christmas.JPG">
</div>
</div>

</main>

<aside id="aside-grid">
<div class="about-aside-wrapper">
<div>
<h3 class="aside-header">Skills</h3>
<p><b>Programming</b>: Flask, PostgreSQL, HTML, CSS, Python, Object-oriented design, Test-driven development, Web Crawling </p>
<p><b>Biotech</b>: Cell Culture, Gene Cloning, RT-PCR, SDS-PAGE, Western Blot, Confocal laser Scanning Microscopy(CLSM) </p>
</div>
<div>
<h3 class="aside-header">Education</h3>
<p class="university">East China University of Science and Technology</p>
<p class="degree">Biotechnology and Engineering, Ph.D</p>
<p class="university">University of Tokyo</p>
<p class="degree">Bioengineering Joint-training, Ph.D</p>
</div>
<div>
<h3 class="aside-header">Publications</h3>
<ol>
<li><a href="https://pubmed.ncbi.nlm.nih.gov/26105688/">Publication-1 Second Author</a></li>
<li><a href="https://pubmed.ncbi.nlm.nih.gov/24891524/">Publication-2 First Author</a></li>
<li><a href="https://pubs.rsc.org/en/content/articlelanding/2012/ay/c1ay05549f">Publication-3 First Author</a></li>
</ol>
</div>
</div>
</aside>
</div>

<footer>
<p class="copyright">&amp; Copyright 2022 Wanjun Lan</p>
</footer>




</body>

</html>
41 changes: 39 additions & 2 deletions pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,46 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Wanjun's homepage</title>
<link href="styles/style.css" rel=Stylesheet>
</head>
<body>

<header>
<div id="home-header"><h1> WANJUN LAN </h1></div>
<div class="image"></div>
<nav>
<ul class="home-menu">
<li><a href="http://127.0.0.1:5502/pages/index.html"><b>Home</b></a></li>
<li><a href="http://127.0.0.1:5502/pages/about.html"><b>About</b></a></li>
<li><a href="http://127.0.0.1:5502/pages/portfolio.html"><b>Portfolio</b></a></li>
</ul>
</nav>
</header>
<div>
<div>
<div class="index-main-container">
<div>
<a href="/about.html">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This link also does not work because it is an absolute path instead of a relative path. Please see the comment above about absolute vs relative.

<img id="Wanjun_photo" alt='wanjun profile image' src="../assets/WanjunLan_profile_photo.png">
</a>
</div>
<div class="homepage-wrapper">
<p>Hi, I'm Wanjun.</p>
<p>I'm currently a software engineer student at Ada Developers Academy. I used to be a scientific researcher in biotech. Welcome to my homepage!</p>
<p>Intrigued by travelling, photography, music, logic thinking, programming, fabulous food and even better conversations.</p>
<p>Seeking to be inspired, to envision the unlikely, to work hard for things that are worth it, and to be surrounded by those who bring out the best in me.</p>
<p>Find me on
<a href="https://www.facebook.com/profile.php?id=100087884298513"><img class="logo" alt='Facebook' src='../assets/Facebook.png'></a>
<a href="https://www.instagram.com/allie99883/"><img class="logo" alt='Instagram' src='../assets/Instagram.png'></a>
<a href="https://twitter.com/WanjunLan"><img class="logo" alt='Twitter' src='../assets/Twitter.png'></a>
<a href="https://www.linkedin.com/in/wanjun-lan/"><img class="logo" alt='LinkedIn' src='../assets/LinkedIn.png'></a>
</p>
</div>
</div>
</div>
</div>
<footer>
<p class="copyright">&amp; Copyright 2022 Wanjun Lan</p>
</footer>
</body>
</html>
93 changes: 91 additions & 2 deletions pages/portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,98 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>My protfolio</title>
<link href="styles/style.css" rel=Stylesheet>
</head>
<body>

<header>
<nav>
<ul class="portfolio-menu">
<li><a href="http://127.0.0.1:5502/pages/index.html"><h3>Home</h3></a></li>
<li><a href="http://127.0.0.1:5502/pages/about.html"><h3>About</h3></a></li>
<li><h1>My Portfolio</h1></li>
<li><a href="http://127.0.0.1:5502/pages/portfolio.html"><h3>Portfolio</h3></a></li>
<li><a href="https://www.linkedin.com/in/wanjun-lan/"><h3>Contact</h3></a></li>
</ul>
</nav>
</header>
<main>
<div class="project-container">
<div class="project-1">
<a href="https://github.com/wjlan/viewing-party"><h4 class="project-title">Viewing Party</h4></a>
<img class="project-photo" alt='project-photo' src='../assets/Project-icon.png'>
<p><b>Description:</b> To create a series of functions, which will modify the data, and implement features like adding and removing things between different lists. Other features include creating recommendations!</p>
<ul>
<li>Conditional logic</li>
<li>Lists</li>
<li>Dictionaries</li>
<li>Nested loops</li>
<li>Nested data structures</li>
</ul>
</div>
<div class="project-2">
<a href="https://github.com/wjlan/adagrams-py"><h4 class="project-title">AdaGrams</h4></a>
<img class="project-photo" alt='project-photo' src='../assets/Project-icon.png'>
<p><b>Description:</b> To create Adagrams, a game in which a player is given a random set of letters and must make an anagram using those letters. Each submitted word will score points.</p>
<ul>
<li>Following directions and reading comprehension</li>
<li>Reading tests</li>
<li>Using git to maintain code</li>
<li>Manipulating and processing data in lists and strings</li>
<li>Practicing pair-programming techniques</li>
</ul>
</div>
<div class="project-3">
<a href="https://github.com/wjlan/swap-meet"><h4 class="project-title">Swap Meet</h4></a>
<img class="project-photo" alt='project-photo' src='../assets/Project-icon.png'>
<p><b>Description:</b> Envision an app where vendors can swap items between different inventories. Given some features that the vendors want, create a set of classes. To create many class definitions, their attributes and instance methods, and some other cool features. Vendors will be able to swap their top item and swap items by category!</p>
<ul>
<li>Creating classes.Importing modules</li>
<li>Working with attributes that are lists of instances</li>
<li>Implementing instance methods that interact with other instances and objects</li>
<li>Overriding methods from superclasses and Object</li>
</ul>
</div>
<div class="project-4">
<a href="https://github.com/wjlan/solar-system-api"><h4 class="project-title">Solar System API</h4></a>
<img class="project-photo" alt='project-photo' src='../assets/Project-icon.png'>
<p><b>Description:</b> To build a Solar System API. This API will store information about different planets. Focus on creating RESTful endpoints for CRUD operations.</p>
<ul>
<li>Improve our understand of Flask & SQL Alchemy with repetition</li>
<li>Discuss and explain Flask code together in pair or group programming</li>
<li>Improve skill at working with others.</li>
</ul>
</div>
<div class="project-5">
<a href="https://github.com/wjlan/task-list-api"><h4 class="project-title">Task List API</h4></a>
<img class="project-photo" alt='project-photo' src='../assets/Project-icon.png'>
<p><b>Description:</b> To make a web API to organize our tasks, we'll be able to create, read, update, and delete tasks as long as we have access to the Internet and our API is running! Do some interesting features with the tasks including:
sorting tasks, marking them as complete, geting feedback about our task list through Slack, organizing tasks with goals</p>
<ul>
<li>Creating models</li>
<li>Creating conventional RESTful CRUD routes for a model</li>
<li>Reading query parameters to create custom behavior</li>
<li>Create unconventional routes for custom behavior</li>
<li>making requests in Python, to call an API inside of an API. Creating environment variables</li>
<li>Creating a one-to-many relationship between two models</li>
</ul>
</div>
<div class="project-6">
<a href="https://github.com/wjlan/Python-Projects"><h4 class="project-title">Library Management</h4></a>
<img class="project-photo" alt='project-photo' src='../assets/Project-icon.png'>
<p><b>Description:</b> To build a library management system keeps track of the books present in the library. Other functions include adding a book, deleting a book, viewing a book and return a book.</p>
<ul>
<li>Importing the necessary modules</li>
<li>Connecting to the MySql server</li>
<li>Creating conventional RESTful CRUD routes for a model</li>
<li>Reading query parameters to create custom behavior</li>
<li>Making requests in Python and implement functions</li>
</ul>
</div>
</div>
</main>
<footer>
<p class="copyright">&amp; Copyright 2022 Wanjun Lan</p>
</footer>
</body>
</html>
Loading