-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (203 loc) · 16 KB
/
index.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coyle 3d Printing</title>
<!-- <link rel="stylesheet" href="./assets/css/reset.css"> -->
<link rel="stylesheet" href="./assets/css/typeset.css">
<link rel="stylesheet" href="./assets/bootstrap-5.3.2-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon/favicon-16x16.png">
<style>
.thingiverse-logo, .astroprint-logo, .tinkercad-logo {
max-width: 200px;
}
</style>
</head>
<body id="body-pd">
<header class="header" id="header">
<div class="header_toggle"><img src="./assets/img/nav-svg/bars-sort.svg" id="header-toggle" alt="list icon" style="width: 1.7rem;" title="Toggle"></div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div>
<a href="#" class="nav_logo" style="color: aliceblue; font-size: 20px; font-weight: bold; ">3d<span style="padding-left: 10px; font-size: 15px;">Printing<br>& Design</span></a>
<div class="nav_list">
<a href="#" class="nav_link active" title="Main Page"><img src="./assets/img/nav-svg/globe.svg" alt="list icon" style="width: 1.7rem;"><span class="nav_logo-name">Home</span></a>
<a href="./assets/pages/CAD-Design.html" class="nav_link" title="CAD Design"><img src="./assets/img/nav-svg/CAD-Design.svg" alt="list icon" style="width: 1.7rem;"><span class="nav_logo-name">CAD Design</span></a>
<a href="./assets/pages/3d-Printing.html" class="nav_link" title="3D Printing"><img src="./assets/img/nav-svg/cubes.svg" alt="list icon" style="width: 1.7rem;"><span class="nav_logo-name">3D Printing</span></a>
<a href="./assets/pages/CAD-to-gcode.html" class="nav_link" title="CAD to Gcode Conversion"><img src="./assets/img/nav-svg/display-code.svg" alt="list icon" style="width: 1.7rem;"><span class="nav_logo-name">CAD to G-code</span></a>
<a href="./assets/pages/Volunteer.html" class="nav_link" title="Volunteering"><img src="./assets/img/nav-svg/hands-heart.svg" alt="list icon" style="width: 1.7rem;"><span class="nav_logo-name">Volunteering</span></a>
</div>
</div>
<a href="https://discovery.fclspa.org/" class="nav_link" title="Coyle Free Library" target="_blank"><img src="./assets/img/nav-svg/books.svg" alt="list icon" style="width: 1.7rem;"><span class="nav_logo-name">Coyle Free Library</span></a>
</nav>
</div>
<div class="px-4 pt-5 my-5 text-center border-bottom">
<h1 class="display-4 fw-bold text-body-emphasis">How to 3d Print</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">3D printing, also known as additive manufacturing, is the process of creating a three-dimensional object, usually done by systematically layering material on top of itself. This is done in two steps. First designing then turning that design into g-code that the printer can understand. The printer reads this digital file from the computer which dictates how to layer the material to build the object.</p>
<p class="lead mb-4">You can create toys, missing parts, tools and useful household items or print others' designs!</p>
</div>
<div class="overflow-hidden" style="max-height: 800px;">
<div class="container px-5">
<img src="./assets/img/AIu6ytvAJo54OdG1zyGG--grid.jpg" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
</div>
</div>
</div>
<div class="container px-4 py-5" id="custom-cards">
<div class="row g-4 py-5">
<h5>The best way to start with 3d printing is to print someone else's design. A website like <a href="https://www.thingiverse.com/">Thingiverse</a> is great for looking through free designs that you can print.</h5>
<h5>Once you feel comfortable using the printer you can start to learn Computer Assisted Design (CAD) and create your own objects to print. A website like <a href="https://www.tinkercad.com">TinkerCAD</a> is easy to use and free. And <a href="https://www.astroprint.com/">AstroPrint</a> is used to turn your design file (called an stl file) into Gcode (code the printer can understand).</h5>
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">CAD Design and G-code</h1>
<p class="lead">A 3d design is made in CAD (computer assisted design) software and exported as an STL (Stereolithography) file. The STL file is then imported into a slicer software where you can set printer parameters and export as gcode.</p>
<div>
<img src="./assets/img/thingiverse-logo.jpg" alt="Thingiverse Logo" class="thingiverse-logo">
</div>
<h3>Thingiverse</h3>
<p>Thingiverse is a popular online platform for sharing and discovering 3D printable designs. It serves as a vast library where creators and hobbyists upload, download, and share STL files for free. Categories range from tools and gadgets to toys, art, and educational models, making it an invaluable resource for anyone interested in 3D printing. Users can remix existing designs, collaborate with the community, and explore innovative projects to bring their ideas to life.</p>
<div>
<img src="./assets/img/tinker-cad-logo.webp" alt="Tinkercad Logo" class="tinkercad-logo">
</div>
<h3>Tinkercad</h3>
<p>Tinkercad is a beginner-friendly, web-based 3D design and modeling platform. It enables users to create 3D models, circuits, and code-based designs with an intuitive drag-and-drop interface. Popular among educators, hobbyists, and makers, Tinkercad is perfect for designing 3D printable objects, from simple gadgets to complex structures. Its accessibility and ease of use make it an ideal tool for learning and creating in the world of 3D design.</p>
<div>
<img src="./assets/img/astroprint_logo.webp" alt="AstroPrint Logo" class="astroprint-logo">
</div>
<h3>AstroPrint</h3>
<p>AstroPrint is a cloud-based platform designed to simplify 3D printing workflows. It enables users to slice, manage, and monitor 3D prints from anywhere, using an intuitive interface accessible on desktops, tablets, and smartphones. With features like file storage, printer control, and real-time monitoring, AstroPrint is ideal for both beginners and advanced users looking to streamline the 3D printing process</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
<a href="https://www.tinkercad.com/" target="_blank"><button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Design Your Own</button></a>
<a href="https://www.thingiverse.com/" target="_blank"><button type="button" class="btn btn-outline-secondary btn-lg px-4">Find A Design</button></a>
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('./assets/img/eqKaVb5Q2bWASVsXhz8B--grid.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-black text-shadow-1">
<a href="./assets/pages/CAD-Design.html"><h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"><span style="background-color: rgba(240, 248, 255, 0.5); border-radius: 20px; color: black;">Learn CAD Design</span></h3></a>
</div>
</div>
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('./assets/img/tom-claes-qCM9SDZqEHs-unsplash.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-black text-shadow-1">
<a href="./assets/pages/Volunteer.html"><h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"><span style="background-color: rgba(240, 248, 255, 0.5); border-radius: 20px;color: black;">Volunteer</span></h3></a>
</div>
</div>
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('./assets/img/NMvdSkKU8u0EmqCGjiTf--grid.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-black text-shadow-1">
<a href="https://www.thingiverse.com/" target="_blank"><h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"><span style="background-color: rgba(240, 248, 255, 0.5); border-radius: 20px;color: black;">Pre-Made Designs</span></h3></a>
</div>
</div>
</div>
</div>
</div>
<div class="container px-4 py-5" id="icon-grid">
<h2 class="pb-2 border-bottom">Popular Thingiverse Categories</h2>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
<div>
<a href="https://www.thingiverse.com/?page=1&category_id=65" target="_blank"><h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Gadgets</h3></a>
<p>3D printing allows you to create unique gadgets like smartphone stands, cable organizers, and custom cases. These small, functional items can enhance everyday convenience and showcase innovative designs.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
<div>
<a href="https://www.thingiverse.com/?page=1&category_id=66" target="_blank"><h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Hobby</h3></a>
<p>Hobbyists use 3D printing to craft items for personal projects, such as model trains, drones, or cosplay props. It's a creative outlet for exploring interests and customizing designs to fit specific needs.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
<div>
<a href="https://www.thingiverse.com/?page=1&category_id=67" target="_blank"><h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Household</h3></a>
<p>From storage solutions like bins and hooks to replacement parts for appliances, 3D printing can improve or repair items around the home. It's perfect for designing objects that fit your space and style.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
<div>
<a href="https://www.thingiverse.com/?page=1&category_id=69" target="_blank"><h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Learning</h3></a>
<p>3D printing is a valuable tool for education, providing hands-on learning opportunities in STEM fields. It's often used to create teaching aids, like geometric models, maps, or interactive experiments, enhancing understanding.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
<div>
<a href="https://www.thingiverse.com/?page=1&category_id=71" target="_blank"><h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Tools</h3></a>
<p>Custom tools or parts, such as wrenches, clamps, or measuring jigs, can be printed to suit specific tasks. This category highlights the practical applications of 3D printing in DIY and professional settings.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
<div>
<a href="https://www.thingiverse.com/?page=1&category_id=72" target="_blank"><h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Toys</h3></a>
<p>Create custom toys, figurines, or game pieces with 3D printing. It's ideal for designing personalized gifts or bringing imagination to life with unique, interactive creations.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
<div>
<a href="https://www.thingiverse.com/?page=1&category_id=64" target="_blank"><h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Fashion</h3></a>
<p>3D printing in fashion allows designers to create intricate and customizable clothing, accessories, and footwear. From 3D-printed jewelry to avant-garde dresses, this technology pushes the boundaries of traditional design, enabling unique, sustainable, and often on-demand creations.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
<div>
<a href="https://www.thingiverse.com/?page=1&category_id=63" target="_blank"><h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Art</h3></a>
<p>Artists use 3D printing to bring their visions to life through sculptures, installations, and intricate designs that would be impossible to achieve with traditional methods. This technology opens up new creative possibilities, blending digital precision with artistic expression to produce groundbreaking works of art.</p>
</div>
</div>
</div>
</div>
<!-- <div class="container px-4 py-5">
<div class="row row-cols-1 row-cols-sm-2 g-4">
<div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em">
<use xlink:href="#collection" />
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
<div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em">
<use xlink:href="#gear-fill" />
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
<div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em">
<use xlink:href="#speedometer" />
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
<div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em">
<use xlink:href="#table" />
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
</div> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="./assets/bootstrap-5.3.2-dist/js/bootstrap.min.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>