Version 1
About six months later, I finally finished my personal website/portfolio. In June 2020, I posted a piece asking for advice and seeing if a personal website is necessary. After a generous amount of replies, I decided to start working on my website. I used GitHub Pages to host my website which creates a website for your projects, hosted directly from your GitHub repository. For more information, I created another post sharing the beginning stages of the website.
Breakdown of the website
The website is a basic website from HTML5 UP!. I took the layout of it because I liked its styling and thought it would be easier to get started with an outline. However, HTML5 UP! is very customizable, and I added my personality and elements. I broke the website down into five parts: home, my projects, about me, blog, and contact.
Homepage
The homepage is the star page of any website. It is the initial page that should draw the users/customers. My website is supposed to show my purpose and describe my online presence or brand. The first thing you see is my name, as well as a cool automated typewriter animation. I added that customized effect to show my creativity and to feel as if you're welcome on my site. As you scroll further down on the homepage, I display a couple of key facts about me and my interests. Overall I wanted to keep the homepage simple and easy to follow, so I chose to use a static page. Additionally, a couple of interactive pieces like buttons on the page give it a more dynamic feel.
My Projects
With any website/portfolio, you need to showcase your projects and work. As a college student, I feel it's even more crucial, especially if you are using your site to get a job. I added a couple of projects that I have done in college, along with a brief description. I have also included some screenshots and images of the project and a button to download the full project if they are interested.
About Me
The about me page is crucial to describe yourself further. I didn't want to talk about my education and career interests but wanted to share a story about how I got to where I am now. I wanted to portray myself expressively and cleverly that people are fascinated by. I also mentioned some hobbies and future goals to explain the direction I am looking to go towards. Lastly, I included some awards/honors and my social media links.
Blog
The blog page opens a new tab to my DEV profile. I wanted to include my writings from DEV because it shows another side of my life, and I am very proud of it.
Contact
The contact page opens to your mail and creates a new email with my email address. It's an easy way to contact me if you would like!
Anything else?
So far, I am thrilled with how the website turned out. I probably would have never thought I could have coded a website about six months ago, and here I am with my website. Although I didn't code it all and used an outline, I learned a lot. By looking at HTML, CSS, and JavaScript, I became more familiar with the language and syntax. Additionally, I customized the website and added other pieces that made it my own. There is still a lot I can improve on and continue to work on the website as I learn more. I will also try to update it regularly as I do other involvements and progress in my career.
If anyone has additional comments or feedback, I would love to hear them!
Top comments (8)
Cool site. One thing I noticed is that the root URL saracunn.github.io/ doesn't go anywhere. If you want to change that, you need to rename the repo according to the git pages docs, not 100% sure though.
Anyways, I think having a personal website is a great thing.
Cheers!
Awesome, thanks for letting me know! I've been trying to change it to be the root URL — I'll look into it.
I think you have done a great job here, especially the intro hero section on your homepage.
A few suggestions for the next round...
At the bottom maybe move the "Return to top" to the bottom of the footer and have it as a text link instead. take.ms/xHmOt The reason being, that banner is all about learning more about you and contacting you. The current button has the most visual impact but has nothing to do with either. Perhaps make the current filled in button go to your About page and the secondary button go to your contact page.
I think you do a great job exploring colors, it might be worth however pairing it down to one/two primary colors and then tints/shades of those for a more consistent look. Adobe Color and coolers.co are great resources to help with this. :)
Also regarding the colors, I would suggest auditing your site to make sure they match Web Accessibility best practices for contrast. For example, the main CTA button at the top for your projects fails all 3 contrast categories for contrast. Better accessibility practice will help your users, but also SEO as Google factors this in when crawling sites.
Best of luck with your coding journey!
Thanks so much for all of the advice! I really like your suggestion about moving the "return to top" to the footer. Also, I really didn't look into colors and used the premade ones, so I am interested in learning more about that and customizing it. I really appreciate you sharing some resources and info!!
Hi, Sara. Your site looks good. I would change gray gradients to some other color.
I'll definitely look into that! Thanks for checking out my website and for the feedback!
Realy nice looking site.
But in "myProjects" when your screen width is < 600. Your text goes under the images.
Good to know, thanks so much!