https://github.com/nyctophilus/portfolio

My personal portfolio website --vanilla
https://github.com/nyctophilus/portfolio

gulp pug-template-engine pugjs sass scss

Last synced: 14 days ago
JSON representation

My personal portfolio website --vanilla

• Host: GitHub
• URL: https://github.com/nyctophilus/portfolio
• Owner: Nyctophilus
• Created: 2022-03-25T13:17:34.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-06-26T16:54:36.000Z (over 1 year ago)
• Last Synced: 2024-10-18T01:38:43.993Z (about 1 month ago)
• Topics: gulp, pug-template-engine, pugjs, sass, scss
• Language: SCSS
• Homepage:
• Size: 16.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Portfolio 

## My Personal Portfolio

### Table of Contents

- [Overview](#overview)

- [Features](#features)

- [Todo-List](#todo)

- [Timeline](#timeline)

- [Stats report](#reports)

- [Contact](#contact)

### Overview

- My personal portfolio. I've tried to gather all the tricks & workarounds I learned so far, So it will serve as a showcase of my skills in the present!

- I built the app without a framework to showcase I can build anything from scratch.

- The App utilizes CRUD operations in the contact form. Also, the Idle state for the side controllers and many more js implemented functionalities are listed below.










![Preview page](preview.webp)

#### Features

	
Advanced project structure SASS/Pug/Gulp

	
Components oriented project

	
Used Gulp to compress images to minify MBs for the max limit!

	
Dynamically created controllers based on the main sections --performance & blogging purposes

	
hide controllers on idle state

	
localStorage to save settings

	
loading state

	
Downloaded icons separately to minify KBs... considering SVGs

	
Limiting scroll, mousemove events on their perspective sections --performance purposes

	
Coordinated Complex Animation timeline stamps

	
Timely preview dialogs

	
Validation Form

	
Improved preformance by 36%, accessability 23%, best practices by 12%, SEO by 24%








#### TODO:

- [x] dw hover interchange clrs

- [x] dark toggle functionlity

- [x] smiley faces home bg

- [ ] 9 dots Menu on mobile

- [ ] Hexagon hover

- [x] one-section on bigger devices

- [x] falling animation on active section!

- [x] loading state with animated word

- [-] Spinners at certificates section

- [x] eye follow at contact section --Contact me word

- [x] custom scrollbar

- [x] localStorage to save settings 'such as dark/light mode'

- [x] animate skills' bars

- [x] fading effect on shadow text

- [x] FIXDONE: timeline stamps on mobile view --> timeliner on left, stamps on right 1-col

- [x] hover img greyscale -> ..

- [x] effect trail follow mouse

- [-] fixed sidebar on the left .... fakely created by dom fragment

- [x] form input bottom borders

- [x] timely disappear controllers on idle state

- [x] click on img popup a viewer screen with x btn

- [x] complete meta file

- [x] FIXDONE Autoplacement IE supports

- [x] Edge supports

- [x] FIXDONE sections' padding in Edge browser

- [x] FIXDONE clean any hover effect on large screens only

- [x] FIXDONE disable idle state on home section

- [x] FIXDONE iusse font family, timeline on mobile view

- [x] mousemove event only at contact section

- [x] reset css

- [x] clean build/js files

- [x] Fully functional submitting form

- [x] add links in the grid popup preview

- [x] dynamically creating controllers into fragment based on sections number

- [x] validation system of the form

- [x] run tests for performance, accessability, SEO, best practices

- [-] fetch portfolio images from github links

- [x] the x button in image previewer

- [x] check if can remove sections node instead of hidding em

- [x] interplacing moving animation on portfolio

- [x] onScroll transformY the section from -100% to 0

- [x] logo and header 'menu on mobile'

- [x] lighting points around home section links, check the earthy bgs

- [x] filter on the portfolio items

- [x] sending message at contact section actually function

- [ ] scroll based moving through sections & animations

- [ ] https://codepen.io/alexitaylor/pen/RgxJwg pacticles

### Timeline


1st Day: 26/3/2022

first Dev session:      01:12 PM    ~   07:32 PM        ~ 06h 20m


2nd Day: 27/3/2022

first Dev session:      11:12 AM    ~   05:23 PM        ~ 06h 11m

second Dev session:     08:28 PM    ~   11:35 PM        ~ 03h 07m

3th Day: 28/3/2022

first Dev session:      12:05 PM    ~   04:15 PM        ~ 05h 38m

second Dev session:     05:43 PM    ~   06:21 PM        ~ 00h 38m

4th Day: 29/3/2022

first Dev session:      01:10 PM    ~   06:52 PM        ~ 05h 42m

5th Day: 30/3/2022

first Dev session:      12:10 AM    ~   05:02 AM        ~ 04h 52m

second Dev session:     03:11 PM    ~   06:45 PM        ~ 03h 34m

third Dev session:      06:37 PM    ~   12:15 AM        ~ 05h 38m



Initial Development Completed in   41h 40m











#### Reports

    Website Stats Desktop Report

    

    Website Stats Moblie Report

    










#### Contact

🤩 Leave a :star: if you like it, Please!




📫 Please hit me up at [email protected] if you have any feedback or improvements.