→ version 1.2
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.
Using HTML5
and SASS
alone is not practical to maintain a scalable portfolio. I need a templating or pattern system that I can utilise as reusable components in the portfolio and enforce a cohesive and consistent look to the UI.
For styling, I want to experiment using Tailwind CSS
and utilise the flexibility of Styled-Components
.
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 creating design patterns → building reusable components, and working on conditional rendering through data iterations for better maintainability. 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!).
- Next.js
v12
- Tailwind CSS
- Styled-Components
- Twin.macro
- Framer Motion
- React-icons
- React-easy-emoji
- @svgr – for custom svg conversions into functional components
- Date-fns
- Axios
SendGridFormspree for contact form integration- Vercel for deployment
- Responsive Viewer chrome extension – an absolute gem!
- Integrating
Sanity
for headless CMS content management - Filterable
Journal
cards andProject
cards - Filterable
Journal
cards for Mobile screens - Filterable
Project
cards (when there are more content) - 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. Note: I need to upgrade theNext.js
version so the "exit" page transitions work well. - Branded 404 error page
- Accessibility improvements
- Typescript integrations
- Unit testing integrations
-
Due to an unknown problem, I'm currently fixing theSendGrid
integrated contact form. I tried testing the form submission to theNext.js
endpoints, yet despite the 200 status delivery reports, I never received any emails in the mailbox. 🥲- After several fix attempts, I finally used the
SendGrid
alternative,Formspree
(as recommended by Next). TheSendGrid
contact form finally worked in development, and I could receive the submitted messages. However, unfortunately, it failed on production/deployment (even with neccessary environment variables already added to Vercel's settings, and redeployed). I will investigate further. - Special thanks to Manu Arora (manuarora700) for the kind help in trying to solve the
SendGrid
issues! 🙌🏼
- After several fix attempts, I finally used the
-
I tried to animate the heights of the collapsible component on the about me section (on the home page) without any framework. 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
.
Crafted with care ❤ (and powered by lots of caffeine ☕️ 🍵 🫖) by a-sh. © Since 2022