diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..f673a71b7 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/assets/ABOUT+ME+LOGO.png b/assets/ABOUT+ME+LOGO.png new file mode 100644 index 000000000..0f3e647ae Binary files /dev/null and b/assets/ABOUT+ME+LOGO.png differ diff --git a/assets/Christmas.JPG b/assets/Christmas.JPG new file mode 100644 index 000000000..d58005b15 Binary files /dev/null and b/assets/Christmas.JPG differ diff --git a/assets/Disney.JPG b/assets/Disney.JPG new file mode 100755 index 000000000..18bb25a62 Binary files /dev/null and b/assets/Disney.JPG differ diff --git a/assets/Divider-1.png b/assets/Divider-1.png new file mode 100644 index 000000000..e19b3d415 Binary files /dev/null and b/assets/Divider-1.png differ diff --git a/assets/Facebook.png b/assets/Facebook.png new file mode 100644 index 000000000..008577539 Binary files /dev/null and b/assets/Facebook.png differ diff --git a/assets/Fuji.JPG b/assets/Fuji.JPG new file mode 100755 index 000000000..d666781bb Binary files /dev/null and b/assets/Fuji.JPG differ diff --git a/assets/Instagram.png b/assets/Instagram.png new file mode 100644 index 000000000..abc2dd580 Binary files /dev/null and b/assets/Instagram.png differ diff --git a/assets/Italy.JPG b/assets/Italy.JPG new file mode 100755 index 000000000..49fcd7693 Binary files /dev/null and b/assets/Italy.JPG differ diff --git a/assets/Karuizawa.JPG b/assets/Karuizawa.JPG new file mode 100755 index 000000000..6ff97987a Binary files /dev/null and b/assets/Karuizawa.JPG differ diff --git a/assets/Kawagoe.JPG b/assets/Kawagoe.JPG new file mode 100755 index 000000000..c3342dc9f Binary files /dev/null and b/assets/Kawagoe.JPG differ diff --git a/assets/LinkedIn.png b/assets/LinkedIn.png new file mode 100644 index 000000000..ded94806d Binary files /dev/null and b/assets/LinkedIn.png differ diff --git a/assets/Paris.JPG b/assets/Paris.JPG new file mode 100755 index 000000000..0089eff50 Binary files /dev/null and b/assets/Paris.JPG differ diff --git a/assets/Project-icon.png b/assets/Project-icon.png new file mode 100644 index 000000000..e9427ca8f Binary files /dev/null and b/assets/Project-icon.png differ diff --git a/assets/Sakura.jpg b/assets/Sakura.jpg new file mode 100755 index 000000000..a13166a65 Binary files /dev/null and b/assets/Sakura.jpg differ diff --git a/assets/Twitter.png b/assets/Twitter.png new file mode 100644 index 000000000..0e102aec6 Binary files /dev/null and b/assets/Twitter.png differ diff --git a/assets/WanjunLan_profile_photo.png b/assets/WanjunLan_profile_photo.png new file mode 100644 index 000000000..0ed856c58 Binary files /dev/null and b/assets/WanjunLan_profile_photo.png differ diff --git a/pages/about.html b/pages/about.html index b4ae215c4..116c2f4bb 100644 --- a/pages/about.html +++ b/pages/about.html @@ -4,9 +4,100 @@ - Document + About Me + - + +
+ +
+
+
+
+

Hi. I'm Cool. See Below.

+
+
+

Software Developer Student, Biotech Researcher, Audiophile, Photographer, Dreamer

+
+
+
+
+

+ 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. +

+
+
+
+ fuji +
+
+ disney +
+
+ karuizawa +
+
+ kawagoe +
+
+ sakura +
+
+ italy +
+
+ christmas +
+
+ +
+ + +
+ + + + + + \ No newline at end of file diff --git a/pages/index.html b/pages/index.html index b4ae215c4..f2588e277 100644 --- a/pages/index.html +++ b/pages/index.html @@ -4,9 +4,46 @@ - Document + Wanjun's homepage + - +
+

WANJUN LAN

+
+ +
+
+
+
+
+ + wanjun profile image + +
+
+

Hi, I'm Wanjun.

+

I'm currently a software engineer student at Ada Developers Academy. I used to be a scientific researcher in biotech. Welcome to my homepage!

+

Intrigued by travelling, photography, music, logic thinking, programming, fabulous food and even better conversations.

+

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.

+

Find me on + + + + +

+
+
+
+
+ \ No newline at end of file diff --git a/pages/portfolio.html b/pages/portfolio.html index b4ae215c4..7a7b73c07 100644 --- a/pages/portfolio.html +++ b/pages/portfolio.html @@ -4,9 +4,98 @@ - Document + My protfolio + - +
+ +
+
+
+
+

Viewing Party

 + project-photo +

Description: 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!

+
    +
  • Conditional logic
    • +
  • Lists
    • +
  • Dictionaries
    • +
  • Nested loops
    • +
  • Nested data structures
    • +
+
+
+

AdaGrams

 + project-photo +

Description: 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.

+
    +
  • Following directions and reading comprehension
    • +
  • Reading tests
    • +
  • Using git to maintain code
    • +
  • Manipulating and processing data in lists and strings
    • +
  • Practicing pair-programming techniques
    • +
+
+
+

Swap Meet

 + project-photo +

Description: 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!

+
    +
  • Creating classes.Importing modules
    • +
  • Working with attributes that are lists of instances
    • +
  • Implementing instance methods that interact with other instances and objects
    • +
  • Overriding methods from superclasses and Object
    • +
+
+
+

Solar System API

 + project-photo +

