A Professional Web Developer Portfolio, by Alex Muñoz.

AstroboyReloaded | Portfolio

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 👥 Author
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 Alex Muñoz's Web Developer Portfolio

This project aims to create a fully implemented professional portfolio to host my best work as a web developer. The portfolio itself is now in a mobile version develpment stage.

For future implementations, please go to the Future Features section. Click here to see the Live Demo.

🛠 Built With

Tech Stack

Client

• HTML 5
• CSS 3
• JavaScript

Server

• GitHub Pages

Key Features

• Ensure meeting industry standards and best practices with linters

• Mobile First.

• Header Section

• Headline Section

• Projects Section

• About Section

• Contact form + basic validation

• Footer Section / Social Networks

• Style for different states to all buttons

• Desktop version

• Transitions to all clickable elements

• Deployed to GitHub Pages

• Accessibility and Screen Reader adapted

• Mobile menu display implementation with JavaScript

• Render .works's content dinamically with JavaScript

• PopUp window created dinamically with JavaScript for each project

• Form validation with JavaScript

• Local storage for form imputs content when not submited

• Accessibility:

  • Mobile first.
    • Gestures. -Go Back to Close current Popup <------(menu)
  • Fully Responsive.
  • Form Validation.
  • ARIA implementation when necesary.
  • Keyboard navigation and interaction.
    • Tab to access any interactive element.
    • Enter or Space to activate any focused button <---(menu)
  • AT optimization

🚀 Live Demo

• Live Demo Link

Prerequisites

• HTML + CSS + JavaScript

Setup

• If you wish to work from this project by editing it's code:

git clone https://github.com/astroboyReloaded/astroboyReloaded.github.io.git

Install

You may add linters to ensure adhering to best practices.

1.- Create a package.json:

npm init -y

or:

npm init

to fill up fields manually.

2.- Install all dependencies (linters):

npm install

Usage

• May use as a base or reference to develop your own portfolio.
• Run

npx hint .

to get an HTML review.

• Run

npx stylelint "**/*.{css,scss}"

to get a CSS review.

• Run

npx lighthouse <URL>

to get a performance review.

• Run

npx eslint .

to get a JavaScript review.

(back to top)

Author

👤 astroboyReloaded

• GitHub: astroboyReloaded
• Twitter: @astroboyReload
• LinkedIn: LinkedIn

🔭 Future Features

• Real Projects.
• My CV.

🤝 Contributing

Please let me know if you find any issues in this repo's code! Feel free to check the issues page.

⭐️ Show your support

If you like my work on this project, please give me a star on this repo. I would also love to read your comment letting me know what you think!

🙏 Acknowledgments

Thanks to Microverse for giving me a path to follow in this learning journey! Thanks to my mates, who walk by and share they experiences and knowledge with me during this journey: you make this experience even more valuable! Thanks to GitHub for being so awesome!

📝 License

MIT

(back to top)