a-sh-dev/portfolio

✨ Personal portfolio built with Next.js.

✨ Personal Portfolio

 → 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.}

🤔 Problem

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.

💡 Solution

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!).} 

⚙️ Tech Stack & NPM Packages ( & tools )

• 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
• SendGrid Formspree for contact form integration
• Vercel for deployment
• Responsive Viewer chrome extension – an absolute gem!

💪🏼 Future Improvements

• Integrating Sanity for headless CMS content management
• Filterable Journal cards and Project 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 the Next.js version so the "exit" page transitions work well.
• Branded 404 error page
• Accessibility improvements
• Typescript integrations
• Unit testing integrations

🛠 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. 🥲

  • After several fix attempts, I finally used the SendGrid alternative, Formspree (as recommended by Next). The SendGrid 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! 🙌🏼

• 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}