Git Product home page Git Product logo

portfolio's Introduction

portfolio

Personal Resume

As someone getting into IT, specifically front-end web development, it was very essential to create a digital resume/porfolio to showcase my background and skills; especially showing that I can make a basic layout webpage. My resume was influenced by the late rnb singer Aaliyah. I never saw a website like that and so I wanted to put my own personality to my dev resume. What I like about my dev resume is that it is not too simple yet not too complex. Everything was to the point, organized, and fun with special css effects.

Since this was a one-page website, I wanted to make it as fun yet professional. When you hit each navigation like it smoothly goes straight to the specific source on the page. I also have special life mottos as quotes to separate major topic sections. You can easily go to each of my other social media pages by hovering over and clicking the social media icons. I also did it for the black mail and purple mail in the contact section. You can click on the black 'resume' button which will open a link into my resume. Another interesting thing I decided to do was to have my hamburger navigation highlight in a neon green once the mouse hovers over it; while on the desktop navigation bar, the links turns purple when the mouse hovers over it. I didn’t want to shy away with how I look, so I added a few picture of myself on the about section and in all of the motto sections, which has my mottos that I live by floating over parallax effects. Do not forget to click on my four projects and surf throught them. Overall, this was my first dev resume which I personally created without the help a website builder and though there were some challenges I love the final product of my resume. It shows my technical side as a front end software developer but also my creative side as a graphic designer.

My Personal Challenges

 Using flexbox for my resume section and my contact section.
 Positioning hover on hamburger menu.  Using dev tools to locate the issue but didn’t show the problem was from a different css page.  Make the experience of scrolling effect smoother.  Constantly making adjustments for all three devices because of overriding.  Navigation background change in color when the user scrolls down.

Random Unexpected Challenges

 Navigation links were hiding behind portfolios.  Navigation would not widen to 100%.  Bringing elements that is side by side closer to the center, not one hiding out of the edge of the webpage.  Browsers updated system which changed the format to all pages and device sizes. 

Solutions

 Instead of having my navigation change colors when scrolling down, I matched the name for the navigation menu and the section with # so that when the user hits the navigation link it goes straight to that particular section.  I put a smooth scroll effect so that the experience is smooth when going to different sections.  Instead of heaving the two parts in the contact link side by side on a desktop size, one is on top of the other which looks just as good.  To make the dev resume more creative I put parallax’s with pictures.  Put -webkit-transition properties to social media logos and buttons to give a better UX experiences.

Weakness so far

  1. When to use pixels, rems, ems
  2. Margins and paddings
  3. flexbox is my weakness
  4. Git(updating to the newest rep)

portfolio's People

Contributors

adrienne-b avatar

Watchers

 avatar

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.