Giter Site home page Giter Site logo

m-e-sakr / personal-portfolio Goto Github PK

View Code? Open in Web Editor NEW

This project forked from justindjsuh/personal-portfolio

0.0 0.0 0.0 3.42 MB

This is version 2.0 of my personal portfolio. It was quickly conceptualized and wireframed as my web development skills progressed at an extremely fast rate. It serves to be visual evidence of my skillset as well as a way to see how much I've improved.

Home Page: https://personal-portfolio-swart-rho.vercel.app

JavaScript 59.69% CSS 39.06% HTML 1.24%

personal-portfolio's Introduction

Justin Suh Portfolio

JavaScript React CSS3 HTML5 Vite Green Sock

PurposeDemoTech StackPackagesLessons Learned

Purpose

  • This website is my personal portfolio where I can not only demonstrate my skillset, but also talk about my experiences and past projects that have brought me to where I am now.
  • I think there's a beauty in not just making a portfolio, but projects in general. Each project I make is a step towards my goal of learning more about the constantly expanding field of web development and software engineering.

Demo

Screenshots

Landing Page

portfolio landing page

About

portfolio about page

Experience

portfolio experience page

Projects

portfolio project page

Contact

portfolio contact page

Dark Mode Theme

portfolio dark mode contact page

Tech Stack

Tech Name Home Page
React https://reactjs.org/
Vite https://vitejs.dev/

Packages

Package Name Home Page
GSAP (Green Sock) https://greensock.com/
EmailJS https://www.emailjs.com/

Lessons Learned

Before I begin, I must give credit to Demilade Olaleye for inspiring me to create an intro page. He had an amazing light/dark toggle animation I just needed to apply to my portfolio.

I had made my first portfolio back in January, so it felt like it was an odd decision to decide to make a new one so soon (within two months). But with the amount of knowledge I gained in those short two months, I felt like I could do so much better than what I currently had. That inspired my decision to create a new portfolio from scratch that utilized my new web development and design knowledge.

One of the features I really wanted to implement this time around, was a dark mode feature. It was very cool to work with :root variables and having them change based on the theme designated. I had a lot of fun with working with two different themes and I hope to implement something with dark/light theme again in the future! It was tricky getting it to work the first couple days I was working with it. One thing to note, is that while the dark/light toggler works, it doesn't save the theme of the user. If you refresh the page, it will default to light mode. I do know that this is fixable using local storage and storing the currently set theme as a variable in the storage object. However, I wasn't able to implement that just yet. It is in the list of features I am planning to implement though.

I had tried to work with Anime.js and a package called Splt.js, but for some reason I could not get them to work properly. I stuck with GSAP for animations and kept the tech pretty vanilla in terms of new packages. I really struggled with making the page-to-page transitions seamless. I think that in the future, I would opt to find a cleaner solution than the one I implemented. It is a bit finnicky so it is definitely not the preferred method.

I also got the opportunity to work with EmailJS which is a package/service that allows you to send emails without any backend code. It was awesome to work with, but I don't know if I'll find another use case for it. Instead of displaying my email and using social links, I wanted to incorporate a contact form that actually sends an email to my inbox. It worked perfectly and I am quite happy with the results. I think I should definitely try to look into using useReducer for forms that have a lot of input states that need to be tracked. I could also look into consolidating the five input states into one state and have the value be an object. Then use the spread operator to update the state object values.

personal-portfolio's People

Contributors

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