✨ Personal Portfolio

 → version 1.0

This project is the second personal portfolio built since I've begun my coding journey. A revamped of the first one that I built by only using HTML5 and SASS. _{Check the GitHub repo for the first project.}

After completing the boot camp, I initially planned to use only React.js, but I'm sold by how Next.js features a faster and more scalable app due to its server-side rendering capability. Next.js is an extension framework of the React.js library plus the added SEO friendliness and built-in router improvements. Generally, it's faster due to its server-side rendering functionality, especially for generating static websites.

The most enjoyable learning in this project is building reusable components and working on conditional rendering through data iterations. All the UI styling are only made possible (and faster) thanks to twin.macro, which significantly assists in blending the best of two worlds between Tailwind CSS and Styled-Components.

By no means this portfolio is entirely complete. There are many rooms for improvements. But I'm happy to release this version while at the same time working for further development and refinement.

Live 👉🏻 a-sh.cc

_{↓ Please check the following known issues and upcoming improvement plans (any help or issues report is much appreciated!).}

⚙️ Tech Stack & NPM Packages ( & tools )

Next.js
Node.js v16.13.0
Tailwind CSS
Styled-Components
Twin.macro
React-icons
React-easy-emoji
@svgr – for custom svg conversions into functional components
Date-fns
SendGrid for contact form integration
Vercel for deployment
Responsive Viewer chrome extension – an absolute gem!

💪🏼 Future Improvements

Filterable Journal cards and Project cards.
Individual page for every Project with detailed information and more images.
Page transitions or loading (with Framer motion) for additional features and overall UI improvements.
Branded 404 error page
Integrating MongoDB for Journal entries.
SEO and accesibility improvements
Add more projects!

🛠 Known Issues

Due to an unknown problem, I'm currently fixing the SendGrid integrated contact form. I tried testing the form submission to the Next.js endpoints, yet despite the 200 status delivery reports, I never received any emails in the mailbox. 🥲
I tried to animate the heights of the collapsible component on the about me section (on the home page). Yet, it has resulted in weird unwanted extra spacing to the remaining content. I may use a third-party package to help with this additional interactivity.

_{This is a Next.js project bootstrapped with create-next-app. Built with Node v16.13.0, packaged with Yarn.}

manuarora700 / portfolio

✨ Personal Portfolio

⚙️ Tech Stack & NPM Packages ( & tools )

💪🏼 Future Improvements

🛠 Known Issues

About

Languages