This portfolio shows some client work and front-end projects with clean, responsive layouts. Each project explains what was built and how along with the github page and live links. The site uses reusable components, glass-like UI, particle effects for a modern look.
This is my personal developer portfolio website where I can showcase my projects and a way to contact me. I programmed it in HTML+CSS+JS along with Netlify as the host. I utilized resources like FontAwesome (Icons), Google Fonts (Fonts), and DebugBear for testing site speed.
I learned site structure like using “public/” to seperate the client-side from the server-side. I over-complicated the contact forms and only after a couple hours did I realize, I could just use Netlify forms. I used a service worker to speed up load times for later visits and will be very helpful for the projects page since it will contain many images.
I fixed up the homepage by adding a gradient and particle effects and it looks much better.
Originally the gradient placement was off originally for the contact page so I did the same gradient and particles for the contact and project pages
I removed the placeholder projects and changed some of the styles to be more consistent across the site
Next I’ll go through the repo to remove anything unesesary, add more to the portfolio, and finalize this project
Log in to leave a comment
I styled up the contact page and added char limits and basic sanitization for the input fields.
I added responsive styling for all the pages so that mobile doesn’t look bad.
I blurred out the content with a small message for super small screens because the content becomes broken
Next I plan to work on the home page by making it responsive and adding some animations. Then I’ll remove the placeholder projects and add real projects to the projects page
Log in to leave a comment
I fixed up some styling issues, the cards weren’t scrolling and I didn’t like the design for the modal. I removed the image gallery for the project mockups and instead just make it 1 image.
I added small “tag-like” pill that shows “Real Client”/“Personal”. I worked on the contact page, turns out Netlify handles form submissions easily and so a lot of time was wasted. It still looks bad but atleast now it works and EmailJS was not nesesary.
I didn’t get much time today but tomorrow I’ll work on the contact page styling. After I’ll try to add some images, icons, and make the site more responsive.
Log in to leave a comment
I’ve added the modal and it looks broken. I’m trying to make a gallery with demo images of the project. I’ve added a barebones contact form with some basic styling
Tomorrow, I’m going to fix the modal, setup EmailJS account + template and clean up some styling. I also plan to add animations and transition soon
Log in to leave a comment
I updated the project page and contact page by adding all the main css files, the nav menu components and the SEO tags. 404 page actually has a 404 message now.
The projects page now has projects! (it’s all placeholder tho) I used Placehold.co for placeholder images, and the classic Lorem ipsum for the text. I focused on making it an easy process for adding projects. It’s all generated dynamically with JS from an array containing objects (JSON).
I plan to make the modals next and probably add a button so that anyone can see demos of the project. After that I’ll probably setup EmailJS for the contact page.
It’s all barebones and not a lotta styling but I hope to make it look a lot nicer later
Log in to leave a comment
The main content of the home page and the nav menu is done (the nav menu has buttons to other pages and also socials to reach me).
I’m using Font-Awesome for icons and Google Fonts for Open Sans/Poppins
The project structure is ready for when I start adding real projects to the portfolio. I have added some SEO tags like Social Open-Graph & Twitter card. I still have some SEO tags that have placeholders that I need to update
My focus now is to add something to the portfolio and contact pages. After that I’m going to add something to the 404 page
Log in to leave a comment