feat(README): copied profile README
This commit is contained in:
darkicewolf50
GitHub
parent
49fcf620ae
commit
c4d2249592
139
README.md
139
README.md
@ -1,51 +1,110 @@
|
||||
# CSS
|
||||
In this assignment, you will add styling to the webpages you created in the HTML assignment, and will **publish** the website using GitHub pages.
|
||||
<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>
|
||||
|
||||
---
|
||||
###
|
||||
|
||||
## :foot: Steps
|
||||
1. Add the HTML you wrote for the About page to the `index.html` file
|
||||
1. Add the HTML you wrote for the Skills page to the `skills.html` file
|
||||
1. Add the HTML you wrote for the Experience page to the `experience.html` file
|
||||
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:
|
||||
<div align="left">
|
||||
<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" />
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
`index.html`
|
||||
|
||||
###
|
||||
|
||||
`skills.html`
|
||||
|
||||
<img align="right" height="120" src="https://media.tenor.com/dEoasElm-JgAAAAM/helldivers2-helldiver.gif" />
|
||||
|
||||
`education.html`
|
||||
|
||||
###
|
||||
|
||||
`experience.html`
|
||||
|
||||
<div align="left">
|
||||
<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`
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1. Change the content so they represent you (your picture, your education, your experince, etc.)
|
||||
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:
|
||||
|
||||
</div>
|
||||
|
||||
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>
|
||||
|
||||
###
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### :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
|
||||
Loading…
x
Reference in New Issue
Block a user