Giter VIP home page Giter VIP logo

animated_portfolio's Introduction

animated_portfolio

🚀 🟪 Animated Portfolio 🟪 🚀

This application is a conclusion of my study about website perfomance and animations with NextJS

|   Overview   |    Technologies   |    Project   |   Run   |   Author   |   



| 🛰️ About:

In this project, the target is to build a website that beats all the main factors and metrics that measure how fast and well-structured an application can be, along with good ranking and SEO strategies. These metrics are known as Web Vitals and improve all tech skills related to website animations

For this, i build a Dev Portfolio website, that you can use as a template, because i can apply all features and visual designs and animations that i have in mind.


📡 | Hosted on Vercel: [ https://animated-portfolio-peach.vercel.app/ ]



🏗️ | Technologies and Concepts Studied:

  • NextJS
  • TailwindCSS
  • SASS
  • Typescript
  • Docker
  • EmailJS
  • Zod
  • Zustand
  • Framer Motion
  • Inversify
  • React Hook Form
  • React Hot Toast
  • eslint
  • Prettier
  • husky
  • lint-staged
  • Caching
  • Perfomance
  • SEO
  • Scalability
  • Web Vitals

Among Others...


💻 | Application:

This Portfolio show the highlights of a developer, social media, and some projects with a call to action in the end of the page. Parallax, drawn, fade in, are some of animations here. This project have a module system with email sending, form validations and more.



*Remember this software runs on free machines, that is, with the minimum of resources to fit into free plans, so with scarce resources in the production environment these were the results I obtained


GT Metrix


PageSpeed Insights - [ PC ]


PageSpeed Insights - [ Mobile ]



📡 | Hosted on Vercel: [ https://animated-portfolio-peach.vercel.app/ ]



👨‍💻 | How to use


Open your Git Terminal and clone this repository

  $ git clone "[email protected]:Samuel-Ricardo/animated_portfolio.git"

Make Pull

  $ git pull "[email protected]:Samuel-Ricardo/animated_portfolio.git"

This application use Docker so you dont need to install and cofigurate anything other than docker on your machine.


Navigate to project folder $ cd ./animated_portfolio/ and run it using docker-compose

  # After setup docker environment just run this commmand on root project folder:

  $ docker-compose up --build   # For First Time run this command

  $ docker-compose up           # to run project

  #Apps Running on:

  $ APP: http://localhost:3000

  See more: ./animated_portfolio/docker-compose.yaml


:octocat: | Author:


- Samuel Ricardo

animated_portfolio's People

Contributors

samuel-ricardo avatar xjuanxone avatar

Stargazers

Vitor Dornela avatar

Watchers

 avatar  avatar

Forkers

vitor-dornela

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.