All Projects → riyaz942 → Web Portfolio

riyaz942 / Web Portfolio

Personal portfolio website made with the React

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Web Portfolio

React Portfolio Template
Modern React Portfolio Template (FREE)
Stars: ✭ 188 (-9.18%)
Mutual labels:  portfolio, portfolio-website, animations, scss
Devportfolio
A lightweight, customizable single-page personal portfolio website template built with JavaScript and Sass
Stars: ✭ 3,582 (+1630.43%)
Mutual labels:  portfolio, portfolio-website, scss
Flexible Jekyll
Flexible-Jekyll is a simple and clean theme for Jekyll
Stars: ✭ 531 (+156.52%)
Mutual labels:  portfolio, portfolio-website, scss
Personal Site
My personal website - built with React, React-Router, React-Snap for Static-Export, and GitHub Pages.
Stars: ✭ 324 (+56.52%)
Mutual labels:  portfolio, portfolio-website, scss
Jalpc
🍎Jalpc -- A flexible Jekyll theme, 3 steps to build your website.
Stars: ✭ 859 (+314.98%)
Mutual labels:  portfolio, portfolio-website, scss
Accecss
AcceCSS A Sass Mixin That debug & check the accessibility of your designs
Stars: ✭ 132 (-36.23%)
Mutual labels:  mixins, scss
Gabriel Adorf Portfolio
Gabriel Adorf's personal website
Stars: ✭ 133 (-35.75%)
Mutual labels:  portfolio, portfolio-website
Minimalist Portfolio
A simple minimalist one page portfolio. Link:
Stars: ✭ 136 (-34.3%)
Mutual labels:  portfolio, portfolio-website
Skeleton Sass
Skeleton Sass is a highly modular version of Skeleton CSS
Stars: ✭ 151 (-27.05%)
Mutual labels:  mixins, scss
Lichter.io
My own website and CV
Stars: ✭ 105 (-49.28%)
Mutual labels:  portfolio, portfolio-website
Portfoliohub
Your portfolio is captured here!
Stars: ✭ 152 (-26.57%)
Mutual labels:  portfolio, portfolio-website
Devfolio
A modern and production-ready personal portfolio + blog template built with GatsbyJs and TailwindCSS
Stars: ✭ 154 (-25.6%)
Mutual labels:  portfolio, portfolio-website
Mixins
sass mixins
Stars: ✭ 132 (-36.23%)
Mutual labels:  mixins, scss
Mq Scss
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
Stars: ✭ 122 (-41.06%)
Mutual labels:  mixins, scss
Portfolio Generator
JS framework to dynamically generate a portfolio site from a JSON file
Stars: ✭ 135 (-34.78%)
Mutual labels:  portfolio, portfolio-website
Theden.sh
Personal website 🌊
Stars: ✭ 118 (-43%)
Mutual labels:  portfolio, portfolio-website
Developerfolio
🚀 Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.
Stars: ✭ 2,814 (+1259.42%)
Mutual labels:  portfolio, portfolio-website
Sassessentials
Repository for my tutorial course: Sass Essential Training on LinkedIn Learning and Lynda.com.
Stars: ✭ 167 (-19.32%)
Mutual labels:  mixins, scss
Portfolio Generator
HoxNox - Portfolios Made Easy, Generate portfolios in 3 easy steps
Stars: ✭ 166 (-19.81%)
Mutual labels:  portfolio, portfolio-website
Browser Hack Sass Mixins
Browser hack sass mixin - Apply your SCSS to a specific browser - CSS hacks for: IE, Chrome, Firefox, Edge, Opera
Stars: ✭ 170 (-17.87%)
Mutual labels:  mixins, scss

My Developer Portfolio 😊

A portfolio website made with React and React-Spring for animations.

Used Created-React-App for this project so to run locally

  • clone
  • npm/yarn install
  • npm/yarn start

Desktop/Mobile Preview :

Inspiration taken for some of the elements implemented

Loader animation
Technology and Timeline page
Project description page (title header animation)

Seperate examples from the portfolio

(for simple reference, to avoid mixup of other logics in the project)

Architecture and some note on the application

  -src
    -app
      -common      // Contains styles and custom components, hocs and utils,
      -constants   // Project constants and strings
      -examples    // Seperate animation example that is taken from the project for better readability
      -modules     // Pages and individual components
    -assets        // self explainatory
      -icons
      -images
  • Have used webpack's resolve.alias to alias some of the common paths to reduce relative imports in the project.
  • Mostly Used Scss, Flexbox, Media-Queries for styling, layouting and responsiveness, haven't used any css framework in this
  • Used React-Spring for majority of the animations
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].