Git Product home page Git Product logo

justin-bento / portfolio Goto Github PK

View Code? Open in Web Editor NEW
1.0 3.0 0.0 22.62 MB

This project highlights my skills, experience, and web development projects. I've created this website to offers insight into my professional journey and show my capabilities as a developer.

Home Page: https://www.justin-bento.com/

JavaScript 2.58% TypeScript 95.45% CSS 1.98%
nextjs react sanity tailwindcss typescript vercel google-analytics

portfolio's Introduction

Portfolio.

Portfolio is Justin Bento's main repository that hosts all the files for my website. This website is based on the React ecosystem using Sanity as the content management System. The goal of my portfolio is to tell the story of how each project came to be. By focusing on the journey, challenges, and insights gained throughout the design, and development process.

Installation

Follow these steps to set up the project:

Step 1: Navigate to the Main Folder

First, navigate to the main folder of the project:

cd portfolio

Step 2: Install Dependencies

Use npm to install all necessary packages for the portfolio:

npm install

Usage

Step 1: Start the Development Server

Navigate to the main project folder and start the development server:

cd portfolio
npm run dev 

This command will start the development server and you should see output indicating that the server is running.

Step 2: Access the Application

Open your browser and go to:

 url: http://localhost:3000

You should see the homepage of the portfolio application.

Step 3: Interacting with the Application

  • Homepage: View an overview of the portfolio with a summary of projects and skills.
  • About: Visit the about section feel free to ket to know me
  • Projects Page: Navigate to the projects page to see detailed descriptions of each project.

Step 4: Using Sanity Studio

To access and manage the content using Sanity Studio, navigate to the portfolio-studio folder and start the Sanity development server:

cd portfolio-studio
sanity start

Open your browser and go to:

http://localhost:3333

You should see the Sanity Studio interface where you can manage your project's content.

Note: Ensure that your .env file is correctly configured with your Sanity project ID and dataset to avoid any issues with content display.

Note: Changing the project ID and dataset will cause the articles related to the original project to not display, as they are linked to the original project configuration.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

None

portfolio's People

Contributors

justin-bento avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

portfolio's Issues

Implementing Sanity CMS for Blog

implement Sanity CMS for our blog. Currently, our blog is using a traditional CMS that doesn't provide the flexibility and customization options that we need. After researching different options, we have decided that Sanity CMS would be the best fit for our needs.

  • Setting up the CMS and configuring it to meet our requirements.
  • Creating custom schema for our blog content, including posts, categories, tags, and authors.
  • Integrating the CMS with our existing blog design and functionality.
  • Migrating our existing blog content to the new CMS.

Stop Appbar from opening by default on small screen.

**Issue: ** The header by default opens on mobile and tablet screens. Issue occurs as it takes up a lot of screen real estate on mobile.

Goal

Fix the header, by keeping closed by default on mobile and tablet screens. So when-a user opens the menu

If the user changes to desktop from mobile then automatically keep the class open.

Create Case Studies For Projects

Now that sanity has been connected. The goal is to write out an outline, of the case study and keep doing it for different types of projects.

Setting The Stage

Improve Websites Title, Description, and Call To Action for Increased Trust.

Goals

  • Update the website title to be more descriptive and personal.
  • Revise the website description to clearly convey authenticity and build trust.
  • Enhance the call to action to encourage engagement and reassure visitors of the site's legitimacy.

Goals

  1. Review the website title to better reflect the personal nature of the site.
  2. Craft a new, compelling website description that emphasizes authenticity.
  3. Design a call to action that reassures visitors they are interacting with a real person.
  4. Implement the changes in the website's codebase.
  5. Test the updated elements to ensure they are effective and visually appealing.
  6. Collect user feedback to confirm the improvements enhance trust and engagement.

Acceptance Criteria:

  • The website title is descriptive and personal.
  • The website description clearly communicates trust and authenticity.
  • The call to action is compelling and reassures visitors.
  • All changes are visually appealing and maintain the website’s overall design.
  • Positive user feedback indicating increased trust and engagement.

List Item Text in Articles Are Hard To Read!

After launching Farah's Case Study, the content rendered with no issues.

However there is a style issue with unordered and ordered lists. The text doesn't match the style for light and dark text.

image

The goal is to update it to match the paragraph style as the rhythm drastically changes.

Implement Article Filtering Feature on Project Page

Overview:

To enhance the user experience on our project page, we propose implementing a feature that displays two articles (a design article and a developer article) with a filtering option. Users will be able to switch between these articles using a filter, providing easy access to both types of content based on their interest.

Goals:

  • Display a design article and a developer article on the project page.
  • Provide a filter option for users to switch between the articles.
  • Enhance user engagement by offering relevant and categorized content.

Tasks:

  1. Design the layout for the project page to accommodate two articles with a filter option.
  2. Develop the filtering functionality to switch between the design article and the developer article.
  3. Implement the articles' content on the project page.
  4. Ensure the filter is intuitive and easy to use.
  5. Test the feature across various devices and browsers to ensure compatibility and performance.
  6. Collect user feedback to assess the effectiveness of the filtering feature.

Acceptance Criteria:

  • Both the design and developer articles are displayed on the project page.
  • Users can switch between the articles using a filter option.
  • The filter is intuitive and user-friendly.
  • The feature works seamlessly across different devices and browsers.
  • Positive user feedback indicates the feature enhances the user experience and provides valuable content.

