updated portfolio
TitanElectrons
1 year ago
parent
93482c30c7
commit
d976dba92d
@ -1,21 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>(PORTFOLIO) Sufyaan's Webpage</title>
|
|
||||||
<link rel="icon" type="image/x-icon" href="images/favicon.webp">
|
|
||||||
<link rel='stylesheet' type='text/css' href="../style.css">
|
|
||||||
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all">
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<a href="../"><img src="../images/titan-header.webp" alt="TitanElectrons" class="center" style="padding-bottom:3vw;padding-top:3vw;"></a>
|
|
||||||
<hr/>
|
|
||||||
<h1><i class="fa fa-user" aria-hidden="true"></i>About</h1>
|
|
||||||
<p class="homepage-body" style="margin-bottom:3vw">Greetings, everyone! My name is Sufyaan.</p>
|
|
||||||
<hr/>
|
|
||||||
<footer>
|
|
||||||
<p class="footer-text"><a href="../../">personal website</a> - <a href="about">about</a> - <a href="../../portfolio">portfolio</a></a></p>
|
|
||||||
</footer>
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>(CREDITS) Sufyaan's Webpage</title>
|
|
||||||
<link rel="icon" type="image/x-icon" href="../images/favicon.webp">
|
|
||||||
<link rel='stylesheet' type='text/css' href="../style.css">
|
|
||||||
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all">
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<a href="../"><img src="../images/titan-header.webp" alt="TitanElectrons" class="center" style="padding-bottom:3vw;padding-top:3vw;"></a>
|
|
||||||
<hr/>
|
|
||||||
<h1><i class="fa fa-list" aria-hidden="true"></i>Credits</h1>
|
|
||||||
<p>I would like to heavily thank these people for allowing public access to the pictures that they own and I am currently using. If any of the pictures below are yours and you want a different one used, please contact me and I will remove it immediately.</p>
|
|
||||||
<h2>Industria:</h2>
|
|
||||||
<ul><li><a href="https://unsplash.com/photos/T5nXYXCf50I">Background Image (by Maarten Deckers)</a></li></ul>
|
|
||||||
<h2>Bitguard:</h2>
|
|
||||||
<ul><li><a href="https://unsplash.com/photos/Pyjp2zmxuLk">Background Image (by Kevin Horvat)</a></li></ul>
|
|
||||||
<h2>WM Tours:</h2>
|
|
||||||
<ul><li><a href="https://unsplash.com/photos/FwdZYz0yc9g">Background Image (by Leio McLaren)</a></li></ul>
|
|
||||||
<h2>Sihu: </h2>
|
|
||||||
<ul><li><a href="https://unsplash.com/photos/r5x_wnC1qi4">Background Image (by Josiah Farrow)</a></li></ul>
|
|
||||||
<p>I mainly find images through Unsplash as the quality of images there are very good.</p>
|
|
||||||
<hr/>
|
|
||||||
<footer>
|
|
||||||
<p class="footer-text"><a href="../../">personal website</a> - <a href="../../about/">about</a> - <a href="../">portfolio</a></a></p>
|
|
||||||
</footer>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@ -1 +1,215 @@
|
|||||||
b,ol,p,ul{font-family:jetbrains}body,h1{color:#121212}.posts,h1,h2,h3,ol,p,ul{margin-left:8vw}.nested-list,.posts,h1,ol,ul{margin-top:1vw;margin-bottom:1vw}.responsive,div.desc,footer{text-align:center}@font-face{font-family:jetbrains;font-weight:400;font-display:swap;src:url("fonts/woff2/futura-woff2.woff2") format('woff2'),url(fonts/woff/futura-woff.woff) format('woff')}@font-face{font-family:jetbrains;font-weight:700;font-display: swap;src:url("fonts/woff2/integral-woff2.woff2") format('woff2'), url(fonts/woff/integral-woff.woff)}body{background:#efefef}p{margin-right:8vw;font-weight:400}.center{display:block;margin-left:auto;margin-right:auto;width:50%;}img{width:40vw}b{font-weight:700}ol,ul{font-weight:400}code,h1,h2,h3{font-weight:700;font-family:jetbrains}hr{width:87%;color:#6067ff}code{color:#50fa7b;overflow-wrap:break-word}a{color:#000bef}footer{padding:3px}h1{font-size:200%}h2{font-size:150%;margin-top:1.5vw;margin-bottom:1.5vw}h3{font-size:110%}i{margin-right:10px}.posts{font-family:jetbrains;list-style-type:none}.code-posts{font-family:jetbrains;color:#6272a4;font-size:80%}.homepage-title{display:block;padding-top:3.25vw;padding-bottom:3vw;margin-left:auto;margin-right:auto;width:30%;max-width:35%;height:7.5%}.footer-text{font-family:jetbrains}.nested-list{margin-left:-2vw}div.gallery{border:1px solid #6272a4}div.gallery:hover{border:1px solid}div.gallery img{width:100%;height:auto}div.desc{padding:15px}*{box-sizing:border-box}.main{margin-left:10vw;margin-right:7vw;width:90vw;margin-bottom:4vw}.responsive{font-family:jetbrains;padding:0 6px;margin:auto;display:block;float:left;width:22%}.clearfix:after{content:"";display:table;clear:both}@media screen and (max-width:600px){.posts,h1,h2,h3,ol,p,ul{margin-left:20px;margin-right:20px;margin-top:30px}hr{width:93%}.posts{font-size:90%;padding:0}.code-posts{font-size:75%}.homepage-title{width:50%;max-width:75%;height:12.5%}.nested-list{margin-left:-6vw;margin-top:4vw;margin-bottom:4vw}.responsive{width:100%;padding-bottom:4vw}div.gallery{border:1px solid #121212}div.gallery:hover{border:1px solid}.main{width:75vw;margin-top:7vw;padding:8px}}@media screen and (max-width:1150px){img{width:75vw}}
|
b,ol,p,ul{
|
||||||
|
font-family:futura
|
||||||
|
}
|
||||||
|
body,h1{
|
||||||
|
color:#121212
|
||||||
|
}
|
||||||
|
.posts,h1,h2,h3,ol,p,ul{
|
||||||
|
margin-left:8vw
|
||||||
|
}
|
||||||
|
.nested-list,.posts,h1,ol,ul{
|
||||||
|
margin-top:1vw;
|
||||||
|
margin-bottom:1vw
|
||||||
|
}
|
||||||
|
.responsive,div.desc,footer{
|
||||||
|
text-align:center
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ANIMATIONS */
|
||||||
|
|
||||||
|
@keyframes scaleUp {
|
||||||
|
from {
|
||||||
|
transform: scale(0.7)
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(4)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CLASSES */
|
||||||
|
|
||||||
|
.main-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 25%;
|
||||||
|
animation-name: scaleUp;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||||
|
animation-delay: 0;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
animation-direction: normal;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face{
|
||||||
|
font-family:futura;
|
||||||
|
font-weight:400;
|
||||||
|
font-display:swap;
|
||||||
|
src:url("fonts/woff2/futura-woff2.woff2") format('woff2'),url(fonts/woff/futura-woff.woff) format('woff') }
|
||||||
|
@font-face{
|
||||||
|
font-family:futura;
|
||||||
|
font-weight:700;
|
||||||
|
font-display: swap;
|
||||||
|
src:url("fonts/woff2/integral-woff2.woff2") format('woff2'), url(fonts/woff/integral-woff.woff)
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background:#efefef
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
margin-right:8vw;
|
||||||
|
font-weight:400
|
||||||
|
}
|
||||||
|
.center{
|
||||||
|
display:block;
|
||||||
|
margin-left:auto;
|
||||||
|
margin-right:auto;
|
||||||
|
width:50%;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width:40vw
|
||||||
|
}
|
||||||
|
b{
|
||||||
|
font-weight:700
|
||||||
|
}
|
||||||
|
ol,ul{
|
||||||
|
font-weight:400
|
||||||
|
}
|
||||||
|
code,h1,h2,h3{
|
||||||
|
font-weight:700;
|
||||||
|
font-family:futura
|
||||||
|
}
|
||||||
|
hr{
|
||||||
|
width:87%;
|
||||||
|
color:#6067ff
|
||||||
|
}
|
||||||
|
code{
|
||||||
|
color:#50fa7b;
|
||||||
|
overflow-wrap:break-word
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color:#000bef
|
||||||
|
}
|
||||||
|
footer{
|
||||||
|
padding:3px
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size:200%
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size:150%;
|
||||||
|
margin-top:1.5vw;
|
||||||
|
margin-bottom:1.5vw
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-size:110%
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
margin-right:10px
|
||||||
|
}
|
||||||
|
.posts{
|
||||||
|
font-family:futura;
|
||||||
|
list-style-type:none
|
||||||
|
}
|
||||||
|
.code-posts{
|
||||||
|
font-family:futura;
|
||||||
|
color:#6272a4;
|
||||||
|
font-size:80%
|
||||||
|
}
|
||||||
|
.homepage-title{
|
||||||
|
display:block;
|
||||||
|
padding-top:3.25vw;
|
||||||
|
padding-bottom:3vw;
|
||||||
|
margin-left:auto;
|
||||||
|
margin-right:auto;
|
||||||
|
width:30%;
|
||||||
|
max-width:35%;
|
||||||
|
height:7.5%
|
||||||
|
}
|
||||||
|
.footer-text{
|
||||||
|
font-family:futura
|
||||||
|
}
|
||||||
|
.nested-list{
|
||||||
|
margin-left:-2vw
|
||||||
|
}
|
||||||
|
div.gallery{
|
||||||
|
border:1px solid #6272a4
|
||||||
|
}
|
||||||
|
div.gallery:hover{
|
||||||
|
border:1px solid
|
||||||
|
}
|
||||||
|
div.gallery img{
|
||||||
|
width:100%;
|
||||||
|
height:auto
|
||||||
|
}
|
||||||
|
div.desc{
|
||||||
|
padding:15px
|
||||||
|
}
|
||||||
|
*{
|
||||||
|
box-sizing:border-box
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
margin-left:10vw;
|
||||||
|
margin-right:7vw;
|
||||||
|
width:90vw;
|
||||||
|
margin-bottom:4vw
|
||||||
|
}
|
||||||
|
.responsive{
|
||||||
|
font-family:futura;
|
||||||
|
padding:0 6px;
|
||||||
|
margin:auto;
|
||||||
|
display:block;
|
||||||
|
float:left;
|
||||||
|
width:22%
|
||||||
|
}
|
||||||
|
.clearfix:after{
|
||||||
|
content:"";
|
||||||
|
display:table;
|
||||||
|
clear:both
|
||||||
|
}
|
||||||
|
@media screen and (max-width:600px){
|
||||||
|
.posts,h1,h2,h3,ol,p,ul{
|
||||||
|
margin-left:20px;
|
||||||
|
margin-right:20px;
|
||||||
|
margin-top:30px
|
||||||
|
}
|
||||||
|
hr{
|
||||||
|
width:93%
|
||||||
|
}
|
||||||
|
.posts{
|
||||||
|
font-size:90%;
|
||||||
|
padding:0
|
||||||
|
}
|
||||||
|
.code-posts{
|
||||||
|
font-size:75%
|
||||||
|
}
|
||||||
|
.homepage-title{
|
||||||
|
width:50%;
|
||||||
|
max-width:75%;
|
||||||
|
height:12.5%
|
||||||
|
}
|
||||||
|
.nested-list{
|
||||||
|
margin-left:-6vw;
|
||||||
|
margin-top:4vw;
|
||||||
|
margin-bottom:4vw
|
||||||
|
}
|
||||||
|
.responsive{
|
||||||
|
width:100%;
|
||||||
|
padding-bottom:4vw
|
||||||
|
}
|
||||||
|
div.gallery{
|
||||||
|
border:1px solid #121212
|
||||||
|
}
|
||||||
|
div.gallery:hover{
|
||||||
|
border:1px solid
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
width:75vw;
|
||||||
|
margin-top:7vw;
|
||||||
|
padding:8px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width:1150px){
|
||||||
|
img{
|
||||||
|
width:75vw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,22 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>(PROJECT) TitanElectrons</title>
|
|
||||||
<link rel="icon" type="image/x-icon" href="../images/favicon.webp">
|
|
||||||
<link rel='stylesheet' type='text/css' href="style.css">
|
|
||||||
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all">
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<a href="https://sufyaan.cyou/"><img src="../images/industria-header.webp" alt="TitanElectrons" class="center" style="padding-bottom:3vw;padding-top:3vw;"></a>
|
|
||||||
<hr/>
|
|
||||||
<h1 style="font-size:10vw;text-align:center;">Industria</h1>
|
|
||||||
<p>Industria is an architectural design firm that aspires to make the most beautiful construction projects.</p>
|
|
||||||
<hr/>
|
|
||||||
<footer>
|
|
||||||
<p class="footer-text"><a href="../../index.html">personal website</a> - <a href="../../about/index.html">about</a> - <a href="../../portfolio/index.html">portfolio</a></a></p>
|
|
||||||
<p class="footer-text">project designed by <a href="../index.html">Sufyaan (TitanElectrons)</a></p>
|
|
||||||
</footer>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>(PROJECT) Sufyaan's Webpage</title>
|
|
||||||
<link rel="icon" type="image/x-icon" href="../images/favicon.webp">
|
|
||||||
<link rel='stylesheet' type='text/css' href="../style.css">
|
|
||||||
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all">
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<a href="../"><img src="../images/titan-header.webp" alt="TitanElectrons" class="center" style="padding-bottom:3vw;padding-top:3vw;"></a>
|
|
||||||
<hr/>
|
|
||||||
<h1><i class="fa fa-pencil" aria-hidden="true"></i>Project Name</h1>
|
|
||||||
<p>Project info</p>
|
|
||||||
<hr/>
|
|
||||||
<footer>
|
|
||||||
<p class="footer-text"><a href="../..">personal website</a> - <a href="../../about">about</a> - <a href="../../portfolio">portfolio</a></a></p>
|
|
||||||
</footer>
|
|
||||||
@ -1,60 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>(PORTFOLIO) Sufyaan's Webpage</title>
|
<title>Sufyaan | Designer</title>
|
||||||
<link rel="icon" type="image/x-icon" href="images/favicon.webp">
|
<link rel="icon" type="image/x-icon" href="../images/favicon.webp">
|
||||||
<link rel='stylesheet' type='text/css' href="style.css">
|
<link rel='stylesheet' type='text/css' href="style.css">
|
||||||
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all">
|
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<a href="."><img src="images/titan-header.webp" alt="TitanElectrons" class="center" style="padding-bottom:3vw;padding-top:3vw;"></a>
|
<h1 class="main-header">TitanElectrons</h1>
|
||||||
<hr/>
|
|
||||||
<h1><i class="fa fa-pencil" aria-hidden="true"></i>Portfolio</h1>
|
|
||||||
<p class="homepage-body" style="margin-bottom:3vw">I have worked on numerous design projects over the years. This page is a collection of all my best works for reference.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="main">
|
</body>
|
||||||
<div class="responsive">
|
|
||||||
<div class="gallery">
|
|
||||||
<a href="industria">
|
|
||||||
<img src="images/industria.webp" alt="Industria" width="600" height="400">
|
|
||||||
</a>
|
|
||||||
<div class="desc">Industria</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="responsive">
|
|
||||||
<div class="gallery">
|
|
||||||
<a href="bitguard">
|
|
||||||
<img src="images/bitguard.webp" alt="BitGuard" width="600" height="400">
|
|
||||||
</a>
|
|
||||||
<div class="desc">BitGuard</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="responsive">
|
|
||||||
<div class="gallery">
|
|
||||||
<a href="wm-tours">
|
|
||||||
<img src="images/wm-tours.webp" alt="WM Tours" width="600" height="400">
|
|
||||||
</a>
|
|
||||||
<div class="desc">WM Tours</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="responsive">
|
|
||||||
<div class="gallery">
|
|
||||||
<a href="sihu">
|
|
||||||
<img src="images/sihu.webp" alt="Sihu" width="600" height="400">
|
|
||||||
</a>
|
|
||||||
<div class="desc">Sihu</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="clearfix"></div>
|
|
||||||
</div>
|
|
||||||
<p>All logos shown in this portfolio are mine. However, some of the images used for aesthetic purposes in my portfolio are not mine. Please visit <a href="credits">this page</a> to view the original images and download them.</p>
|
|
||||||
<p>If you love my work and want to hire me for work, please visit the contact page for more information. Please note that <em>prices are based on product value.</em> My prices are not fixed and will change depending on the type of logo or brand you want me to design.</p>
|
|
||||||
<hr/>
|
|
||||||
<footer>
|
|
||||||
<p class="footer-text"><a href="../">personal website</a> - <a href="about">about</a> - <a href="../portfolio">portfolio</a></a></p>
|
|
||||||
</footer>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue