https://i.pinimg.com/736x/2f/2c/be/2f2cbec715f990b825d40eba6dbc5cc7.
jpg
var canvasWidth;
var canvasHeight;
var hrs;
var mins;
var secs;
var img;
function setup() {
canvasWidth = 400
canvasHeight = canvasWidth + canvasWidth/8;
createCanvas(canvasWidth, canvasHeight);
img=loadImage("clock base 2.png")
hrs = 0;
mins=0;
secs=0;
}
function draw() {
background(200 , 240 , 500);
currentTime();
digitalClock();
analogClock();
}
function currentTime(){
hrs = hour();
mins=minute();
secs = second();
console.log(hrs,mins,secs);
}
function digitalClock(){
//Code for digital clock
let noon;
if (hrs >= 12){
noon= 'PM'
} else {
noon= 'AM'
}
//Display time
hrs = hrs%12;
if (hrs < 10){
hrs = '0'+hrs
}
if (mins < 10){
mins = '0'+mins
}
if (secs < 10){
secs = '0'+ secs
}
if(hrs == 0){
hrs=12;
}
let timeString =hrs+':'+mins+':'+secs+' '+noon;
noStroke();
fill(0,0,0);
textFont("Agency FB");
textSize(width/10)
textAlign(CENTER,CENTER);
text(timeString , width/2 , height/10);
}
function analogClock() {
//Code for analog clock
translate(width/2,height/1.7);
imageMode(CENTER);
image(img,0,0,width*1,width*1);
// set initial orientation
//rotate(180);
angleMode(DEGREES);
//Seconds Hand
push();
rotate(-90);
stroke("#030303");
strokeWeight(2);
let secondAngle = map(second(), 0, 60, 0, 360);
push();
rotate(secondAngle);
line(0, 0, 107, 0);
pop();
//Minute Hand
stroke("#000000");
strokeWeight(4);
let minuteAngle = map(minute(), 0, 60, 0, 360);
push();
rotate(minuteAngle);
line(0, 0, 100, 0);
pop();
//Hour Hand
stroke("#000000");
strokeWeight(6);
let hourAngle = map(hour() % 12, 0, 12, 0, 360);
push();
rotate(hourAngle);
line(0, 0, 60, 0);
pop();
stroke(255);
point(0, 0);
pop();
}
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="block1">
<div class="block1-1">
<h1> MY PORTFOLIO</h1>
<h2>Hi! I am SHREYA<br><br>
I am 13 years old<br>
and I Love Building Websites</h2>
</div>
<div class="block1-2">
<img src="C:\Shreya\Photos\WhatsApp Image 2023-07-16 at 18.06.53.jpg"
width="300" height="300"><br><br><br>
</div>
</div>
<br><br><br><br><br>
<div class="block2">
<div class="block2-heading">
<h2>MY WORK</h2>
</div>
<div class="block2-cards">
<div class="block2-items">
<h4>Static Website</h4>
<hr>
<p>A static website that is designed by me as a part of my training period
at my school </p>
<a href="Work1_Details.html">Details</a>
</div>
<div class="block2-items">
<h4>Dynamic Website</h4>
<hr>
<p>A dynamic website that is developed for automating the activities in a
restaurant</p>
<a href="Work2_Details.html">Details</a>
</div>
<div class="block2-items">
<h4>Weather API</h4>
<hr>
<p>This app can display the weather of any location, around the globe.
First API site developed by me</p>
<a href="Work3_Details.html">Details</a>
</div>
</div>
</div>
<div class="block3">
<div class="block3-heading">
<h2>ABOUT ME</h2>
</div>
<div class="block3-content">
<div class="block3-text">
<br><br>
<p>My name is Shreya Niranjan. I am a student of class 8th E. I belong
to the Shiwalik house. My
hobbies include public speaking,dancing and singing. I have been
studying in this school for
the past 7 years. I believe that I am an enthusiastic learner as
well as an active listener.
Public Speaking is what I am passionate about. I am an extroverted
and social person who is
always ready to listen to others opinions as well as problems.
</p>
</div>
<div class="block3-image">
<img src="C:\Shreya\Coding\css\Screenshot 2024-01-05 172955.png"
width="300" height="300">
</div>
</div>
</div>
<div class="block4">
<div class="block4-form">
<h2> Contact Us</h2>
<form action="">
<input type="text" name="name" placeholder="Enter your name">
<br><br>
<input type="email" name="email" placeholder="Enter your email">
<br><br>
<textarea name="feedback" rows="6">Any Feedback?</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
}
.wrapper{
width: 90%;
margin:auto;
height: auto;
box-shadow: 0px 8px 11px -5px rgb(6, 1, 51) ;
}
.block1{
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
height: 55vh;
color: #7f81ff;
text-align: center;
margin-top: 10vh;
}
.block1-1{
margin-top: 2%;
}
.block1-1 h1{
font-size: 1.4em;
}
.block1-1 h2{
margin: 30px;
font-size:1.1em ;
}
.block1-2 img{
width: 320px;
height: 280px;
border-radius: 50%;
}
.block2{
width: 100%;
display: flex;
flex-direction: column;
text-align: center;
}
.block2-heading{
background: linear-gradient(to right, #15c721ed, #036418ac);
min-height: 70px;
height: auto;
font-size: 70%;
font-weight: bolder;
padding-top: 3px;
text-align: center;
color: whitesmoke;
}
.block2-cards{
display: flex;
justify-content: space-evenly;
min-height: 75px;
height: 100%;
padding: 40px 0;
}
.block2-items{
width: 30%;
height: 100%;
padding: 20px 40px;
box-shadow: 5px 5px 8px -7px rgb(6, 1, 51);
position: relative;
}
.block2-items h4{
padding: 10px 0;
font-size: 1.1em;
font-weight: 600;
}
.block2-items p{
padding-top: 10px;
font-size: 0.8em;
word-spacing: 4px ;
}
.details_link{
text-align: center;
font-size: 18px;
text-decoration: none;
}
.block2-items:hover{
background-color: darkseagreen;
transition: all 200ms ease-in;
color: white;
}
.block3{
display: flex;
flex-direction: column;
width: 100%;
height: 60%;
text-align: center;
}
.block3-content{
display: flex;
justify-content: space-evenly;
height: 100%;
color: black;
}
.block3-heading{
background: linear-gradient(to right, #c04848, #480048);
min-height: 70px;
height: auto;
font-size: 70%;
font-weight: bolder;
padding-top: 3px;
text-align: center;
color: rgb(255, 255, 255);
}
.block3-text{
width: 40%;
height: 80%;
padding: 20px 0;
font-size: 1em;
color: rgba(128, 0, 128, 0.525);
font-weight: 500;
}
.block3-image img{
margin: 15px 0;
width: 35vw;
height: 70vh;
box-shadow: 0px 8px 11px -5px rgb(6, 1,51);
}
.block4-form{
width: 40%;
margin: auto;
padding: 10px;
text-align: center;
}
.block4-form h2{
text-align: center;
color: rgb(52, 95, 238);
font-weight: 800;
padding-bottom: 20px;
}
WORK 1 DETAILS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detail 1</title>
<style>
div{
text-align: center;
font-size: 1.1rem;
background-color: lightcoral;
padding: 20px;
}
</style>
</head>
<body>
<div>
<p><strong> Title: </strong> Static Website</p>
<p><strong> Duration: </strong> 2 months</p>
<p><strong> Description: </strong>A static website that I have
designed for one of my clients
who owns a restaurant. For the purpose of building the site I
have used HTML, CSS and
JavaScript. It is a responsive site and I have used Media
Queries for that purpose.</p>
</div>
</body>
</html>
WORK 2 DETAILS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detail 2</title>
<style>
div{
text-align: center;
font-size: 1.1rem;
background-color: lightskyblue;
padding: 20px;
}
</style>
</head>
<body>
<div>
<p><strong> Title: </strong> Dynamic Website</p>
<p><strong> Duration: </strong> 4 months</p>
<p><strong> Description: </strong>This website was designed for an
upcoming restaurant.
It implements various advanced features such as maintaining
the orders of various customers,
ordering food from their homes as well as making payments from
the site itself. For
developing this application, I used basic HTML, CSS as well
as React Framework. </p>
</div>
</body>
</html>
WORK 3 DETAILS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detail 3</title>
<style>
div{
text-align: center;
font-size: 1.1rem;
background-color: lightgreen;
padding: 20px;
}
</style>
</head>
<body>
<div>
<p><strong> Title: </strong> Weather API</p>
<p><strong> Duration: </strong> 3 months</p>
<p><strong> Description: </strong>This web application is able to
make request to an External API,
and display the weather of any city/country, as specified by
the user. </p>
</div>
</body>
</html>
