added work page

featured-project.js

@@ -0,0 +1,138 @@
+'use strict';
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var projects = {
+  new: {
+    name: '',
+    title: '',
+    type: '',
+    date: '',
+    descrip: ''
+  },
+  mlhacks: {
+    name: 'mlhacks',
+    title: 'ML Hacks',
+    date: 'June 2022',
+    descrip: 'Website for ML Hacks, Bay Area\'s premier Machine Learning focused hackathon for female and nonbinary high school students.'
+  },
+  cero: {
+    name: 'cero',
+    title: 'Cero',
+    date: 'June 2021',
+    award: '1st Place @ Hydrangea Hacks',
+    descrip: 'Adventure/platformer game developed with Javascript using the melonJS game engine—complete with original sprites, tilesets, and maps.'
+  },
+  bloog: {
+    name: 'bloog',
+    title: 'BLOOG',
+    date: 'May 2021',
+    descrip: 'Knockoff Quizlet. Built with React/Redux/Firebase.'
+  },
+  linescape: {
+    name: 'linescape',
+    title: 'LineScape',
+    date: 'April 2021',
+    award: 'Best Design @ Superposition V',
+    descrip: 'SVG drawing tool that provides an interactive visual interface designed to simplify the process of creating line animations for websites.'
+  },
+  snowball: {
+    name: 'snowball',
+    title: 'Snowball',
+    date: 'Oct 2020',
+    award: 'Best Overall Hack @ Creatica 2020',
+    descrip: 'Crowdfunding Android app created to maximize the impact of individual donations by taking advantage of corporate matching programs.'
+  },
+  two: {
+    name: 'two',
+    title: '2048',
+    date: 'July 2020',
+    descrip: 'Browser-based version of the classic 2048 game built with Javascript and HTML/CSS to include original styling and various themes.'
+  }
+};
+var projectArr = [projects.mlhacks, projects.cero, projects.bloog, projects.linescape, projects.snowball, projects.two];
+
+var Project = function (_React$Component) {
+  _inherits(Project, _React$Component);
+
+  function Project(props) {
+    _classCallCheck(this, Project);
+
+    return _possibleConstructorReturn(this, (Project.__proto__ || Object.getPrototypeOf(Project)).call(this, props));
+  }
+
+  _createClass(Project, [{
+    key: 'render',
+    value: function render() {
+      return React.createElement(
+        'div',
+        null,
+        projectArr.map(function (project) {
+          return React.createElement(
+            'div',
+            { className: 'project-container', key: project.name, id: project.name + "PC" },
+            React.createElement(
+              'div',
+              { className: 'descrip-box' },
+              React.createElement(
+                'div',
+                { className: 'controls' },
+                React.createElement(
+                  'div',
+                  { className: 'dots' },
+                  React.createElement('div', { className: 'hex', id: project.name + "-hex", style: { zIndex: -100 } }),
+                  React.createElement('div', { className: "dot dot1 " + project.name + "-dot", id: project.name + "-dot1" }),
+                  React.createElement('div', { className: "dot dot2 " + project.name + "-dot", id: project.name + "-dot2" }),
+                  React.createElement('div', { className: "dot dot3 " + project.name + "-dot", id: project.name + "-dot3" }),
+                  React.createElement('i', { id: project.name + "-icon", className: 'fas fa-angle-right icon right-arrow' })
+                )
+              ),
+              React.createElement(
+                'div',
+                { className: 'descrip-text' },
+                React.createElement(
+                  'h4',
+                  { className: 'title' },
+                  project.title
+                ),
+                React.createElement(
+                  'h6',
+                  { className: 'date' },
+                  project.date
+                ),
+                project.award && React.createElement(
+                  'div',
+                  { className: 'award', id: "award-" + project.name },
+                  project.award
+                ),
+                React.createElement(
+                  'p',
+                  { className: 'descrip' },
+                  project.descrip
+                )
+              )
+            ),
+            React.createElement(
+              'div',
+              { className: 'image', id: project.name },
+              React.createElement('div', { id: project.name + "2", className: 'image-over' }),
+              React.createElement('div', { id: project.name + "3", className: 'image-over image-over2' }),
+              React.createElement('div', { id: project.name + "-hover", className: 'white-hover' })
+            )
+          );
+        })
+      );
+    }
+  }]);
+
+  return Project;
+}(React.Component);
+
+var domContainer = document.querySelector('#featured-projects');
+ReactDOM.render(React.createElement(Project, null), domContainer);

index.html

@@ -53,23 +53,22 @@ <h3 class="home-text">developer<span style="color: var(--cyan);"> / </span>desig
         </div>
       </div>
       <div class="section-title" id="projects-title">Featured Projects ↓</div>
-      <div class="section" id="projects"></div>
+      <div class="section" id="featured-projects"></div>
 
       <div id="contact-container"></div>
 
       <!--zdog-->
       <script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
       <!--my js-->
       <script src="indexApp.js" charset="utf-8"></script>
-      <script src="cubeAnim.js" charset="utf-8"></script>
 
       <!-- Load React. -->
       <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
       <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
       <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
 
       <!-- Load React components -->
-      <script src="project.js"></script>
+      <script src="featured-project.js"></script>
       <script src="topBar.js"></script>
       <script src="contact.js"></script>
     </body>

react_src/project.js → react_src/featured-project.js

@@ -91,5 +91,5 @@ class Project extends React.Component {
   }
 }
 
-const domContainer = document.querySelector('#projects')
+const domContainer = document.querySelector('#featured-projects')
 ReactDOM.render(<Project/>, domContainer)

utils/data.js

@@ -0,0 +1,7 @@
+export const team = [
+    {
+      name: 'Atrophy: Graveyard of My Fallen Heroes',
+      img: '/img/atrophy.png',
+      descrip: '',
+    },
+  ];

work-style.css

@@ -0,0 +1,6 @@
+.page-title {
+    font-family: 'Gajraj One', sans-serif;
+    font-size: 20vw;
+    margin: 0;
+    padding: 0 50px;
+}

work.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Lilian Zhao | Work</title>
+        <link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
+        <!--fonts-->
+        <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300&family=Inter:wght@200;300;400&family=Koulen&family=Monoton&family=Open+Sans&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Quicksand&family=Roboto+Mono&family=Inconsolata&family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
+
+        <!--FontAwesome Icons-->
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+
+        <!--my css-->
+        <link rel="stylesheet" href="global.css">
+        <link rel="stylesheet" href="work-style.css">
+        <link rel="stylesheet" href="top-bar.css">
+        <link rel="stylesheet" href="contact.css">
+
+        <!-- Import model viewer component -->
+        <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
+    </head>
+    <body>
+      <!--<div id="top-bar-container"></div>-->
+
+      <div class="page-title">work</div>
+
+      <div id="projects-title">Projects ↓</div>
+
+      <div id="projects"></div>
+
+      <div id="contact-container"></div>
+
+      <!-- Load React. -->
+      <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
+      <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
+      <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
+
+      <!-- Load React components -->
+      <script src="project.js"></script>
+      <script src="topBar.js"></script>
+      <script src="contact.js"></script>
+    </body>
+</html>