-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
100 lines (92 loc) · 5.48 KB
/
portfolio.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!--TODO compress PNGs and fix NAV bar-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheets/style.css">
<link rel="stylesheet" href="stylesheets/blog.css">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="images/site.webmanifest">
<title>Some projects...</title>
</head>
<body>
<main class="container">
<header class="header">
<h1>The World Wide Web of Beatrice</h1>
</header>
<aside id="sidebar">
<p> In the end, we were all just text on a screen...</p>
</aside>
<nav class="nav">
<section class="flexbox-nav">
<div class="nav-btn"><a href="index.html"><h2>Main Page</h2></a></div>
<div class="nav-btn"><a href="about.html"><h2>About Me</h2></a></div>
<div class="nav-btn"><a href="portfolio.html"><h2>Portfolio</h2></a></div>
<div class="nav-btn"><a href="hobby-blog.html"><h2>Hobby Blog</h2></a></div>
</section>
</nav>
<article class="content">
<strong>My Portfolio:</strong>Here are some projects I've worked on at <a href="https://adadevelopersacademy.org/">Ada Academy</a>
or in the past that I am particularly proud of:
<p>Note that I am a beginner in my journey and these will not be amazingly inventive or advanced, but they are a snapshot of where I am at</p>
<section class="blog-item">
<h3>This site!</h3>
<div class="entry">
<div class="text">This very website is the largest hand-coded HTML/CSS website I have ever made! (And the most radical!) I have learned a lot about
how to make a website look the way I want it on multiple screen sizes and formats. I wanted to create a very "me", very 90s looking website
in full standards compliant HTML5/CSS3. What's old is new again, right?</div>
<div class="image"><img src="images/personal-webzone.png" alt="An image of this very website. Meta, right?" width=300 height=300></div>
</div>
<h4>Skills learned/applied:</h4>
<ul>
<li>Hand-coded HTML5/CSS3</li>
<li>CSS Grid & Flexbox for positioning</li>
<li>A multitide of custom CSS styling</li>
</ul>
</section>
<section class="blog-item">
<h3><a href="http://avicennamassage.com/">Avicenna Massage</a></h3>
<div class="entry">
<div class="text">This was the first website I ever worked on since learning HTML from AOL tutorials in the 90s.
I felt way out of my elment but picked things up using a CSS framework called Pure. The website is definitely "still in beta" in my head, accesskey="
but IRL it's in production - it's being used for the local business I built it for! I also host the website on a VPS.</div>
<div class="image avi-logo"><img src="images/avicenna_logo.gif" alt="An image of this very website. Meta, right?" width=300 height=300></div>
</div>
<h4>Skills learned/applied:</h4>
<ul>
<li>Building a website quickly to client specification with a CSS framework</li>
<li>Using server side includes to make site maintenance easier</li>
<li>Building a responsive website that looks great on all devices</li>
</ul>
</section>
<section class="blog-item">
<h3><a href="https://github.com/Beatress/solar-system">Solar System</a></h3>
<div class="entry">
<div class="text">This was my first major object oriented program! I also spent a lot of time making the CLI interface really colorful and easy to use!</div>
<div class="image"><img src="images/solar_system.png" alt="The Solar System program" width=300 height=300></div>
</div>
<h4>Skills learned/applied:</h4>
<ul>
<li>Building user-friendly CLIs with Ruby with lots of input validation</li>
<li>Object-oriented programming</li>
<li>Using Ruby gems to perform tasks (like colorize text)</li>
</ul>
</section>
<section class="nav-blurb"><p>You've reached the end of this page! Why not check out my <a href="hobby-blog.html">Hobby Blog</a>?
Alternately, get personal with my <a href="about.html">About Me</a> or just head back to the <a href="index.html">Main Page</a></p></section>
</article>
<footer class="footer">
<section class="flexbox-footer">
<img alt="Under construction symbol" src="images/under-construction.gif">
<img alt="Transgender flag" src="images/transparent-trans-flag.png" width=76 height=76>
<em class="copyleft">Copyleft 2020 by Beatrice T</em>
<a href="https://www.kernel.org/"><img alt="Penguin mascot of the Linux operating system" src="images/tux.png" width=76 height=76></a>
<a href="https://github.com/Beatress"><img alt="Follow me on GitHub" src="images/octo-cat.gif"></a>
<a href="https://neocities.org/"><img alt="Powered by Neocities" src="images/penelope.png"></a>
</section>
</footer>
</main>
</body>
</html>