tech

author: 1970-01-01 00:00:00 +0000
committer: 2025-01-14 03:21:47 +0000
commit: 01520a770f191e0324bb1bda5ae4c596fe9ca1b8 (patch)
tree: 600c9c30fa80121f329893a4e070cbcdb90b41ab
parent: portfolio (diff)
download: html-01520a770f191e0324bb1bda5ae4c596fe9ca1b8.tar
html-01520a770f191e0324bb1bda5ae4c596fe9ca1b8.tar.gz
html-01520a770f191e0324bb1bda5ae4c596fe9ca1b8.tar.bz2
html-01520a770f191e0324bb1bda5ae4c596fe9ca1b8.tar.xz
html-01520a770f191e0324bb1bda5ae4c596fe9ca1b8.zip
7 files changed, 591 insertions, 0 deletions
diff --git a/tech/css/main.css b/tech/css/main.css
new file mode 100644
index 0000000..0335820
--- /dev/null
+++ b/tech/css/main.css
@@ -0,0 +1,203 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+
+html{
+	font-family: "Noto Sans", sans-serif;
+	background: radial-gradient(#280048,#300000);
+	background-size: 33%;
+	color: #FFDDCC;
+}
+
+body{
+	margin: auto;
+}
+
+h1,h2,h3{
+	margin: .5em;
+	font-family: "Noto Serif", serif;
+}
+
+p{
+	font-size: .95em;
+	padding-left: 3%;
+	padding-right: 3%;
+}
+
+a{
+	color: #FFC400;
+	text-decoration: none;
+}
+a:hover{
+	color: #FFF400;
+}
+
+img{
+	width: 100%;
+	border-radius: 3px;
+}
+
+hr{
+	color: #AA9988;
+}
+
+header{
+	text-align: center;
+	font-size: .9em;
+}
+header i{
+	font-size: .6em;
+	font-weight: normal;
+	display: none;
+}
+
+nav{
+	text-align: center;
+	color: #998877;
+}
+nav a{
+	font-size: 1.03em;
+	padding-left: 1%;
+	padding-right: 1%;
+}
+nav i{
+	font-size: .85em;
+	color: #FFAA77;
+	padding-left: 1%;
+	display: none;
+}
+
+main{
+	padding-top: 3%;
+	padding-bottom: 5%;
+}
+
+figure{
+	border: 3px solid rgba(0,0,0,.0);
+	max-width: 400px;
+	margin: 5% auto;
+}
+figcaption{
+	text-align: center;
+	background-color: rgba(255,200,200,.2);
+	border-radius: 3px;
+	margin-bottom: 5px;
+	text-shadow: 3px 3px 8px #000000;
+}
+aside{
+	font-size: 1.3em;
+	text-align: center;
+	border-radius: 3px;
+	margin-bottom: 5px;
+}
+
+footer{
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	font-size: .8em;
+	font-family: "Noto Serif", serif;
+	background-color: #300000;
+	text-align: center;
+}
+footer p{
+	margin: 1%;
+	text-shadow: 3px 3px 8px #FFAA77;
+}
+
+.btn{
+	background-color: #330033;
+	color: #FFC400;
+	border: none;
+	font-size: 1.1em;
+	padding: 2px 3px;
+	display: inline-block;
+	border-radius: 3px;
+	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(222,180,120,.9);
+}
+.btn:hover{
+	color: #FFF400;
+	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2), 0 5px 8px 0 rgba(255,222,22,22.19);
+}
+nav .btn:nth-child(1){
+	color: #DFC400;
+	font-size: 1.05em;
+}
+nav .btn:nth-last-child(-n+3){
+	color: #DFC400;
+	font-size: 1.05em;
+}
+
+@media screen and (min-width:600px),print{
+	.grid{
+		display: grid;
+		grid-template-columns: auto auto;
+		grid-gap: 0px;
+	}
+	aside{
+		grid-column: 1 / span 2;
+	}
+
+	body{
+		width: 95%;
+	}
+	header{
+		width: 90%;
+	}
+	nav{
+		width: 95%;
+	}
+	footer{
+		width: 95%;
+	}
+
+	.btn{
+		font-size: 1.2em;
+		padding: 3px 5px;
+	}
+
+	.col{
+		position: fixed;
+		width: 40%;
+		height: 100%;
+	}
+	#left{
+		left: 0;
+		padding-left: 8%;
+	}
+	#right{
+		right: 0;
+		padding-right: 8%;
+	}
+}
+
+@media screen and (min-width:900px),print{
+	body{
+		width: 85%;
+	}
+	header{
+		width: 80%;
+	}
+	header i{
+		display: inline;
+	}
+	nav{
+		width: 85%;
+	}
+	nav i{
+		display: inline;
+	}
+	footer{
+		width: 85%;
+	}
+
+	.col{
+		position: fixed;
+		width: 30%;
+	}
+	#left{
+		padding-left: 18%;
+	}
+	#right{
+		padding-right: 18%;
+	}
+}
diff --git a/tech/drone/index.html b/tech/drone/index.html
new file mode 100644
index 0000000..e1eaac2
--- /dev/null
+++ b/tech/drone/index.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="../css/main.css">
+<link rel="shortcut icon" href="../i/favicon.ico">
+<title>Tech Showcase: Drones</title></head><body>
+
+<header>
+	<h1>Advanced Drones
+	<i>Technology Showcase</i></h1>
+</header>
+
+<nav>
+	<a href=".." class="btn">Home</a>
+	<a href="../print" class="btn">3D Printers</a>
+	<a href="../ev" class="btn">EVs</a>
+	<a href="" class="btn">Drones</a>
+	<a href="../template" class="btn">Template</a>
+	<a href="http://github.com/4stc/tech_showcase" class="btn">Source</a>
+	<i>Technology / Drones</i>
+</nav>
+
+<main>
+<div class="col" id="left">
+	<h2>Tons of Future Use Cases</h2>
+	<p>Drones are versatile enough that they will likely be used to perform
+	tons of specialized tasks in the future, even more than they already do
+	now. Drones have also been used in the military for a long time. Here's
+	a few drones in flight:</p>
+	<div class="grid">
+		<aside>
+			<h3>Drones in Action</h3>
+		</aside>
+		<figure>
+			<img src="../i/drone_sky.png" alt="drone flying in the sky">
+		</figure>
+		<figure>
+			<figcaption>Delivery Drone</figcaption>
+			<img src="../i/drone_deliver.png" alt="drone delivering a packages">
+		</figure>
+		<figure>
+			<figcaption>Military Drone</figcaption>
+			<img src="../i/drone_military.png" alt="soldier flying a drone">
+		</figure>
+		<figure>
+			<img src="../i/drone_field.png" alt="drone flying above a field ">
+		</figure>
+	</div>
+</div>
+<div class="col" id="right">
+	<h2>Core Advancements</h2>
+	<ul>
+		<li><h3>Versatility</h3>
+		<p>Drones can be used for so many things, such as: delivery,
+		military operations, photography, mapping out unexplored areas,
+		farming, or just as a fun hobby. I've even heard of drones being
+		used to put out fires</p></li>
+		<li><h3>Speed</h3>
+		<p>Drones can easily cover long distances in a very short amount
+		of time</p></li>
+	</ul>
+	<h2>Challenges to Overcome</h2>
+	<ul>
+		<li><h3>Weather</h3>
+		<p>All-weather drones are difficult to build and often can't
+		withstand extreme weather conditions</p></li>
+		<li><h3>Maintenance</h3>
+		<p>Drones have many complex parts, these often need to be fixed
+		or replaced</p></li>
+	</ul>
+</div>
+</main>
+
+<footer>
+	<p>Made by Name Surname |
+	<a href="../i/wireframe_mobile.png" target="_blank">Mobile Wireframe</a> |
+	<a href="../i/wireframe_desktop.png" target="_blank">Desktop Wireframe</a>
+	</p>
+</footer>
+
+</body></html>
diff --git a/tech/ev/index.html b/tech/ev/index.html
new file mode 100644
index 0000000..1a6eacf
--- /dev/null
+++ b/tech/ev/index.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="../css/main.css">
+<link rel="shortcut icon" href="../i/favicon.ico">
+<title>Tech Showcase: EVs</title></head><body>
+
+<header>
+	<h1>Non-Car Electric Vehicles
+	<i>Technology Showcase</i></h1>
+</header>
+
+<nav>
+	<a href=".." class="btn">Home</a>
+	<a href="../print" class="btn">3D Printers</a>
+	<a href="" class="btn">EVs</a>
+	<a href="../drone" class="btn">Drones</a>
+	<a href="../template" class="btn">Template</a>
+	<a href="http://github.com/4stc/tech_showcase" class="btn">Source</a>
+	<i>Technology / EVs</i>
+</nav>
+
+<main>
+<div class="col" id="left">
+	<h2>Cars aren't the only EVs</h2>
+	<p>While there is a lot that could be said about electric cars,
+	I'm far more interested in the advancement of the other kinds of
+	EVs, such as:</p>
+	<div class="grid">
+		<figure>
+			<figcaption>E-Bikes</figcaption>
+			<img src="../i/bike1.png" alt="photo of an E-Bike">
+			<img src="../i/bike2.png" alt="photo of an E-Bike">
+		</figure>
+
+		<figure>
+			<figcaption>E-Scooters</figcaption>
+			<img src="../i/scooter.png" alt="photo of an E-Scooter">
+		</figure>
+		<figure>
+			<figcaption>E-Skateboards</figcaption>
+			<img src="../i/board.png" alt="photo of an E-Skateboard">
+		</figure>
+	</div>
+</div>
+<div class="col" id="right">
+	<h2>Core Advancements</h2>
+	<ul>
+		<li><h3>Cost</h3>
+		<p>Electricity is fairly cheap and the price doesn't fluctuate
+		nearly as much as something like gas</p></li>
+		<li><h3>Less Risk</h3>
+		<p>EV injuries which don't involve cars are usually not overly
+		serious</p></li>
+		<li><h3>Accessibility</h3>
+		<p>Easier to use than cars and no license or training is required</p></li>
+
+	</ul>
+	<h2>Challenges to Overcome</h2>
+	<ul>
+		<li><h3>Lack of Adoption</h3>
+		<p>Most towns/cities were designed specifically for cars, which
+		means using non-car EVs can be tricky in some situations</p></li>
+		<li><h3>Short Distance Focus</h3>
+		<p>Currently electric cars are the only EVs designed for long
+		distance travel. There are some very powerful electric bikes,
+		but even are lacking for long distance travel</p></li>
+	</ul>
+</div>
+</main>
+
+<footer>
+	<p>Made by Name Surname |
+	<a href="../i/wireframe_mobile.png" target="_blank">Mobile Wireframe</a> |
+	<a href="../i/wireframe_desktop.png" target="_blank">Desktop Wireframe</a>
+	</p>
+</footer>
+
+</body></html>
diff --git a/tech/i/favicon.ico b/tech/i/favicon.ico
new file mode 100644
index 0000000..fb20a15
--- /dev/null
+++ b/tech/i/favicon.ico
Binary files differdiff --git a/tech/index.html b/tech/index.html
new file mode 100644
index 0000000..12d9c94
--- /dev/null
+++ b/tech/index.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="css/main.css">
+<link rel="shortcut icon" href="i/favicon.ico">
+<title>Tech Showcase: Home</title></head><body>
+
+<header>
+	<h1>Homepage
+	<i>Technology Showcase</i></h1>
+</header>
+
+<nav>
+	<a href="" class="btn">Home</a>
+	<a href="print" class="btn">3D Printers</a>
+	<a href="ev" class="btn">EVs</a>
+	<a href="drone" class="btn">Drones</a>
+	<a href="template" class="btn">Template</a>
+	<a href="http://github.com/4stc/tech_showcase" class="btn">Source</a>
+	<i>Technology / Home</i>
+</nav>
+
+<main>
+<div class="col" id="left">
+	<h2>About This Site</h2>
+	<p>Hey, my name is Name! This site showcases some of my favorite
+	recent technological advancements, as well as future technologies
+	which I'm very excited about. The images below each link to a specific
+	technology page:</p>
+	<div class="grid">
+		<figure>
+			<a href="print">
+			<figcaption>3D Printers Page</figcaption>
+			<img src="i/print1.png" alt="photo of a 3D printer">
+			</a>
+		</figure>
+		<figure>
+			<a href="ev">
+			<figcaption>Non-Car EVs Page</figcaption>
+			<img src="i/bike2.png" alt="photo of an E-Bike">
+			</a>
+		</figure>
+		<figure>
+			<a href="drone">
+			<figcaption>Drones Page</figcaption>
+			<img src="i/drone_deliver.png" alt="drone delivering a packages">
+			</a>
+		</figure>
+	</div>
+</div>
+<div class="col" id="right">
+	<h2>Technologies</h2>
+	<ul>
+		<li><a href="print">3D Printers</a></li>
+		<li><a href="ev">Non-Car EVs</a></li>
+		<li><a href="drone">Drones</a></li>
+	</ul>
+	<h2>Other Links</h2>
+	<ul>
+		<li><a href="http://github.com/4stc/tech_showcase">Source Code</a></li>
+		<li><a href="template">Template Page</a></li>
+		<li><a href="i/wireframe_mobile.png" target="_blank">Mobile Wireframe</a></li>
+		<li><a href="i/wireframe_desktop.png" target="_blank">Desktop Wireframe</a></li>
+
+	</ul>
+</div>
+</main>
+
+<footer>
+	<p>Made by Name Surname |
+	<a href="i/wireframe_mobile.png" target="_blank">Mobile Wireframe</a> |
+	<a href="i/wireframe_desktop.png" target="_blank">Desktop Wireframe</a>
+	</p>
+</footer>
+
+</body></html>
diff --git a/tech/print/index.html b/tech/print/index.html
new file mode 100644
index 0000000..1d34689
--- /dev/null
+++ b/tech/print/index.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="../css/main.css">
+<link rel="shortcut icon" href="../i/favicon.ico">
+<title>Tech Showcase: 3D Printers</title></head><body>
+
+<header>
+	<h1>3D Printing Machines
+	<i>Technology Showcase</i></h1>
+</header>
+
+<nav>
+	<a href=".." class="btn">Home</a>
+	<a href="" class="btn">3D Printers</a>
+	<a href="../ev" class="btn">EVs</a>
+	<a href="../drone" class="btn">Drones</a>
+	<a href="../template" class="btn">Template</a>
+	<a href="http://github.com/4stc/tech_showcase" class="btn">Source</a>
+	<i>Technology / 3D Printers</i>
+</nav>
+
+<main>
+<div class="col" id="left">
+	<h2>Print Anything</h2>
+	<p>3D printers are amazing, they allow you to create specialized,
+	personalized, precisely made objects. The limitlessness of what you
+	can print is just inspiring as well. Also, many 3D printers totally
+	look like futuristic technology, here are some good examples:</p>
+	<div class="grid">
+		<aside>
+			<h3>3D Printer Examples</h3>
+		</aside>
+		<figure>
+			<img src="../i/print1.png" alt="photo of a 3D printer">
+		</figure>
+		<figure>
+			<img src="../i/print2.png" alt="photo of a 3D printer">
+		</figure>
+		<figure>
+			<img src="../i/print3.png" alt="photo of a 3D printer">
+		</figure>
+		<figure>
+			<img src="../i/print4.png" alt="photo of a 3D printer">
+		</figure>
+	</div>
+</div>
+<div class="col" id="right">
+	<h2>Core Advancements</h2>
+	<ul>
+		<li><h3>Complex Object Creation</h3>
+		<p>3D Printers allow you to create highly detailed objects which
+		would normally require tons of factory equipment to create</p></li>
+		<li><h3>Limitlessness</h3>
+		<p>There is no preexisting list of what can be printed, making the
+		printer's creativity the only limit</p></li>
+	</ul>
+	<h2>Challenges to Overcome</h2>
+	<ul>
+		<li><h3>Difficulty</h3>
+		<p>Many people have busy lives and struggle to find time for
+		learning new complicated technologies</p></li>
+		<li><h3>Expensiveness</h3>
+		<p>While 3D Printers are less expensive than they used to be,
+		they're still costly, this is understandably a deterrent for
+		many people</p></li>
+	</ul>
+</div>
+</main>
+
+<footer>
+	<p>Made by Name Surname |
+	<a href="../i/wireframe_mobile.png" target="_blank">Mobile Wireframe</a> |
+	<a href="../i/wireframe_desktop.png" target="_blank">Desktop Wireframe</a>
+	</p>
+</footer>
+
+</body></html>
diff --git a/tech/template/index.html b/tech/template/index.html
new file mode 100644
index 0000000..e473242
--- /dev/null
+++ b/tech/template/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="../css/main.css">
+<link rel="shortcut icon" href="../i/favicon.ico">
+<title>Tech Showcase: Template</title></head><body>
+
+<header>
+	<h1>Template Page
+	<i>Technology Showcase</i></h1>
+</header>
+
+<nav>
+	<a href=".." class="btn">Home</a>
+	<a href="../print" class="btn">3D Printers</a>
+	<a href="../ev" class="btn">EVs</a>
+	<a href="../drone" class="btn">Drones</a>
+	<a href="" class="btn">Template</a>
+	<a href="http://github.com/4stc/tech_showcase" class="btn">Source</a>
+	<i>Technology / Template</i>
+</nav>
+
+<main>
+	<div class="col" id="left">
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+		sed do eiusmod tempor incididunt ut labore et dolore magna
+		aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+		ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+	<div class="grid">
+		<aside>
+			<h3>Optional Heading</h3>
+		</aside>
+		<figure>
+			<figcaption>First Example</figcaption>
+			<img src="../i/example1.png" alt="an example image">
+		</figure>
+		<figure>
+			<figcaption>Second Example</figcaption>
+			<img src="../i/example2.png" alt="an example image">
+		</figure>
+		<figure>
+			<figcaption>Third Example</figcaption>
+			<img src="../i/example2.png" alt="an example image">
+		</figure>
+		<figure>
+			<figcaption>Forth Example</figcaption>
+			<img src="../i/example1.png" alt="an example image">
+		</figure>
+	</div>
+	</div>
+	<div class="col" id="right">
+		<h2>Example List</h2>
+		<ul>
+			<li>example one</li>
+			<li>example two</li>
+			<li>example three</li>
+		</ul>
+		<h2>Another Example</h2>
+		<ul>
+			<li>example one</li>
+			<li>example two</li>
+			<li>example three</li>
+		</ul>
+	</div>
+</main>
+
+<footer>
+	<p>Made by Name Surname |
+	<a href="../i/wireframe_mobile.png" target="_blank">Mobile Wireframe</a> |
+	<a href="../i/wireframe_desktop.png" target="_blank">Desktop Wireframe</a>
+	</p>
+</footer>
+
+</body></html>
author		1970-01-01 00:00:00 +0000
committer		2025-01-14 03:21:47 +0000
commit	01520a770f191e0324bb1bda5ae4c596fe9ca1b8 (patch)
tree	600c9c30fa80121f329893a4e070cbcdb90b41ab
parent	portfolio (diff)
download	html-01520a770f191e0324bb1bda5ae4c596fe9ca1b8.tar html-01520a770f191e0324bb1bda5ae4c596fe9ca1b8.tar.gz html-01520a770f191e0324bb1bda5ae4c596fe9ca1b8.tar.bz2 html-01520a770f191e0324bb1bda5ae4c596fe9ca1b8.tar.xz html-01520a770f191e0324bb1bda5ae4c596fe9ca1b8.zip