https://1clide1.github.io/My-Portfolio/

Hello, my name is Brandon Diaz adn this is a website I have created to showcase my web development portfolio. This is subject to change and transform once throughout the years, the more I learn the more the website will change and reflect my skillset. I made this because I do want a job in web development and for every job whether it is creative or even a 9-5 you need a resume and better yet a portfolio to show your skills and what you have learned. I feel like a portfolio is better than a standard resume because it shows the real skills you have. Personally at this moment I am still learning.

I used a lot of resourses online and from what I leanred personally through class to build a foundation and structure. I made sure that I knew what I was doing that way I didn't just blindly copy and paste and ultimately learn nothing. I found out that I could actually use a combination of grid and flexbox to create a responsive, yet simple website. I used flexbox mainly to act as responsive element, making sure when sized down nothing became out of whack. While I used the grid layout for the main boxes of content as that honestly it seemed to me more stright foward and simple but also came with a lot of options to finely tweak it to how I liked. I decided to also go with a general minimal and simple desgin, I did not want too much elements just what I needed. I found a nice color scheme that gave my website more of the dark mode asthetic, not only did I like how it looked but I thought it would be easier to read also.

I made a simple header showcasing my name so it is easy to see at a glance when you first open the site. A cool thing about the way I made my name in the header is that on desktop the yellow is shown to make my name more pronounced and on mobile the background on my name is used more as a traditional header background. When testing I thought it was really clever and smart to give a simple asthetic choice different uses that also fit my layout that I was going for so I didn't decide to change this going foward. I also added a navigation that way you can automatically scroll to where you need to be. I added a small picture of what I look like and made sure it was next to the about section, I made sure it was positioned in the particular matter that I did becuase I liked how it looked on desktop and on mobile. I made sure to also add break tags around the image that way it was on its separate because without that on mobile the pictuer would have been ontop of the about me title. Like I said earlier I used more of a grid layout for the main content which is the boxes of what I have made. So far I have only learned how to refactor code and this upcoming week I am going to learn how to make a password generator so right now most of my content has place holders. This will only be for now until I make more examples through my code. I made sure the boxes have a nice border, a simple gradient when hovered over the whole box, and made sure you can click the title of each box. Once the title is clicked it will take you to a new tab and show the example I have made online. I also added on the left side a vertical line that signifies each column of the website. I was intially going to make it one straight line down but honestly it did not look right so I added padding to separate each column and giev it their own line. Finally I added a section where you can contact me and if you click on each section it will open a new tab and take you exactly wher you need to be. I made sure to leave my phone number (a cool feature with google chrome is that if you have an android phoine you can click the mobile link and it will open a new tab giving you the phone # right away. I also found out that on ios in safari if you click the link it gives an option to call my phone #), email, github, and resume. And to top it off I added a favicon of a picture I made to give it my personal touch! The only thing I couldn't code in but wanted to was how to make the scroll bar not show on certain elements like nav and contact lists, I found soluttions to my problem, just did not know hot to properly implement them in my use case but once I find out I will make the needed changes!

I added a bunch of comment identifying where you are in the code in html and css. However, on css I not only displayed what section it was but also said what almost every section does that way someone looking at the css side of things can understand what is going on and also personally for me that way I don't have to relearn what something important does. Hopefully it doesn't seem too confusing because I did leave a lot of comments, but I fell like once read it should make sense on what is going on.

I kind of already explained this in the begining but I wanted to use what I learned to try and make a simple, yet elegant portfolio that not only showcases my skills but is straight to the point. I wanted to try and make it as polished as I could now and build on from it in the future. I think from what I learned and what I was researching to help make the site I think I did a good job. I learned better organizing skills and just how to write css and especially html way better than what I previously thought. Most noteably for me was that I can actually see how powerful using the section tag is opposed to using mutiple div tags. That alone made this worth the effort I put into this project.

Hopefully this gives an insight onto how this project was made and created Thanks for reading :D