The latest articles on DEV Community by Rosalie (@developerpeachy). https://dev.to/developerpeachy https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F126377%2Fa4696f0a-f0f2-41fc-8ea9-7b61d746bfa3.jpg https://dev.to/developerpeachy en Rosalie Fri, 22 May 2020 05:05:50 +0000 https://dev.to/developerpeachy/building-my-personal-website-while-i-was-at-university-4og3 https://dev.to/developerpeachy/building-my-personal-website-while-i-was-at-university-4og3 <h2> My Final Project! </h2> <p>The motivation for me creating a personal website is to show to potential employees and find a graduate job in my area. I wanted a platform to showcase some of my finest work that I have made throughout university. I went for the NextJS/Now approach for a couple of reasons. </p> <ul> <li>It has pre-rendering capabilities.</li> <li>React was my strongest front-end framework. </li> <li>NextJS have support for most headless CMS'.</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--37P8FfjV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/8t9n36k93owezhyp153w.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--37P8FfjV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/8t9n36k93owezhyp153w.png" alt="My new website!" width="800" height="484"></a></p> <h3> Tech Stack </h3> <ul> <li>NextJS</li> <li>Prismic CMS</li> <li>React JS</li> <li>Now server</li> </ul> <p>Some features that I've implemented on my website: </p> <ul> <li>Dark/Light mode using React Hooks</li> <li>Styled Components to implement consistent styling and CSS in JSX.</li> <li>CSS Animations for the Gradient text, hover and responsive changes.</li> <li>Headless CMS integration with Prismic to host my images and blog posts. </li> <li>Font-pairing with Google fonts. </li> <li>Mobile-first design. </li> <li>Basic SEO.</li> <li>Meets basic accessibility criteria.</li> </ul> <p>Just take a look at the latest Lighthouse report: <br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--J9du-BUf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/ykr1gskrn4g9vy32wgo9.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--J9du-BUf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/ykr1gskrn4g9vy32wgo9.png" alt="Lighthouse Report on rosalie.dev" width="800" height="487"></a></p> <p>I'm still working on this now, but I'm pretty happy with what's on there. There's still some areas of improvement on my website:</p> <h4> Accessibility </h4> <p>Need to add options for alternative text, aria-labelling and a better colour scheme that is suitable for colour blind viewers.</p> <h4> Performance </h4> <p>I need to change the sizes of images and find a way to compress the sizes so that it can be loaded quicker on both mobile and desktop. </p> <h4> SEO </h4> <p>Although I'm not too keen on fixing SEO because this is a portfolio page, I'd like to learn more about Google Tag Manager and use tools to view metrics. I am trying to not rely on Lighthouse for the scores, but I believe there is a lot of learning to be done in this area (A+B Testing, marketing, etc).</p> <h4> Write more blogs! </h4> <p>I've been trying to find the motivation to write more, but I've been working a lot so when I do find the time and topic, I'll be writing more.</p> <p><strong>I'm open to suggestions to improve my website so please, let me know in the comments!</strong></p> <h2> Demo Link </h2> <p><a href="https://rosalie.dev/">https://rosalie.dev/</a></p> <h2> Link to Code </h2> <p><a href="https://github.com/developerpeachy/rosiedev">https://github.com/developerpeachy/rosiedev</a></p> 2020devgrad octograd2020 showdev frontend