Personal Portfolio Site

Ship #1

@smjp on Personal Portfolio Site · about 2 months ago

I built a personal portfolio website from scratch to display my academic profile, community service, extra-curricular achievements, and my overall personality. It is a lightweight, static site built entirely with semantic HTML5, custom CSS3 layouts, and core JavaScript.
The single biggest obstacle was working with responsive design and media queries. Getting the layouts—especially text blocks and complex section wraps—to look natural and scale down elegantly on mobile devices required a significant amount of layout debugging and trial and error.
I’m really proud of grasping cleaner design principles and stylesheet architecture. Figuring out how to use the CSS :root class to store a global color palette and building a unified common CSS layout that cleanly links across separate pages felt like a huge leap forward in making my code maintainable.

The site is entirely static, responsive, and ready to view. To test it:
Open the project directly via its deployed link.
Toggle your browser's Developer Tools (F12) to responsive/mobile view to see how the media query breakpoints fluidly restructure the navigation menu, sections, and flex elements for smaller screens!

4 devlogs
6h
3.85x multiplier

Try project → See source code →

Open comments for this post

@smjp on Personal Portfolio Site · about 2 months ago

35m 5s logged

Devlog 4-

Finished the designs for every single page, made research connect to my research paper and added cool visual effects in my social media page

Also, media queries took me a lot of time which makes it look extremely clean on smaller devices

Open comments for this post

@smjp on Personal Portfolio Site · about 2 months ago

3h 26m 32s logged

Devlog3-
I added a navigation bar for all pages which looks really neat and it took me a lot of time to add media queries to make the website have a good UI in mobile phones or tablets. This taught me a lot and I’m starting to realize AI cannot replace humans after all. I feel its the same as mathematics, we have AI to do the math for us but we dont rely on it blindly. Moreover, I made individual pages for the websites with the same template idea and I also finished up on the experience page.
This is my first project and I am so excited to share the end result which I will post in Devlog4.

Open comments for this post

@smjp on Personal Portfolio Site · about 2 months ago

1h 33m 36s logged

Devlog -2
Hi again,
Here is the second page of my portfolio site it took me a long time to get a clean site lmk if you have any feedbacks or suggestions!!

Open comments for this post

@smjp on Personal Portfolio Site · about 2 months ago

15m 15s logged

Devlog1-
Hi! I’m Sam for short; I really fell in love with web designing a month ago and after learning HTML and CSS, I am currently learning JavaScript, yet I fear that I will lose my designing abilities hence, I am working on this personal portfolio site where I finished this main page in about 15 minutes, I find the design clean but if you have any feedbacks lmk! :>