Additional Information:

Please refer to the attached document for the proposed articles and filter design. Any feedback or additional ideas are welcome.

Attachments:
[Attach document will be in the comments]

Improve Mobile and Tablet Experience

I am writing to request an improvement in the mobile and tablet experience for the website Justin-Bento.com. Currently, the website appears to be optimized for desktop, but the mobile and tablet experience is not up to par. This is causing frustration for users who access the website on their mobile devices, and it may be hindering our ability to reach new customers.

  • Implement a responsive design: A responsive design will ensure that the website adjusts to fit the screen size of the device being used to view it. This will make it easier for users to navigate and interact with the website on mobile and tablet devices.

  • Simplify the navigation: The current navigation menu can be difficult to use on smaller screens. Simplifying the navigation by using collapsible menus or a hamburger menu will make it easier for users to find what they are looking for.

  • Optimize images: Large images can take a long time to load on mobile devices, which can lead to slow load times and frustrated users. Optimizing images for mobile and tablet devices will improve the overall performance of the website.

  • Test the website on multiple devices: It's important to test the website on a variety of mobile and tablet devices to ensure that it works well on all screen sizes and resolutions.

Enable Analytic Support Vercel

Enable analytics support for your Vercel project with ease using this GitHub repository. Improve your website performance and track user engagement.

Implement dark mode throughout the website interface

This commit implements a dark mode feature that can be toggled on and off throughout the entire website interface. The change involved including a dark theme for tailwind css, This feature is now available to all users and should provide a more comfortable browsing experience, particularly for users who prefer darker backgrounds.

  • Ensure text is legible and follows W3ACG accessibility standards.
  • Update the hovered elments so you won't blind people.
  • Make sure logo can change it's fill color relative to the system UI.
  • Check hidden messages and content just in case.
  • [ ]

Move hamburger menu to left for better UX.

Currently, the hamburger menu is located on the right side of the screen. To improve user experience (UX), we propose moving the hamburger menu to the left side of the screen. This change is based on user feedback and industry best practices, suggesting that left-aligned menus are more intuitive and accessible for users, especially those who are left-handed.

  • Update the position the hamburger menu on the left side.
  • Test the new menu placement on various devices and screen sizes.
  • Figure out where to place the websites brand.
  • Ensure responsiveness and usability.

Implement new SEO meta tags

This issue aims to implement new SEO meta tags for the justin-bento.com website to improve its search engine visibility and drive more organic traffic. The following changes have been made:

  • Impliment the "description" meta tag to provide a concise summary of the page content and entice users to click through from the search engine results page.

  • Impliment the "keywords" meta tag to identify the main topics covered on the page and help search engines understand its relevance to user queries.

  • Impliment the "author" meta tag to identify the website owner or content creator, which can enhance the website's credibility and establish its authority in the industry.

  • Impliment the "robots" meta tag to instruct search engine crawlers on how to index the page content, such as whether to follow links or ignore them.

  • Impliment the "title" meta tag to accurately reflect the page content and include relevant keywords for improved search engine rankings.

Create Custom Pages for Various Computer Network Communications

Include the addition of custom pages for various HTTP Status Codes to improve the website's usability and provide better access to relevant information.

Currently, the website provides general information on portfolio, but having custom pages dedicated to Error or specific communication protocols such as 404, 503, etc. would greatly enhance the user experience by keeping everything within the brand.

Incorporate More Emojis Throughout the Website

To make the website more engaging and visually appealing, we propose incorporating more emojis throughout the content. Emojis can help convey emotions, highlight important information, and make the site more relatable and fun for users.

Goals:

  • Enhance user engagement by adding relevant emojis.
  • Improve the visual appeal of the website.
  • Make content more expressive and relatable.

Tasks

  1. Identify key areas of the website where emojis can be effectively used.
  2. Select appropriate emojis that match the tone and context of the content.
  3. Update the website content to include the selected emojis.
  4. Ensure that the added emojis do not disrupt the readability or accessibility of the content.
  5. Test the website on various devices and browsers to ensure emojis are displayed correctly.
  6. Gather user feedback to assess the impact of the changes on user engagement and satisfaction.

Acceptance Criteria:

  • Relevant emojis are incorporated in key areas of the website.
  • The addition of emojis enhances the visual appeal and engagement of the content.
  • Emojis are displayed correctly across all devices and browsers.
  • User feedback indicates a positive response to the use of emojis.

Manage Form Submissions and Email Management

As a visitor to Justin-bento.com, I noticed that there are several forms available for submitting inquiries, feedback, and other types of messages. However, it seems that there may be some issues with how these form submissions are being managed and processed. Additionally, there may be opportunities to improve email management on the website.

To ensure that visitors' messages are received and responded to promptly, it is essential to have an effective system for managing form submissions and email communications. This issue is being raised to address any existing issues with these processes and to propose potential solutions for improving them.

  • Ensuring that all form submissions are received and properly routed to the appropriate recipient(s).
  • Implementing an automated system for sending confirmation emails to visitors after they submit a form.
  • Improving the formatting and organization of email communications to make them more user-friendly and easier to manage.
  • Implementing a system for tracking and responding to messages in a timely manner.

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.