darkicewolf50/personal_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(README): copied profile README

Browse Source
This commit is contained in:
darkicewolf50 2025-04-18 20:51:51 -06:00 committed by GitHub
parent 49fcf620ae
commit c4d2249592
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 99 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
README.md
View File

@ -1,51 +1,110 @@
# CSS <h2 align="left">Hi! My name is Brock and I'm a Full-stack web developer, I am passionate about bringing the backend to low-cost high availably self-hosted servers</h2>
In this assignment, you will add styling to the webpages you created in the HTML assignment, and will **publish** the website using GitHub pages.
--- ###
## :foot: Steps <div align="left">
1. Add the HTML you wrote for the About page to the `index.html` file <img src="https://github-readme-stats.vercel.app/api?username=darkicewolf50&hide_title=false&hide_rank=false&show_icons=true&include_all_commits=true&count_private=true&disable_animations=false&theme=dracula&locale=en&hide_border=false" height="150" alt="stats graph" />
1. Add the HTML you wrote for the Skills page to the `skills.html` file <img src="https://github-readme-stats.vercel.app/api/top-langs?username=darkicewolf50&locale=en&hide_title=false&layout=compact&card_width=320&langs_count=5&theme=dracula&hide_border=false" height="150" alt="languages graph" />
1. Add the HTML you wrote for the Experience page to the `experience.html` file </div>
1. Add the HTML you wrote for the Education page to the `education.html` file
1. Add the HTML you wrote for the Interests page to the `interests.html` file
1. Use Flexbox and other CSS properties to the `style.css` file so that your pages look like these:
`index.html` ###
![index-page](https://res.cloudinary.com/mkf/image/upload/v1674680283/ENSF-381/labs/flexbox/about_paafuq.png)
`skills.html` <img align="right" height="120" src="https://media.tenor.com/dEoasElm-JgAAAAM/helldivers2-helldiver.gif" />
![skills-page](https://res.cloudinary.com/mkf/image/upload/v1674680283/ENSF-381/labs/flexbox/skills_kudlfj.png)
`education.html` ###
![education-page](https://res.cloudinary.com/mkf/image/upload/v1674680283/ENSF-381/labs/flexbox/education_d9hixu.png)
`experience.html` <div align="left">
![experience-page](https://res.cloudinary.com/mkf/image/upload/v1674680283/ENSF-381/labs/flexbox/experience_zjyrux.png) <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-original.svg" height="30" alt="rust logo" />
<img width="12" />
<img src="https://skillicons.dev/icons?i=actix" height="30" alt="actix logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" height="30" alt="python logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/fastapi/fastapi-original.svg" height="30" alt="fastapi logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" height="30" alt="react logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" height="30" alt="html5 logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" height="30" alt="css3 logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" height="30" alt="javascript logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg" height="30" alt="c logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg" height="30" alt="cplusplus logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" height="30" alt="git logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" height="30" alt="github logo" />
<img width="12" />
<img src="https://cdn.simpleicons.org/githubactions/2088FF" height="30" alt="githubactions logo" />
<img width="12">
<img src="https://img.shields.io/badge/Gitea-34495E?style=for-the-badge&logo=gitea&logoColor=5D9425" height="30" alt="gitea logo">
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-line-wordmark.svg" height="30" alt="amazonwebservices logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/terraform/terraform-original.svg" height="30" alt="terraform logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg" height="30" alt="kubernetes logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" height="30" alt="docker logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/raspberrypi/raspberrypi-original.svg" height="30" alt="raspberrypi logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg" height="30" alt="nginx logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg" height="30" alt="vscode logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firefox/firefox-original.svg" height="30" alt="firefox logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg" height="30" alt="markdown logo" />
`interests.html` ![Prettier](https://img.shields.io/badge/prettier-%23F7B93E.svg?style=for-the-badge&logo=prettier&logoColor=black)
![interests-page](https://res.cloudinary.com/mkf/image/upload/v1674680283/ENSF-381/labs/flexbox/interests_oa1rhh.png) ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)
![AmazonDynamoDB](https://img.shields.io/badge/Amazon%20DynamoDB-4053D6?style=for-the-badge&logo=Amazon%20DynamoDB&logoColor=white)
![Cloudflare](https://img.shields.io/badge/Cloudflare-F38020?style=for-the-badge&logo=Cloudflare&logoColor=white)
![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7)
![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)
![Pandas](https://img.shields.io/badge/pandas-%23150458.svg?style=for-the-badge&logo=pandas&logoColor=white)
![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white)
1. Change the content so they represent you (your picture, your education, your experince, etc.) </div>
1. Make sure all the links are working if applicable (for instance, you don't have to add a Pinterest page if you don't have one, but the link to your resume should work)
1. Make sure the website is responsive at least on Desktop and Tablet devices (use `@media` queries for this). Here's an example of how it should react to screen size changes:
![responsive](https://res.cloudinary.com/mkf/image/upload/v1674681793/ENSF-381/labs/flexbox/responsive-small_nakjwj.gif)
1. It doesn't matter what threshold you're using for the `@media` query (`800px`, `600px`, etc.) ###
1. Commit all the changes to the `main` branch and push to the remote repo (here)
1. Create a **public** repo under your **personal** GitHub account with this name: `<your-github-username>.github.io`
1. Clone the repo to your local system; add all the files you have here to the project; commit to the `main` branch and push to the remote repo (your repo under your GitHub username)
1. Open up a browser and go to `https://<your-github-username>.github.io`. You should be able to see the website (it may take a few minutes)
1. Add the address to your webpage to the [`PAGE-ADDRESS.md`](./PAGE-ADDRESS.md) file
1. Commit to the `main` branch and push to the remote repo (here)
--- <div align="left">
<a href="https://www.youtube.com/@darkicewolf50" target="_blank">
<img src="https://img.shields.io/static/v1?message=Youtube&logo=youtube&label=&color=FF0000&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="youtube logo" />
</a>
<a href="https://www.instagram.com/darkicewolf50/" target="_blank">
<img src="https://img.shields.io/static/v1?message=Instagram&logo=instagram&label=&color=E4405F&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="instagram logo" />
</a>
<a href="https://www.instagram.com/darkicewolf50/" target="_blank">
<img src="https://img.shields.io/static/v1?message=Twitch&logo=twitch&label=&color=9146FF&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="twitch logo" />
</a>
<a href="darkicewolf50" target="_blank">
<img src="https://img.shields.io/static/v1?message=Discord&logo=discord&label=&color=7289DA&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="discord logo" />
</a>
<a href="darkicewolf50@gmail.com" target="_blank">
<img src="https://img.shields.io/static/v1?message=Gmail&logo=gmail&label=&color=D14836&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="gmail logo" />
</a>
<a href="https://www.linkedin.com/in/brock-tomlinson/" target="_blank">
<img src="https://img.shields.io/static/v1?message=LinkedIn&logo=linkedin&label=&color=0077B5&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="linkedin logo" />
</a>
</div>
###
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/darkicewolf50/darkicewolf50/output/github-snake-dark.svg" />
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/darkicewolf50/darkicewolf50/output/github-snake.svg" />
<img alt="github-snake" src="https://raw.githubusercontent.com/darkicewolf50/darkicewolf50/output/github-snake.svg" />
</picture>
###
![](https://github-profile-trophy.vercel.app/?username=darkicewolf50&theme=radical&no-frame=false&no-bg=false&margin-w=4)
![](https://quotes-github-readme.vercel.app/api?type=horizontal&theme=radical)
### :page_with_curl: Notes
- Make sure you save what you had for the About page in the `index.html` page. That's the default page that the browser shows when someone visits your website
- Make sure you alter the data on the examples so that the website represents you, not Rick
- Don't use any CSS frameworks for this assignment. You need to write all the CSS yourself
- Use Flexbox for the layout
- Feel free to make minor changes, such as changing colors and font-sizes
- Feel free to add new elements, data, etc.
- You may need to change some of the HTML elements you used in the HTML assignment. One example is the navigation menu. You probably choose a paragraph to do that. For this assignment, it makes more sense to use `<nav>`, `<ul>`, and `<li>` for the navigation (hint: I created a similar one in the class). So, feel free to use new HTML elements if they make more sense now