Giter Site home page Giter Site logo

amcnulty / aaron-michael Goto Github PK

View Code? Open in Web Editor NEW
0.0 0.0 0.0 4.03 MB

My Portfolio Page

Home Page: https://aaronmichael.herokuapp.com/

JavaScript 50.72% Batchfile 0.31% Sass 31.85% Pug 17.12%
express greensock-animation-platform javascript nodejs nodemailer portfolio portfolio-website pug pug-template-engine sass

aaron-michael's Introduction

Hi there ๐Ÿ‘‹

  • ๐Ÿ”ญ Iโ€™m currently working on Spirelands.
  • ๐ŸŒฑ Iโ€™m currently learning about the Salesforce ecosystem.
  • ๐Ÿ‘ฏ Iโ€™m looking to collaborate on web projects, android apps, video game development.
  • ๐Ÿค” Iโ€™m looking for help with art for Spirelands.
  • ๐Ÿ’ฌ Ask me about the video game I'm developing.
  • ๐Ÿ“ซ How to reach me: Aaron Michael's Portfolio
  • โšก Fun fact: I can tell you what day of the week you were born on!

aaron-michael's People

Contributors

amcnulty avatar dependabot[bot] avatar

Watchers

 avatar  avatar

aaron-michael's Issues

About Section

Create an about me section

This should highlight many of my talents as a web developer. This section can take the form of being a preview to my resume. Make the section mobile ready first then go ahead and style it up for desktop. Maybe use media queries to select the style sheet but try not to.

Some things that I can highlight are.

  1. The technologies I have experience using
    • Make this a bullet point list
  2. Roles I have filled in the past
    • Make it known that I do freelance work
  3. Mention my time at UCSD Extension and note that I am certified in web development
  4. A button to view my resume
  5. A button to contact me
    • Links to contact me section
    • Maybe have a separate button for hire me for freelance work
  6. Make a social media section that shows I use GitHub and other platforms
    • Link to GitHub
    • Link to Linkedin
    • Link to StackOverflow
    • Maybe link to CodeWars
  7. A picture of me

Animations

This section should include some animations to show off my talents and to follow the flow of the website.

  • Make about me header letters fly into place
  • Make sections fade into view and slightly pop up
  • Have my logo just spinning there because it is awesome
  • Have buttons have really sweet on hover effects

Background

Large logo in background with non distracting pattern like diagonal lines going through the image. Logo should be on the right and left side should be open. Only use this background on non mobile pages. Mobile pages will just have solid color.

My Work Section

Create My Work Section

This section will include preview images and links to the webpages and apps I have made. Poster images will be displayed for the user to click on. When images are hovered over they should darken and have a visit site button appear and the name of the app/website display.

  • Have picture of computer/laptop with one image of a site I have built with a mobile device next to it showing mobile responsiveness.

Animations

Create animations that follow the flow of the site.

  • The preview cards should populate the projects section in an appealing way.

Background

Solid color background should be used. Use the light theme color for the site so it doesn't clash with the other colors from the poster images.

Contact Me Section

Create Contact Me Section

This section will have a working contact form that sends an email to my account. This will be for recruiters/employers and people looking for freelance work. Add email address and Linkedin link in an aside for ways to contact me.

Parts of the form

  1. Dropdown - What would you like to know?
    • General question
    • Want to discuss employment
    • Want to discuss freelance work
  2. Text Input - Your Name
  3. Text Input (type email) - Email address
    • Add form validation to make sure this is a valid email
      • Use Regex because it is awesome!
  4. Text Input (type number) - Phone number
  5. Text Area - Type your message
  6. Submit button
    • Should use same cool hover effect from the other buttons on the site.

Animations

All text input fields should have a cool animation to them. and Submit button should have hover effect.

Background

This can be played with a bit but I think the background should be a solid color. It can be dark or light. I'm not sure what is best at this point so some playing around will have to be done.

Hover Animation On Initails Logo

Add a hover effect to the initials logo on the landing page. Use the following code as an example

HTML

<div id="wrapper">
  <div id="thumbnail" href="#">
    Test Me
  </div>
</div>

CSS

#wrapper {
  width: 100%;
  padding-top: 100px;
  perspective: 300px;
}

#thumbnail {
	display: block;
  margin: 0 auto;
	width: 150px;
	height: 150px;
  line-height: 150px;
  background-color: blue;
  color: white;
  text-align: center;
  transition: all .2s ease-out;
}

JS

var thumbnail = document.getElementById("thumbnail");

thumbnail.addEventListener("mousemove", function(e){
  var x = e.offsetX;
  var y = e.offsetY;
  if (x > 74) {
    x = Math.floor((x - 74) / 3);
  }
  else x = -Math.floor((74 - x) / 3);
  
  if (y > 74) {
    y = -Math.floor((y - 74) / 3);
  }
  else y = Math.floor((74 - y) / 3);
  thumbnail.innerHTML = `X: ${x} Y: ${y}`;
  thumbnail.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
}, false);

thumbnail.addEventListener("mouseout", function(e) {
  thumbnail.style.transform = `rotateY(0deg) rotateX(0deg)`
}, false);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.