Giter VIP home page Giter VIP logo

cjones-87 / seejonesprojects Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 352.42 MB

Presenting my personal portfolio to showcase my favorite personal projects & deliver engaging exceptional UI/UX. This portfolio demonstrates a range of site features including responsive UI, captivating 3D effects, light/dark modes, accessibility features, interactive games, resume, contact form, dynamic routing, code splitting, and lazy loading.

Home Page: https://www.seejonesengineer.com/

HTML 0.76% CSS 10.68% JavaScript 88.57%
3d-graphics accessibility code-splitting context-api dynamic-routing lazy-loading light-dark-mode personal-projects portfolio-website responsive-design

seejonesprojects's Introduction

header

Portfolio Website - Designed & Constructed by CJ Jones

Table of Contents

About

Welcome to my personal portfolio website! This website showcases my skills, projects, and experience as a front-end developer. It is an original concept created solely by me, and I have dedicated close to two years to its development. The website has been in production for nearly a year and a half, with regular updates being made on a weekly to monthly basis. Throughout its development, I have overhauled the UI multiple times to ensure an intuitive and visually appealing user experience while keeping up with the latest technologies.

PortfolioLoop

Technologies Used

Front-end

  • Postprocessing (v6.29.1) - for post-processing WebGL renders.
  • Primeflex (v3.1.3) - CSS utility library for PrimeReact
  • Primeicons (v5.0.0) - icon library for PrimeReact
  • Primereact (v7.2.1) - for rendering prebuilt UI components
  • React (v17.0.2) - for building user interfaces
  • React-dom (v17.0.2) - for DOM-specific methods for rendering React components
  • React-icons (v4.6.0) - for rendering React icons
  • React-pdf (v5.7.2) - for rendering PDF files as React components
  • React-router-dom (v6.2.1) - for declarative routing for React
  • Three (v0.144.0) - for creating and displaying animated 3D computer graphics
  • Typewriter-effect (v2.19.0) - for creating a typewriter text effect

Development

  • @vitejs/plugin-react (v2.0.1) - for seamless React integration
  • vite (v3.0.7) - for fast and optimized development with hot module replacement (HMR) support

Site Features

  • Light and dark mode
  • Dynamic routing
  • Code splitting
  • Lazy loading
  • Responsive UI
  • Playable interactive games
  • Resume
  • Contact form
  • Featured projects
  • 3D effects
  • Networking socials and contact info

Accessibility Features

I strive to ensure a highly accessible website experience. The following accessibility options have been implemented:

  • Descriptive page titles
  • Proper use of headings
  • Alt text for images/videos
  • Color contrast
  • Light/dark mode
  • Keyboard accessibility
  • Consistent/intuitive navigation
  • Proper form labels and input validation
  • Resizable text and responsive design
  • Minimal blinking/flashing content

Featured Projects

See Jones Engineer

SeeJonesEngineer.com gif

Javascript, React, PrimeReact, Three.js, HTML5, CSS3

Fully responsive, portfolio website to showcase my UX/UI talents and personal projects. My website features a user-friendly platform that allows users to browse my personal works and reach out to schedule conversations/work. The technologies used to design and construct the website's front-end were carefully chosen to ensure a responsive, efficient, and intuitive UI/UX. I integrated JavaScript, React, PrimeReact, CSS3, and Three.js to create an interactive and visually appealing website that engages users.

Blueprint Boilerplate

The Blueprint Boilerplate login loop gif

Javascript, React, Express, Node, PostgreSQL/Sequelize, CSS3, HTML5

Versatile Full-Stack eCommerce Boilerplate with pre-built CRUD functionalities for products/users, authentication, and optimized guest/logged-in experiences. It includes secure login/registration forms. This eCommerce boilerplate serves as a compelling starting point for developers, providing them with a powerful and technically advanced foundation to accelerate the development of innovative and feature-rich eCommerce applications.

Hypnotiq Musiq 2.0

Hypnotiq Musiq 2.0 gif

React Native, Expo, Firebase, Cloud Firestore

Hypnotiq 2.0 is a music player app that allows users to create, edit and delete music playlists, load music from their local device storage, and stream audio to help with sleep and study patterns. The app uses the latest industry technologies such as Javascript, React, CSS, Firebase, and Cloud Firestore to provide seamless audio playback and allow users complete control.

Hypnotiq Musiq 1.0

Hypnotiq Musiq 1.0 gif

React Native, Expo

Hypnotiq is a mobile application that provides users with a list of sound categories to choose from, allowing them to select different options within each category to facilitate studying and sleep habits. The MVP includes five related facts for each of the five senses and an additional random fact for each category. Hypnotiq was constructed using React Native and Expo for the front-end. Future goals include making the app more inclusive, adding more music genres, and allowing users to create, save, and share playlists with others, as well as comment on shared playlists.

IYKYK Quiz

IYKYK Quiz gif

JypeScript, React, HTML5, CSS3, Three.js

IYKYK is a multiple choice quiz game where users can choose their quiz category preferences from a menu of options. Questions and answers are aggregated from an external API then formatted to meet the game's design. IYKYK's frontend consists of TypeScript, React, HTML5, CSS3, and Three.js to create visually appealing 3D animations and rendering. IYKYK was created as an experiment to enhance my understanding of TypeScript, 3D animations, and rendering.

Computer Love

Computer Love gif

Javascript, React Native Expo, Redux, Express, PostgreSQL/Sequelize, Node.js

Computer Love is a mobile dating/networking application for users in the tech industry. The MVP allows users to register/login and swipe yes or no to dating/networking based on their preferences. The back-end is built with Node.js, PostgreSQL, Sequelize, and Express. This project was completed with my team System-Obsessed.

Boundz Bookstore

Boundz Bookstore gif

React, Redux, Node.js, PostgreSQL/Sequelize, Express, Material UI, HTML5, CSS3

Boundz Bookstore is an eCommerce bookstore that allows users and administrators to purchase books, modify purchase information, and access order history. The site features a persistent cart, new user registration functionality, and CRUD abilities for user and administrative accounts. The front-end was built using React, Redux, Material UI, HTML5, and CSS3, while the back-end was built using Node.js, PostgreSQL, Sequelize, and Express. The site is currently deployed on Vercel, but was previously hosted on Heroku. This project was completed with my team @ RobotsRUs

Coffee Clicker

Coffee Clicker gif

JavaScript, CSS3, HTML5

Mugnificent Idle Coffee Clicker game where players click on a coffee emoji to increment a counter that displays the quantity of coffee they possess. They can use coffee to purchase coffee-producing devices such as percolators and espresso machines. The player accumulates coffee passively based on the number and type of coffee producers in stock. The game features a progression system where new producers are unlocked successively as they accumulate more coffee, and the price of each producer steadily increases.

Guessing Game

Guessing Game gif

JavaScript, CSS3, HTML5

A guessing game application where the user has limited guesses to guess a number between 1 and 100, with the aid of a hint button and a reset button. The game was designed as an instructional introduction to DOM manipulation, and all code and design elements were created by me from scratch. This project utilized HTML5, CSS3, and client-side JavaScript.

Contact

You can reach out to me via email at [email protected]

Connect with me on LinkedIn: https://www.linkedin.com/in/cjones1827/

Visit my portfolio website: https://www.seejonesengineer.com/

footer

seejonesprojects's People

Contributors

cjones-87 avatar

Stargazers

 avatar  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.