Skip to content

Latest commit

 

History

History
111 lines (81 loc) · 5.91 KB

README.md

File metadata and controls

111 lines (81 loc) · 5.91 KB
Raw
Home Page, mobile dark mode

My Portfolio

by Kim Robinson

¨ ¨

See it live on GitHub Pages

Initiated September 6, 2024

Home Page, Light Mode Projects Carousel, Dark Mode

Jump around!

About the Project

Description

My first portfolio was one of my earliest independent projects at Epicodus bootcamp, built with my newly acquired skills in HTML and CSS. I styled it to look like a MySpace page, and I was so proud of it! Since then, I've created other iterations, each reflecting my growing skills.

This latest portfolio uses new technologies and frameworks, including Next.js and fun libraries like Swiper, while also allowing me to strengthen my skills in TypeScript and Tailwind CSS. My primary goals for this site were to make it clean, simple, responsive, and accessible—qualities that align with my commitment to simplicity and inclusivity. The site features a dark/light mode toggle, and a vertical scroll layout that eliminates the need for extensive navigation or excessive clicks. On mobile, the extra-small (xs) screen mode includes a compact drawer for easy navigation to the "About Me," "Projects," and "Contact" sections without cluttering the screen.

Built With

Next JS TypeScript npm NodeJS HTML5 TailwindCSS Markdown Git Visual Studio Code Github Pages

Known Bugs

  • Some spacing issues when changing browser window for projects section when I try to display 2 full projects. Fine as-is but could be improved
  • Snapping in xs screen, projects and let's connect header lines are cut off by the nav bar. Visible in other screen sizes

Getting Started

Prerequisites

Code Editor

To view or edit the code, you will need a code editor or text editor. The open-source code editor we used is VisualStudio Code.

  1. Code Editor Download: VisualStudio Code
  2. Click the download most applicable to your OS and system.
  3. Wait for download to complete, then install -- Windows will run the setup exe and macOS will drag and drop into applications.

Setup

Clone repository

  1. Navigate to the repository.
  2. Click the Fork button and you will be taken to a new page where you can give your repository a new name and description. Choose "create fork".
  3. Click the Code button and copy the url for HTTPS.
  4. On your local computer, create a working directory of your choice.
  5. In this new directory, via the terminal, type $ git clone https://github.com/kimmykokonut/kimmykokonut.github.io.
  6. Make sure you are in the project directory.
  7. View or Edit: On your terminal, type $ code . to open the project in VS Code.

Install dependencies - Front/Client Side

  1. Enter $ npm install to compile the application's code and install all needed dependencies.
  2. Run local server: $ npm run dev (This will be located at: http://localhost:3000/)

License

GNU General Public License v3.0, See license.md for more information

Stretch Goals and Thoughts

  • I could mess all day with the styling, I'm still fiddling with the projects carousel.
  • I'm considering a navy blue instead of black for dark mode
  • Change KR name to a logo?
  • Originally wanted a background image but I think it would be too busy.