Description: To build a Solar System API. This API will store information about different planets. Focus on creating RESTful endpoints for CRUD operations.

+
    +
  • Improve our understand of Flask & SQL Alchemy with repetition
    • +
  • Discuss and explain Flask code together in pair or group programming
    • +
  • Improve skill at working with others.
    • +
+
+
+

Task List API

 + project-photo +

Description: 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

+
    +
  • Creating models
    • +
  • Creating conventional RESTful CRUD routes for a model
    • +
  • Reading query parameters to create custom behavior
    • +
  • Create unconventional routes for custom behavior
    • +
  • making requests in Python, to call an API inside of an API. Creating environment variables
    • +
  • Creating a one-to-many relationship between two models
    • +
+
+
+

Library Management

 + project-photo +

Description: 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.

+
    +
  • Importing the necessary modules
    • +
  • Connecting to the MySql server
    • +
  • Creating conventional RESTful CRUD routes for a model
    • +
  • Reading query parameters to create custom behavior
    • +
  • Making requests in Python and implement functions
    • +
+
+
+
+ \ No newline at end of file diff --git a/pages/styles/style.css b/pages/styles/style.css new file mode 100644 index 000000000..b4f96a26a --- /dev/null +++ b/pages/styles/style.css @@ -0,0 +1,288 @@ +html { + font-size: 16px; + background-color: rgb(228, 222, 222); +} + +#home-header { + font-size: 2.5rem; + font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + color:rgb(106, 135, 135); + text-align: center; + padding:8%; + padding-bottom: 4%; + background-image: url(https://images.rawpixel.com/image_1000/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcm0zMDUtbnVubnktMDZhLWwuanBn.jpg); + background-origin: content-box; +} + + +header ul { + list-style-type: none; + } + +body{ + font-size:1.5rem; + line-height:1.75; + font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif +} + +#Wanjun_photo { + width: 200px; + height: 210px; + border-radius: 70%; +} + +#About-me-logo { + width: 500px; + height: 200px; +} + +#portfolio-button { + width: 200px; + height: 100px; +} + +.me-photo { + max-width: 260px; + max-height: 300px; +} + +.logo { + width:40px; + height:40px; +} + +#divider { + width: 1500px; +} + +.project-photo { + width:20%; + padding-left: 40%; +} + +a { + color:rgb(134, 42, 42); +} + +a:hover { + color:rgb(221, 151, 151); +} + +a { + text-decoration: None; +} + +ul { + list-style-type: none; +} + +.home-menu { + width: 80%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + font-size: 2.5rem; + padding-top: 5%; + padding-bottom: 5%; + padding-left: 10%; +} + +.ss-bg { + background-color:rgb(208, 195, 195); +} + + +.index-main-container { + width: 80%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + padding-left: 100px; +} + +.homepage-wrapper { + width: 60%; +} + +.index-main-container>div:nth-child(2) { + color:rgb(40, 50, 109); + font-size: 1.5rem; +} + +footer { + position: relative; + height: 300px; + width: 95%; + } + +p.copyright { + position: absolute; + width: 95%; + line-height: 10px; + text-align: right; + right: 5%; + bottom:0; +} + +.about-menu { + width: 80%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + font-size: 2rem; + padding-top: 5%; + padding-bottom: 5%; + padding-left: 10%; +} + + +#div-grid { + margin: auto; + width: 100vw; + height: 120vh; + display:grid; + grid-template: 25% 75% / 30% 70%; +} + +#article-grid { + grid-column: 1 / 3; +} + +#article-grid h2 { + color:rgb(58, 181, 124); +} + +#article-grid p { + color:rgb(190, 161, 75); + +} + +.article-grid-items { + display: flex; + align-items: center; + justify-content: center; + padding-top: 1%; +} + +#aside-grid { + grid-column: 1 / 2; + grid-row: 2 / 3; +} + + +#main-grid { + grid-column: 2 / 3 +} + +.about-main-container { + width: 80%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; +} + +.main-wrapper { + width: 90%; + display: flex; + align-items: center; + justify-content: center; + font-family:Verdana, Geneva, Tahoma, sans-serif; + font-size: 1.5rem; + color:rgb(29, 46, 30); +} + +.about-aside-wrapper { + width: 80%; + display:flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: left; + font-family:Arial, Helvetica, sans-serif; + font-size: 1rem; + padding-left: 3%; + +} + +.aside-header{ + color:rgb(40, 132, 141); + font-style: oblique; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} + +.degree { + font-size: 1rem; +} + + +.portfolio-menu { + width: 90%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + font-size: 2rem; + padding-top: 5%; + padding-bottom: 5%; + padding-left: 5%; +} + +.project-container { + display:grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-gap: 10px 10px; + border:darkseagreen; + border-style: dotted; + align-content: center; + justify-content: center; +} + +.project-title{ + font: bold; + text-align:center; +} + +.project-1 { + grid-column: 1 / 2; + grid-row: 1 / 2; + background-color:rgb(230, 208, 179); +} + +.project-2 { + grid-column: 2 / 3; + grid-row: 1 / 2; + background-color:rgb(154, 176, 154) +} +.project-3 { + grid-column: 3 / 4; + grid-row: 1 / 2; + background-color: rgb(198, 169, 184); +} +.project-4 { + grid-column: 1 / 2; + grid-row: 2 / 3; + background-color: rgb(188, 200, 223); +} + +.project-5 { + grid-column: 2 / 3; + grid-row: 2 / 3; + background-color: rgb(245, 167, 139); +} + +.project-6 { + grid-column: 3 / 4; + grid-row: 2 / 3; + background-color: rgb(235, 209, 143); +} + +