← BACK
mohariz.me home page

mohariz.me

Gatsby.jsGraphQLNetlifyReact.jsSASSTailwind CSSTypeScriptWordPress

The portfolio website that you are currently looking at 🙂

Welcome to mohariz.me, a cutting-edge portfolio website designed and developed by me. This project serves as a dynamic showcase of my journey as a developer and designer, featuring a collection of my work, skills, and the innovative solutions I’ve crafted in the tech industry.

Development Journey

The foundation of mohariz.me is built on Gatsby.js, a powerful framework that leverages React.js and GraphQL, enabling a seamless, fast, and scalable website. My choice of Tailwind CSS and Chakra UI for styling introduced a layer of customization and responsiveness, ensuring that the website remains visually appealing across all devices. I also used SASS to enable sophisticated design with efficient code management.

The back-end of the portfolio is powered by WordPress as a headless CMS, a strategic choice that combines the robust content management capabilities of WordPress with the modern JavaScript ecosystem. This hybrid approach allowed me to design a portfolio that is not only easy to update but also optimized for performance.

Deployment and Hosting

The website is deployed and hosted on Netlify, chosen for its simplicity and excellent support for Gatsby projects. Netlify’s continuous deployment from GitHub repositories makes updating the website a hassle-free process, ensuring that the latest version of my portfolio is always available to visitors.

Key Features and Technologies

  • Gatsby.js: Utilized for its exceptional performance and SEO benefits, allowing for the creation of a fast, PWA-compliant site.
  • GraphQL: Employs a schema-based approach to fetching data, ensuring that the website loads quickly by retrieving only the data needed.
  • React.js: Offers a component-based architecture, making the website highly interactive and responsive to user actions.
  • Tailwind CSS, Chakra UI & SASS: These frameworks provide a vast array of design utilities, enabling a highly customizable and responsive design, with SASS providing advanced features like variables, mixins, and functions for more dynamic stylesheets.
  • TypeScript: Enhances code quality and developer experience with static type checking.
  • WordPress: As a headless CMS, it facilitates content management and scalability, allowing for easy updates and management of the portfolio content.
  • Netlify: Provides automated deployments and an optimized hosting solution, ensuring that the website is always up to date and performs smoothly.

This portfolio website, mohariz.me, is more than just a showcase of projects; it’s a testament to the power of modern web technologies and a reflection of my dedication to creating meaningful, user-centric digital experiences. I invite you to explore the website, discover the projects I’ve worked on, and reach out if you’re interested in collaborating or learning more about my work.

List of embedded widgets I can add through WordPress CMS:

Youtube video

Sample youtube video edited by me 🙂

Twitter post

Spotify playlist

I like jazz 🎷

Google slides

Code snippet

import random

def roll_dice():
    input("Press 'Enter' to roll the dice...")
    result = random.randint(1, 6)
    print(f"You rolled a {result}!")

if __name__ == "__main__":
    roll_dice()

and many more!

© 2024 MUHAMMAD HARIZ