Implementation
Educate people of different ages about glaucoma
This place is for title, subtitle, and cover photo use.
Difference between revisions of "Team:NCKU Tainan/Implementation"
| Line 127: | Line 127: | ||
font-size:1.1rem; | font-size:1.1rem; | ||
} | } | ||
| − | /* | + | /*click_me_you_would_get_more_circles*/ |
| − | + | .menu{ | |
| − | + | position: fixed; | |
| − | + | top: 50%; | |
| − | + | left: 50%; | |
| − | + | transform: translate(-50%, -50%); | |
| − | + | width: 220px; | |
| − | + | height: 220px; | |
| − | + | filter:url("#goo"); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .menu .item{ | |
| − | + | position: absolute; | |
| + | top: 80px; | ||
| + | left: 80px; | ||
| + | width: 60px; | ||
| + | height: 60px; | ||
| + | line-height: 60px; | ||
| + | background: #ff0b59; | ||
| + | color: #fff; | ||
| + | text-align: center; | ||
| + | border-radius: 50%; | ||
| + | transition: transform 600ms ease-out; | ||
| + | cursor: pointer; | ||
} | } | ||
| − | + | .item.open-menu{ | |
| − | + | z-index: 1; | |
| − | + | transition: transform 300ms ease-out; | |
| − | + | transition-delay: 300ms; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| + | .opened .item:nth-child(2){ transform: translateX(80px); } | ||
| + | .opened .item:nth-child(3){ transform: translateX(40px) translateY(70px); } | ||
| + | .opened .item:nth-child(4){ transform: translateX(-40px) translateY(70px); } | ||
| + | .opened .item:nth-child(5){ transform: translateX(-80px); } | ||
| + | .opened .item:nth-child(6){ transform: translateX(0px); } | ||
| + | /*.opened .item:nth-child(6){ transform: translateX(-40px) translateY(-70px); } | ||
| + | .opened .item:nth-child(7){ transform: translateX(40px) translateY(-70px); }*/ | ||
| − | + | .opened .item.open-menu{ | |
| − | . | + | transform: scale(0); |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .item:nth-child(2){ transition-delay: 0; } | |
| − | . | + | .item:nth-child(3){ transition-delay: 50ms; } |
| − | + | .item:nth-child(4){ transition-delay: 100ms; } | |
| − | + | .item:nth-child(5){ transition-delay: 150ms; } | |
| − | + | .item:nth-child(6){ transition-delay: 200ms; } | |
| − | + | .item:nth-child(7){ transition-delay: 250ms; } | |
| − | + | ||
| − | + | ||
| − | } | + | |
| − | . | + | |
| − | + | ||
| − | } | + | |
| − | . | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | ||
| − | . | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
</style> | </style> | ||
<body> | <body> | ||
| Line 379: | Line 279: | ||
<div class="resume-section-content" id="awards"> | <div class="resume-section-content" id="awards"> | ||
<h2 class="mb-5">Awards & Certifications</h2> | <h2 class="mb-5">Awards & Certifications</h2> | ||
| − | < | + | <div class="menu"> |
| − | + | <div class="item open-menu"><i class="fa fa-bars" aria-hidden="true"></i></div> | |
| − | + | <div class="item"><i class="fa fa-youtube" aria-hidden="true"></i></div> | |
| − | + | <div class="item"><i class="fa fa-instagram" aria-hidden="true"></i></div> | |
| − | + | <div class="item"><i class="fa fa-linkedin" aria-hidden="true"></i></div> | |
| − | + | <div class="item"><i class="fa fa-facebook" aria-hidden="true"></i></div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <div class="item close-menu"><i class="fa fa-times" aria-hidden="true"></i></div> | |
| + | </div> | ||
| + | <svg> | ||
| + | <defs> | ||
| + | <filter id='goo'> | ||
| + | <feGaussianBlur in='SourceGraphic' stdDeviation='8' result='blur' /> | ||
| + | <feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7' result='goo' /> | ||
| + | <feBlend in='SourceGraphic' in2='goo' /> | ||
| + | </filter> | ||
| + | </defs> | ||
| + | </svg> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
</section> | </section> | ||
| Line 466: | Line 349: | ||
}); | }); | ||
</script> | </script> | ||
| + | <script> | ||
| + | let menu = document.querySelector('.menu'), | ||
| + | isOpened = false; | ||
| + | menu.addEventListener('click', function(){ | ||
| + | if(isOpened){ | ||
| + | menu.classList.remove('opened'); | ||
| + | } else { | ||
| + | menu.classList.add('opened'); | ||
| + | } | ||
| + | isOpened = !isOpened; | ||
| + | }); | ||
| + | </script> | ||
</html> | </html> | ||
{{Template:NCKU_Tainan/gotop_old}} | {{Template:NCKU_Tainan/gotop_old}} | ||
{{Template:NCKU_Tainan/footer_old}} | {{Template:NCKU_Tainan/footer_old}} | ||
Revision as of 06:44, 2 October 2020
Experience
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
Skills
Programming Languages & Tools
Workflow
- Mobile-First, Responsive Design
- Cross Browser Testing & Debugging
- Cross Functional Teams
- Agile Development & Scrum
Interests
Apart from being a web developer, I enjoy most of my time being outdoors. In the winter, I am an avid skier and novice ice climber. During the warmer months here in Colorado, I enjoy mountain biking, free climbing, and kayaking.
When forced indoors, I follow a number of sci-fi and fantasy genre movies and television shows, I am an aspiring chef, and I spend a large amount of my free time exploring the latest technology advancements in the front-end web development world.
Awards & Certifications
